<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="membership-container"> <div class="membership-container-header"> <div class="membership-container-type"> <p>SENIOR MEDLEMSKAB</p> </div> </div> <div class="membership-container-membership"> <h3>LILLE PAKKE</h3> <div class="membership-container-price-information"> <span class="membership-container-valuta"><h3>^DKK</span> <span class="membership-container-price">1.500</span> / <span class="membership-container-payment-period">årligt <br> (ca. 4.00 DKK månedligt)</h3></span> </div> <div class="membership-container-benefits"> <div class="membership-container-benefits-row"><p><span class="glyphicon glyphicon-ok" aria-hidden="true"> </span> 10 FILM</p></div> <div class="membership-container-benefits-row"><p><span class="glyphicon glyphicon-ok" aria-hidden="true"> </span> 10 FILM</p></div> </div> </div>

body { padding-top: 50px; background-color: #a8a8a8; color: white; } .membership-container { margin: auto; background-color: rgb(243, 243, 243); max-width: 20%; border-radius: 10px; transition: 0.2s ease; /* vendorless fallback */ -o-transition: 0.2s ease; /* opera */ -ms-transition: 0.2s ease; /* IE 10 */ -moz-transition: 0.2s ease; /* Firefox */ -webkit-transition: 0.2s ease; /*safari and chrome */ } .membership-container:hover { box-shadow: 0px 0px 10px rgba(0,0,0, .5); transition: 0.2s ease; /* vendorless fallback */ -o-transition: 0.2s ease; /* opera */ -ms-transition: 0.2s ease; /* IE 10 */ -moz-transition: 0.2s ease; /* Firefox */ -webkit-transition: 0.2s ease; /*safari and chrome */ } .membership-container .membership-container-type { padding: 5px; } .membership-container .membership-container-header { background-color: #54a954; border-radius: 10px 10px 0 0; } .membership-container .membership-container-header p { text-align: center; color: white; font-weight: bold; margin: 0; } .membership-container .membership-container-membership { background-color: #56bb56; padding-top: 1px; } .membership-container .membership-container-membership h3 { text-align: center; color: white; font-weight: bold; } .membership-container .membership-container-price-information { background-color: #54a954; padding: 5px; box-shadow: 0px 0px 10px rgba(0,0,0, .05) inset; } .membership-container .membership-container-payment-period { font-size: 12px; } .membership-container .membership-container-benefits-row { padding: 5px; } .membership-container .membership-container-benefits-row p{ text-align: center; } .membership-container .membership-container-benefits-row:nth-child(odd) { transition: 0.5s ease; /* vendorless fallback */ -o-transition: 0.5s ease; /* opera */ -ms-transition: 0.5s ease; /* IE 10 */ -moz-transition: 0.5s ease; /* Firefox */ -webkit-transition: 0.5s ease; /*safari and chrome */ } .membership-container .membership-container-benefits-row:hover:nth-child(odd) { background-color: #4e9a4e; box-shadow: 0px 0px 30px rgba(0,0,0, .05) inset; transition: 0.5s ease; /* vendorless fallback */ -o-transition: 0.5s ease; /* opera */ -ms-transition: 0.5s ease; /* IE 10 */ -moz-transition: 0.5s ease; /* Firefox */ -webkit-transition: 0.5s ease; /*safari and chrome */ } .membership-container .membership-container-benefits-row:nth-child(even) { background-color: #4e9a4e; }