SITE DE LOJA

<!
DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loja de Roupas</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
<div class="logo">Minha Loja</div>
<nav>
<ul>
<li><a href="#home">Início</a></li>
<li><a href="#produtos">Produtos</a></li>
<li><a href="#sobre">Sobre Nós</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
</header>

<section id="banner">
<img src="banner.jpg" alt="Promoções e Novos Lançamentos">
</section>

<section id="produtos">
<h2>Produtos em Destaque</h2>
<div class="produto">
<img src="blusa.jpg" alt="Blusa Colorida">
<h3>Blusa Colorida</h3>
<p>R$ 49,90</p>
</div>
<img src="camiseta.jpg" alt="Camiseta Básica">
<h3>Camiseta Básica</h3>
<p>R$ 29,90</p>
</div>
<img src="bermuda.jpg" alt="Bermuda">
<h3>Bermuda de Verão</h3>
<p>R$ 59,90</p>
</div>
<img src="calca.jpg" alt="Calça Jeans">
<h3>Calça Jeans</h3>
<p>R$ 89,90</p>
</div>
<img src="sapato.jpg" alt="Sapato Estiloso">
<h3>Sapato Estiloso</h3>
<p>R$ 119,90</p>
</div>
</section>

<footer>
<p>Contato: (11) 1234-5678 | email@loja.com</p>
<p>© 2024 Minha Loja. Todos os direitos reservados.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
header {
background-color: #333;
color: white;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
header nav ul {
list-style: none;
display: flex;
header nav ul li {
margin-left: 20px;
header nav ul li a {
color: white;
text-decoration: none;
#banner img {
width: 100%;
height: auto;
#produtos {
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.produto {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
text-align: center;
width: 200px;
.produto img {
width: 100%;
height: auto;
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: relative;
bottom: 0;
width: 100%;
// Exemplo simples de interação, como um alerta ao clicar em um produto
const produtos = document.querySelectorAll('.produto');
produtos.forEach(produto => {
produto.addEventListener('click', () => {
alert(`Você clicou em ${produto.querySelector('h3').innerText}`);
});
});

SITE DE LOJA

Enviado por

Direitos autorais:

Formatos disponíveis

SITE DE LOJA

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

SITE DE LOJA

Enviado por

Direitos autorais:

Formatos disponíveis

<!

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="styles.css">

<div class="logo">Minha Loja</div>

<li><a href="#sobre">Sobre Nós</a></li>

<img src="banner.jpg" alt="Promoções e Novos Lançamentos">

<img src="blusa.jpg" alt="Blusa Colorida">

<img src="camiseta.jpg" alt="Camiseta Básica">

<img src="bermuda.jpg" alt="Bermuda">

<img src="calca.jpg" alt="Calça Jeans">

<img src="sapato.jpg" alt="Sapato Estiloso">

<p>Contato: (11) 1234-5678 | email@loja.com</p>

<p>&copy; 2024 Minha Loja. Todos os direitos reservados.</p>

font-family: Arial, sans-serif;

padding: 10px 20px;

border: 1px solid #ccc;

// Exemplo simples de interação, como um alerta ao clicar em um produto

const produtos = document.querySelectorAll('.produto');

alert(`Você clicou em ${produto.querySelector('h3').innerText}`);

Você também pode gostar

<p>© 2024 Minha Loja. Todos os direitos reservados.</p>