Macelleria by @carmian - Codewith.it

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

Referenze

_selfApre collegamenti ipertestuali nella stessa pagina del browser
<th>Definisce una cella di intestazione di una tabella HTML.
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
selectedPre-seleziona un elemento di input
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
getDefinisce un metodo di invio di dati al server

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

5/10/24 es. 9 - 3 bottoni

redirect 301 page2page

esercitazione sulle celle

esercitazione n. 1

Tabelle con inserimento immagini

Architettura del Successo | Consul

Ximena\'s hamburger

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

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