Pessoal, boa tarde!
Gostaria que me ajudassem a ajustar os tamanhos das minhas imagens e colocar elas lado a lado e centraliza-las.
Estou tentando utilizar os recursos do display flex.
index.html:
file:///C:/Users/rocam/OneDrive/Alura/Html%20e%20Css/floricultura/imagens/flores.webp
C:\Users\rocam\OneDrive\Alura\Html e Css\floricultura\imagens\mudas frutiferas.jpg
C:\Users\rocam\OneDrive\Alura\Html e Css\floricultura\imagens\viveiros.jpg
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Montserrat com todos os pesos, incluindo o **600** -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho_menu"></nav>
<a class="cabecalho_menu_link" href="index.html">Home</a>
<a class="cabecalho_menu_link" href="sobre.html">Sobre</a>
<a class="cabecalho_menu_link" href="nossos_produtos.html">Nossos produtos</a>
<a class="cabecalho_menu_link" href="contato.html">Entre em contato</a>
</header>
<main class="apresentacao">
<section class="apresentacao_conteudo"></section>
<h1 class="apresentacao_conteudo_titulo">Mudas Floresta</h1>
<p class="apresentacao_conteudo_texto">Enfeite seu jardim sem sair de casa</p>
<p class="apresentcao_conteudo_texto">Seu Jardim precisa? Mudas Floresta tem.</p>
<img src="./imagens/mulher_planta.png" alt="Mulher com planta">
</main>
<footer></footer>
</body>
</html>
CSS:
:root{
--cor--primaria:#007E6E;
--cor--secundaria:#E7DEAF;
--fonte--primaria:'Montserrat', sans-serif;
--fonte--secundaria:'Krona One', sans-serif;
}
*{
margin: 0;
padding: 0;
}
body{
background-color: var(--cor--secundaria);
}
.cabecalho{
background-color: var(--cor--primaria);
display: flex;
gap:80px;
padding: 2% 0% 0% 15%;
color:white;
justify-content: center;
}
.cabecalho_menu_link{
color:white;
text-decoration:none;
gap: 40px;
}
.apresentacao{
margin: 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
color: green;
}
.apresentacao_conteudo_titulo{
font-family: var(--fonte--primaria);
color:green;
}
.apresentacao_conteudo_texto{
font-family: var(--fonte--secundaria);
}
.nossos_produtos{
display: flex;
gap:15px;
}
nossos_produtos.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Nossos produtos</title>
</head>
<body>
<main class="nossos_produtos">
<img class="mudas" src="./imagens/flores.webp" alt="Flores">
<img class="mudas" src="./imagens/mudas frutiferas.jpg" alt="mudas">
<img class="mudas" src="./imagens/viveiros.jpg" alt="viveiros">
</main>
</body>
</html>
