Kode Pertama:
<div class="flex-container">
<div class="flex-item">
<ul class="harga">
<li class="harga-judul">Paket Makan 1</li>
<li class="wira">Rp. 50.000,-</li>
<li>Nasi Putih</li>
<li>Empal Daging + Sambal Ijo</li>
<li>Lalapan</li>
<li>Sayur Asem</li>
<li class="wira">
<button>Pesan Sekarang</button>
</li>
</ul>
</div>
<div class="flex-item">
<ul class="harga">
<li class="harga-judul highlight">Paket Makan 2</li>
<li class="wira">Rp. 25.000,-</li>
<li>Nasi Uduk</li>
<li>Telor Balado</li>
<li>Ayam Goreng</li>
<li>Kerupuk Udang</li>
<li class="wira">
<button>Pesan Sekarang</button>
</li>
</ul>
</div>
<div class="flex-item">
<ul class="harga">
<li class="harga-judul">Paket Makan 3</li>
<li class="wira">Rp. 30.000,-</li>
<li>Nasi Putih</li>
<li>Ayam Goreng + Samabal</li>
<li>Tempe Tahu Goreng</li>
<li>Sayur Lodeh</li>
<li class="wira">
<button>Pesan Sekarang</button>
</li>
</ul>
</div>
</div>
Kode Kedua:
Agar tampilannya lebih rapih dan berwarna terkesan Profesional, silahkan sobat salin Kode CSS dibawah ini lalu letakkan sebelum kode ]]></b:skin> atau </style>.
*{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;margin:0;padding:0}
.flex-container{display:flex;padding:.5em}
.flex-item{flex:1;margin-right:1em;width:0}
.flex-item:last-child{margin-right:0}
.harga{border:1px solid #eee;list-style-type:none;margin:0;padding:0;transition:0.25s}
.harga:hover{box-shadow:0 8px 12px 0 rgba(0,0,0,0.2);transform:scale(1.025)}
.harga .harga-judul{background-color:#333;color:#fff;font-size:1.5em}
.harga .highlight{background-color:#29b6f6}
.harga li{background-color:#fff;list-style-type:none;border-bottom:1px solid #eee;padding:1.2em;text-align:center}
.harga .wira{background-color:#eee;font-size:1.25em}
button{background-color:#29b6f6;border:none;border-radius:.15em;color:#fff;cursor:pointer;padding:.75em 1.5em;font-size:1em}
@media only screen and (max-width:700px){button{padding:.75em}}
@media only screen and (max-width:600px){.flex-container{flex-wrap:wrap}.flex-item{flex:0 0 100%;margin-bottom:1em;width:100%}.harga:hover{box-shadow:none;transform:none}button{padding:.75em 1.5em}}
0 comments:
Posting Komentar