Macelleria by @carmian - Codewith.it

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

References

<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
minlengthDetermina il numero minimo di caratteri per un elemento input
<th>Definisce una cella di intestazione di una tabella HTML.
<h2>Titolo di intestazione di secondo livello
multipart/form-dataCodifica dei caratteri di un form
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form

Users

Log in to search for users

Explore

Find inspiration

EXPLORE India DATABASES for Market

questa sarà una pagina web dedic

Test Per informatica

formattazione_testo.html.(2)

Review of Functions I

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