/* Sezione Consegna Gratuita */
.consegna-gratuita {
background-color: #f0f8ff; /* Colore di sfondo chiaro */
color: #2c3e50; /* Colore del testo scuro */
text-align: center; /* Allineamento centrale */
padding: 1vw; /* Padding interno */
font-size: 1.5vw; /* Dimensione del font */
border: 0px solid #2980b9; /* Bordo di colore blu */
margin: auto; /* Margine sotto il div */
border-radius: 5px; /* Angoli arrotondati */
}
/* grassetto consegna gratuita */
#Grassetto{
background-color: #f0f8ff; /* Colore di sfondo chiaro */
color: #2c3e50; /* Colore del testo scuro */
text-align: center; /* Allineamento centrale */
padding: 10px; /* Padding interno */
font-size: 16px; /* Dimensione del font */
font-weight: bold; /* Grassetto */
border: 0px solid #2980b9; /* Bordo di colore blu */
margin: auto; /* Margine sotto il div */
border-radius: 5px; /* Angoli arrotondati */
}
.icon-furgoncino {
width: 2vw; /* Larghezza dell'icona */
height: auto; /* Altezza automatica per mantenere le proporzioni */
vertical-align: middle; /* Allinea verticalmente l'immagine con il testo */
margin-right: 1vw; /* Margine a destra per separare l'immagine dal testo */
}
/* header marchio ricerca e lingua */
.header {
display: flex; /* Usa Flexbox per allineare gli elementi sulla stessa riga */
align-items: center; /* Allinea verticalmente al centro */
justify-content: space-between; /* Spaziatura uniforme tra gli elementi */
padding: 1vw; /* Padding interno */
}
.logo {
display: flex; /* Usa Flexbox per allineare logo e testo */
align-items: center; /* Allinea logo e testo verticalmente */
margin-left: 10vw;
}
.logo img {
width: 5vw; /* Imposta la larghezza del logo */
height: auto; /* Mantieni le proporzioni del logo */
margin-right: 1vw; /* Margine a destra per separare il logo dal testo */
}
/* noe ditta */
/* Contenitore per il testo (nome ditta + slogan) */
.logo-text {
display: flex;
flex-direction: column; /* Dispone il nome e lo slogan in colonna */
align-items: flex-start; /* Allinea il testo a sinistra (o usa center per centrare) */
}
/* Nome della ditta */
.nome-ditta {
color: black;
font-family: 'Montserrat', sans-serif;
font-size: 2vw;
font-weight: bold;
margin: 0; /* Rimuove i margini predefiniti */
}
/* Slogan */
.slogan {
color: gray;
font-family: 'Montserrat', sans-serif;
font-size: 1vw;
font-weight: normal;
margin-top: 0.2em; /* Distanza tra il nome e lo slogan */
}
.search-container {
display: flex;
align-items: center; /* Allinea verticalmente */
justify-content: center; /* Centra orizzontalmente */
margin: 0 auto; /* Centra nel contenitore */
width: 60vw; /* Larghezza della barra */
gap: 1vw; /* Spaziatura tra gli elementi */
}
.search-container input {
padding: 1vw; /* Spaziatura interna */
border: 1px solid #2980b9;
border-radius: 5px;
width: 100%; /* Occupa tutta la larghezza disponibile */
font-size: 1vw;
}
.search-container form {
width: 100%; /* Il form occupa tutta la larghezza del contenitore */
}
.suggestions-box {
position: absolute;
background: white;
border: 1px solid #ccc;
max-width: 300px;
display: none; /* Cambierà a "block" quando ci sono suggerimenti */
z-index: 1000;
}
.suggestion-item {
padding: 10px;
cursor: pointer;
}
.suggestion-item:hover {
background-color: #f0f0f0;
}
/* Contenitore dei suggerimenti */
#suggestions {
position: absolute;
width: 100%;
background: white;
border: 1px solid #ccc;
border-top: none;
max-height: 200px;
overflow-y: auto;
display: none; /* Nasconde i suggerimenti di default */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 0 0 5px 5px;
z-index: 1000; /* Assicura che sia sopra gli altri elementi */
}
/* Singolo elemento suggerimento */
.suggestion-item {
padding: 10px;
cursor: pointer;
font-size: 14px;
border-bottom: 1px solid #eee;
transition: background-color 0.2s ease-in-out;
}
.suggestion-item:last-child {
border-bottom: none;
}
/* Stile per i link nei suggerimenti */
.suggestion-item a {
text-decoration: none;
color: #333;
display: block;
width: 100%;
}
.suggestion-item:hover {
background-color: #f2f2f2;
}
/* 📱 Responsività per dispositivi mobili */
@media (max-width: 768px) {
#suggestions {
font-size: 13px;
}
.suggestion-item {
padding: 8px;
font-size: 12px;
}
}
/* Bandiera e testo "Made in Italy" */
.made-in-italy {
margin-left: 0.5vw; /* Riduci il margine per avvicinarlo alla bandiera */
font-style: italic;
font-weight: 300;
font-size: 1.3vw; /* Rendi il testo più piccolo */
color: #000;
display: flex; /* Allinea il contenuto in linea con la bandiera */
align-items: center; /* Centra verticalmente il testo con la bandiera */
white-space: nowrap; /* Impedisce che il testo vada su più righe */
margin-right: 13vw;
}
.bandiera-italiana {
width: 2vw;
height: auto;
margin-right: 0.5vw;
vertical-align: middle;
}
/* Selettore Lingua */
.lingua {
margin-left: 1vw; /* Margine per distanziare dal testo "Made in Italy" */
padding: 0.5vw;
font-size: 1vw;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
color: #333;
cursor: pointer;
}
/* Media Query per schermi più piccoli (mobile) */
@media (max-width: 768px) {
/* Consegna gratuita */
.consegna-gratuita {
font-size: 4vw; /* Aumenta la dimensione del font per mobile */
padding: 2vw; /* Aumenta il padding */
}
#Grassetto {
font-size: 4vw; /* Aumenta la dimensione del font */
padding: 2vw; /* Aumenta il padding */
}
.icon-furgoncino {
width: 5vw; /* Aumenta la dimensione dell'icona */
height: auto;
margin-bottom: 1vw; /* Spazio sopra il logo */
}
/* Header */
.header {
display: flex;
justify-content: space-between; /* Distribuisce gli spazi tra i contenuti */
align-items: center;
width: 100%; /* Occupa tutta la larghezza disponibile */
gap: 2vw; /* Spaziatura tra gli elementi */
}
/* Logo e Nome ditta */
.logo {
display: flex;
align-items: center;
justify-content: flex-start; /* Allinea a sinistra */
width: 50%; /* 50% per il logo e nome */
}
.logo img {
width: 14vw; /* Aumenta la larghezza del logo */
height: auto;
}
.logo-text {
text-align: left; /* Allinea il testo a sinistra */
margin-left: 1vw; /* Aggiungi margine a sinistra */
}
.nome-ditta {
font-size: 8vw; /* Aumenta la dimensione del nome per mobile */
margin: 0;
}
.slogan {
font-size: 2.5vw; /* Aumenta la dimensione dello slogan */
margin-top: 1vw;
}
/* Bandiera e testo "Made in Italy" */
.made-in-italy {
font-size: 2.2vw; /* Aumenta la dimensione del testo */
margin-top: 1vw; /* Aggiunge spazio sopra */
text-align: left; /* Allinea a destra */
transform: translateX(-2vw); /* Sposta leggermente a sinistra */
}
.bandiera-italiana {
width: 7vw; /* Aumenta la larghezza della bandiera */
height: auto;
margin-left: 1.5vw; /* Spazio a sinistra della bandiera */
}
/* Home Decor */
.home-decor {
font-size: 1.5vw; /* Ridimensiona "Home Decor" */
margin-bottom: 1vw; /* Aggiunge margine sotto */
}
/* Barra di ricerca */
.search-container {
width: 100%; /* Barra di ricerca occupa tutta la larghezza */
display: flex;
justify-content: space-between; /* Spaziatura tra la barra di ricerca e il selettore lingua */
align-items: center;
margin-top: 2vw; /* Spazio sopra la barra di ricerca */
margin-left: 3vw;
}
.search-container input {
font-size: 4vw; /* Aumenta la dimensione del testo nella barra di ricerca */
padding: 2vw; /* Aumenta il padding */
width: 75%; /* La barra occupa la maggior parte dello spazio disponibile */
}
.search-container form {
width: 100%; /* Il form occupa tutta la larghezza del contenitore */
}
.lingua {
font-size: 4vw; /* Aumenta la dimensione del testo */
padding: 2vw;
width: 12%; /* Riduce la larghezza del selettore lingua */
text-align: center; /* Allinea il testo */
}
}
/* Formattazione NAV */
nav {
display: flex; /* Imposta il contenitore come flexbox */
justify-content: center; /* Centra i link orizzontalmente */
gap: 3vw; /* Spazio tra i link */
background-color: #f1f1f1; /* Colore di sfondo (opzionale) */
padding: 1vw; /* Aggiunge un po' di spazio interno (opzionale) */
align-items: center; /* Allinea gli elementi verticalmente al centro */
}
.dropdown {
position: relative; /* Posizione relativa per il contenitore del dropdown */
display: inline-block; /* Visualizza come inline-block */
}
.dropbtn {
background-color: inherit; /* Colore di sfondo trasparente */
color: #6f6f6f; /* Colore iniziale del testo */
padding: 10px 20px; /* Padding */
font-size: 2vw; /* Dimensione del font */
border: none; /* Nessun bordo */
cursor: pointer; /* Cambia il cursore */
text-decoration: none; /* Nessuna decorazione */
white-space: nowrap; /* Evita la rottura del testo */
transition: color 0.3s, background-color 0.3s; /* Transizioni morbide */
outline: none; /* Rimuove il bordo di focus */
font-family: 'Roboto', sans-serif; /* Usa il font Roboto per il testo */
font-weight: 700; /* Imposta il font in grassetto */
}
.dropbtn:hover {
color: red; /* Il testo diventa rosso al passaggio del mouse */
background-color: inherit; /* Mantiene il colore di sfondo trasparente */
}
/* Stile per il contenuto del dropdown */
/* Stile per il contenuto del dropdown */
.dropdown-content {
display: none; /* Nascondi la lista di default */
position: absolute; /* Posizionamento assoluto */
background-color: #f9f9f9; /* Colore di sfondo */
min-width: 600px; /* Ridotta la larghezza minima */
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); /* Ombra */
z-index: 1; /* Sovrapposizione sopra altri elementi */
display: flex; /* Layout flex per il posizionamento orizzontale */
justify-content: flex-start; /* Riduce lo spazio tra colonne */
gap: 10px; /* Ridotto lo spazio tra colonne */
padding: 10px; /* Ridotto il padding interno */
}
/* Colonne del menu */
.column {
flex: 1; /* Le colonne occupano lo stesso spazio */
padding: 5px; /* Ridotto il padding interno */
text-align: left; /* Allinea il testo a sinistra */
font-size: 16px; /* Più grande del category-button */
}
/* Testo delle categorie */
.category-button {
background: none; /* Nessuno sfondo */
border: none; /* Nessun bordo */
color: black; /* Colore del testo nero */
font-weight: bold; /* Testo in grassetto */
font-size: 17px; /* Dimensione del testo */
text-align: left; /* Allineamento a sinistra */
cursor: pointer; /* Cambia il cursore al passaggio del mouse */
padding: 5px 8px; /* Aggiunge spazio intorno al testo */
text-decoration: none; /* Rimuove la sottolineatura (se presente) */
outline: none; /* Rimuove l'evidenziazione blu */
display: block; /* Assicura che occupi tutta la larghezza della colonna */
margin-bottom: 15px; /* Aumenta lo spazio sotto */
}
.category-button:hover {
color: red; /* Cambia il colore del testo in rosso al passaggio del mouse */
text-decoration: none; /* Assicura che non venga aggiunta la sottolineatura al passaggio del mouse */
}
/* Link del menu */
.dropdown-content a {
color: black; /* Colore del testo */
padding: 5px 8px; /* Ridotto il padding tra i link */
text-decoration: none; /* Nessuna decorazione */
display: block; /* Ogni link come blocco */
font-family: "Times New Roman", Times, serif;
font-size: 1.2rem; /* Ridotta la dimensione del testo */
white-space: nowrap; /* Evita la rottura del testo */
font-weight: normal; /* Rimuove il grassetto */
}
/* Hover sui link */
.dropdown-content a:hover {
background-color: #f1f1f1; /* Sfondo al passaggio del mouse */
}
/* carrello */
.cart-icon {
position: relative;
display: inline-block;
font-size: 24px; /* Dimensione dell'icona del carrello */
}
#cart-counter {
position: absolute;
top: -5px;
right: -5px;
background-color: red;
color: white;
font-size: 12px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: bold;
}
/* Modale - Sfondo scuro */
/* Modale - Sfondo scuro */
.cart-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
opacity: 0; /* Inizialmente trasparente */
transition: opacity 0.5s ease-in-out; /* Animazione dissolvenza */
z-index: 9999; /* Assicura che il modale sia sopra tutti gli altri elementi */
}
/* Mostra il modale con fade-in */
.cart-modal.show {
display: flex;
opacity: 1; /* Opacità piena */
}
/* Contenitore del Modale */
.cart-modal-content {
background: white;
width: 60%; /* Finestra più grande */
max-width: 500px; /* Aumentata la dimensione */
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
}
/* Header del Modale */
.cart-modal-header {
font-size: 22px; /* Testo più grande */
font-weight: bold;
margin-bottom: 15px;
}
/* Corpo del Modale */
.cart-modal-body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#cartModalImage {
width: 120px;
height: 120px; /* Stesso valore di width per avere un quadrato */
border-radius: 5px;
margin-right: 15px;
object-fit: cover; /* Ritaglia l'immagine per riempire il quadrato */
object-position: center; /* Centra l'immagine nel riquadro */
display: block;
}
/* Testo prodotto */
.cart-modal-info {
font-size: 20px; /* Testo più grande */
font-weight: bold;
}
/* Footer - Bottoni */
.cart-modal-footer {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
/* Stile Pulsanti */
.cart-modal-footer button {
padding: 8px 15px; /* Un po' più grandi per facilità d'uso */
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
background: #28a745; /* Entrambi verdi */
color: white;
}
.cart-modal-footer button:hover {
background: #218838;
}
/* Pulsante di chiusura */
.close-modal {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
}
@media screen and (max-width: 600px) {
.cart-modal-content {
width: 85%; /* Più grande ma ancora adattato */
max-width: 350px; /* Leggermente ingrandito */
padding: 20px;
}
.cart-modal-header {
font-size: 20px;
}
.cart-modal-body {
flex-direction: column;
align-items: center;
}
#cartModalImage {
width: 100px;
height: 100px;
margin-bottom: 10px;
}
.cart-modal-info {
font-size: 22px;
}
/* Aumento della dimensione del nome prodotto e del prezzo */
.cart-modal-info h3 {
font-size: 1.5em; /* Prova con 1.5em, puoi aumentare se serve */
}
.cart-modal-info p {
font-size: 1.3em; /* Anche qui puoi testare valori più grandi */
}
.cart-modal-footer {
flex-direction: column;
}
.cart-modal-footer button {
width: 100%;
padding: 10px;
margin-top: 5px;
}
.close-modal {
font-size: 22px;
right: 10px;
top: 5px;
}
}
nav a {
text-decoration: none;
color: #6f6f6f;
font-size: 2vw;
font-family: 'Roboto', sans-serif; /* Usa il font Roboto per il testo */
font-weight: 700;
transition: color 0.3s; /* Aggiunge una transizione morbida quando cambia il colore */
white-space: nowrap;
}
/* Cambia colore quando il link è selezionato, cliccato o attivo */
nav a:focus,
nav a:active {
color: red;
}
/* Cambia colore quando l'utente passa il mouse sopra il link */
nav a:hover {
color: red;
}
/* Sezione Prodotti */
section {
padding: 2vw;
}
h2 {
font-size: 2vw;
}
h3 {
font-size: 1.8vw;
}
p {
font-size: 1.2vw;
}
@media (max-width: 768px) {
/* MENU A TENDINA */
.dropdown-content {
display: none; /* Nasconde il menu di default */
flex-direction: column; /* Menu impilato verticalmente */
min-width: 100%; /* Larghezza adattiva */
position: absolute;
background: white;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.dropdown-content a {
padding: 10px;
text-align: left;
display: block;
}
/* NAVBAR: allineamento e dimensioni */
nav {
display: flex;
justify-content: space-between; /* Allinea i pulsanti sullo stesso rigo */
align-items: center;
gap: 2vw; /* Mantiene lo spazio tra i tasti */
flex-wrap: nowrap; /* Evita che vadano a capo */
}
nav a, .dropbtn {
font-size: 3vw; /* Dimensione uniforme per i pulsanti */
padding: 5px; /* Adatta lo spazio interno */
}
/* BARRA DI RICERCA */
.search-container {
width: 80vw; /* Occupa più spazio */
}
/* TESTI */
.consegna-gratuita, .nome-ditta, h2, h3 {
font-size: 3vw;
}
p {
font-size: 2vw;
}
}
/* Stili del carosello */
.carousel {
position: relative;
width: 80%; /* Mantiene il carosello ad una larghezza moderata, non si espande per tutta la pagina */
margin: auto; /* Centra il carosello orizzontalmente */
overflow: hidden; /* Nasconde qualsiasi parte che fuoriesce */
height: auto; /* Altezza automatica in base alle immagini */
}
.slides {
display: none; /* Nasconde tutte le slide inizialmente */
}
.carousel img {
width: 100%; /* Ridimensiona l'immagine per adattarsi alla larghezza del carosello */
max-height: 400px; /* Limita l'altezza massima delle immagini */
object-fit: contain; /* Mantiene le proporzioni senza tagliare */
}
/* Effetto dissolvenza per le immagini */
.fade {
animation: fadeEffect 1.5s; /* Effetto dissolvenza su 1.5 secondi */
}
@keyframes fadeEffect {
from {opacity: .4}
to {opacity: 1}
}
/* Stili per i pallini sotto */
.dots-container {
text-align: center;
margin-top: 10px;
}
.dot {
height: 15px;
width: 15px;
margin: 0 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171; /* Colore per il pallino attivo */
}
/* Contenitore per il carosello e il blocco testo */
.carousel-container {
display: flex; /* Disposizione orizzontale */
justify-content: flex-start; /* Posiziona il blocco testo accanto al carosello */
align-items: stretch; /* Allinea verticalmente il blocco con il carosello */
max-width: 100%; /* Imposta la larghezza massima del contenitore */
margin: auto; /* Centra il contenitore nella pagina */
gap: 1vw; /* Spazio ridotto tra il carosello e il blocco di testo */
}
/* Blocca il testo accanto al carosello */
.carousel-text-block {
background-color: #f1f1f1; /* Colore di sfondo simile al carosello */
padding: 2vw; /* Spazio interno */
width: 25%; /* Imposta la larghezza del blocco di testo */
display: flex; /* Usa flexbox per il layout del contenuto */
flex-direction: column; /* Imposta i contenuti in verticale */
justify-content: center; /* Centra verticalmente il contenuto */
text-align: center; /* Testo centrato */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Leggera ombra */
height: auto; /* L'altezza si adatta all'immagine */
}
.img-offerta {
width: 300px; /* Larghezza della piccola foto */
height: auto; /* Altezza automatica per mantenere le proporzioni */
display: block; /* Visualizza come blocco per occupare una nuova riga */
margin: 0 auto 10px; /* Centra l'immagine e aggiunge margine inferiore */
}
/* Stile per il pulsante Acquista */
.acquista-button {
background-color: #2c3e50; /* Colore principale (grigio scuro) */
color: white; /* Colore del testo */
border: none; /* Rimuovi i bordi */
padding: 1vw 2vw; /* Padding interno */
font-size: 1.2vw; /* Dimensione del testo */
border-radius: 5px; /* Angoli arrotondati */
cursor: pointer; /* Mostra il cursore pointer */
transition: background-color 0.3s ease; /* Transizione per il background */
text-decoration: none; /* 🔹 toglie la sottolineatura */
}
.acquista-button:hover {
background-color: #27ae60; /* Colore verde al passaggio del mouse */
}
/* Mantieni le immagini con dimensioni corrette */
.carousel {
width: 70%; /* Imposta il carosello per occupare il 70% dello spazio */
position: relative; /* Necessario per il posizionamento assoluto dei puntini */
}
.carousel img {
width: 100%; /* L'immagine occupa tutta la larghezza del carosello */
max-height: 500px; /* Altezza massima delle immagini */
object-fit: contain; /* Mantiene le proporzioni delle immagini */
}
/* Stili per i pallini sotto */
.dots-container {
position: absolute; /* Posiziona i pallini sopra le immagini */
bottom: 20px; /* Posiziona i pallini in basso all'interno dell'immagine */
width: 100%; /* I pallini si centrano rispetto all'immagine */
text-align: center; /* Centrato orizzontalmente */
}
.dot {
height: 15px;
width: 15px;
margin: 0 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171; /* Colore per il pallino attivo */
}
/* Effetto dissolvenza per le immagini */
.fade {
animation: fadeEffect 1.5s; /* Effetto dissolvenza su 1.5 secondi */
}
@keyframes fadeEffect {
from {opacity: .4}
to {opacity: 1}
}
/* Media query per schermi piccoli */
@media (max-width: 768px) {
.carousel-container {
flex-direction: column; /* Impila il carosello e il blocco di testo verticalmente */
}
.carousel {
width: 100%; /* Il carosello occupa tutta la larghezza */
}
.carousel-text-block {
font-size: 18px;
width: 100%; /* Il blocco di testo occupa tutta la larghezza su schermi piccoli */
height: auto; /* Altezza automatica su schermi piccoli */
}
.carousel-text-block h3 {
font-size: 18px;
}
.carousel-text-block p {
font-size: 16px;
}
.acquista-button {
font-size: 4vw; /* Testo più leggibile sui dispositivi mobili */
padding: 2vw 4vw; /* Aumenta il padding per una migliore usabilità */
display: block; /* Assicura che sia un elemento a blocco */
margin: 10px auto; /* Centra il pulsante orizzontalmente */
text-align: center; /* Centra il testo */
}
}
/* 3 file prodotti */
section {
margin: 20px;
}
/*in evidenza*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');
body {
text-align: center;
background-color: #f9f9f9;
}
h2 {
color: #E07A5F;
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: bold;
position: relative;
opacity: 0;
transform: translateY(-20px);
animation: fadeIn 1.2s ease-out forwards;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.underline {
display: block;
width: 60px;
height: 4px;
background-color: #E07A5F;
margin: 8px auto;
border-radius: 2px;
}
.arrow {
font-size: 2rem;
color: #E07A5F;
margin-top: 15px;
display: inline-block;
animation: bounce 1.5s infinite;
}
@keyframes fadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(10px); }
}
.row {
display: flex;
justify-content: space-between;
margin-bottom: 60px;
}
.row div {
flex: 1;
margin: 0 10px;
text-align: center;
border: 1px solid #ddd;
padding: 10px;
border-radius: 5px;
}
.row img {
width: 150px; /* rettangolo fisso */
height: 150px;
object-fit: contain; /* mantiene proporzioni */
background-color: #fff; /* opzionale: sfondo neutro */
padding: 5px; /* opzionale: margine interno */
border: 1px solid #eee; /* opzionale: bordo per rendere uniforme */
}
button {
background-color: #2c3e50; /* Colore principale (grigio scuro) */
font-size: 20px;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #27ae60; /* Colore hover (verde) */
}
.product-link {
color: black; /* colore iniziale */
text-decoration: none; /* rimuove la sottolineatura */
transition: color 0.3s ease; /* effetto morbido */
}
.product-link:hover {
color: #27ae60; /* verde quando ci passi sopra */
}
/* Rettangolo Mensola */
.highlight-section {
display: flex;
align-items: center;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin-top: 60px; /* Distanza ridotta tra i rettangoli */
}
/* Immagine nella sezione la nostra Mensola */
.highlight-image {
width: 35%; /* Ridotto dal 45% al 35% per una dimensione più piccola */
max-width: 400px; /* Ridotto da 600px a 400px */
height: auto;
border-radius: 5px;
object-fit: cover; /* Assicura che l'immagine sia quadrata mantenendo il ritaglio appropriato */
}
/* Descrizione nella sezione Mensola */
.highlight-description {
flex: 1;
margin-left: 20px;
}
.highlight-description {
position: relative;
display: inline-block;
padding: 20px;
}
.highlight-description h3 {
font-size: 24px;
color: #27ae60;
font-family: 'Fredoka', sans-serif; /* Font più simpatico */
text-align: center;
position: relative;
display: inline-block;
padding: 15px 30px;
animation: bounce 1.5s infinite;
}
/* Angoli rossi del rettangolo */
.highlight-description::before,
.highlight-description::after {
content: "";
position: absolute;
width: calc(100% + 20px);
height: calc(100% + 20px);
border: 3px solid transparent;
pointer-events: none;
}
.highlight-description::before {
top: 0;
left: 0;
border-top-color: #27ae60;
border-left-color: #27ae60;
}
.highlight-description::after {
bottom: 0;
right: 0;
border-bottom-color: #27ae60;
border-right-color: #27ae60;
}
}
/* Media query per schermi piccoli (max-width: 768px) */
@media (max-width: 768px) {
.row h3 {
font-size: 1.7rem; /* Aumenta la dimensione del font per */
line-height: 1.5; /* Aumenta l'interlinea per rendere il testo più leggibile */
}
.row p {
font-size: 1.3rem; /* Aumenta la dimensione del font per
*/
line-height: 1.2; /* Aumenta l'interlinea per rendere il testo più leggibile */
}
/* Se vuoi anche aumentare lo spazio tra i prodotti, puoi aggiungere questa regola */
.row {
gap: 15px; /* Aumenta lo spazio tra i div all'interno della riga */
}
}
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&display=swap'); /* Font più simpatico */
/* Per schermi grandi (PC) */
@media (min-width: 1024px) {
.highlight-description {
position: relative;
display: inline-block;
padding: 20px;
}
.highlight-description h3 {
font-size: 24px;
color: #2c3e50;
font-family: 'Fredoka', sans-serif; /* Font più simpatico */
text-align: center;
position: relative;
display: inline-block;
padding: 15px 30px;
animation: bounce 1.5s infinite;
}
/* Angoli rossi del rettangolo */
.highlight-description::before,
.highlight-description::after {
content: "";
position: absolute;
width: calc(100% + 20px);
height: calc(100% + 20px);
border: 3px solid transparent;
pointer-events: none;
}
.highlight-description::before {
top: 0;
left: 0;
border-top-color: #2c3e50;
border-left-color: #2c3e50;
}
.highlight-description::after {
bottom: 0;
right: 0;
border-bottom-color: #2c3e50;
border-right-color: #2c3e50;
}
}
/* Animazione rimbalzo */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.highlight-description p {
font-size: 20px; /* Testo più grande */
line-height: 1.6; /* Aumenta l'interlinea per migliorare la leggibilità */
color: #333; /* Mantiene un colore scuro per contrasto */
text-align: justify; /* Giustifica il testo per un aspetto più ordinato */
margin-bottom: 10px; /* Spazio tra i paragrafi */
}
/* Per schermi grandi (PC), aumentiamo ancora un po' */
@media (min-width: 1024px) {
.highlight-description p {
font-size: 22px; /* Ancora più grande su schermi larghi */
line-height: 1.8;
}
}
/* Stile per il link "Orbit Plus" */
.highlight-description a {
color: #2c3e50; /* rosso di default */
text-decoration: none; /* Rimuove la sottolineatura */
font-weight: bold;
}
.highlight-description a:hover {
color: red; /* verde al passaggio del mouse */
}
/* Stile per la sezione */
.highlight-section {
display: flex; /* Disposizione orizzontale */
align-items: stretch; /* Allinea elementi alla stessa altezza */
gap: 20px; /* Spazio tra immagine e testo */
}
/* Stile per l'immagine */
.highlight-image {
height: 100%; /* Altezza pari al contenitore */
width: auto; /* Mantiene proporzioni */
object-fit: cover; /* Riempie senza distorcere */
}
/* Sezione Personalizzazione */
.customization-section {
padding: 30px 20px; /* Ridotto il padding per avvicinare il contenuto */
text-align: center;
position: relative;
background-color: transparent; /* Nessun sfondo */
margin-top: 0px; /* Ridotto lo spazio tra il rettangolo Mensola e la sezione Personalizzazione */
}
/* Titolo "PERSONALIZZAZIONE" */
.customization-title {
font-size: 150px; /* Molto grande */
color: rgba(0, 0, 0, 0.1); /* Trasparente */
margin-bottom: 10px;
position: relative;
z-index: 1; /* Assicurati che il testo non sia coperto */
line-height: 1.1; /* Distanza più ridotta tra le righe */
}
.product-link {
color: black; /* colore iniziale */
text-decoration: none; /* rimuove la sottolineatura */
transition: color 0.3s ease; /* effetto morbido */
}
.product-link:hover {
color: #27ae60; /* verde quando ci passi sopra */
}
/* Effetto zoom sull'immagine */
.product-image {
width: 150px;
height: 150px;
object-fit: cover;
transition: transform 0.3s ease-in-out; /* Transizione fluida */
}
.product-image:hover {
transform: scale(1.1); /* Effetto zoom */
}
/* Testo di descrizione sopra la scritta "PERSONALIZZAZIONE" */
.customization-text {
font-size: 20px;
color: rgba(0, 0, 0, 0.8);
position: absolute;
top: 25%; /* Ridotto per avvicinare il testo alla scritta "PERSONALIZZAZIONE" */
left: 50%;
transform: translateX(-50%); /* Allinea perfettamente al centro */
z-index: 2;
}
/* Pulsante di contatto */
.contact-button {
display: inline-block;
background-color: #2c3e50; /* Colore principale (grigio scuro) */
color: white;
padding: 10px 20px;
font-size: 20px;
border-radius: 5px;
text-decoration: none;
margin-top: 15px; /* Distanza ridotta tra il titolo e il pulsante */
}
.contact-button:hover {
background-color: #27ae60; /* Colore verde al passaggio del mouse */
}
/* Stile base già definito (non duplicato) */
/* Media Query per Smartphone (max-width: 600px) */
@media (max-width: 600px) {
section {
margin: 10px; /* Riduci il margine per schermi piccoli */
}
.row {
flex-direction: column; /* Disporre i prodotti in colonna */
gap: 10px;
}
.row div {
margin: 10px 0; /* Riduci margini laterali per prodotti */
}
.row img {
width: 100px; /* Dimensioni immagine ridotte */
height: 100px;
}
.highlight-section {
flex-direction: column; /* Disporre immagine e testo in colonna */
align-items: center; /* Centrare il contenuto */
padding: 10px; /* Ridurre padding */
}
.highlight-image {
width: 80%; /* Immagine più piccola */
max-width: 300px; /* Limita larghezza massima */
margin-bottom: 10px; /* Spazio tra immagine e testo */
}
.highlight-description {
text-align: center; /* Centrare il testo */
margin-left: 0; /* Rimuovi margine laterale */
}
/* Sezione Personalizza */
.customization-section {
display: flex;
flex-direction: column; /* Disporre gli elementi in colonna */
align-items: center; /* Centrare gli elementi */
gap: 100px; /* Spazio tra gli elementi */
padding: 20px 10px; /* Ridurre padding */
}
/* Titolo Personalizza */
.customization-title {
font-size: 8vw; /* Aumenta la dimensione del titolo */
margin-bottom: 10px; /* Spazio sotto il titolo */
text-align: center; /* Centra il titolo */
}
/* Testo descrittivo */
.customization-text {
font-size: 4vw; /* Aumenta la dimensione del testo */
text-align: center; /* Centra il testo */
margin-bottom: 20px; /* Spazio sotto il testo */
}
/* Pulsante Contattami */
.contact-button {
font-size: 4vw; /* Aumenta la dimensione del pulsante */
padding: 8px 15px; /* Ridurre padding del pulsante */
margin-top: 35px; /* Distanza dal testo */
text-align: center; /* Centra il pulsante */
}
}
/* Media Query per Tablet (min-width: 601px e max-width: 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
section {
margin: 15px; /* Margine intermedio per tablet */
}
.row {
flex-wrap: wrap; /* Permetti ai prodotti di andare a capo */
gap: 20px;
}
.row div {
flex: 1 1 45%; /* Due prodotti per riga (45% ciascuno) */
margin: 10px; /* Margine uniforme */
}
.row img {
width: 120px; /* Dimensioni immagine intermedie */
height: 120px;
}
.highlight-section {
flex-direction: row; /* Mantieni disposizione in riga */
align-items: flex-start;
padding: 15px; /* Riduci padding */
}
.highlight-image {
width: 40%; /* Adatta dimensione immagine */
max-width: 400px;
}
.highlight-description {
margin-left: 15px; /* Riduci margine */
}
/* Sezione Personalizza */
.customization-section {
display: flex;
flex-direction: column; /* Disporre gli elementi in colonna */
align-items: center; /* Centrare gli elementi */
gap: 150px; /* Spazio tra gli elementi */
padding: 25px 15px; /* Riduci padding per tablet */
}
/* Titolo Personalizza */
.customization-title {
font-size: 8vw; /* Dimensione titolo intermedia */
margin-bottom: 10vw;
text-align: center; /* Centra il titolo */
}
/* Testo descrittivo */
.customization-text {
font-size: 4vw; /* Adatta dimensione testo */
margin-bottom: 10vw;
text-align: center; /* Centra il testo */
}
/* Pulsante Contattami */
.contact-button {
font-size: 5vw; /* Dimensione pulsante intermedia */
padding: 10px 18px;
text-align: center; /* Centra il pulsante */
}
}
/*pie di pagina*/
body {
margin: 0;
font-family: Arial, sans-serif;
}
footer {
background-color: #f0f0f0;
padding: 20px;
border-top: 1px solid #ccc;
}
.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.footer-box {
flex: 1;
padding: 10px;
text-align: center;
}
.footer-box:not(:last-child) {
border-right: 1px solid #ccc;
}
.footer-box h3 {
margin: 0;
font-size: 1.1rem;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.footer-box h3 img {
margin-right: 10px;
width: 24px;
height: 24px;
}
.footer-box p {
margin: 5px 0 0;
font-size: 0.9rem;
color: #555;
}
.footer-lower {
background-color: #e0e0e0;
padding: 20px;
border-top: 1px solid #bbb;
}
.footer-lower-container {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}
.footer-left, .footer-right {
flex: 1;
padding: 10px;
}
.footer-left {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-left p {
margin: 0 0 10px;
font-size: 1rem;
color: #333;
}
.footer-left p span {
font-weight: bold;
color: #007BFF;
cursor: pointer;
}
.footer-left p span:hover {
text-decoration: underline;
}
.footer-left .social-icons {
display: flex;
gap: 20px; /* Distanza tra le icone */
margin-top: 20px; /* Spostate le icone ancora più in basso */
}
.footer-left .social-icons a {
text-decoration: none;
}
.footer-left .social-icons img {
width: 32px;
height: 32px;
}
.footer-right {
display: flex;
justify-content: space-between;
}
.footer-right ul {
list-style: none;
padding: 0;
}
.footer-right ul li {
margin-bottom: 10px;
font-size: 1rem;
font-weight: bold;
color: #333;
}
.footer-right ul li + li {
margin-top: 10px;
}
.footer-button {
display: inline-block;
padding: 10px 15px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: bold;
color: white;
background-color: #333;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
.footer-button:hover {
background-color: #ff4500;
color: white;
}
/*media queri per cell*/
/* Media Query per Smartphone (max-width: 600px) */
@media (max-width: 600px) {
.footer-container, .footer-lower-container {
flex-direction: column; /* Disporre le sezioni in colonna */
align-items: center; /* Centrare il contenuto */
text-align: center;
}
.footer-box {
border-right: none; /* Rimuovi il bordo di separazione */
margin-bottom: 10px; /* Spazio tra i box */
}
.footer-left {
align-items: center; /* Centrare i contenuti */
}
.footer-left p {
text-align: center;
}
.footer-left .social-icons {
justify-content: center; /* Centrare le icone */
gap: 15px; /* Ridurre la distanza tra le icone */
}
.footer-right {
flex-direction: column; /* Disporre i contenuti in colonna */
align-items: center;
gap: 10px; /* Spazio tra le sezioni */
}
.footer-right ul {
text-align: center;
}
}
/* Media Query per Tablet (min-width: 601px e max-width: 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
.footer-container, .footer-lower-container {
flex-wrap: wrap; /* Permetti ai contenuti di andare a capo */
gap: 20px; /* Spazio tra le sezioni */
}
.footer-box {
flex: 1 1 50%; /* Due colonne su tablet */
margin-bottom: 10px;
}
.footer-left {
align-items: flex-start; /* Allinea a sinistra */
text-align: left;
}
.footer-left p {
text-align: left;
}
.footer-left .social-icons {
justify-content: flex-start; /* Allinea a sinistra */
gap: 20px; /* Mantieni lo spazio tra le icone */
}
.footer-right {
justify-content: space-evenly; /* Distribuisci uniformemente */
}
.footer-right ul {
text-align: left;
}
}