Home HTML Programming HTML5 CSS3: Belajar Membuat Responsive Web

HTML5 CSS3: Belajar Membuat Responsive Web

Pada kesempatan kali ini saya akan membagikan pembelajaran sederhana untuk membuat responsif desain pada HTML5 dan CSS3 menggunakan media screen. 

 Untuk itu silahkan di ketikkan sintaks html berikut:

<!DOCTYPE html>
<html>
<head>
<title>Web Ala Ala </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<header>
<nav>
<ul>
<a href="#banner"><li>Home</li></a>
<a href="#body"><li>About</li></a>
<a href="#footer"><li>Contact</li></a>
<a href=""><li>More</li></a>
</ul>
</nav>
</header>

<section id="banner">

</section>

<section id="body">
<h2>SELA<span style="color:#3bacc4">MAT DAT</span>ANG</h2>
<img src="images/save.jpg">
<h3 style="margin-top:7%;" class="minggi">Pengantar</h3>
<p class="fade">
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 nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="clear"></div>
<img src="images/save.jpg">
<h3 style="margin-top:5%;" class="minggi">Pengantar</h3>
<p class="fade">
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 nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="clear"></div>
</section>
<section id="footer">
<div class="cp">Copyright &copy; 2019 <a href="">SMK Wikrama Bogor </a>- Design by <a href="">AA</a></div>
</section>
</body>
</html>

Untuk CSSnya
*{
margin: 0px;
padding: 0px;
font-family: helvetica;
}

section#banner{
width: 100%;
height: 500px !important;
background-image: url(../images/body.jpg);
background-attachment: contain;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
header{
position: fixed;
width: 100%;
height: 70px;
background-color: #019875;
transition: background-color .5s;
}
nav{
display: table;
margin:auto;
margin-top: 15px;
-webkit-transition: margin-left .9s;
}

ul{
display: block;
float: left;
list-style: none;
}
ul li{
float: left;
margin: 10px;
padding: 2px;
}
ul a{
color: #f3f3f3;
text-decoration: none;
}
ul a:hover{
color:#aaa;
transition: all 0.25s;
}
img#logo{
float: left;
display: block;
margin-left: 30px;
margin-right: 30px;
margin-top: -5px;
width: 50px;
height: 50px;
-webkit-transition: width .5s, height .5s, margin-right .5s, margin-top .5s;
}
.clear{
clear: both;
}
#body{
width: 100%;
height: auto;
}
#body h2{
font-weight: bold;
text-align: center;
margin-top: 1.5%;
margin-right: 2%;
margin-bottom:2%;
}
#body img{
float: left;
display: inline;
background-size: contain;
width: 40%;
height: 65%;
margin-left: 30px;
margin-right: 30px;
margin-top: 5%;
-webkit-transition: width .5s, height .5s, margin-right .5s, margin-top .5s;
}

.fade{
color:#000;
text-align: left;
margin-right: 2%;
font-family: sans-serif, 'segoe ui', roboto;
font-size:18px;
}
#footer{
padding: 12px;
    border-top: 1px solid #333;
    font-weight: 700;
background:#013243;
margin-top:2%;
}
.cp{
margin: 10px auto;
text-align: center;
color:#aaa;
font-weight: lighter;
}
.cp a{
text-decoration: none;
color:#3bacc4;
}
.cp a:hover{
color:#fff;
transition: all 0.25s;
}


Silahkan dijalankan terlebih dahulu, lalu cobalah untuk zoom-in dan zoom-out. Sudah bisa merespon ukuran layar karena terdapat tag meta viewport dibawah title. tetapi ukuran width, font dan lainnya perlu disesuaikan kembali.. Silahkan tambahkan kembali kode berikut


@media screen and (max-width: 960px) {
body{
font-size:12px;
}
header {
width: 100%;
height: 50px;
position:fixed;
}
#body h2{
font-weight: bold;
text-align: center;
margin-top: 2%;
margin-right: 1%;
margin-left: 1%;
}
.minggi{
margin-top:2%;
margin-left:8%;
}
nav{
display: block;
margin:auto;
margin-top: 15px;
-webkit-transition: margin-left .9s;
}
section#banner{
width: 115%;
height: 200px !important;
background-image: url(../images/body.jpg);
background-size: cover;
background-repeat: no-repeat;
}
ul{
display: inline-block;
float: left;
list-style: ;
}
ul li{
float: left;
margin: 15px;
margin-top:2px;
padding: 5px;
}
ul a{
color: #f3f3f3;
text-decoration: none;
}
ul a:hover{
color:#aaa;
transition: all 0.25s;
}
img#logo{
display: none;
}
#body{
width: 100%;
height: 720px;
}
#footer{
width: 100%;
display: block;
}
.cp{
margin:  auto;
text-align: center;
color:#aaa;
font-weight: lighter;
font-size:9px;
}
.cp a{
text-decoration: none;
color:#3bacc4;
}
.cp a:hover{
color:#fff;
transition: all 0.25s;
}
#body img{
float: left;
display: inline;
background-size: cover;
width: 80%;
height: 35%;
margin-left: 30px;
margin-right: 30px;
margin-top: 5%;
-webkit-transition: width .5s, height .5s, margin-right .5s, margin-top .5s;
}

.fade{
color:#000;
text-align: left;
margin-right: 8%;
margin-left: 8%;
margin-top: 5%;
font-family: sans-serif, 'segoe ui', roboto;
font-size:12px;
}
}

Silahkan di save dan dijalankan dan di zoom in/out maka ukurannya akan lebih menyesuaikan. Karena kita sudah menggunakan sintaks media screen and(max-width:xPX). Mudah-mudahan sedikit ilmunya dapat bermanfaat
Catatan:
untuk folder dibuat difolder masing-masing, gambar dapat dicari