Macelleria by @carmian - Codewith.it

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

References

<h5>Titolo di intestazione di quinto livello
<blockquote>Inserisce citazioni in un documento HTML
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
requiredRende obbligatorio un campo di input
_parentApre collegamenti ipertestuali nell'elemento genitore
<object>Incorpora risorse varie nella pagina web.

Users

Log in to search for users

Explore

Find inspiration

Sezioni Nuove Delajo

Quiz ristrutturazione

Creatore Badge Aziendale

tabella delle matricole

Coppa del mondo

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>
    `;
  }
}