Agora veremos como foi feito este elemento da página principal deste site:

Primeiramente, foi definido o container, chamado .principal. Para que ela ocupe todo o espaço horizontal da tela, usamos flex:100%;, entretanto, width:100%; também exerceria a mesma função. Para que a altura do container se ajuste automaticamente, usamos height:auto; e flex-direction:column; para posicionar os elementos um embaixo do outro.

Este container possui uma imagem de fundo de estrelas, que foi definida nestes comandos:

A imagem foi inserida pelo comando url("imagem/fundo14.png");. O comando linear-gradient Adiciona um efeito de degradê na parte de baixo do container.

Para que a imagem cubra todo o container sem que ela se repita, usamos background-size:cover;. Assim, ela se ajustará automaticamente de acordo com o tamanho do container.

Resultado:

Agora vamos adicionar o título e uma fonte, criando uma nova div chamada .principal h1 (tag de título).

Aqui definimos a fonte "Quicksand" e adicionamos uma sombra (text-shadow) para o texto.

Resultado:

---

Agora para adicionar os botões, criaremos primeiro o container, que chamaremos de .linkscontainer

Para espaçar os botões, foi usado justify-content:space-around;

Este container é invisível, porém aqui ele está com o fundo vermelho para que ele possa ser visualizado. Ao contrário do container principal, ele está em direção de linha para que os botões fiquem um do lado do outro. Ele possui um width:100% para que ele ocupe todo o espaço da div (menos o espaço do padding do container .principal).

Resultado sem o fundo vermelho:

Agora, vamos ver como foram feitos os botões. Criamos uma div chamada .linkscontainer a (tag de link) e a configuramos como flex-direction:column; para que os elementos fiquem um em cima do outro.

Este retângulo tem um tamanho definido de 200x180px (Obs: Os botôes estão com uma aparência diferente da home pois aqui neste exemplo, ela não ocupa todo o espaço da tela).

O comando background:linear-gradient é responsável por aplicar o efeito de degradê no fundo do botão.

transition-duration define o tempo da transição quando se passa o mouse por cima do botão, que no caso é de 0,5 segundos.

Ele possui somente uma borda na parte de baixo do botão, definida pelo border-bottom e arredondada pelo comando border-radius

CSS:

HTML:

Os ícones dos botões (tag ion-icon) foram adicionados logo acima do texto.