Paket Internet Telkomsel Dalam Artikel Blog
Meskipun diatas seperti mempromosikan paket internet Telkomsel, namun pokok utama dari artikel ini adalah membuat box text css
Baca Juga
Artikel blog ini tidak sedang mempromosikan paket internet Telkomsel meskipun saat artikel ini dibuat ada paket kuota Gede Banget dengan harga yang terjangkau. Untuk promosi terbaru ini ada paket 250 GB dengan harga Rp 125 ribu, tentunya harga paket ini sangat murah jika dibandingkan dengan harga paket yang lainnya.
Untuk promo harga paket internet murah ini hanya tersedia selama 24 jam dengan masa berlaku 30 hari. Jadi jika ada promo seperti ini segera ambil kesempatan jika Anda tertark untuk menggunakannya. Jika Anda tidak tahu dengan adanya promo ini, segera gunakan aplikas MyTelkomsel dan aktifkan.
Dengan menggunakan aplikasi MyTelkomsel, Anda bisa mendapatkan banyak keuntungan. Salah satunya adalah mendapatkan informasi promo paket internet murah dari Telkomsel seperti yang telah disebutkan diatas.
Selain itu dengan menggunakan aplikasi khusus pengguna nomor Telkomsel ini, Anda juga dimudahkan dalam bertransaksi untuk beli paket internet, pulsa, ponsel, dan berkesempatan mendapatkan berbagai hadiah menarik dari Telkomsel.
Meskipun diatas seperti mempromosikan paket internet Telkomsel, namun pokok utama dari artikel ini adalah membuat box text css dengan menampilkan paket internet Telkomsel. Jadi ada ide yang muncul ketika membuka aplikasi MyTelkomsel untuk membuat box text dengan menggunakan CSS.
Jika Anda pengguna aplikasi MyTelkomsel tentunya tidak asing dan sangat familiar dengan tampilan text box diatas. Meskipun tidak terlalu sama, namun dengan tampilan yang sangat bagus tersebut membuat saya iseng untuk menampilkannya kedalam blog.
Jika Anda tertarik untuk menggunakan text box ini, Anda bisa memasangnya kedalam blog Anda dengan sangat mudah. Silahkan gunakan kode CSS dan HTML dibawah ini:
Kode CSS
.slick-wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:20px 0;}
.slick-slider{background-color:#fff;position:relative;display:block;width:300px;margin:10px;padding:10px;font-family:Poppins;border-radius: 12px 12px 12px 0px;box-shadow: 0px 4px 8px rgba(25,49,83,.2);}
.slick-box-card{display:flex;align-items:center;margin:-10px;margin-bottom:10px;padding:5px;padding-left:10px;font-size:10px;font-weight:400;width:60%;background-color:#e5131d;border-radius:12px 0 12px 0;color:#fff;}
.slick-box-name{font-size:14px;color:#001a41;}
.slick-box-quota{display:flex;flex-direction:row;align-items:center;color:#001a41;margin:4px 0;}
.slick-box-quota .quota{font-size:20px;font-weight:700;}
.slick-box-bar{color:#eaeaea;font-size:20px;margin:0 4px;}
.slick-box-time{font-size:14px;}
.slick-box-price{margin-right:8px;color:#e5131d;font-size:14px;font-weight:700;}
.slick-box-price .price{float:right;font-size:10px;font-weight:400;padding:0 6px;color:#66707a;background-color:#FAF0ED;border-radius:25px;}
Kode HTML
<div class="slick-wrapper">
<div class="slick-slider">
<div class="slick-box">
<div class="slick-box-card">Beli Lagi</div>
<div class="slick-box-name">Internet Sakti</div>
<div class="slick-box-quota">
<span class="quota">13 GB</span>
<span class="slick-box-bar">|</span>
<span class="slick-box-time">7 Hari</span>
</div>
<div class="slick-box-price">
<span class="discount">Rp 36.000</span>
<span class="price">Sekali Beli</span>
</div>
</div>
</div>
</div>
Kode ini bisa Anda utak atik di Codepen https://codepen.io/digitalpoin/pen/YzJQKLN
Baca Juga : Cara Mengganti Kode Template Blog, Menambah, Menghapus dan Mencari
Baca Juga : Mengganti Template Blog : Perhatikan Beberapa Hal Penting Berikut ini
Untuk kode HTML hanya satu saja dan bisa ditambahkan sesuai dengan keinginan sehingga tampilannya akan seperti contoh diatas. Anda bebas menggunakankode HTML sesuai dengan kebutuhan Anda.
Untuk apa?
Untuk apa tampilan text box diatas? Anda bisa menggunakan sebagai media promosi yang bisa dipasang didalam artikel blog atau dibagian sidebar blog.
