price table- جدول الاسعار

HTML & CSS3

ان من الشائع في يومنا هذا هو طريقة عمل جدول الاسعار والذي يكاد يكون موجود بصورة فعالة خصوصاً في مواقع
الاستضافة . فأن هذا الكود يوفر عليك عناء تصميمة فيمكنك اضافتة الى قالبك بصورة مباشرة وهو يدعم التصميم
 المتجاوب ومصمم بأسلوب التصميم المستطح

Download Now
  
  • Premium
  • $30
  • Perfect for those getting started with our app.
  • 15 Projects
  • 5GB Storage
  • Unlimited Users
  • No Time Tracking
  • Enchaned Security
  • Buy Now
   
  @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);

body{ 
  background-image: url(../img/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;  
}

header {
	margin: 10px 10px;
}


header h1{
  font-family: Arial, Helvetica, sans-serif;
  color: rgb( 195, 249, 210 );
  font-weight: bold;
  text-align: center;
  text-shadow: 4px 5px 1px rgba( 0, 0, 0 ,.1);
  font-style: italic;
 
}

.container{
	max-width: 960px;	
}

.pric_table {  

}

.pric_table ul { 
	list-style:none; 
	position: relative;
	font-family: 'Lato', sans-serif;
	border:1px solid rgba(255,255,255,.2);
	padding:15px;
	text-align:center;
	background-color:rgba(255,255,255,.1);
	webkit-transition: all .5s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all .5s ease-in-out;

}

.pric_table ul:hover { 
	border:1px solid rgba(255,255,255,.4);
	background-color:rgba(255,255,255,.2);
	-webkit-transform: scale(1.1);
  	-moz-transform: scale(1.1);
  	-o-transform: scale(1.1);	
	cursor:pointer;
}
.pric_table ul li {  
	padding:10px 0;
}
.pric_table ul li:first-child { 
	font-size:23px;
	font-weight:300;
	color:rgba(255,255,255,.9);
}
.pric_table ul li:nth-child(2) { 

	font-size:23px;
	font-weight:200;
	color:rgba(255,255,255,.9);
	margin: 20px 20px;
}

.pric_table ul li:nth-child(2) a { 

	font-size:23px;
	font-weight:300;
	color:rgba(255,255,255,1);
	background-color:rgba(28,178,71,.9);
	padding: 20px 15px;
	border-radius:100px;
	-moz-border-radius:4px;
	-webkit-border-radius:100px;
	text-decoration: none;
	border:1px solid rgba(255,255,255,.4);
}


.pric_table ul li:nth-child(3) { 
	font-size:14px;
	font-weight:300;
	color:rgba(255,255,255,.8);
	border-bottom: 1px solid rgba(255,255,255,.4);

}
.pric_table ul li:nth-child(n+4) { 
	font-size:16px;
	font-weight:300;
	color:rgba(255,255,255,.8);
	border-bottom: 1px dashed rgba(255,255,255,.4);
}

.pric_table ul li:nth-child(n+8) {
	border-bottom:none;
	padding: 5px 5px;

	}
.pric_table ul li:last-child a { 
	border:1px solid rgba(255,255,255,.4);
	background-color:rgba(28,178,71,.9);
	padding:10px;
	margin:5px 0;
	font-style:italic;
	display:block;
	text-decoration: none;
	color:rgba(255,255,255,1);
	
}

@media only screen and (max-width:768px){
.Space{
	margin-bottom: 6% !important
    }
}

@media only screen and (max-width:480px){
.Space{
	margin-bottom: 10% !important
    }
}
  • HTML-CSS
  • price table