Pricebox2 - LO SMANETTONE

Esempi e Codice
Vai ai contenuti

UN BOX PREZZI
Progetto FREE
Facile,personalizzabile,responsive


COSA TI SERVE?
  • Un oggetto Html incomedia
  • codice extra
  • pazienza nel personalizzare il tutto!

SEI PRONTO?
crea una pagina test con una immagine sotto l'header . Vai sulla proprietà della pagina e su Grafica e imposta lo sfondo su bianco
Ora inserisci l'oggetto html sotto l'immagine (potrai spostarla dove vuoi in seguito)
Fai doppio click sull'oggetto
Vai ora su CODICE e inserisci quanto sotto è riportato:
Aggiornato il 26.03.2025





<!-- Custom setup by Roberto Max -->
<link rel="stylesheet" href="style.css">
<div class="container">
 <div class="pricing-table table1">
   <div class="pricing-header">
     <div class="price"><span>A partire da:<br>8€</span></div>
     <div class="title">Basic</div>
   </div>
   <ul class="pricing-list">
     <li><strong>6</strong> Pagine Max</li>
     <li><strong>SORGENTE IWZIP</strong> INCLUSO</li>
     <li><strong>SEO</strong> NO</li>
     <li><strong>GESTIONE</strong> AUTONOMA</li>
     <li><strong>ORDINAMENTO</strong> PARZIALE</li>
     <li><strong>CODICE EXTRA</strong> INCLUSO</li>
     <li><strong>PUBBLICAZIONE</strong> AUTONOMA</li>
     <li><strong>IMMAGINI DEMO</strong> INCLUSE</li>
     <li><strong>SUPPORTO</strong> NO</li>
   </ul>
   <a href="#">Esempi Demo</a>
 </div>

 <div class="pricing-table table2">
   <div class="pricing-header">
     <div class="price"><span>A partire da:<br>18€</span></div>
     <div class="title">Regular</div>
   </div>
   <ul class="pricing-list">
     <li><strong>10</strong> Pagine Max</li>
     <li><strong>SORGENTE IWZIP</strong> INCLUSO</li>
     <li><strong>SEO</strong> NO</li>
     <li><strong>GESTIONE</strong> AUTONOMA</li>
     <li><strong>ORDINAMENTO</strong> PARZIALE</li>
     <li><strong>CODICE EXTRA</strong> INCLUSO</li>
     <li><strong>PUBBLICAZIONE</strong> AUTONOMA</li>
     <li><strong>IMMAGINI DEMO</strong> INCLUSE</li>
     <li><strong>SUPPORTO</strong> SI</li>
   </ul>
   <a href="#">Esempi Demo</a>
 </div>

 <div class="pricing-table table3">
   <div class="pricing-header">
     <div class="price"><span>A partire da:<br>29€</span></div>
     <div class="title">Premium</div>
   </div>
   <ul class="pricing-list">
     <li><strong>15</strong> o + Pagine</li>
     <li><strong>SORGENTE IWZIP</strong> INCLUSO</li>
     <li><strong>SEO</strong> NO</li>
     <li><strong>GESTIONE</strong> AUTONOMA</li>
     <li><strong>ORDINAMENTO</strong> PARZIALE</li>
     <li><strong>CODICE EXTRA</strong> INCLUSO</li>
     <li><strong>PUBBLICAZIONE</strong> AUTONOMA</li>
     <li><strong>IMMAGINI DEMO</strong> INCLUSE</li>
     <li><strong>SUPPORTO</strong> SI</li>
   </ul>
   <a href="#">Esempi Demo</a>
 </div>
</div>
FAI SALVA!
Portati ora su ESPERTO e inserisci il CSS

*{
margin: 0;
padding: 0;
font-family: "Open Sans",sans-serif;
text-decoration: none;
list-style: none;
}

body{
min-height: 100vh;
background-color: lightblue;
}

.container{
max-width: 1000px;
margin: auto;
padding: 40px;
display: flex;
flex-wrap: wrap;
}

.pricing-table{
border-radius: 12px;
background: #f1f1f1;
flex: 1;
margin: 10px;
text-transform: uppercase;
}

.pricing-header{
border-top-left-radius: 12px;
border-top-right-radius: 12px;
color: #fff;
position: relative;
margin-bottom: 20px;
}

.price{
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 0;
}

.price span{
font-size: 20px;
}

.title{
border-radius: 12px;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,50%);
width: 80%;
max-width: 360px;
text-align: center;
padding: 8px 0;
font-size: 14px;
}

.pricing-list{
padding: 10px 20px;
}

.pricing-list li{
margin: 8px 0;
font-size: 12px;
color: #344;
text-align: center;
}

.border{
width: 189px;
height: 1px;
background: #ddd;
margin: auto;
}

.pricing-table a{
display: block;
width: 80%;
margin: auto;
margin-bottom: 20px;
text-align: center;
padding: 8px 0;
font-size: 14px;
border: 1px solid;
max-width: 360px;
transition: .2s linear;
}
.pricing-table a:hover{
border-radius: 30px;
}
.table1 .pricing-header{
background: #2980b9;
}
.table2 .pricing-header{
background: #2c3e50;
}
.table3 .pricing-header{
background: #c0392b;
}

.table1 .title{
background-image: linear-gradient(125deg,#3498db,#9b59b6);
}
.table2 .title{
background-image: linear-gradient(125deg,#34495e,#95a5a6);
}
.table3 .title{
background-image: linear-gradient(125deg,#e74c3c,#f39c12);
}
.table1 a{
color: #2980b9;
}
.table2 a{
color: #2c3e50;
}
.table3 a{
color: #c0392b;

}

.table1 a:hover{
background: #2980b9;
color: #fff;
}
.table2 a:hover{
background: #2c3e50;
color: #fff;
}
.table3 a:hover{
background: #c0392b;
color: #fff;

}

@media screen and (max-width:780px) {
.pricing-table{
  flex: 100%;
}
}

SALVA TUTTO
RISULTATO ▼
Ora non ti rimane che ritornare sul listato è inserire il percorso assoluto (href tra le due apicette "#") le pagine che dovranno aprire la tua sezione di riferimento e i paragrafi per le scelte utente.
A partire da:
8€
Basic
  • 6 Pagine Max
  • SORGENTE IWZIP INCLUSO
  • SEO NO
  • GESTIONE AUTONOMA
  • ORDINAMENTO PARZIALE
  • CODICE EXTRA INCLUSO
  • PUBBLICAZIONE AUTONOMA
  • IMMAGINI DEMO INCLUSE
  • SUPPORTO NO
Esempi Demo
A partire da:
18€
Regular
  • 10 Pagine Max
  • SORGENTE IWZIP INCLUSO
  • SEO NO
  • GESTIONE AUTONOMA
  • ORDINAMENTO PARZIALE
  • CODICE EXTRA INCLUSO
  • PUBBLICAZIONE AUTONOMA
  • IMMAGINI DEMO INCLUSE
  • SUPPORTO SI
Esempi Demo
A partire da:
29€
Premium
  • 15 o + Pagine
  • SORGENTE IWZIP INCLUSO
  • SEO NO
  • GESTIONE AUTONOMA
  • ORDINAMENTO PARZIALE
  • CODICE EXTRA INCLUSO
  • PUBBLICAZIONE AUTONOMA
  • IMMAGINI DEMO INCLUSE
  • SUPPORTO SI
Esempi Demo

Crediti

Questo pannello è stato personalizzato da Losmanettone.it a partire dal progetto open source SIENNA concesso sotto licenza MIT.

Torna ai contenuti