Membuat Discover Price On Hover
Candil Kuya - Hallo Sobat Developers kembali lagi di blog saya yang sangat sederhana ini, hari ini kita akan belajar web design mebuat Discover Price On Hover sebuah tutorial pemrograman dasar hanya menggunakan CSS dan HTML yang bisa dijadikan refferensi pembelajaran untuk anda para pengunjung setia blog dan juga youtube channel Candil Code, anda bisa menerapkan design ini untuk mempercantik tampilan website anda. Tidak usah berlama lama langsung saja saya share tutorial Discover Price On Hover Silahkan di simak dan perhatikan baik-baik code di bawah ini.
Cara Membuat Discover Price On Hover
<section class="section-prices">
<h2 class="section-header">Our Pricing</h2>
<div class="list-boxs">
<div class="card starter">
<div class="head">
Starter
</div>
<div class="ticket">$5.90</div>
<div class="body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<button class="btn">Order Now</button>
</div>
</div>
<div class="card standard">
<div class="head">
Standard
</div>
<div class="ticket">$10.50</div>
<div class="body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<button class="btn">Order Now</button>
</div>
</div>
<div class="card premium">
<div class="head">
Premium
</div>
<div class="ticket">$15.90</div>
<div class="body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<button class="btn">Order Now</button>
</div>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;700&display=swap');
:root {
--ticket-height: 60px;
--color-blue: lightblue;
--color-orange: salmon;
--color-green: greenyellow;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #F1F1F1;
font-family: 'Open Sans', sans-serif;
background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
}
.section-prices {
padding: 1.5rem 1rem;
border-radius:15px;
}
.section-prices .section-header {
background-color: #FFF;
margin-bottom: 1rem;
padding: 1.5rem 1rem;
text-align: center;
color: #555;
font-weight: 700;
box-shadow: 0 10px 35px -10px rgba(0, 0, 0, .3);
border-radius:15px;
}
.list-boxs {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border-radius:15px;
}
.list-boxs .card {
width: 32%;
text-align: center;
position: relative;
max-width: 300px;
border-radius:15px;
}
.list-boxs .card .head,
.list-boxs .card .body {
background-color: #FFF;
padding: 1.5rem 1rem;
}
.list-boxs .card .head {
color: #333;
font-size: 1.2rem;
text-transform: uppercase;
transform: translateY(30px);
transition: transform .3s linear;
border-bottom: 1px solid #F2F2F2;
}
.list-boxs .card:hover .head {
transform: translateY(0);
box-shadow: 0 -5px 10px rgba(0, 0, 0, .1);
}
.list-boxs .card .ticket {
color: #FFF;
width: 80%;
margin: 0 auto;
border-radius:15px;
padding: 1rem;
font-size: 1.4rem;
font-weight: bold;
height: var(--ticket-height);
box-shadow: inset 0px 6px 6px -5px rgba(0, 0, 0, .25),
inset 0px -6px 6px -5px rgba(0, 0, 0, .25);
}
.list-boxs .starter .ticket {
background-color: var(--color-green);
}
.list-boxs .standard .ticket {
background-color: var(--color-blue);
}
.list-boxs .premium .ticket {
background-color: var(--color-orange);
}
.list-boxs .card .body {
transform: translateY(-30px);
transition: transform .3s linear;
}
.list-boxs .card:hover .body {
transform: translateY(0);
box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}
.list-boxs .card p {
font-size: .95rem;
color: #333;
text-align: justify;
}
.list-boxs .card .btn {
margin-top: 2rem;
padding: .6rem 1rem;
outline: none;
font-size: .85rem;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
min-width: 160px;
border: 1px solid #555;
background-color: #555;
color: #333;
cursor: pointer;
transition: all .2s linear;
}
.list-boxs .card .btn:hover {
box-shadow: 0 5px 10px 1px rgba(0, 0, 0, .15);
}
.list-boxs .starter .btn {
background: var(--color-green);
border-color: var(--color-green);
}
.list-boxs .standard .btn {
background: var(--color-blue);
border-color: var(--color-blue);
}
.list-boxs .premium .btn {
background: var(--color-orange);
border-color: var(--color-orange);
}
@media screen and (max-width: 750px) {
.list-boxs {
justify-content: space-around;
}
.list-boxs .card {
width: 45%;
}
}
@media screen and (max-width: 550px) {
.list-boxs .card {
width: 95%;
}
}
***
Tentang Cara Membuat Discover Price On Hover
Bagaimana sobat Candil Code cukup mudah bukan? artikel ini sengaja saya sediakan khusus untuk anda yang masih pemula di dalam dunia pemrograman, Semoga dapat bermanfaat bagi sobat Candil yang ingin belajar dasar pemrograman seperti HTML, CSS dan Juga Javascript.
anda bisa menggunakan Live code editor online untuk mencoba tutorial diatas.Saya membagikan code ini hanya untuk tujuan pengujian dan pembelajaran. Jika dirasa Artikel Yang saya tulis melanggar Hak Cipta Silahkan kirimkan pesan kepada Saya Melalui Halaman Kontak dan Saya akan menghapusnya sesegera mungkin.
Penutup
Semoga saja code Discover Price On Hover bisa dijadikan refferensi pembelajaran untuk anda yang masih baru terjun ke dalam dunia web pemrograman jangan lupa di share ke teman atau kerabat anda, nantikan web design menarik lainnya hanya di blog ini, Semoga Bermanfaat and Hapy Ngoding.
