3. BOOTSTRAP #MEMBUAT TAMPILAN WEBSITE RESPONSIVE

Bertemu lagi dengan saya di tutorial bootstrap pada edisi ke tiga membuat tampilan responsive dengan framework bootstrap. jika teman-teman belum mengikuti tutorial sebelumnya kalian bisa melihatnya di edisi 2 yaitu <a target="_blank" href="https://blangkonkoding.blogspot.com/2019/01/1-bootstrap-membuat-header-website.html">membuat header </a>sekarang akan dilanjutkan untuk membuat tampilannya.

1.temen-temen bisa mengubah file header.html kemarin menjadi website.html lalu simpan pada folder kemarin yang telah dibuat,dan tambahkan kode dibawah ini



    <div class="container">        

        <div class="jumbotron">
            <center>
            <img src="img/logo.png" class="img-circle" alt="gambar pertama" width="204" height="204">          
                <h2>Blangkon Koding</h2>
                <p>Selamat Datang di Website Blangkon Koding Ikuti Terus Tutorial Dari Kami
               </p><br/><br/>
                <p><a class="btn btn-success btn-lg" href="#" role="button">Daftar Sekarang !</a></p>
            </center>
        </div>
      
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="img/1.jpg" alt="...">
                <div class="caption">
                    <h3>Tutorial Php</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris</p>
                    <p><a href="https://blangkonkoding.blogspot.com/" class="btn btn-success" role="button">Lihat</a></p>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="img/2.jpg" alt="...">
                <div class="caption">
                    <h3>Tutorial Html</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris</p>
                    <p><a href="https://blangkonkoding.blogspot.com/" class="btn btn-success" role="button">Lihat</a></p>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="img/3.jpg" alt="...">
                <div class="caption">
                    <h3>Tutorial MySQLi</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris</p>
                    <p><a href="https://blangkonkoding.blogspot.com/" class="btn btn-success" role="button">Lihat</a></p>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="img/4.jpg" alt="...">
                <div class="caption">
                    <h3>Tutorial Bootstrap</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris</p>
                    <p><a href="https://blangkonkoding.blogspot.com/" class="btn btn-success" role="button">Lihat</a></p>
                </div>
            </div>
        </div>

    </div>

2. Lalu buka file yang telah kalian buat dengan browser kalian, jika berhasil maka akan tampil seperti dibawah ini

Jika ingin penjelasan tentang kodingnya nanti akan saya jelaskan di channel youtube blangkon koding 

blangkonkodingbootstrapcsshtmljqueryjsloginmakeheaderresponsivewebesignwebresponsivewebsederhanawebsite

Share This :