BOX PRICE 2
Progetto FREE - RESPONSIVE
realizzato con WebSite X5PRO 2024.2.8
In questo esempio vengono utilizzati 4 BOX PRICE per evidenziare sul front-end prezzi e servizi che a voi interessano.
Cosa serve?
- UN OGGETTO HTML
- CODICE EXTRA DA INSERIRCI
Difficoltà - Minima
PREPARAZIONE. Sei pronto? Ok andiamo che ti spiego passo passo cosa fare.
Su una pagina TEST di un tuo progetto inserisci un oggetto HTML 
Fai doppio click sull'oggetto per inserire il codice extra nelle posizioni indicate dalla sottostante tabella:
| CODICE DA INSERIRE SU CODICE HTML questa parte di codice genera i box su cui si può intervenire inserendo sia i servizi che i puntamenti alle pagine interessate. Per cambiare i parametri leggete il codice .Come esempio ne ho contrassegnati alcuni in grassetto. | ||
<div id="pricing-table" class="clear"> <div class="plan"> <h3>Enterprise<span>euro 59</span></h3> <a class="signup" href="">Sign up</a> <ul> <li><b>10GB</b> Disk Space</li> <li><b>100GB</b> Monthly Bandwidth</li> <li><b>20</b> Email Accounts</li> <li><b>Unlimited</b> subdomains</li> </ul> </div> <div class="plan" id="most-popular"> <h3>Professional<span>euro 29</span></h3> <a class="signup" href="">Sign up</a> <ul> <li><b>5GB</b> Disk Space</li> <li><b>50GB</b> Monthly Bandwidth</li> <li><b>10</b> Email Accounts</li> <li><b>Unlimited</b> subdomains</li> </ul> </div> <div class="plan"> <h3>Standard<span>euro 17</span></h3> <a class="signup" href="">Sign up</a> <ul> <li><b>3GB</b> Disk Space</li> <li><b>25GB</b> Monthly Bandwidth</li> <li><b>5</b> Email Accounts</li> <li><b>Unlimited</b> subdomains</li> </ul> </div> <div class="plan"> <h3>Basic<span>euro 9</span></h3> <a class="signup" href="">Sign up</a> <ul> <li><b>1GB</b> Disk Space</li> <li><b>10GB</b> Monthly Bandwidth</li> <li><b>2</b> Email Accounts</li> <li><b>Unlimited</b> subdomains</li> </ul> </div> </div> |
CODICE DA INSERIRE IN OGGETTO HTML SEZIONE "ESPERTO" questo invece è il css che permetterà la personalizzazione dei colori e si curerà del responsive | ||
/* Custom CSS by MAX 2025 */ body { background: #303030; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } #pricing-table { margin: 50px auto; display: flex; /* Usa flexbox per distribuire le colonne */ flex-wrap: wrap; /* Consente alle colonne di andare a capo su schermi piccoli */ justify-content: center; /* Centra i piani */ gap: 20px; /* Spazio tra le colonne */ } #pricing-table .plan { font: 12px 'Lucida Sans', 'Trebuchet MS', Arial, Helvetica; background: #fff; border: 1px solid #ddd; color: #333; padding: 20px; width: 23%; /* Colonne dinamiche */ min-width: 200px; /* Larghezza minima per garantire leggibilità */ max-width: 300px; text-align: center; position: relative; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Ombra per profondità */ border-radius: 5px; /* Bordo arrotondato */ } /* Modifica per il piano più popolare */ #pricing-table #most-popular { z-index: 2; top: 0; padding: 30px 20px; border-width: 3px; background-color: #f7f7f7; } /* Stile per l'intestazione */ #pricing-table h3 { font-size: 20px; font-weight: normal; padding: 20px; margin: -20px -20px 30px -20px; background-color: #eee; border-radius: 5px 5px 0 0; } #pricing-table h3 span { display: block; font: bold 25px/100px Georgia, Serif; color: #777; background: #fff; border: 5px solid #fff; height: 100px; width: 100px; margin: 10px auto -65px; border-radius: 50%; box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset; } /* Lista dei dettagli */ #pricing-table ul { margin: 20px 0 0 0; padding: 0; list-style: none; } #pricing-table li { border-top: 1px solid #ddd; padding: 10px 0; } /* Pulsante di iscrizione */ #pricing-table .signup { padding: 10px 20px; margin-top: 20px; color: #fff; font: bold 14px Arial, Helvetica; background: linear-gradient(#72ce3f, #62bc30); border: none; border-radius: 3px; text-transform: uppercase; text-decoration: none; cursor: pointer; display: inline-block; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0 rgba(0, 0, 0, 0.7); transition: background 0.3s ease; } #pricing-table .signup:hover { background: linear-gradient(#62bc30, #72ce3f); } /* Effetto hover per i piani di pricing */ #pricing-table .plan:hover { background-color: #f0f8ff; /* Cambia il colore di sfondo */ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Aggiunge un'ombra più evidente */ transform: scale(1.05); /* Leggero zoom per enfatizzare */ transition: all 0.3s ease-in-out; /* Transizione fluida */ } /* Effetto hover per il pulsante di iscrizione */ #pricing-table .signup:hover { background: linear-gradient(#62bc30, #72ce3f); /* Inverte il gradiente di sfondo */ color: #303030; /* Cambia il colore del testo */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Aggiunge un'ombra extra */ transition: all 0.3s ease; /* Transizione fluida */ } /* Responsività */ @media screen and (max-width: 768px) { #pricing-table .plan { width: 45%; /* Due colonne per schermi medi */ } } @media screen and (max-width: 480px) { #pricing-table .plan { width: 90%; /* Una colonna per schermi piccoli */ } } |
RISULTATO
Note: in stile riga agganciate gli oggetti di pagina e dategli un colore bianco o altro di sfondo