Membuat tampilan web yang responsif di tampilan desktop dengan layouting seperti ini

Membuat Layout Konten Di Tampilan Desktop Dengan Flex Dan Calc() Function

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-colorturquoise;
    border-radius20px;
    display: flexbox;
    height600px;
    text-aligncenter;
    floatleft;
    box-shadowsaddlebrown;
    box-shadow20px;
    widthcalc(25% - 20px);
    margin10px 10px;
}

Note: Saya tidak menyediakan full css karena saya hanya akan membahas penggunaan dan cara penerapan atribut css agar tampilan menjadi responsif di desktop

Berlangganan update artikel terbaru via email:

0 Response to "Membuat Layout Konten Di Tampilan Desktop Dengan Flex Dan Calc() Function"

Posting Komentar

Berkomentarlah Dengan Baik dan Sopan

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel