<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Peixe Personal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="titulo-principal">Peixe Personal LTDA.</h1>
</header>
<div class="box">
<img id="folder1" class="inicio" src="peixe.jpeg">
<img id="folder2" class="inicio" src="kinesis.png">
</div>
<div class="principal">
<h2>Bem vindo a site de Peixe Personal e Kinesis Funcional</h2>
<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">
<h3>Benefícios</h3>
<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">
<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>no css
body{
background: rgb(255, 255, 255);
margin-left: 0;
height: 2000px
}
.titulo-principal{
padding-left: 20px;
}
.box{
display: flex;
justify-content: space-between;
box-shadow: 5px 5px 20px #888888;
border: 1px solid black;
border-radius: 15px;
}
#folder1{
width: 35%;
padding-left: 70px;
}
#folder2{
width: 60%;
}
.principal{
background: gray;
padding: 20px;
}
h2{
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;
}
h3{
text-align: center;
}
.box2{
display: flex;
justify-content: space-around;
}
.fim{
width: 12%;
box-shadow: 5px 5px 20px #000000;
border: 1px solid black;
border-radius: 15px;
}
