Shortcode HTML đẹp dành cho thiết kế nội dung

LongAnIT 8/27/2019
Shortcode HTML đẹp dành cho thiết kế nội dung
Shortcode HTML đẹp dành cho thiết kế nội dung


1. Button Thanh toán hoặc Chuyển Khoản

USD $15.00 Thanh toán bằng Paypal
250.000VNĐ Chuyển khoản ngân hàng

Code sử dụng
<div id="box-payment">
<div id="box-paypal">
<div class="cover-paypal">
<div class="icon-paypal">
<span class="coc"></span></div>
<div class="title-paypal">
<span class="app-title">USD $15.00</span>
<span class="label-paypal"><span class="tag-os"></span>Thanh toán bằng Paypal</span></div>
</div>
<div class="link-paypal">
<span class="item_price"><a href="https://draft.blogger.com/blogger.g?blogID=3789953926327582762#" target="_blank" title="Buy now"><span class="home-paypal">USD 9.00</span><span class="post-paypal">Thanh Toán</span></a></span></div>
</div>
<div id="box-bank">
<div class="bank-cover">
<div class="icon-bank">
<span class="coc"></span></div>
<div class="bank-title">
<span class="app-title">250.000VNĐ</span>
<span class="bank-grup"><span class="tag-os"></span>Chuyển khoản ngân hàng</span></div>
</div>
<div class="link-bank">
<a href="https://draft.blogger.com/blogger.g?blogID=3789953926327582762#" target="_blank" title="Buy now">Thanh Toán</a></div>
</div>
</div>
<style>
#box-payment{margin:0;-webkit-box-shadow:0 4px 13px -6px rgba(110,110,110,0);-moz-box-shadow:0 4px 13px -6px rgba(185,185,185,0.45);box-shadow:0 4px 13px -6px rgba(185,185,185,0.45)}
#box-bank,#box-paypal{box-sizing:border-box}
#box-bank,#box-bank .bank-cover .bank-title .tag-os,#box-paypal{overflow:hidden;vertical-align:middle}
#box-paypal,#box-paypal .cover-paypal,#box-paypal .cover-paypal .title-paypal,#box-bank,#box-bank .bank-cover,#box-bank .bank-cover .bank-title{position:relative}
#box-paypal,#box-paypal .cover-paypal,#box-paypal .cover-paypal .icon-paypal span,#box-paypal .cover-paypal .title-paypal,#box-paypal .label-paypal,#box-paypal .link-paypal a{display:block}
#box-paypal .cover-paypal{float:left}
#box-paypal{padding:15px;margin:0;background:#dac8de}
#box-paypal .cover-paypal .icon-paypal,#box-bank .bank-cover .icon-bank{width:65px;height:65px;margin-right:20px;float:left;position:relative}
#box-paypal .cover-paypal .icon-paypal span,#box-bank .bank-cover .icon-bank span{background-size:100%;background-repeat:no-repeat;height:100%}
#box-paypal .cover-paypal .title-paypal,#box-bank .bank-cover .bank-title{vertical-align:middle;float:left;margin-top:5px}
#box-paypal .cover-paypal .title-paypal .label-paypal,#box-bank .bank-cover .bank-title .bank-grup{font-size:17px}
#box-paypal .cover-paypal .title-paypal .app-title{font-weight:700;color:#252525;font-size:133%}
#box-paypal .label-paypal a,#box-bank .bank-grup a{color:#666;font-size:12px}
#box-paypal .cover-paypal .title-paypal .tag-os{overflow:hidden;display:inline-block;vertical-align:middle;width:10px;background:#2db552;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;margin-right:5px}
#box-paypal .link-paypal{position:absolute;top:20%;padding:15px 40px;-webkit-border-top-left-radius:50px;-webkit-border-bottom-left-radius:50px;-moz-border-radius-topleft:50px;-moz-border-radius-bottomleft:50px;border-top-left-radius:50px;border-bottom-left-radius:50px;right:0;background:rgba(255,193,7,1);background:-moz-linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);background:-webkit-linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);background:-o-linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);background:-ms-linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);background:linear-gradient(45deg,rgb(250,150,103) 0,rgb(249,209,88) 100%);vertical-align:middle}
#box-paypal .link-paypal a{color:#fff}
.icon-paypal span.coc{background-image:url(https://1.bp.blogspot.com/-cBowlfjBRXo/XLGI-YJ7uEI/AAAAAAAAAIg/1FHgUQaXSJgVilohNPelpOLYJxTjDzPCACLcBGAs/s320/pay.png)}
#box-bank,#box-bank .bank-cover,#box-bank .bank-cover .bank-title,#box-bank .bank-cover .icon-bank span,#box-bank .bank-grup,#box-bank .link-bank a{display:block}
#box-bank .bank-cover{float:left}
#box-bank{padding:15px;margin:0;color:#000;background:#fff}
#box-bank .bank-cover .bank-title .app-title{font-weight:700;font-size:133%}
#box-bank .bank-cover .bank-title .tag-os{display:inline-block;width:10px;background:#2db552;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;margin-right:5px}
#box-bank .link-bank{position:absolute;top:20%;padding:15px 40px;-webkit-border-top-left-radius:50px;-webkit-border-bottom-left-radius:50px;-moz-border-radius-topleft:50px;-moz-border-radius-bottomleft:50px;border-top-left-radius:50px;border-bottom-left-radius:50px;right:0;background:#d481ff;background:-moz-linear-gradient(to right,#d481ff 0,#05f1e1 100%);background:-webkit-linear-gradient(to right,#d481ff 0,#05f1e1 100%);background:-o-linear-gradient(to right,#d481ff 0,#05f1e1 100%);background:-ms-linear-gradient(to right,#d481ff 0,#05f1e1 100%);background:linear-gradient(to right,#d481ff 0,#05f1e1 100%);vertical-align:middle}
#box-bank .link-bank a{color:#fff}
span.home-paypal{display:none}
.icon-bank span.coc{background-image:url(https://4.bp.blogspot.com/-_U1DUMM4rhQ/XLGHEbAayPI/AAAAAAAAAIM/IItPhixWuZQ0_hACgbI4DGQ4oiWE-OpqwCPcBGAYYCw/s320/bank.png)}
</style>

2. Bảng 3 cột

MỘT

  • Mục #1
  • Mục #2
  • Mục #3
  • Mục #4
  • Mục #5
  • Mục #6

KHÔNG

SỬ DỤNG

Code sử dụng
<div class="table_price">
<div class="plan featured1">
<div class="headtitle">
<h4 class="plan-title">
MỘT
</h4>
</div>
<ul class="plan-features">
<li>Mục #1</li>
<li>Mục #2</li>
<li>Mục #3</li>
<li>Mục #4</li>
<li>Mục #5</li>
<li>Mục #6</li>
</ul>
</div>
<div class="plan featured2">
<div class="headtitle">
<h4 class="plan-title">
KHÔNG</h4>
</div>
<ul class="plan-features">
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
</ul>
<div class="plan-select">
SỬ DỤNG</div>
</div>
<div class="plan featured">
<div class="headtitle">
<h4 class="plan-title">
CÓ</h4>
</div>
<ul class="plan-features">
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
<li><span class="icon-list"></span></li>
</ul>
<div class="plan-select">
SỬ DỤNG</div>
</div>
</div>
<style>
.table_price{color:#000;text-align:center;font-size:16px;width:100%;display:-webkit-box;margin:15px 0 0}
.table_price .plan{margin:0;width:30%;position:relative;float:left;overflow:hidden}
.table_price .featured,.table_price .featured2{-webkit-box-shadow:-2px 6px 24px -8px rgba(0,0,0,0.55);-moz-box-shadow:-2px 6px 24px -8px rgba(0,0,0,0.55);box-shadow:-2px 6px 24px -8px rgba(0,0,0,0.55);z-index:1}
.table_price *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .25s ease-out;transition:all .25s ease-out}
.table_price .headtitle{position:relative;color:#fff;padding:10px 0}
.table_price .featured1 .headtitle:after{width:0;height:0;border-style:solid;border-width:24px 161px 0;border-color:#3aadc3 transparent transparent;content:'';position:absolute;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.table_price .featured .headtitle:after,.table_price .featured2 .headtitle:after{width:0;height:0;border-style:solid;border-width:24px 123px 0;content:'';position:absolute;top:100%;left:50%}
.table_price .featured2 .headtitle:after{border-color:#38be85 transparent transparent;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.table_price .featured .headtitle:after{border-color:#f97c59 transparent transparent;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.table_price .featured1 .plan-title,.table_price .featured2 .plan-title{top:0;margin:8px 0;text-transform:uppercase;font-weight:700;letter-spacing:1px;font-size:20px}
.table_price .featured .plan-title{top:0;margin:16px 0;text-transform:uppercase;font-weight:700;font-size:26px;letter-spacing:1px}
.table_price .plan-cost{margin:8px 0 0}
.table_price .plan-price{font-weight:800;font-size:2em;color:#fff}
.table_price .plan-type{opacity:.8;color:#fff;font-size:.7em;text-transform:uppercase}
.table_price .plan-features{padding:30px 0 0;margin:0;list-style:none;font-size:18px;color:#517177;background:#fff}
.table_price .featured .plan-features li,.table_price .featured1 .plan-features li,.table_price .featured2 .plan-features li{padding:15px 5%;font-weight:500}
.table_price .plan-features li:nth-child(even){background:rgba(0,0,0,.08)}
.table_price .plan-features i{margin-right:8px;opacity:.4}
.table_price .plan-select{padding:15px 5px;background:linear-gradient(to right,rgba(201,130,237,1) 0,rgba(18,206,106,1) 100%);color:#fff;font-weight:400;font-size:18px}
.table_price .featured2 .plan-features li span:before{content:url(https://4.bp.blogspot.com/-VlKTf-UNl2c/XK3zzFNT_BI/AAAAAAAAAGM/YWfZrht9Yq8WXcO75Wno6JjKoQ6RFGpbgCLcBGAs/s1600/as.png);display:block;width:14px;text-align:center;line-height:14px;margin:0 auto;font-size:20px;height:14px;background:#74d2aa;color:#fff;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;padding:7px}
.table_price .featured .plan-features li span:before{content:url(https://4.bp.blogspot.com/-rJwM9QUD1k8/XK3x3ZlhbBI/AAAAAAAAAFw/DB62i6GeugMoHECaUkK2ZTfejIsIr2dUwCLcBGAs/s1600/benar.png);background-size:28px 28px;display:block;width:14px;text-align:center;line-height:14px;margin:0 auto;font-size:20px;height:14px;background:#fbca79;color:#fff;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;padding:7px}
.table_price .plan-select a{color:#fff;text-decoration:none;padding:0;font-size:.75em;font-weight:600;text-transform:uppercase;display:inline-block}
.table_price .featured1{width:40%}
.table_price .featured1 .headtitle{background:linear-gradient(to right,rgb(98,104,178) 0,rgba(21,234,209,1) 100%)}
.table_price .featured1 .plan-select{padding:30px 20px}
.table_price .featured1 .plan-select a{background-color:#222f3d}
.table_price .featured2{background:#fff}
.table_price .featured2 .headtitle{background:linear-gradient(to right,rgba(201,130,237,1) 0,rgba(18,206,106,1) 100%)}
.table_price .featured{margin-top:-16px;background:#fff}
.table_price .featured .headtitle{background:linear-gradient(to right,rgba(252,241,138,1) 0,rgba(247,56,60,1) 100%)}
.table_price .featured .plan-select{padding:15px 5px;width:100%;color:#fff;font-weight:400;font-size:18px;background:linear-gradient(to right,rgba(252,241,138,1) 0,rgba(247,56,60,1) 100%)}
</style>

Nguồn bài viết: tham khảo từ BSW

Không có nhận xét nào:

Đăng nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây