-13%
TESTE HTML
Não disponível
Avise-me quando estiver disponível
Descrição Geral
<link href="styles/style.css" rel="stylesheet" />
<style>
*{
margin: 0;
border: 0;
font-family: 'uni sans regular';
}
.conteudo{
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
height: 100%;
width: 100vw;
background-color: #fff;
}
.hero{
display: flex;
justify-content: center;
align-items: center;
width: 90%;
height: 357px;
background-color: cadetblue;
}
.slide2{
display: flex;
flex-direction: row;
align-items: center;
height: 582px;
width: 90%;
background-color: chartreuse;
}
.modoDeUso{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 50%;
height: 100%;
background-color: #6d6d6d;
}
.primeira{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
font-family: uni sans light;
}
.segunda{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
font-family: uni sans light;
}
.terceira{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
font-family: uni sans light;
}
.embalagem{
}
.miniSlide{
display: flex;
flex-direction: row;
height: 120px;
width: 90%;
background: linear-gradient(to right, #FFCC49,#F08C0B);
}
.esquerda{
display: flex;
justify-content: center;
align-items: center;
width: 60%;
height: 100%;
border-top-right-radius: 70px;
background-color: #1E274A;
font-family: uni sans heavy;
font-size: 12px;
color: #fff;
}
.direita{
display: flex;
justify-content: center;
align-items: center;
width: 40%;
height: 100%;
font-family: uni sans heavy;
font-size: 14px;
color: #fff;
}
.slide3{
display: flex;
flex-direction: row;
align-items: center;
height: 582px;
width: 90%;
background-color: chartreuse;
}
.slide4{
display: flex;
flex-direction: row;
align-items: center;
height: 582px;
width: 90%;
background-color: #FFCC49;
}
.certificados{
display: flex;
flex-direction: row;
align-items: center;
height: 367px;
width: 90%;
background-image: url(/assets/bgESG.png);
/* background-color: coral; */
background-repeat: no-repeat;
background-size: cover;
}
.esq{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 25%;
/* background-color: #404040; */
color: #595959;
font-size: 22px;
}
.esq h1{
margin-left: 50px;
}
.middle{
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 50%;
/* background-color: #838383; */
}
.middle p{
font-family: uni sans light;
padding: 0px 100px 0px 100px;
}
.dir{
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 25%;
/* background-color: #aeaeae; */
}
.miniSlideTitulo{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 80px;
width: 90%;
/* background-color: antiquewhite; */
}
.linhas{
display: flex;
flex-direction: row;
align-items: center;
height: 288px;
width: 90%;
background-color: darkgray;
transition: 300ms;
}
.auto{
display: flex;
width: 33.3%;
height: 100%;
background-color: #404040;
transition: 300ms;
}
.home{
display: flex;
width: 33.3%;
height: 100%;
background-color: #6d6d6d;
transition: 300ms;
}
.contruction{
display: flex;
width: 33.3%;
height: 100%;
background-color: #b6b6b6;
transition: 300ms;
}
.linha:hover{
transition: 300ms;
width: 80%;
}
</style>
<div class="conteudo">
<div class="hero"><img alt="" src="https://images.tcdn.com.br/img/editor/up/1378759/heroBio7.png" width="100%" /></div>
<div class="slide2">
<div class="modoDeUso">
<h1>MODO DE USO</h1>
<div class="primeira">
<p>Aplique sobre a superfície e<br />
aguarde alguns instantes</p>
</div>
<div class="segunda"><img alt="2" src="assets/etapa2.svg" width="80px" />
<p>Esfregue da forma que preferir<br />
(esponja, escova ou pano)</p>
</div>
<div class="terceira"><img alt="3" src="assets/etapa3.svg" width="80px" />
<p>Enxague com água</p>
</div>
<p>Sujidades, encardidos e manchas deixe agir por mais tempo.</p>
</div>
<div class="embalagem"> </div>
</div>
<div class="miniSlide">
<div class="esquerda">
<h1>REMOVE GORDURAS E SUJEIRAS COM EFICIÊNCIA</h1>
</div>
<div class="direita">
<h1>MULTISUPERFÍCIE</h1>
</div>
</div>
<div class="slide3">
<div class="topicosProduto"> </div>
<div class="selos"> </div>
<div class="aplicacoes"> </div>
</div>
<div class="slide4"> </div>
<div class="certificados">
<div class="esq">
<h1>UMA<br />
EMPRESA<br />
COM<br />
PROPÓSITOS</h1>
</div>
<div class="middle">
<p>Nossa atuação está fundamentada nos princípios do ESG, integrando inovação tecnológica com responsabilidade socioambiental. Esse compromisso nos impulsionou a conquistar a Certificação B, um reconhecimento internacional que atesta nosso desempenho e impacto positivo na sociedade e no meio ambiente. Com soluções sustentáveis baseadas em nanotecnologia, buscamos constantemente melhorar a qualidade de vida, proteger recursos naturais e promover práticas de negócios éticas e transparentes. Para nós, crescimento e sustentabilidade caminham juntos, gerando valor para clientes, colaboradores, parceiros e toda a comunidade.</p>
</div>
<div class="dir"> </div>
</div>
<div class="miniSlideTitulo">
<h1>CONHEÇA NOSSAS SOLUÇÕES</h1>
</div>
<div class="linhas">
<div class="linha auto"> </div>
<div class="linha home"> </div>
<div class="linha contruction"> </div>
</div>
</div>
Avaliações
TESTE HTML
Não disponível
Avise-me quando estiver disponível
