Ontem iniciamos nosso projeto e já criamos o HTML da página. Hoje iremos iniciar a adição do CSS à página.
Primeiramente vamos mudar a fonte usada. Vou pegar a fonte Quicksand no Google Fonts:
Google FontsAbrindo nosso style.css, vamos adicionar a fonte:
@import url('https://fonts.googleapis.com/css?family=Quicksand & display=swap');
body {
font-family: 'Quicksand', sans-serif;
}
(aqui a ferramenta de código do site tá dando uma quebrada no import da fonte mas é só ir lá no site Google Fonts e seguir como adicionar a fonte ao seu código)
Nossa fonte agora mudou para a fonte Quicksand:
Agora vamos mudar o box-sizing de todo o projeto para border-box. Acho que não expliquei o box-sizing nos tópicos de CSS mas pra entender isso aqui é importante ler este tópico:
1.10 - Web - Box model, padding, margin - Tecnologia - Bastter.comVamos ver um exemplo de alterações no box-sizing pra deixar as coisas mais claras.
Vamos criar duas divs que terão a mesma altura e a mesma largura, mas a segunda vai ter um padding de 50px e a primeira não:
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
O resultado é algo assim:
As duas divs têm mesma largura e altura, mas a segunda, por ter um padding de 50px, faz com que o retângulo fique maior, pois o tamanho do box pode variar com o padding.
Mudando o box-sizing das duas divs para border-box:
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Agora teremos algo assim:
Notem que agora o tamanho do elemento é o tamanho real que eu coloquei na largura e na altura, sem interferências de padding.
Enfim, voltando ao projeto, vamos mudar a propriedade box-sizing em tudo na página para border-box usando o seletor universal *:
* {
box-sizing: border-box;
}
body {
font-family: 'Quicksand', sans-serif;
}
Agora vamos adicionar uma imagem de fundo como papel de parede de nosso site. A imagem que escolhi foi esta:
Ela tem o nome de bg5.jpg e está dentro da pasta "img".
Então vamos mudar o background do body da nossa página para que essa imagem seja usada. Vamos adicionar uma cor de fundo e uma imagem que vai ficar por cima dessa cor de fundo:
* {
box-sizing: border-box;
}
body {
font-family: 'Quicksand', sans-serif;
background: #224941 url('./img/bg5.jpg') no-repeat center center/cover;
}
Os atributos no-repeat, center e center/cover já foram explicados em tópico anterior na parte de web mas são basicamente para que a imagem não fique se repetindo no fundo, para centralizar a imagem e para fazer a imagem ficar esticada e cobrir todo o espaço disponível para ela.
Por enquanto tempos uma página assim:
A imagem ainda não cobre todo o espaço da tela. Isso acontece porque o body não está ocupando todo o viewport, que é toda a altura da janela. Para fazer a imagem cobrir tudo basta mudar a altura mínima para 100vh que faz com que ela ocupe todo o espaço da janela. Vamos mudar a cor da fonte para branco logo para poder ler o texto de forma mais fácil:
* {
box-sizing: border-box;
}
body {
color: #fff;
font-family: 'Quicksand', sans-serif;
background: #224941 url('./img/bg5.jpg') no-repeat center center/cover;
min-height: 100vh;
}
O que temos até o momento:
Notem no canto direito que eu ainda tenho uma barra de rolagem, e não quero ter barra de rolagem no meu site. Resolvemos isso mudando a propriedade overflow para hidden:
* {
box-sizing: border-box;
}
body {
color: #fff;
font-family: 'Quicksand', sans-serif;
background: #224941 url('./img/bg5.jpg') no-repeat center center/cover;
min-height: 100vh;
overflow: hidden;
}
Agora a barra lateral de rolagem sumiu.
Agora vamos alinhar os elementos que já existem na tela e deixar o ambiente preparado para o alinhamento do que ainda está por vir. Aqui vou usar flexbox que é algo que também não falei ainda na parte teórica, só comentei por cima nos chats de tecnologia mas basicamente é uma forma mais atual de dispor elementos na tela usando CSS de forma bem simples. Flexbox daria uns dois tópicos na parte teórica então aqui vou passar por cima de forma mais rápida.
Vou transformar o body da minha página num flex container usando o valor flex na propriedade display:
* {
box-sizing: border-box;
}
body {
color: #fff;
font-family: 'Quicksand', sans-serif;
background: #224941 url('./img/bg5.jpg') no-repeat center center/cover;
min-height: 100vh;
overflow: hidden;
display: flex;
}
Com essa simples linha a mais o texto todo ficou alinhado um ao lado do outro:
Isso acontece porque por default um flex container disponibiliza seus filhos em disposição de linha. E quais os filhos do body?
<body>
<h1>Exercício para respiração</h1>
<div class="container" id="container">
<div class="circle"></div>
<p id="text">Inspire...</p>
<div class="pointer-container">
<span class="pointer"></span>
</div>
<div class="gradient-circle"></div>
</div>
<script src="main2.js"></script>
</body>
Tudo que está hierarquicamente inferior ao body, ou seja, o h1 e a div com classe container agora estão alinhados em formato de linha. Podemos mudar isso alterando a disposição dos elementos na tela mudando a propriedade flex-direction para column:
* {
box-sizing: border-box;
}
body {
color: #fff;
font-family: 'Quicksand', sans-serif;
background: #224941 url('./img/bg5.jpg') no-repeat center center/cover;
min-height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
Agora os elementos voltaram a ficar um em cima do outro. Agora vamos alinhar os elementos ao centro:
* {
box-sizing: border-box;
}
body {
color: #fff;
font-family: 'Quicksand', sans-serif;
background: #224941 url('./img/bg5.jpg') no-repeat center center/cover;
min-height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
O resultado:
Agora é o momento de adicionar o círculo central que irá mostrar as mensagens de inspire, segure e expire mas como hoje já foi muita informação, fica para amanhã esta parte.
