جدول أسعار احترافي متجاوب مع جميع الشاشات

السلام عليكم متتبعي مطورون أغلب المواقع اليوم أصبحت تقدم عضويات مختلفة وخاصة تتميز بتقديم خدمات أرقى من الخدمات التي تقدمها للمستخدم العادي مثل مواقع بيع الإستضافات والمتاجر الإلكترونية وغيرها.... وهذه العضويات تكون بمقابل مادي إما عبر الدفع يوميا أو شهريا أو سنويا, وهذه المواقع تعتمد في تقديم عضوياتها للزائر على جداول تسمى جداول الأسعار Pricing tables وفي هذا الدرس أحضرت لكم جدول أسعار احترافي جدا مصمم بتقنية الفلات ومتجاوب مع كل الشاشات.
صورة توضيحة :

المعاينة

● لكن لما علينا استخدام جدول الأسعار؟

جدول الأسعار هو الأكثر تأثير على الزوار والأكثر جلبا للإنتباه فتصميمه الأنيق وألوانه المميزة وتنظيمه الكبير يجعل الزائر يقرأه دون شعور كما أنه عن طريق جدول الأسعار يمكنك تقديم عضويات مختلفة الأسعار مع مميزات كل عضوية, بكل بساطة جدول الأسعار يرفع نسبة شراء الزوار للعضويات.

● طريقة التركيب :

1- ضع هذا الكود مع ملفات CSS في موقعك.

.wrap{
 margin: 0 auto;
 width: 80%;
}
body a{
 transition:0.5s all ease;
 -webkit-transition:0.5s all ease;
 -moz-transition:0.5s all ease;
 -o-transition:0.5s all ease;
 -ms-transition:0.5s all ease;
}
.pop_up{
  border: 9px solid#485460;
  border-radius: 1em;
  -o-border-radius: 1em;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
}
/* Styles for dialog window */
#small-dialog,#small-dialog1,#small-dialog2,#small-dialog3,#small-dialog4,#small-dialog5{
 background: white;
 padding:20px;
 text-align: left;
 max-width: 650px;
 margin: 40px auto;
 position: relative;
 text-align:center;
 border: 9px solid#eee;
 border-radius: 1em;
  -o-border-radius: 1em;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
}
/*Pricing table and price blocks*/

.price-head {
  margin-bottom: 2em;
}
.price-head h1 {
text-align: center;
margin-top: 1em;
font-size: 3em;
color: #05AEA7;
}
.price-head h3 {
 color: #404042;
 font-size: 3em;
 text-decoration: none;
 font-weight: 700;
}
.pricing-grids {
  margin-bottom: 4em;
}
/*----*/
.pricing-grid1,.pricing-grid2,.pricing-grid3 {
width: 31.5%;
float: left;
text-align: center;
margin-right: 2%;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
padding: 0;
border: none;
border-radius: 0.7em;
-webkit-border-radius: 0.7em;
-o-border-radius: 0.7em;
-moz-border-radius: 0.7em;
}
 .pricing-grid3{
  margin-right: 0;
 }
.pricing-grid1:hover,.pricing-grid2:hover,.pricing-grid3:hover {
 transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
 z-index: 1;
 border: none;
}
.pricing-grid1:nth-child(3){
 margin-right:0;
}
.price-value h2 a,.price-value.two h3 a,.price-value.three h4 a{
 font-size: 1.8em;
 color:#fff;
}
.price-value,.price-value.two,.price-value.three {
 background: #512884;
 padding: 2.8em 1.8em 2em;
 border-bottom:2px solid#ffd500;
 border-top-left-radius:0.7em;
 -webkit-border-top-left-radius:0.7em;
 -o-border-top-left-radius: 0.7em;
 -moz-border-top-left-radius:0.7em;
 border-top-right-radius:0.7em;
 -webkit-border-top-right-radius:0.7em;
 -o-border-top-right-radius:0.7em;
 -moz-border-top-left-radius: 0.7em;
 position: relative;
}
.price-value.two{
 background:#2b2b33;
 border-bottom:2px solid#fd6e70;
}
.price-value.three {
 background: #04dbdd;
 border-bottom:2px solid#028f87;
}
.price-value ul,.pricing-grid1 ul,.pricing-grid2 ul,.pricing-grid3 ul{
 padding: 0;
}
.price-value ul li,.pricing-grid1,.pricing-grid2 ul li,.pricing-grid3 ul li {
 list-style: none;
}
.price-value ul li{
 list-style: none;
}
.price-value  h5 span{
color: #fbd707;
font-size: 19px;
}
.price-value lable{
color: #817d94; 
font-size: 17px;
}
.price-value.two h5 span{
 color:#fe6d72;
}
.price-value.two h5 lable{
 color:#8c8c94;
}
.price-value.three h5 span{
 color: #018f90;
}
.price-value.three h5 lable{
 color:#9CF7F8;
}
.price-value h5 {
padding: 11px 0;
}
.sale-box,.sale-box.two,.sale-box.three{
 position: absolute;
 top: 0;
 overflow: hidden;
 height: 130px;
 width: 143px;
 text-align: center;
 z-index: 0;
 right:0;
 border-top-right-radius: 0.7em;
 -o-border-top-right-radius: 0.7em;
 -moz-border-top-right-radius: 0.7em;
 -webkit-border-top-right-radius: 0.7em;
}
.sale-box span.on_sale{
font-size: 14px;
color: #444;
background: #ffd400;
text-transform: uppercase;
padding: 58px 35px 17px 40px;
width: 281px;
text-align: center;
display: block;
position: absolute;
left: -47px;
top: -41px;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
transform: rotate(40deg);
box-shadow: 3px -4px 13px 3px rgba(0,0,0,0.75);
}
.sale-box.two.sale-box span.on_sale{
 background: #fa6e6f;
}
.sale-box.three.sale-box span.on_sale{
 background:#05AEA7;
}
.pricing-grid1 ul li a,.pricing-grid2 ul li a,.pricing-grid3 ul li a{
 color: #C7C4C4;
 font-size: 15px;
 text-align: center;
 display: block;
 padding: 16px 0;
 text-decoration: none;
 font-weight: 400;
}
.pricing-grid1 ul li.whyt a,.pricing-grid2 ul li.whyt a,.pricing-grid3 ul li.whyt a{
 background:#f4f4f4;
}
.pricing-grid1:hover div.price-bg ul li a,.pricing-grid1:hover div.price-value h3 a{
 color:#512884;
}
.pricing-grid2:hover div.price-bg ul li a,.pricing-grid2:hover div.price-value h3 a{
 color:#fa6e6f;
}
.pricing-grid3:hover div.price-bg ul li a,.pricing-grid3:hover div.price-value h3 a{
 color:#04dbdd;
}
.price-bg {
 background: #fff;
}
.price-bg ul {
 padding: 0;
}
.price-bg ul li{
 list-style: none;
}
.cart1,.cart2,.cart3{
 padding: 2.7em 0em 2.7em;
 display: block;
 border-bottom: 2px solid#ffd500;
}
.cart2{
border-bottom: 2px solid#f96d70;
}
.cart3{
border-bottom: 2px solid#04dbdd;
}
.cart1 a,.cart2 a,.cart3 a{
 color: #FFF;
 font-size: 0.9em;
 font-weight: 500;
 padding: 0.8em 2em;
 text-decoration: none;
 background: #f7d30b;
 text-transform:uppercase;
 -webkit-appearance:none;
 border-radius:1em;
 -webkit-border-radius:1em;
 -o-border-radius:1em;
 -moz-border-radius:1em;
 outline: none;
}
.cart2 a{
 background:#fa6e6f;
}
.cart3 a{
 background: #04dbdd;
}
.cart1 a:hover,.cart2 a:hover,.cart3 a:hover{
 color: #2b2b33;
}
/*----*/
/*---start-pricing-tabels-----*/
.payment-online-form-left{
}
form li {
list-style: none;
}
form ul {
 padding:0;
}
.payment-online-form-left h4{
 font-size: 1.8em;
 color: #222222;
 padding: 0.5em 0;
 text-align: left; 
}
.payment-online-form-left span{
 vertical-align:sub;
 margin-right: 5px;
}
.payment-online-form-left form{
 padding:0 3%;
}
.payment-online-form-left input[type="text"]{
 padding: 1em 1em;
 color: #485460;
 width: 42%;
 margin: 0.5em 0;
 border: 1px solid;
 outline: none;
 transition: border-color 0.3s;
 -o-transition: border-color 0.3s;
 -ms-transition: border-color 0.3s;
 -moz-transition: border-color 0.3s;
 -webkit-transition: border-color 0.3s;
 float: left;
 font-size: 0.9em;
 border-color: #EEE;
 -webkit-appearance:none;
}
.payment-online-form-left input[type="text"]:hover{
 border-color:#fa6e6f;
}
.text-box-dark{
}
.text-box-light{
 background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/calender.png) no-repeat 95% 50%;
 cursor:pointer;
 position: relative;
}
.payment-online-form-left ul li:first-child input[type="text"]{
 margin-right: 5%;
}
.payment-online-form-left  input[type="text"]:active, .payment-online-form-left input[type="text"]:hover {
 border-color:#fa6e6f ;
 color:#fa6e6f; 
}
.shipping{
 width: 32px;
 height: 32px;
 display: inline-block;
 background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -111px -26px;
}
.payment{
 width: 32px;
 height: 32px;
 display: inline-block;
 background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -152px -30px;

}
.payment-date-section{
 background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/calender.png) no-repeat #fff 50%;
}
.payment-sendbtns{
 float:right;
 margin: 2em 0 1.5em;
}
.payment-sendbtns input[type="reset"]{
 background:#fa6e6f;
 padding: 0.7em 1em;
 border: none;
 color: #FFF;
 cursor: pointer;
 font-size: 1.2em;
 display: block;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 outline:none;
}
.payment-sendbtns input[type="reset"]:hover{
 color:#FFF;
 background:#464C54;
}
.payment-sendbtns input[type="submit"]{
 background:#464C54;
 padding: 0.7em 1em;
 border: none;
 color: #fff;
 cursor: pointer;
 font-size: 1.2em;
 display: block;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 -webkit-appearance:none;
 outline:none;
}
.payment-sendbtns input[type="submit"]:hover{
 color:#fff;
 background:#fa6e6f;
}
.payment-sendbtns li{
 display:inline-block;
}
.payment-type li{
 display:inline-block;
}
.payment-online-form-right{
 background: #2B2937;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -o-border-radius: 5px;
 border-radius: 5px;
 border-bottom: 4px solid #1A1822;
}
/*---start-checkbox----*/
input[type=checkbox].css-checkbox1,input[type=checkbox].css-checkbox2{
 display: none;
}
input[type=checkbox].css-checkbox1 + label.css-label1 {
 height:30px;
 width:30px;
 display: inline-block;
 line-height: 18px;
 background-repeat: no-repeat;
 background-position: 0 0;
 vertical-align: super;
 cursor: pointer;
 background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -188px -25px;
}
input[type=checkbox].css-checkbox1:checked + label.css-label1 {
 background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -215px -25px;
}
input[type=checkbox].css-checkbox2 + label.css-label2 {
 height: 30px;
 width: 30px;
 display: inline-block;
 line-height: 18px;
 background-repeat: no-repeat;
 background-position: -20px 0px;
 vertical-align: super;
 cursor: pointer;
 background:url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -218px -24px;
}
input[type=checkbox].css-checkbox2:checked + label.css-label2 {
 background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -190px -24px;

}
.visa{
 display: inline-block;
 width: 32px;
 height: 32px;
 background:url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -32px -28px;
}
.paypal{
 display: inline-block;
 width: 32px;
 height: 32px;
 background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -71px -26px;

}
.payment-online-form-right{
 float: right;
 width: 30%;
 background: #2B2937;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -o-border-radius: 5px;
 border-radius: 5px;
 border-bottom: 4px solid #1A1822;
 padding-bottom: 2em;
}
.payment-online-form-right a:hover{
 color:#1ABC9C;
}
.payment-online-form-right ul li{
 display:block;
 padding: 0.5em;
}
.payment-online-form-right ul li a{
 color:#9095AA;
}
.payment-online-form-right h4{
 color: #FFF;
 font-size: 1em;
 text-transform: uppercase;
 border-bottom: 1px solid rgba(144, 149, 170, 0.22);
 padding: 0.8em;
}
.payment-online-form-right ul {
 padding: 0px 1em;
}
.payment-online-form-right h5{
 color: #FFF;
 padding: 0.5em 0.8em 0.4em;
 font-size: 1em;
}
.payment-type {
 border-top: 1px solid rgba(144, 149, 170, 0.22);
 margin-top: 3%;
 text-align: left;
}
input[type=checkbox].css-checkbox3,input[type=checkbox].css-checkbox4,input[type=checkbox].css-checkbox5,input[type=checkbox].css-checkbox6{
 display: none;
}
input[type=checkbox].css-checkbox3 + label.css-label3 {
 height: 22px;
 width: 21px;
 display: inline-block;
 line-height: 18px;
 background-repeat: no-repeat;
 background-position: 0 -38px;
 vertical-align: middle;
 cursor: pointer;
 background-image: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/filter-bg.png);
}
input[type=checkbox].css-checkbox3:checked + label.css-label3 {
 background-position: 0px 0px;
}
input[type=checkbox].css-checkbox4 + label.css-label4 {
 height: 22px;
 width: 21px;
 display: inline-block;
 line-height: 18px;
 background-repeat: no-repeat;
 background-position: 0 0px;
 vertical-align: middle;
 cursor: pointer;
 background-image: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/filter-bg.png);
}
input[type=checkbox].css-checkbox4:checked + label.css-label4 {
 background-position: 0px -38px;
}
input[type=checkbox].css-checkbox5 + label.css-label5 {
 height: 22px;
 width: 21px;
 display: inline-block;
 line-height: 18px;
 background-repeat: no-repeat;
 background-position: 0 -38px;
 vertical-align: middle;
 cursor: pointer;
 background-image: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/filter-bg.png);
}
input[type=checkbox].css-checkbox5:checked + label.css-label5 {
 background-position: 0px 0px;
}
input[type=checkbox].css-checkbox6 + label.css-label6 {
 height: 22px;
 width: 21px;
 display: inline-block;
 line-height: 18px;
 background-repeat: no-repeat;
 background-position: 0 0px;
 vertical-align: middle;
 cursor: pointer;
 background-image: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/filter-bg.png);
}
input[type=checkbox].css-checkbox6:checked + label.css-label6 {
 background-position: 0px -38px;
}
/*-----*/
/**

/**
 * Fade-zoom animation for first dialog
 */

/* start state */
.my-mfp-zoom-in #small-dialog {
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
/* animate in */
.my-mfp-zoom-in.mfp-ready #small-dialog {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/* animate out */
.my-mfp-zoom-in.mfp-removing #small-dialog {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
}
/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
/**
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }
.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }
.mfp-content iframe{
 width:100%;
 min-height:500px;
}
.mfp-preloader {
  color: #cccccc;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }

.mfp-preloader a {
  color: #cccccc; }

.mfp-preloader a:hover {
  color: white; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  border: 0;
   background:#EEEEEE;
  -webkit-appearance: none;
  display: block;
  padding: 0;
  z-index: 1046; }
button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
 right: 0px;
 top:0px;
  text-decoration: none;
  text-align: center;
  padding: 0 0 18px 10px;
  color: white;
  font-style: normal;
  font-size: 28px;
  outline:none;
  border-radius: 4px;
  -o-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
 }
  .mfp-close:hover, .mfp-close:focus {
    opacity: 1; }

.mfp-close-btn-in .mfp-close {
  color: #333333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: white;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; 
}
.image-top img{
 width:100%;
}
.image-top p{
 text-align: justify;
 padding:2% 0;
 font-size:15px;
}
.image-top h3 {
 font-size: 1.5em;
 font-weight: 500;
 margin: 16px 0px 0px 0px;
 color:#3F4244;
}

.footer {
 padding: 1em 0;
 text-align: center;
}
.footer p {
 font-size:0.9em;
 color:#fa6e6f;
 font-weight: 400;
 text-transform: uppercase;
}
.footer p a{
 color:#0fc7c9;
}
.footer p a:hover{
 color: #fa6e6f;
}
/*--------------*/
@media(max-width:1366px){
 .pricing-grid1 ul li a, .pricing-grid2 ul li a, .pricing-grid3 ul li a {
 font-size: 17px;
 }
}
@media(max-width:1024px){
 .pricing-grid1 ul li a, .pricing-grid2 ul li a, .pricing-grid3 ul li a {
 font-size: 15px;
 }
 .price-value, .price-value.two, .price-value.three {
 padding: 2em 0 1em 0;
 }
 .price-value h2 a, .price-value.two h3 a, .price-value.three h4 a {
 font-size: 1.6em;
 }
 .price-head h1 {
 margin-top: 1em;
 font-size: 2.6em;
 }
 .pricing-grids {
 margin: 8% 0;
 }
}
@media(max-width:768px){
 .pricing-grid1 h3 a, .pricing-grid2 h3 a, .pricing-grid3 h3 a {
 padding: 0.4em 1em;
 font-size: 0.7em;
 }
 .pricing-grid1, .pricing-grid2, .pricing-grid3 {
 width: 55%;
 float: none;
 text-align: center;
 margin: 1em auto;
 }
 .price-head h1 {
 margin-top: 1em;
 font-size: 2.4em;
 }
 .cart1, .cart2, .cart3 {
 padding: 2em 0em 2em;
 }
}
@media(max-width:640px){
 .pricing-grid1 ul li a, .pricing-grid2 ul li a, .pricing-grid3 ul li a {
 font-size: 15px;
 }
 .pricing-grid1, .pricing-grid2, .pricing-grid3 {
 width: 65%;
 float: none;
 text-align: center;
 margin: 1em auto;
 }
 .pricing-grid1 ul li a, .pricing-grid2 ul li a, .pricing-grid3 ul li a {
 font-size: 15px;
 padding: 13px 0;
 }
 .payment-online-form-left input[type="text"] {
 padding: 1em 1em;
 width: 93%;
 }
 .payment-sendbtns {
 float: none;
 margin: 2em 0 1.5em;
 }
}
@media(max-width:480px){
 .pricing-grid1, .pricing-grid2, .pricing-grid3 {
 width: 81%;
 }
 .price-head h1 {
 margin-top: 1em;
 font-size: 2.1em;
 }
 .payment-online-form-left input[type="text"] {
 padding: 1em 1em;
 width: 91%;
 }
 .pop_up {
 border: 7px solid#485460;
 }
}
@media(max-width:320px){
 .pricing-grid1, .pricing-grid2, .pricing-grid3 {
 width: 100%;
 margin-right: 0;
 }
 .price-value h2 a, .price-value.two h3 a, .price-value.three h4 a {
 font-size: 1.2em;
 }
 .price-value h5 span,.price-value lable {
 font-size: 16px;
 }
 .price-head h1 {
 margin-top: 1em;
 font-size: 1.5em;
 }
 .payment-online-form-left input[type="text"] {
 padding: 0.8em 0.8em;
 width: 86%;
 font-size: 13px;
 margin: 3px;
 }
 .pop_up {
 border: 4px solid#485460;
 }
 .payment-online-form-left h4 {
 font-size: 1.4em;
 }
 .payment {
 background: url(http://preview.w3layouts.com/demos/flat_pricing_tables_design/web/images/icon.png) no-repeat -152px -21px;
 }
 .footer p {
 font-size: 0.9em;
 line-height: 1.5em;
 }
 ul.payment-sendbtns li {
 margin-top: 1em;
 }

}

2- ضع هذا الكود مع ملفات HTML في موقعك.

<!--start-pricing-tablel-->
  <script type="text/javascript" src="https://tinyfeet.googlecode.com/svn-history/r220/trunk/trunk/src/static/js/modernizr.custom.53451.js"></script> 

 <script>
      $(document).ready(function() {
      $('.popup-with-zoom-anim').magnificPopup({
       type: 'inline',
       fixedContentPos: false,
       fixedBgPos: true,
       overflowY: 'auto',
       closeBtnInside: true,
       preloader: false,
       midClick: true,
       removalDelay: 300,
       mainClass: 'my-mfp-zoom-in'
      });
                      
      });
    </script>       
 <div class="pricing-plans">
      <div class="wrap">
       <div class="price-head">
        <h1>جدول أسعار بتصميم الفلات</h1>
       </div>
        

      <div class="pricing-grids">
      <div class="pricing-grid1">
       <div class="price-value">
         <h2><a href="#"> أساسي</a></h2>
         <h5><span>$ 19.99</span><lable> / للشهر</lable></h5>
         <div class="sale-box">
       <span class="on_sale title_shop">جديد</span>
       </div>

       </div>
       <div class="price-bg">
       <ul>
        <li class="whyt"><a href="#">5GB مساحة القرص </a></li>
        <li><a href="#">10 أسماء نطاقات</a></li>
        <li class="whyt"><a href="#">5 بريد إلكتروني </a></li>
        <li><a href="#">50GB عرض النطاق الترددي الشهري </a></li>
        <li class="whyt"><a href="#">دعم كامل</a></li>
       </ul>
       <div class="cart1">
        <a class="popup-with-zoom-anim" href="#small-dialog">شراء</a>
       </div>
       </div>
      </div>
      <div class="pricing-grid2">
       <div class="price-value two">
        <h3><a href="#">قياسي</a></h3>
        <h5><span>$ 29.99</span><lable> / للشهر</lable></h5>
        <div class="sale-box two">
       <span class="on_sale title_shop">جديد</span>
       </div>

       </div>
       <div class="price-bg">
       <ul>
        <li class="whyt"><a href="#">10GB مساحة القرص </a></li>
        <li><a href="#">20 أسماء نطاقات</a></li>
        <li class="whyt"><a href="#">10 بريد إلكتروني </a></li>
        <li><a href="#">100GB عرض النطاق الترددي الشهري </a></li>
        <li class="whyt"><a href="#">دعم كامل</a></li>
       </ul>
       <div class="cart2">
        <a class="popup-with-zoom-anim" href="#small-dialog">شراء</a>
       </div>
       </div>
      </div>
      <div class="pricing-grid3">
       <div class="price-value three">
        <h4><a href="#">المفضل</a></h4>
        <h5><span>$ 49.99</span><lable> / للشهر</lable></h5>
        <div class="sale-box three">
       <span class="on_sale title_shop">جديد</span>
       </div>

       </div>
       <div class="price-bg">
       <ul>
        <li class="whyt"><a href="#">50GB مساحة القرص </a></li>
        <li><a href="#">50 أسماء نطاقات</a></li>
        <li class="whyt"><a href="#">20 بريد إلكتروني </a></li>
        <li><a href="#">300GB عرض النطاق الترددي الشهري </a></li>
        <li class="whyt"><a href="#">دعم كامل</a></li>
       </ul>
       <div class="cart3">
        <a class="popup-with-zoom-anim" href="#small-dialog">شراء</a>
       </div>
       </div>
      </div>
       <div class="clear"> </div>
       <!--pop-up-grid-->
         <div id="small-dialog" class="mfp-hide">
         <div class="pop_up">
           <div class="payment-online-form-left">
           <form>
            <h4><span class="shipping"> </span>شراء</h4>
            <ul>
             <li><input class="text-box-dark" type="text" value="Frist Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Frist Name';}"/></li>
             <li><input class="text-box-dark" type="text" value="Last Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Last Name';}"/></li>
            </ul>
            <ul>
             <li><input class="text-box-dark" type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"/></li>
             <li><input class="text-box-dark" type="text" value="Company Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Company Name';}"/></li>
            </ul>
            <ul>
             <li><input class="text-box-dark" type="text" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}"/></li>
             <li><input class="text-box-dark" type="text" value="Address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Address';}"/></li>
             <div class="clear"> </div>
            </ul>
            <div class="clear"> </div>
           <ul class="payment-type">
            <h4><span class="payment"> </span> Payments</h4>
            <li><span class="col_checkbox">
                                                  <input id="3" class="css-checkbox1" type="checkbox"/>
             <label for="3" name="demo_lbl_1" class="css-label1"> </label>
             <a class="visa" href="#"> </a>
             </span>
             
            </li>
            <li>
             <span class="col_checkbox">
                                                      <input id="4" class="css-checkbox2" type="checkbox"/>
              <label for="4" name="demo_lbl_2" class="css-label2"> </label>
              <a class="paypal" href="#"> </a>
             </span>
            </li>
            <div class="clear"> </div>
           </ul>
            <ul>
             <li><input class="text-box-dark" type="text" value="Card Number" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Card Number';}"/></li>
             <li><input class="text-box-dark" type="text" value="Name on card" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name on card';}"/></li>
             <div class="clear"> </div>
            </ul>
            <ul>
             <li><input class="text-box-light hasDatepicker" type="text" id="datepicker" value="Expiration Date" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Expiration Date';}"/><em class="pay-date"/></li>
             <li><input class="text-box-dark" type="text" value="Security Code" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Security Code';}"/></li>
             <div class="clear"> </div>
            </ul>
            <ul class="payment-sendbtns">
                                                  <li><input type="reset" value="Cancel"/></li>
                                                  <li><input type="submit" value="Process order"/></li>
            </ul>
            <div class="clear"> </div>
           </form>
          </div>
           </div>
        </div>
        <!--pop-up-grid-->
       </div>
      <div class="clear"> </div>

     </div>
    
    </div>
 <!--//End-pricingplans-->

هكذا تكون قد أضفت جدول الأسعار لموقعك يكفيك التعديل على العضويات ومميزاتها.

إلى هنا إنتهى درسنا الذي قدمنا لكم في جدول أسعار احترافي مصمم بتقنية الفلات ومتجاوب مع جميع الشاشات لا تنسو مشاركة الموضوع وأي تساؤل ضعوه في تعليق