Code Bảng Giá Hosting này bạn có thể sử dụng ngay trong dự án của mình. Nếu bạn không làm về dịch vụ Hosting – Domain, bạn có thể tùy biến và thay đổi nội dung thành bất kỳ dịch vụ nào khác.
Code Bảng Giá Hosting với HTML và CSS
Code bảng giá Hosting sử dụng HTML – CSS. Chính vì vậy bạn có thể sử dụng ở bất kỳ nền tảng hay hệ thống website nào cũng được. Bạn có thể dùng cho các web tĩnh, Landing Page hay WordPress đều được.
Bộ code này không có hiệu ứng gì cả, chỉ là phong cách hiển thị hiện đại và một chút ở button. Ngay bên dưới là cách bộ code này hiển thị, mời các bạn cùng tham khảo.
See the Pen
Self Code Table Price Hositng with HTML and CSS by Lại Văn Đức (@laivanduc)
on CodePen.
Xem demo bạn sẽ thấy mặc định các thông tin chỉ hiển thị 4 dòng. Tuy nhiên, bạn có thể thêm dòng trong Code HTML dễ dàng ở thẻ <li>.
Code Bảng Giá Hosting với HTML
Ngay bên dưới là Code HTML cho sản phẩm này.
<div id="pricing-table" class="clear"> <div class="plan"> <h3>Doanh Nghiệp<span>$59</span></h3> <a class="signup" href="#">Đăng Ký</a> <ul> <li><b>10GB</b> Dung Lượng</li> <li><b>100GB</b> Băng Thông</li> <li><b>20</b> Tài Khoản Email</li> <li><b>Không giới hạn</b> subdomains</li> </ul> </div > <div class="plan" id="most-popular"> <h3>Chuyên Nghiệp<span>$29</span></h3> <a class="signup" href="#">Đăng Ký</a> <ul> <li><b>5GB</b> Dung Lượng</li> <li><b>50GB</b> Băng Thông</li> <li><b>10</b> Tài Khoản Email</li> <li><b>Không giới hạn</b> subdomains</li> </ul> </div> <div class="plan"> <h3>Tiêu Chuẩn<span>$17</span></h3> <a class="signup" href="#">Đăng Ký</a> <ul> <li><b>3GB</b> Dung Lượng</li> <li><b>25GB</b> Băng Thông</li> <li><b>5</b> Tài Khoản Email</li> <li><b>Không giới hạn</b> subdomains</li> </ul> </div> <div class="plan"> <h3>Cơ Bản<span>$9</span></h3> <a class="signup" href="#">Đăng Ký</a> <ul> <li><b>1GB</b> Dung Lượng</li> <li><b>10GB</b> Băng Thông</li> <li><b>2</b> Tài Khoản Email</li> <li><b>Không giới hạn</b> subdomains</li> </ul> </div> </div>
Như đã nói bên trên, các bạn có thể thêm thông tin chi tiết về cac dòng bằng cách thêm nội dung ở thẻ <li>.
Code CSS cho bảng giá Hosting
Tiếp theo là Code CSS. Ngay bên dưới là tất cả những đoạn CSS giúp cho sản phẩm này hoàn thiện.
body {
background: #ffffff
}
#about {
text-align: center;
color: #fafafa;
font: tahoma;
}
#about a {
color: #777;
}
/* --------------- */
#pricing-table {
margin: 100px auto 50px auto;
text-align: center;
width: 892px; /* total computed width = 222 x 3 + 226 */
}
#pricing-table .plan {
font: 12px 'tahoma', Arial;
text-shadow: 0 1px rgba(255,255,255,.8);
background: #fff;
border: 1px solid #ddd;
color: #333;
padding: 20px;
width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */
float: left;
position: relative;
}
#pricing-table #most-popular {
z-index: 2;
top: -13px;
border-width: 3px;
padding: 30px 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
-webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
}
#pricing-table .plan:nth-child(1) {
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#pricing-table .plan:nth-child(4) {
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
/* --------------- */
#pricing-table h3 {
font-size: 20px;
font-weight: normal;
padding: 20px;
margin: -20px -20px 50px -20px;
background-color: #eee;
background-image: -moz-linear-gradient(#fff,#eee);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(#fff, #eee);
background-image: -o-linear-gradient(#fff, #eee);
background-image: -ms-linear-gradient(#fff, #eee);
background-image: linear-gradient(#fff, #eee);
}
#pricing-table #most-popular h3 {
background-color: #ddd;
background-image: -moz-linear-gradient(#eee,#ddd);
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
background-image: -webkit-linear-gradient(#eee, #ddd);
background-image: -o-linear-gradient(#eee, #ddd);
background-image: -ms-linear-gradient(#eee, #ddd);
background-image: linear-gradient(#eee, #ddd);
margin-top: -30px;
padding-top: 30px;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#pricing-table .plan:nth-child(1) h3 {
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
}
#pricing-table .plan:nth-child(4) h3 {
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
}
#pricing-table h3 span {
display: block;
font: bold 25px/100px Georgia, Serif;
color: #777;
background: #fff;
border: 5px solid #fff;
height: 100px;
width: 100px;
margin: 10px auto -65px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}
/* --------------- */
#pricing-table ul {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
#pricing-table li {
border-top: 1px solid #ddd;
padding: 10px 0;
}
/* --------------- */
#pricing-table .signup {
position: relative;
padding: 8px 20px;
margin: 20px 0 0 0;
color: #fff;
font: bold 14px Arial, Helvetica;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
background-color: #72ce3f;
background-image: -moz-linear-gradient(#72ce3f, #62bc30);
background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));
background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
background-image: -o-linear-gradient(#72ce3f, #62bc30);
background-image: -ms-linear-gradient(#72ce3f, #62bc30);
background-image: linear-gradient(#72ce3f, #62bc30);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}
#pricing-table .signup:hover {
background-color: #62bc30;
background-image: -moz-linear-gradient(#62bc30, #72ce3f);
background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));
background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
background-image: -o-linear-gradient(#62bc30, #72ce3f);
background-image: -ms-linear-gradient(#62bc30, #72ce3f);
background-image: linear-gradient(#62bc30, #72ce3f);
}
#pricing-table .signup:active, #pricing-table .signup:focus {
background: #62bc30;
top: 2px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
}
/* --------------- */
.clear:before, .clear:after {
content:"";
display:table
}
.clear:after {
clear:both
}
.clear {
zoom:1
}
Thế Thôi
Bài viết này Lại Văn Đức chia sẻ đến các bạn bộ Code Bảng Giá Hosting với HTML và CSS. Bạn có thể tùy chỉnh theo cách riêng của mình, có thể thay đổi nội dung, màu sắc và tất cả những hiệu ứng CSS.
Nếu bạn có bất kỳ thắc mắc nào, hãy để lại bình luận bên dưới bài viết này. Chúc bạn thành công.
Bài viết liên quan:
