Membuat tampilan web yang responsif di tampilan desktop dengan layouting seperti ini
Source code html:
<div class="argumen">
<p style="font-weight: bold;">Kenapa Harus Kami?</p>
<div class="conten">
<div class="fa bungkus1">
<div class="tubuh">
<img src="">
<h4>Pelayanan Cepat</h4>
<p>Kami Menyediakan Pelayanan super cepat
sehingga anda tidak perlu menunggu lama untuk
memasarkan produk anda melalui landing page
yang telah kami buat</p>
</div>
</div>
<div class="fa bungkus2">
<div class="tubuh">
<img src="">
<h4>Kualitas Terjamin</h4>
<p>Anda tidak perlu meragukan kualitas kami
kualitas kami telah kami tingkatkan hingga 101%
sehingga hampir tidak ada kesalahan dan bug
pada web anda</p>
</div>
</div>
<div class="fa bungkus13">
<div class="tubuh">
<img src="">
<h4>Desain Responsif</h4>
<p>Kami bekerja semaksimal mungkin agar hal yang
anda pasarkan dapat terserap baik oleh klien dengan
menggunakan desain web yang responsif,
anda dapat memilih desain untuk desain yang sudah
ada atau membuat desain baru sesuai permintaan
anda</p>
</div>
</div>
<div class="fa bungkus4">
<div class="tubuh">
<img src="">
<h4>SEO Friendly</h4>
<p>Web kami dirancang sedemikian rupa
agar dapat dijangkau lebih cepat
oleh pengunjung ataupun mesin pencari</p>
</div>
</div></br>
<h6 class="yaya">Dan yang Terpenting</h6>
<div class="fa bungkus5">
<div class="tubuh">
<h4>Garansi 100$</h4>
<img src="">
<p>Jika terdapat error dari pihak kami, anda boleh
meminta revisi atau pengembalian uang 100%</p>
</div>
</div>
</div>
-
Source code css:
.fa {
background-color: turquoise;
border-radius: 20px;
display: flexbox;
height: 600px;
text-align: center;
float: left;
box-shadow: saddlebrown;
box-shadow: 20px;
width: calc(25% - 20px);
margin: 10px 10px;
}
Note: Saya tidak menyediakan full css karena saya hanya akan membahas penggunaan dan cara penerapan atribut css agar tampilan menjadi responsif di desktop
Tags:
Pemrograman