CSS Clean Pricing Table Template

Πρόκειται για ένα καθαρό, καθαρό πρότυπο CSS και HTML που λειτουργεί όμορφα σε όλα τα προγράμματα περιήγησης για υπολογιστές και για κινητά. Χρησιμοποιεί το CSS Flexbox. Εισαγάγετε εύκολα στη σελίδα. LIVE DEMO Αντιγραφή και επικόλληση τον παρακάτω κώδικα: HTML:
  • Plan 1
  • Dimensions: 24.8W x 47.3H
  • Material: Nylon w/ Breathable Glass Fiber
  • Weight: 55 lbs
  • Max Weight: 330 lbs
  • Tilt Degrees: 135
  • Tilt Degrees: 135
  • Head Rest: Yes
  • Check Out
  • Plan 2
  • Dimensions: 24.8W x 47.3H
  • Material: Nylon w/ Breathable Glass Fiber
  • Weight: 55 lbs
  • Max Weight: 330 lbs
  • Head Rest: Yes
  • Arm Rest:
  • Lumbar Support:
  • Warranty: 30 Days Money Back
  • Check Out
  • Plan 3
  • Dimensions: 24.8W x 47.3H
  • Material: Nylon w/ Breathable Glass Fiber
  • Weight: 55 lbs
  • Max Weight: 330 lbs
  • Head Rest: Yes
  • Arm Rest:
  • Lumbar Support:
  • Warranty: 30 Days Money Back
  • Check Out
CSS:


Πρόκειται για ένα καθαρό, καθαρό πρότυπο CSS και HTML που λειτουργεί όμορφα σε όλα τα προγράμματα περιήγησης για υπολογιστές και για κινητά.

Χρησιμοποιεί το CSS Flexbox.

Εισαγάγετε εύκολα στη σελίδα.


[ LIVE DEMO ]

Αντιγραφή και επικόλληση τον παρακάτω κώδικα:

HTML:


<div class="pricingdiv">
<ul class="theplan">
<li class="title"><b>Plan 1</b></li>
<li><b>Dimensions:</b> 24.8W x 47.3H</li>
<li><b>Material:</b> Nylon w/ Breathable Glass Fiber</li>
<li><b>Weight:</b> TEXT</li>
<li><b>Max Weight:</b> TEXT</li>
<li><b>Tilt Degrees:</b> TEXT</li>
<li><b>Tilt Degrees:</b> TEXT</li>
<li><b>Head Rest:</b> TEXT</li>
<li><a class="pricebutton" href="https://foulscode.com" target="_blank" rel="nofollow"><span class="icon-tag"></span> TEXT</a></li>
</ul>
<ul class="theplan">
<li class="title"><span class="icon-trophy" style="color:yellow"></span> <b>TEXT</b></li>
<li><b>Dimensions:</b> TEXT</li>
<li><b>Material:</b> TEXT</li>
<li><b>Weight:</b> TEXT</li>
<li><b>Max Weight:</b>TEXT</li>
<li><b>Head Rest:</b> TEXT</li>
<li><b>Arm Rest:</b> <span class="icon-check"></span></li>
<li><b>Lumbar Support:</b> <span class="icon-check"></span></li>
<li><b>Warranty:</b> TEXT</li>
<li><a class="pricebutton" href="https://foulscode.com" target="_blank" rel="nofollow"><span class="icon-tag"></span> TEXT</a></li>
</ul>
<ul class="theplan">
<li class="title"><b>TEXT</b></li>
<li class="ethighlight"><b>TEXT</b> 24.8W x 47.3H</li>
<li><b>Material:</b> TEXT</li>
<li><b>Weight:</b> TEXT</li>
<li><b>Max Weight:</b> TEXT</li>
<li><b>Head Rest:</b> TEXT</li>
<li><b>Arm Rest:</b> <span class="icon-close"></span></li>
<li><b>Lumbar Support:</b> <span class="icon-check"></span></li>
<li><b>Warranty:</b> TEXT</li>
<li><a class="pricebutton" href="https://foulscode.com" target="_blank" rel="nofollow"><span class="icon-tag"></span> TEXT</a></li>
</ul>

</div>





CSS:



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700">

<style>

.pricingdiv{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

.pricingdiv ul.theplan{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  color: white;
  background: #7c3ac9;
  position: relative;
  width: 250px; /* FoulsCode.com */
  margin-right: 10px; /* spacing between tables */
  margin-bottom: 1em;
  transition: all .5s;
}

.pricingdiv ul.theplan:hover{ /* when mouse hover over pricing table */
  transform: scale(1.05);
  transition: all .5s;
  z-index: 100;
  box-shadow: 0 0 10px gray;
}

.pricingdiv ul.theplan li{
  margin: 10px 20px;
  position: relative;
}

.pricingdiv ul.theplan li.title{
  font-size: 150%;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  text-transform: uppercase;
  border-bottom: 5px solid white;
}

.pricingdiv ul.theplan:nth-of-type(2){
  background: #e53499;
}
    
.pricingdiv ul.theplan:nth-of-type(3){
  background: #2a2cc8;
}

.pricingdiv ul.theplan:last-of-type{ /* remove right margin in very last table */
  margin-right: 0;
}

/*very last LI within each pricing UL */
.pricingdiv ul.theplan li:last-of-type{
  text-align: center;
  margin-top: auto; /*FoulsCode.com */
}  

.pricingdiv a.pricebutton{
  background: white;
  text-decoration: none;
  padding: 10px;
  display: inline-block;
  margin: 10px auto;
  border-radius: 5px;
  color: navy;
  text-transform: uppercase;
}

@media only screen and (max-width: 500px) {
  .pricingdiv ul.theplan{
    border-radius: 0;
    width: 100%;
    margin-right: 0;
  }
  
  .pricingdiv ul.theplan:hover{
    transform: none;
    box-shadow: none;
  }
  
  .pricingdiv a.pricebutton{
    display: block;
  }
}

</style>

Κατηγορίες:
Σχόλια