Site completo e responsivo para você editar e alterar deixando ele do seu jeito. Feito com HTML e CSS usando o flexboxOBS: NÃO ESQUEÇA DE ALTEAR O INDEREÇO DAS IMAGENSCÓDIGO FONT:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,600;0,700;1,100&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JsaTec</title>
<style>
@charset "UTF-8";
*{
scroll-behavior: smooth;
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
}
body{
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
width: 100vw;
}
/* CABEÇALHO */
header{
background-color: black;
color: white;
height: 100px;
position: fixed;
left:0;
top:0;
right:0;
}
.header{
display: flex;
max-width: 1100px;
height: 100px;
margin: auto;
align-items: center;
}
.menu{
display: flex;
flex: 1;
justify-content: flex-end;
}
.menu nav ul{
display: flex;
flex: 1;
list-style: none;
}
.menu li a{
text-decoration: none;
color: white;
font-weight: bold;
padding: 0px 10px 0px 10px;
height: 100px;
display: flex;
align-items: center;
font-size: 13px;
}
.menu nav ul a:hover{
border-bottom: 5px solid #b28756;
color: rgb(204, 204, 204);
}
/* INICIO */
main{
background-image: url(img11.jpg);
height: calc(100vh - 100px);
background-size: cover;
background-position: bottom;
}
main .fundo{
background-color: rgba(0, 0, 0, 0.616);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
main .titulo{
text-align: center;
color: white;
font-size: 30px;
font-weight: 600;
}
#titulo2{
color: #b28756;
}
#contato{
text-align: center;
font-size: 25px;
margin-top: 10px;
}
.button{
text-align: center;
margin: 70px 0px;
}
.button a{
background-color: #b28756;
border-radius: 15px;
font-size: 11px;
padding: 12px 45px;
text-align: center;
color: white;
font-weight: 600;
}
.button a:hover{
background-color: white;
color: #b28756;
}
/* BLOCO 1 */
#sec1{
background-color: white;
height: 500px;
max-width: 1100px;
margin: auto;
}
.titulobloco2{
padding-top: 50px;
display: flex;
align-items: center;
flex-direction: column;
}
.titulobloco2 h1{
font-size: 30px;
}
.titulobloco2 h2{
font-size: 15px;
color: rgba(128, 128, 128, 0.644);
}
.content{
margin-top: 30px;
display: flex;
margin: auto;
margin-top: 30px;
justify-content: space-between;
}
.content .left{
line-height: 24px;
text-align: left;
}
.content .left p{
font-family: Arial, Helvetica, sans-serif;
font-weight: 200;
padding-top: 15px;
}
section .content .left div{
padding: 25px 0px 0px 0px;
}
.content .left div a{
background-color: #b28756;
border-radius: 15px;
font-size: 10px;
padding: 12px 40px;
text-align: center;
color: white;
font-weight: 600;
}
.content .left div a:hover{
background-color: white;
color: #b28756;
border: 1px solid black;
}
/* BLOCO 2*/
#sec2{
background-color: black;
height: 400px;
}
.bloco2{
max-width: 1100px;
margin: auto;
text-align: center;
}
.titulo2{
text-align: center;
padding-top: 50px;
color: white;
}
.titulo2 h3{
padding-top: 8px;
font-size: 13px;
color: rgba(255, 255, 255, 0.568);
}
.content2{
display: flex;
justify-content: space-around;
color: white;
margin-top: 45px;
}
.content2 img{
padding-bottom: 30px;
text-align: center;
}
.content2 div{
padding: 40px;
border-right: 1px solid rgba(128, 128, 128, 0.671);
}
.content2 .contentl{
border-left: 1px solid rgba(128, 128, 128, 0.692);
}
#balon h3{
padding: 0px 25px;
}
/* BLOCO 3 */
#sec3{
background-color: rgba(128, 128, 128, 0.185);
height: 80vh;
}
.bloco3 {
max-width: 1100px;
margin: auto;
}
.bloco3 .titulo3{
padding-top: 50px;
text-align: center;
}
.bloco3 .titulo3 h3{
padding-top: 9px;
font-size: 14px;
color: rgba(128, 128, 128, 0.753);
margin-bottom: 20px;
}
.content3{
text-align: center;
}
.content3 img{
padding-top: 35px;
padding-bottom: 20px;
}
.bloco3 .content3 h3{
margin-top: 5px;
font-size: 17px;
font-weight: 600;
}
.bloco3 .content3 p{
padding-top: 20px ;
line-height: 30px;
}
.bloco3 .button a{
background-color: #b28756;
border-radius: 15px;
font-size: 11px;
padding: 12px 45px;
color: white;
font-weight: 600;
}
.bloco3 .button a:hover{
background-color: white;
color: #b28756;
border: 1px solid black;
}
/* TRANSITION */
#sec4{
border-top: 1px solid rgba(128, 128, 128, 0.555);
border-bottom: 1px solid rgba(128, 128, 128, 0.555);
box-shadow: 2px 2px 2px black;
height: 12vh;
}
.transition{
max-width: 1100px;
margin: auto;
display: flex;
justify-content: space-between;
}
.transition img{
padding-top: 25px;
}
/* BLOCO 4 */
#sec5{
background-image: url(wallhaven-217950.jpg);
height: 70vh;
background-size: cover;
}
.fundo1{
background-color: rgba(0, 0, 0, 0.425);
height: 100%;
width: 100%;
}
.bloco4{
max-width: 1100px;
margin: auto;
}
.titulo4{
text-align: center;
color: white;
padding-top: 50px;
}
.titulo4 h3{
padding-top: 7px;
font-size: 12px;
color: rgba(255, 255, 255, 0.575);
}
.bloco4 .content4{
padding-top: 50px;
display: flex;
justify-content: space-between;
text-align: center;
}
.bloco4 .content4 .quadrado{
font-family: Arial, Helvetica, sans-serif;
background-color: white;
padding: 30px 0px;
border-radius: 5px;
}
.bloco4 .content4 img{
padding-bottom: 20px;
}
.bloco4 .content4 h1{
font-weight: 500;
padding-bottom: 7px;
}
.bloco4 .content4 h3{
font-weight: 500;
font-size: 15px;
padding-bottom: 25px;
}
.bloco4 .content4 .icons{
display: flex;
justify-content: center;
padding: 15px 45px;
}
.bloco4 .content4 .icons div{
padding-right: 5px;
}
.bloco4 .content4 .icons img{
padding: 15px;
background-color: rgba(128, 128, 128, 0.514);
border-radius: 50px;
}
.bloco4 .content4 .icons img:hover{
padding: 15px;
background-color: #b28756;
border-radius: 50px;
}
/* RODAPÉ */
footer{
height: 135px;
background-color: black;
border-top: 1px solid rgba(128, 128, 128, 0.644);
}
.bloco5{
max-width: 1100px;
margin: auto;
text-align: center;
}
/* CRÉDITOS */
#credito{
color: white;
}
.contatos{
padding-top: 25px;
color: rgba(255, 255, 255, 0.692);
}
.contatos h2{
padding-bottom: 15px;
}
@media (max-width:1400px){
.menu{
justify-content: center;
}
.logo{
display: none;
}
.menu nav ul{
align-items: center;
}
.menu li a{
font-size: 12px;
}
.titulo{
padding-top: 150px;
}
.titulo h1{
font-size: 35px;
}
#sec1{
background-color: white;
height: 400px;
width: 100%;
margin: auto;
}
.content{
flex-direction: column;
}
.content .left{
text-align: center;
padding-bottom: 20px;
}
.content .right{
display: none;
}
#sec2{
height: fit-content;
}
.content2{
flex-wrap: wrap;
}
.content2 div{
padding: 10px;
border-right: none;
}
.content2 .contentl{
border-left: none;
}
#sec3{
height: 800px;
}
.bloco3 .content3 p{
padding: 0 5px;
}
#sec4{
height: fit-content;
}
.transition{
flex-wrap: wrap;
justify-content: center;
}
.transition img{
padding: 15px 25px;
}
#sec5{
height: 1500px;
}
.content4{
flex-direction: column;
}
.quadrado{
padding: 0;
max-width: 80%;
margin: auto;
margin-bottom: 15px;
}
.contatos{
bottom: 100;
}
.contatos h2{
font-size: 18px;
}
#credito{
font-size: 15px;
}
}
@media (max-width:480px){
.menu li a{
padding: 0 7px 0 5px;
font-size: 10px;
}
#sec1{
height: 500px;
}
#sec2{
height: fit-content;
}
.content2{
flex-direction: column;
}
#sec3{
height: 850px;
}
}
</style>
</head>
<body>
<header>
<div class="header">
<div class="logo">
<a href="index.html"><img src="imagens/logo120.png" alt="logo-ra"></a>
</div>
<div class="menu"> <!--MENU DE NAVEGAÇÃO-->
<nav>
<ul>
<li><a href="index.html">INÍCIO</a></li>
<li><a href="#sec1">SERVIÇOS</a></li>
<li><a href="#sec2">CLIENTES</a></li>
<li><a href="#sec3">PARCERIA</a></li>
<li><a href="#sec5">LINHA DO TEMPO</a></li>
<li><a href="#credits">AGÊNCIA</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<div class="fundo">
<div class="titulo">
<h1>PRESTAÇÃO DE</h1>
<h1 id="titulo2">SERVIÇOS</h1>
<h2 id="contato">CONTACTO: +0 000-000</h2>
</div>
<div class="button"><a href="index.html">CARREGAR</a></div>
</div>
</main>
<section id="sec1"> <!--ABOUT US-->
<div class="titulobloco2">
<h1>GUIA DO USUÁRIO</h1>
<h2>O QUE ISTO É</h2>
</div>
<div class="content">
<div class="left">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium adipisci ipsam quis sunt nam autem odit perspiciatis temporibus provident dolorem quod, perferendis ab. Iure autem officia libero corporis obcaecati ab, accusamus quia fugiat asperiores commodi! Fugit repellat est tempore quam, similique non eius et alias dignissimos aperiam inventore iusto assumenda? Doloremque, id rem unde minus hic sunt cum omnis, corrupti assumenda incidunt, labore sed repudiandae? Aliquam earum quis culpa quia.</p>
<div><a href="">VER MAIS</a></div>
</div>
</div>
</div>
</section>
<section id="sec2"> <!--SERVICES-->
<div class="bloco2">
<div class="titulo2">
<h1>SERVIÇOS</h1>
<h3>TIPOS E DESIGN</h3>
</div>
<div class="content2">
<div class="contentl">
<img src="icones/medalha.png" alt="qualidade">
<h3>QUALIDADES E DESIGN</h3>
</div>
<div>
<img src="icones/estrela.png" alt="icon design">
<h3>DESIGN MODERNOS</h3>
</div>
<div id="balon">
<img src="icones/relogio.png" alt="update time">
<h3>UPDATE</h3>
<h3> REGULAR</h3>
</div>
<div>
<img src="icones/balao.png" alt="icon support">
<h3>SUPPORT</h3>
<h3>GRÁTIS</h3>
</div>
</div>
</div>
</section>
<section id="sec3"> <!--HAPPY CLIENTES-->
<div class="bloco3">
<div class="titulo3">
<h1>CLIENTES SATISFEITOS</h1>
<h3>CLIENTES</h3>
</div>
<div class="content3">
<img src="of.jpg" alt="" style="width: 170px; height: 200px; border-radius: 50%;">
<h1>José Satchova António</h1>
<h3>JsaTec SEO</h3>
<img src="icones/quote.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam nostrum maiores quisquam quas voluptatum, provident optio aliquam ut deserunt nulla itaque officiis exercitationem quasi porro blanditiis unde quibusdam temporibus quam nobis ad? Voluptate voluptatibus eos odio hic rem, eligendi perspiciatis!</p>
</div>
<div class="button">
<a href="#">VER MAIS</a>
</div>
</div>
</section>
<section id="sec4"> <!--TRANSITION-->
<div class="transition">
<img src="imagens/empresa1.png" alt="">
<img src="imagens/empresa2.png" alt="">
<img src="imagens/empresa3.png" alt="">
<img src="imagens/empresa4.png" alt="">
<img src="imagens/empresa5.png" alt="">
<img src="imagens/empresa6.png" alt="">
</div>
</section>
<section id="sec5"> <!--OUR TEAM-->
<div class="fundo1">
<div class="bloco4">
<div class="titulo4">
<h1>COOPERAÇÃO</h1>
<h3>EQUIPE</h3>
</div>
<div class="content4">
<div class="quadrado">
<img src="aaa.jpg" alt="" style="width: 170px; height: 200px; border-radius: 50%;">
<h1>Adriana de carvalho</h1>
<h3>Master Mind</h3>
<div class="icons">
<div><img src="icones/twitter.png" alt=""></div>
<div><img src="icones/facebook.png" alt=""></div>
<div><img src="icones/googleplus.png" alt=""></div>
<div><img src="icones/pinterest.png" alt=""></div>
<div><img src="icones/linkedin.png" alt=""></div>
</div>
</div>
<div class="quadrado">
<img src="ccc.jpg" alt="" style="width: 170px; height: 200px; border-radius: 50%;">
<h1>Catalina barros</h1>
<h3>Data Manager</h3>
<div class="icons">
<div><img src="icones/twitter.png" alt=""></div>
<div><img src="icones/facebook.png" alt=""></div>
<div><img src="icones/googleplus.png" alt=""></div>
<div><img src="icones/pinterest.png" alt=""></div>
<div><img src="icones/linkedin.png" alt=""></div>
</div>
</div>
<div class="quadrado">
<img src="mmm.jpg" alt="" style="width: 170px; height: 200px; border-radius: 50%;">
<h1>Hilda Mendes</h1>
<h3>RH Manager</h3>
<div class="icons">
<div><img src="icones/twitter.png" alt=""></div>
<div><img src="icones/facebook.png" alt=""></div>
<div><img src="icones/googleplus.png" alt=""></div>
<div><img src="icones/pinterest.png" alt=""></div>
<div><img src="icones/linkedin.png" alt=""></div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer id="credits">
<div class="bloco5"> <!--CONTACT US-->
<div class="contatos">
<h2> <span>Email:</span>josesatchovaantonio@gmail.com</h2>
<h2> <span>WhatsApp:</span> (244) 922304889</h2>
</div>
<div id="credito">
<p>Copyright ©jsatec 2023</p>
</div>
</div>
</footer>
</body>
</html>
0 Comentários