Skip to content

Instantly share code, notes, and snippets.

@Gracielle-Sampaio

Gracielle-Sampaio/index.html

Created May 7, 2025 15:02
Show Gist options
  • Save Gracielle-Sampaio/4e0dcbc8027c6c07a775165a7e77850c to your computer and use it in GitHub Desktop.
Save Gracielle-Sampaio/4e0dcbc8027c6c07a775165a7e77850c to your computer and use it in GitHub Desktop.
Download ZIP
Lunares Naturae
Raw
index.html
<body>
<header>
<img src="https://png.pngtree.com/png-vector/20230420/ourmid/pngtree-green-leaf-icon-design-template-vector-image_6710581.png" class="icon">
<h1>Lunares Naturae</h1>
<h3>Beleza que nasce da terra</h3>
</header>
<main>
<div class="cabecalho">
<div class="cabtext">
<h1>Quem somos</h1>
<p>
A Lunaris Naturae é uma marca artesanal de cosméticos naturais, com foco em autocuidado, sustentabilidade e conexão com a natureza. Todos os produtos são feitos à mão, com ingredientes orgânicos e embalagens recicláveis.
</p>
</div>
<img src="https://images.pexels.com/photos/3373716/pexels-photo-3373716.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="imgbanner">
</div>
<section class="produtos">
<div class="produto">
<h2>Sérum Facial de Lavanda</h2>
<figure>
<img src="https://images.pexels.com/photos/13964625/pexels-photo-13964625.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="190">
</figure>
<p>Hidrata profundamente e acalma peles sensíveis. Feito com óleo de jojoba, lavanda e vitamina E.</p>
<button>Encomende</button>
</div>
<div class="produto">
<h2>Bálsamo Labial de hortelã</h2>
<figure>
<img src="https://images.pexels.com/photos/10037325/pexels-photo-10037325.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="190" height="260">
</figure>
<p>Refresca, nutre e protege. Ideal para dias secos ou frios.</p>
<button>Encomende</button>
</div>
<div class="produto">
<h2>Sabonete Artesanal de Argila Verde</h2>
<figure>
<img src="https://images.pexels.com/photos/3737596/pexels-photo-3737596.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="190" height="260">
</figure>
<p>Limpeza profunda com toque suave. Controla oleosidade sem ressecar.</p>
<button>Encomende</button>
</div>
</section>
<div class="form">
<form>
<h2>Assine a Newsletter</h2>
<p>Fique por dento das novidades, promoções, noticias, e muito mais!</p>
<label for="name">Seu nome:</label><br>
<input type="text" id="name" name="name">
<label for="email">Seu melhor e-mail:</label><br>
<input type="email" id="email" name="email">
<input type="submit" value="enviar" class="buttom">
</form>
</div>
</main>
<footer>
<div class="cabeçalhofooter">
<h2>Lunares Naturae</h2>
<p>Beleza que nasce da terra.</p>
</div>
<div class="redes">
<ul>
<li>Instagram</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</footer>
</body>
Raw
style.css
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
*{
margin: 0;
padding:0;
font-style:none;
font-weight:normal;
}
:root{
--green:#6b8e6e;
--white:#fff;
--bage:#f5f1e6;
--gold:#d4af37;
--title-font:"Playfair Display", serif;
--bodyfont-font:"Lato", sans-serif;
}
body{
margin:auto;
background-color:var(--bage);
}
ul{
list-style: none;
}
header{
margin: auto;
background-color:var(--green);
padding:20px;
display:flex;
align-items:center;
flex-direction:column;
}
header h1{
text-transform: uppercase;
widht:bold;
}
.cabecalho{
margin:50px;
display:flex;
align-items:center;
}
.cabtext{
max-width:400px;
padding-right:80px;
}
.cabtext h1{
padding: 20px 0;
color:var(--gold);
}
.cabecalho img{
width:200px;
}
main{
margin:auto;
max-width:800px;
display:flex;
align-items:center;
flex-direction:column;
}
section{
margin:50px 0;
gap:5%;
}
section div{
background-color:var(--green);
padding:20px;
}
section div button{
width:100%;
height:50px;
}
form{
display:flex;
flex-direction:column;
justify-content:center;
max-width:300px;
margin:auto;
}
.form{
margin: auto;
width:100%;
background-color:var(--green);
padding:50px;
display:flex;
align-items:center;
flex-direction:column;
color:var(--white);
}
.form h2{
text-transform: uppercase;
widht:bold;
margin-bottom:20px;
}
.form p{
margin-bottom:20px;
}
form label{
text-transform:uppercase;
}
form input{
height:50px;
margin-bottom:20px;
border-radius:20px;
border:none;
}
form .buttom{
text-transform:uppercase;
width:bold;
color:var(--white);
background-color:var(--gold);
}
footer{
display:flex;
justify-content:center;
background-color:var(--gold);
padding:50px;
color:var(--white);
}
footer ul{
margin-left:80px;
}
.icon{
width:50px;
}
.produtos{
display:flex;
}
.produto p{
margin:10px 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment