Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana Cara Membuat Tampilan Responsive Dengan HTML5 DAN CSS3, pasti kebayangnya menggunakan Bootstrap kan, kali ini saya akan mencobanya dengan menggunakan CSS3, sederhana saja kita langsung praktekan yah teman-teman .
Teman bisa salinkan scriptnya dibawah sini :
|
1 2 3 4 5 |
<div class="content"> <h1>This is Title</h1> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <img src="http://kursusinternetmarketingjakarta.com/wp-content/uploads/2016/08/Alasan-Mengapa-Anda-Harus-Belajar-IT-di-Dumet-School.jpg"> </div> |
nah ini style css nya :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> .content {max-width: 1000px; border:1px solid red; border-radius: 10px; margin: auto;} @media { .content img {width: 500px; display: block; margin:auto;} } @media { .content img {width: 450px; display: block;margin:auto;} } @media { .content img {width: 350px; display: block;margin:auto;} } @media { .content img {width: 200px; display: block;margin:auto;} } @media { .content img {width: 100px; display: block;margin:auto;} } </style> |
Jika sudah teman teman save dan jalankan dibrowsernya, cukup mudah bukan ?
Heheh cukup mudah yah, sekian tutorial tentang Bagaimana Cara Membuat Tampilan Responsive Dengan HTML5 DAN CSS3, sampai bertemu di artikel selanjutnya dan sampai jumpa .
#KeepLearn
#IsmetMA