Macelleria by @carmian - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

headersDetermina la relazione tra celle e celle di intestazione di una tabella.
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<title>Definisce il titolo della pagina web.
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
<caption>Definisce didascalie all'interno di una tabella
<aside>Definisce un contenuto separato dal testo perincipale

Users

Log in to search for users

Explore

Find inspiration

esercizio HTML modalità interna

match html tags

ES01a\\index.html

5/10/24 es. 5 - consonanti

ciao io sono sara

Lola Harrel Project 2

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Macelleria</title>
</head>
<body>
  <header>
    <div class="logo">Logo Macelleria</div>
    <nav>
      <ul>
        <li><a href="#" onclick="menuClick('storia')">Storia</a></li>
        <li><a href="#" onclick="menuClick('prodotti')">Prodotti</a></li>
        <li><a href="#" onclick="menuClick('spedizione')">Spedizione</a></li>
        <li><a href="#" onclick="menuClick('contatti')">Contatti</a></li>
      </ul>
    </nav>
  </header>

  <div class="content" id="content">
    <!-- Il contenuto del sito verrà aggiunto qui -->
  </div>

  <footer>
    <p>Indirizzo: Via della Macelleria, 123 - Città</p>
    <p>Telefono: 123-456789 - Email: info@macelleria.com</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

/* CSS precedente */
body {
  margin: 0;
  padding: 0;
  font-family: Georgia, 'Times New Roman', Times, serif, sans-serif;
  color: #333; /* Colore del testo generale */
}

header {
  background-color: #800000;
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 24px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin-left: 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  padding: 10px;
  transition: all 0.3s ease;
}

nav ul li a:hover {
  background-color: white;
  color: #800000;
}

footer {
  background-color: #333;
  color: white;
  padding: 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}


.content {
  display: flex;
  flex-wrap: wrap;
  color: #333;
  padding: 20px; /* Aggiunge spazio uniforme a tutti i lati */
  justify-content: center; /* Centra orizzontalmente il contenuto */
}


.image-column {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-column img {
  max-width: 100%;
  max-height: 100%;
}
/* Aggiungi spazio ai lati del corpo della pagina */


/* CSS precedente */


.text-column, .image-column {
  width: calc(20% - 20px); /* Calcola la larghezza con lo spazio laterale incluso */
  overflow-y: auto;
  height: 400px; /* Altezza fissa per abilitare lo scrolling */
}

function menuClick(section) {
  var contentDiv = document.getElementById('content');
  contentDiv.innerHTML = ''; // Pulisce il contenuto precedente

  if (section === 'storia') {
    contentDiv.innerHTML += `
      <div class="text-column">
        <h2>Storia</h2>
        <p>La nostra macelleria ha una lunga storia di tradizione familiare, che risale a più di cinquant'anni fa. In quegli anni, il nostro fondatore ha iniziato a lavorare con passione e dedizione per fornire ai clienti la migliore carne fresca disponibile sul mercato. Questo impegno per la qualità e l'eccellenza continua ancora oggi.</p>
      </div>
      <div class="image-column">
        <img src="storia.jpg" alt="Immagine Storia">
      </div>
    `;
  } else if (section === 'prodotti') {
    contentDiv.innerHTML += `
      <div class="text-column">
        <h2>Prodotti</h2>
        <p>I nostri prodotti includono una vasta gamma di carni fresche di alta qualità, provenienti dalle migliori fattorie locali. Dalla carne rossa alla carne bianca, dai tagli classici ai salumi artigianali, abbiamo tutto ciò di cui hai bisogno per preparare un pasto delizioso e soddisfacente per te e la tua famiglia.</p>
      </div>
      <div class="image-column">
        <img src="prodotti.jpg" alt="Immagine Prodotti">
      </div>
    `;
  } else if (section === 'spedizione') {
    contentDiv.innerHTML += `
      <div class="text-column">
        <h2>Spedizione</h2>
        <p>Offriamo un servizio di spedizione rapido e affidabile per garantire che i nostri prodotti freschi raggiungano i nostri clienti nel minor tempo possibile. Collaboriamo con corrieri di fiducia per garantire che la tua carne arrivi fresca e pronta da cucinare direttamente alla tua porta.</p>
      </div>
      <div class="image-column">
        <img src="spedizione.jpg" alt="Immagine Spedizione">
      </div>
    `;
  } else if (section === 'contatti') {
    contentDiv.innerHTML += `
      <div class="text-column">
        <h2>Contatti</h2>
        <p>Per qualsiasi domanda, suggerimento o richiesta di informazioni, non esitare a contattarci. Siamo qui per aiutarti e siamo felici di rispondere a tutte le tue domande. Puoi contattarci tramite telefono, email o compilando il modulo di contatto sul nostro sito web.</p>
      </div>
      <div class="image-column">
        <img src="contatti.jpg" alt="Immagine Contatti">
      </div>
    `;
  }
}