Chao bạn! chúng ta lại gặp nhau trong chuỗi seri chia sẻ code đẹp miễn phí cho các blogger (blogspot design) để giúp bạn có 1 bộ code bảng giá dịch vụ vô cùng đẹp và hữu ích... và hôm nay mình share bộ code CSS, HTML Price Giá Dịch Vụ - Thủ Thuật Blog, bạn cùng tham khảo nhé...
Cách thực hiện past Code
- Cách 1: Past code vào nơi bạn muốn hiển thị chỉ cần thêm thẻ style
Personal Use
- Lisensi
- Support
- Gratis Update Versi Te aru
- Hapus Cridit Link
Enterprise
- Max 3 Domain
- Support 1 Bulan
- Gratis Update Versi Tearu
- Hapus Cridit Link
Pro
- Unlimited Lisensi
- Support 12 Bulan
- Gratis Update Versi Terbaru
- Hapus Cridit Link
+ CSS
chèn trươc thẻ //]]></bskin> hoặc </style>
/*Price Box Winta*/
.tableWrap {
position: relative;
width: 350px;
background: #fff;
border-radius: 16px;
padding: 30px;
box-shadow: 3px 5px 30px 5px rgba(46, 56, 77, .1);
margin: auto
}
.tableWrap .tab {
height: 55px;
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 30px;
position: relative
}
.tab label {
height: 100%;
z-index: 2;
width: 30%;
display: flex;
cursor: pointer;
font-size: 15px;
position: relative;
align-items: center;
justify-content: center;
transition: color 0.3s ease
}
#tab-1:checked~.tab .tab-1, #tab-2:checked~.tab .tab-2, #tab-3:checked~.tab .tab-3 {
color: #fefefe
}
.tab label:nth-child(2) {
width: 40%
}
.tab .tabSlider {
position: absolute;
height: 85%;
border-radius: inherit;
background: #509600;
opacity: .8;
transition: all 0.3s ease
}
#tab-1:checked~.tab .tabSlider {
left: 0%;
width: 90px;
transform: translateX(5%)
}
#tab-2:checked~.tab .tabSlider {
left: 50%;
width: 120px;
transform: translateX(-50%)
}
#tab-3:checked~.tab .tabSlider {
left: 100%;
width: 95px;
transform: translateX(-105%)
}
.tableWrap input[type='radio'] {
display: none
}
.tableCard {
overflow: hidden
}
.tableCard .tableCards {
display: flex;
width: 300%
}
.tableCards .tableS {
width: 33.4%
}
.tableCards .tableRow-1 {
transition: all 0.3s ease
}
#tab-1:checked~.tableCard .tableCards .tableRow-1 {
margin-left: 0%
}
#tab-2:checked~.tableCard .tableCards .tableRow-1 {
margin-left: -33.4%
}
#tab-3:checked~.tableCard .tableCards .tableRow-1 {
margin-left: -66.8%
}
.tableS .tableDetail {
margin: 20px 0;
text-align: center;
padding-bottom: 25px;
border-bottom: 1px solid #e6e6e6
}
.tableDetail .tableHarga {
font-size: 55px;
font-weight: 600;
position: relative
}
.tableDetail .tableHarga:before, .tableDetail .tableHarga:after {
position: absolute;
font-weight: 400
}
.tableDetail .tableHarga:before {
left: -30px;
top: 17px;
font-size: 20px
}
.tableDetail .tableHarga:after {
content: '$';
right: -27px;
bottom: 12px;
font-size: 23px;
font-weight: 600
}
.tableDetail p {
font-size: 18px;
margin-top: 5px
}
.tableS .tableContent li {
display: flex;
font-size: 15px;
list-style: none;
margin-bottom: 10px;
align-items: center
}
.tableContent li svg {
flex-shrink: 0;
height: 20px;
margin-right: 10px;
margin-top: 4px;
stroke: #509600;
fill: none;
}
.tableContent li span {
margin-left: 10px
}
.tableWrap .buttonx {
width: 90%;
border-radius: 25px;
border: 1px #ccc solid;
outline: none;
height: 50px;
font-size: 18px;
color: #444;
cursor: pointer;
margin: 20px 25px 20px 10px;
background: transparent;
transition: transform 0.3s ease;
align-items: center
}
.tableWrap .buttonx:hover {
transform: scale(0.98);
border: 1px #509600 solid;
color: #509600;
outline: none
}
/* CSS darkmode */
.darkMode .tableWrap {
background-color: #1e1e1e;
color: #fefefe
}
.darkMode .tableWrap .tab, .darkMode .tableS .tableDetail, .darkMode .tableWrap .buttonx {
border-color: rgba(255, 255, 255, .1)
}
+ HTML
Chèn vào nơi mà bạn muốn hiển thị
<div class="tableWrap">
<input id="tab-1" name="tabSlider" type="radio" /><input checked="" id="tab-2" name="tabSlider" type="radio" /><input id="tab-3" name="tabSlider" type="radio" />
<div class="tab">
<label class="tab-1">Free</label><label class="tab-2">Personal</label><label class="tab-3">Developer</label>
<div class="tabSlider"></div>
</div>
<div class="tableCard">
<div class="tableCards">
<div class="tableS tableRow-1">
<div class="tableDetail">
<span class="tableHarga">0</span>
<p>Personal Use</p>
</div>
<ul class="tableContent">
<li>
<svg viewbox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" x2="9" y1="9" y2="15"></line>
<line x1="9" x2="15" y1="9" y2="15"></line></svg><span>Lisensi</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" x2="9" y1="9" y2="15"></line>
<line x1="9" x2="15" y1="9" y2="15"></line></svg><span>Support</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" x2="9" y1="9" y2="15"></line>
<line x1="9" x2="15" y1="9" y2="15"></line></svg><span>Gratis Update Versi Te
aru</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" x2="9" y1="9" y2="15"></line>
<line x1="9" x2="15" y1="9" y2="15"></line></svg><span>Hapus Cridit Link</span>
</li>
</ul>
<button class="buttonx">Download</button>
</div>
<div class="tableS">
<div class="tableDetail">
<span class="tableHarga">5</span>
<p>Enterprise</p>
</div>
<ul class="tableContent">
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg><span>Max 3 Domain</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg><span>Support 1 Bulan</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg><span>Gratis Update Versi Tearu</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg><span>Hapus Cridit Link</span>
</li>
</ul>
<button class="buttonx">Buy Now</button>
</div>
<div class="tableS">
<div class="tableDetail">
<span class="tableHarga">10</span>
<p>Pro</p>
</div>
<ul class="tableContent">
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg><span>Unlimited Lisensi</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg><span>Support 12 Bulan</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg><span>Gratis Update Versi Terbaru</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg><span>Hapus Cridit Link</span>
</li>
</ul>
<button class="buttonx">Buy Now</button>
</div>
</div>
</div>
</div>
* Trên đây là bộ code bảng giá dịch vụ được dùng nhiều nhất cho các loại website langding page, thậm chí các website thông thường đều có thể dùng nếu như bạn cần...
- Nếu bạ có thắc mắc gì thì vui lòng để lại nội dung ở phần comments nhé, mình sẽ cố gắng phản hồi nhanh nhất có thể... chúc bạn thành công!