Decide fazer meu próprio site e fui atrás de coisas para deixar mais organizado... Aprendi códigos indo atrás no google e perguntando a alguns amigos... códigos para colocar sombreado, arredondar, as fotos não separarem quando tirar o site do maximizar e algumas outras coisas...
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Peixe Personal e Kinesis Funcional</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"> // essa div é para colocar as fotos em uma class diferente para poder aplicar um código direcionado para essas imagens
<img id="folder1" class="inicio" src="peixe.jpeg">
<img id="folder2" class="inicio" src="kinesis.png">
</div>
<div class="principal">
<h1>Bem vindo a site de Peixe Personal e Kinesis Funcional</h1>
<p><strong>Peixe Personal</strong>, é formado desde 2017 pela UPE em Educação Física. Desde 2018 atual na área como personal trainer e na primavera de 2018 criou seu grupo de funcional com o auxílio de um amigo que não trabalha mais com ele, o <strong> Grupo de Treinamento Kinesis Funcional</strong> que fica localizado na <strong> Orla de Candeias</strong> em Jaboatão dos guararapes, Pernambuco.</p>
<p id="missao"><em>Nossa missão é: <strong> "Proporcionar auto-estima e qualidade de vida aos alunos, além de bastante saúde e diversão para amenizar o caos da vida".</strong></em></p>
<p>Oferecemos profissionais experientes e antenados às mudanças no mundo. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</div>
<div class="beneficios">
<h2>Benefícios</h2>
<ul>
<li class="itens">Atendimento de qualidade</li>
<li class="itens">Espaço ao ar livre e amplo na beira mar </li>
<li class="itens">Localização de fácil acesso</li>
<li class="itens">Profissionais Qualificados e Um turma sem iguais</li>
</ul>
</div>
<div class="box2"> // essa div é para as fotos do final para que possa mexe no bloco final
<img class="fim" src="fun1.jpeg">
<img class="fim" src="fun2.jpeg">
<img class="fim" src="fun5.jpeg">
<img class="fim" src="fun7.jpeg">
<img class="fim" src="fun9.jpeg">
<img class="fim" src="fun4.jpeg">
<img class="fim" src="fun10.jpeg">
</div>
</body>
</html>PARTE DO CSS
body{
background: rgb(255, 255, 255);
margin-left: 0;
height: 2000px
}
.box{ // a class da div das imagens de cima
display: flex; // esse código é para que as imagens sejam flexíveis e não quebrem quando tirar do maximizar;
justify-content: space-between; // esse código para dar espaço entre as imagens se for possível
box-shadow: 5px 5px 20px #888888; // isso aqui é para fazer sombreado |1º distancia px | 2º altura | 3ª efeito sombra | 4º opcional aumetará o efeito do sombreado | 5º elemento cor ( poderia ser assim 5px 5px 20px 10px #888888;)
border: 1px solid black; // isso para criar uma borda
border-radius: 15px; // isso para arredondar a borda
}
#folder1{
width: 35%;
padding-left: 70px;
}
#folder2{
width: 60%;
}
.principal{
background: gray;
padding: 20px;
}
h1{
height: 50px;
text-align: center;
border: 10px solid orange;
padding-top: 17px;
background: orange;
margin: -5px;
}
p{
height: 70px;
font-size: 18px;
color: white;
text-align: center;
padding: 1%;
;
}
#missao{
font-size: 20px;
}
em strong{
color: red;
}
.itens{
font-style: italic;
}
.beneficios {
margin: 10px;
background: #ffffff;
padding: 10px;
font-size: 20px;
}
h2{
text-align: center;
}
.box2{ //div das imagens de baixo
display: flex; // efeito explicado lá em cima
justify-content: space-around; // tem mesmo propósito do between
}
.fim{ //segundo bloco de imagens
width: 12%;
box-shadow: 5px 5px 20px #000000;
border: 1px solid black;
border-radius: 15px;
}
