Arquivo css

[amandafdantas]

Enviando arquivo css do Desafio 2 @tarcilas

[alinebezzoco]

Suggested change

	.item-servicos {
	.item-servicos {
	flex: 1;
	background: #000;
	text-align: center;
	}

Dica: em vez de usar o margin para posicionar os elementos, utilize o flexbox já que você já está usando-o. Assim você consegue deixar os elementos alinhados e posicionados na forma que você quer.

[alinebezzoco]

Suggested change

	.item-portifolio {
	.item-portifolio {
	margin: 20px;
	background: #000;
	text-align: center;
	flex: 1;
	}

O mesmo vale para esse aqui. Nesse caso você pode manter o margin para separar os elementos normalmente, mas para posicioná-los use o flexbox.

[alinebezzoco]

Suggested change

	.slide {
	.slide {
	width: 100%;
	display: flex;
	background-image: url('../images/Slider.png');
	height: 400px;
	background-size: 100% auto;
	align-items: center;
	justify-content: center;
	}

Você pode alinhar os elementos verticalmente usando o próprio flexbox.
Na sugestão acima eu removi o position relative e removi também o fundo-slide do seu html, adicionando-o como um background-image. Mas o que faz o elemento ser alinhado verticalmente é o uso das propriedades align-itens e justify-content.

[alinebezzoco]

Suggested change

	.img-slide {
	.img-slide {
	width: 280px;
	height: 250px;
	}

Usando o flexbox para alinhar os elementos verticalmente você não precisa mais usar o position absolute. Basta deixar apenas a largura e altura da sua imagem.

[alinebezzoco]

Suggested change

	<section id="">
	<section id="">
	<div class="slide">
	<img class="img-slide" src="images/slider01.png" alt="">
	</div>
	</section>

Como estamos usando o flexbox para alinhar verticalmente o fundo-slider passa a ser um background-image (o que faz mais sentido) e não tem necessidade de existir mais essa <div> vazia para englobar o img-slide.

[amandafdantas]

Obrigada pelos comentários @bezzocoaline . Eu não conhecia o display flex, as meninas do meu grupo de estudos me falaram para usá-lo. Vou tentar refazer com as suas dicas para entender melhor, pois ainda não tinha ficado claro. A medida rem não sabia nada sobre ela, apesar de ver em vários tutorias nunca entendi. Agradeço a sua explicação de forma simples e direta. Me ajudou muito.

[alinebezzoco]

Que bom, @amandafdantas! Fico feliz pelo feedback <3

[alinebezzoco]

@amandafdantas bacana que você está usando o display flex para trabalhar o posicionamento de alguns elementos, isso é muito bom! Parabéns!

Uma dica que te dou para aperfeiçoar mais ainda o seu código (e os seus estudos em front) é usar a medida rem que vem sendo utilizada bastante. O rem é uma medida que é calculada a partir do valor do root (ou o nosso body). Por padrão 1rem é igual a 16px. Então se você tem um font-size no seu body com valor de 1rem (16px) quando precisar calcular o valor dos outros font-size da sua página basta pegar o valor dele e dividir por 16. Por exemplo: seu h1 tem 24px e você precisa converter para rem. Pegue o 24px e divide por 16px. Seu valor em rem dá 1.5rem.

A vantagem de usarmos o rem é que ele nos ajuda a tornar o código mais escalável sabendo que trabalhamos com elementos responsivos.

Para saber mais: https://www.w3schools.com/cssref/css_units.asp