Selamat akhir tahun gaes.!! Yeay. .
Diakhir tahun 2017 ini, aku bakalan posting tutorial cara membuat web desain dinamis. Pasti pada penasaran kan.. Hayo ngaku !! Oke langsung aja.
Pertama kita buat dulu file index.html nya. Kamu bisa gunain aplikasi Sublime, HTML5, atau node.JS. Nah Aplikasi yang aku pakai adalah Sublime karena aplikasi ini simple banget sih menurutku. Nggk ribet. Pada file index.html kamu isikan seperti contoh dibawah ini:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TUGAS DESAIN WEBSITE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="assets/styles.css"></link>
</head>
<body>
<div class="wrapper">
<!-- header -->
<!-- <h2>DESAIN WEB</h2> -->
<div class="row col12">
<header>
<div id="slider">
<figure>
<img src="logo2.jpg" style="width: 940px;height: 330px;" alt />
<img src="gb2.jpg" style="width: 940px;height: 330px;" alt />
<img src="gb3.jpg" style="width: 940px;height: 330px;" alt />
</figure>
</div>
<nav>
<ul>
<li><a href="" class="current">HOME</a></li>
<li><a href="">WISATA INDONESIA</a></li>
<li><a href="">ALAM RAYA</a></li>
<li><a href="">TENTANG</a></li>
<li><a href="">KONTAK</a></li>
</ul>
</nav>
</header>
</div>
<!-- konten -->
<div class="row col9">
<section class="courses">
<article>
<figure align="center">
<img src="gb1.jpg" alt="gb1">
<figcaption>GAMBAR MATERI</figcaption>
</figure>
<hgroup>
<h3 align="center">Materi Isi Web</h3>
</hgroup>
<p>
Desain Web Responsif (bahasa Inggris:Responsive Web Design (RWD)) adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile maupun komputer meja. Dengan metode ini, web akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun perangkat komputer meja dengan ukuran monitor besar[1]. Ukuran huruf, user interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan resolusi layar monitor yang tersedia. Hasilnya pengguna akan merasakan pengalaman mudah membaca, nyaman dan melihat informasi web tersebut sama dengan jika ia melihat melalui perangkat komputer meja[2].
</p>
</article>
</section>
</div>
<div class="col3">
<aside>
<section class="natural-tourism">
<h2>ALAM INDONESIA</h2>
<a href="">Alam 1</a>
<a href="">Alam 2</a>
<a href="">Alam 3</a>
</section>
<section class="contact-details">
<h2>Kontak</h2>
<p>Wisata alam<br/>Seluruh Indonesia
</section>
</aside>
</div>
<!-- FOOTER -->
<div class="row col12">
<footer>
<p>©Copyright 2017</p>
</footer>
</div>
</div>
</body>
</html>
Kedua, untuk syntax CSS nya adalah sebagai berikut:
body{
color : #666666;
background-color: #f9f8f6;
background-image: url("images/gb1.jpg");
background-position: center;
font-family: Georgia, Times, serif;
line-height: 1.4em;
margin: 0px;
}
*{
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12{
float: left;
text-align: center;
}
.col1{width: 8.3333333%;}
.col2{width: 16.66%;}
.col3{width: 25%;}
.col4{width: 33.32%;}
.col5{width: 41.64%;}
.col6{width: 50%;}
.col7{width: 58.31%;}
.col8{width: 66.64%;}
.col9{width: 75%;}
.col10{width: 83.3%;}
.col11{width: 91.63%;}
.col12{width: 100%;}
.wrapper{
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000;
background-color: #ffffff;
}
.container {
overflow:hidden;
width:1090px;
height: 340px;
}
/* CONTENT SLIDER */
#content-slider {
width:100%;
height:320px;
}
/* SLIDER */
#slider {
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:330px;
width:100%;
overflow:visible;
position:relative;
}
#slider img{
width: 1070px;
height: 330px;
}
#mask {
overflow:hidden;
height:330px;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:1070px;
height:320px;
position:absolute;
list-style:none;
}
#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;
}
#slider:hover li,
#slider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-5px;
width:0px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}
@-moz-keyframes cycle {
0% { left:0px; }
4% { left:0px; }
16% { left:0px; opacity:1; z-index:0; }
20% { left:1070px; opacity:0; z-index:0; }
21% { left:-1070px; opacity:0; z-index:-1; }
92% { left:-1070px; opacity:0; z-index:0; }
96% { left:-1070px; opacity:0; }
100%{ left:0px; opacity:1; }
}
@-moz-keyframes cycletwo {
0% { left:-1070px; opacity:0; }
16% { left:-1070px; opacity:0; }
20% { left:0px; opacity:1; }
24% { left:0px; opacity:1; }
36% { left:0px; opacity:1; z-index:0; }
40% { left:1070px; opacity:0; z-index:0; }
41% { left:-1070px; opacity:0; z-index:-1; }
100%{ left:-1070px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
0% { left:-1070px; opacity:0; }
36% { left:-1070px; opacity:0; }
40% { left:0px; opacity:1; }
44% { left:0px; opacity:1; }
56% { left:0px; opacity:1; }
60% { left:1070px; opacity:0; z-index:0; }
61% { left:-1070px; opacity:0; z-index:-1; }
100%{ left:-1070px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
0% { left:-1070px; opacity:0; }
56% { left:-1070px; opacity:0; }
60% { left:0px; opacity:1; }
64% { left:0px; opacity:1; }
76% { left:0px; opacity:1; z-index:0; }
80% { left:1070px; opacity:0; z-index:0; }
81% { left:-1070px; opacity:0; z-index:-1; }
100%{ left:-1070px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
0% { left:-1070px; opacity:0; }
76% { left:-1070px; opacity:0; }
80% { left:0px; opacity:1; }
84% { left:0px; opacity:1; }
96% { left:0px; opacity:1; z-index:0; }
100%{ left:1070px; opacity:0; z-index:0; }
}
@-webkit-keyframes cycle {
0% { left:0px; }
4% { left:0px; }
16% { left:0px; opacity:1; z-index:0; }
20% { left:1070px; opacity:0; z-index:0; }
21% { left:-1070px; opacity:0; z-index:-1; }
50% { left:-1070px; opacity:0; z-index:-1; }
92% { left:-1070px; opacity:0; z-index:0; }
96% { left:-1070px; opacity:0; }
100%{ left:0px; opacity:1; }
}
@-webkit-keyframes cycletwo {
0% { left:-1070px; opacity:0; }
16% { left:-1070px; opacity:0; }
20% { left:0px; opacity:1; }
24% { left:0px; opacity:1; }
36% { left:0px; opacity:1; z-index:0; }
40% { left:1070px; opacity:0; z-index:0; }
41% { left:-1070px; opacity:0; z-index:-1; }
100%{ left:-1070px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
0% { left:-1070px; opacity:0; }
36% { left:-1070px; opacity:0; }
40% { left:0px; opacity:1; }
44% { left:0px; opacity:1; }
56% { left:0px; opacity:1; z-index:0; }
60% { left:1070px; opacity:0; z-index:0; }
61% { left:-1070px; opacity:0; z-index:-1; }
100%{ left:-1070px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
0% { left:-1070px; opacity:0; }
56% { left:-1070px; opacity:0; }
60% { left:0px; opacity:1; }
64% { left:0px; opacity:1; }
76% { left:0px; opacity:1; z-index:0; }
80% { left:1070px; opacity:0; z-index:0; }
81% { left:-1070px; opacity:0; z-index:-1; }
100%{ left:-1070px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
0% { left:-1070px; opacity:0; }
76% { left:-1070px; opacity:0; }
80% { left:0px; opacity:1; }
84% { left:0px; opacity:1; }
96% { left:0px; opacity:1; z-index:0; }
100%{ left:1070px; opacity:0; z-index:0; }
}
/* ANIMATION BAR */
@-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
header, section, footer, aside, nav, article, figure, figcaption{
display: block;
}
header{
height: 100%;
background-image: url("../images/gb2.jpeg");
}
h1{
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;
}
nav, footer{
clear: both;
color: #ffffff;
background-color: #aeaca8;
height: 30px;
}
nav ul{
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li{
display: inline;
margin-right: 40px;
}
nav li a{
color: #ffffff;
}
nav li a:hover, nav li a.current{
color: #000000;
}
section.current{
float: left;
width: 659px;
border-right: 1px solid #eeeeee;
}
article{
clear: both;
overflow: auto;
width: 100%;
text-align: justify;
padding: 15px;
}
figcaption{
text-align: center;
}
hgroup{
margin-top: 40px;
}
aside{
width: 230px;
padding: 0px 0px 0px 5px;
}
aside section a{
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;
}
aside section a:hover{
color: #985d6a;
background-color: #efefef;
}
a{
color: #de6581;
text-decoration: none;
}
h1, h2, h3{
font-weight: normal;
}
h2{
margin: 10px 0px 5px 0px;
padding: 0px;
}
h3{
margin: 0px 0px 10px 0px;
color: #de6581;
}
aside h2{
padding: 30px 0px 10px 0px;
color: #de6581;
}
footer{
font-size: 80%;
text-align: center;
}
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
#slider { overflow: hidden; }
#slider figure img { width: 20%; float: left; }
#slider figure {
position: relative;
width: 100%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slidy infinite;
}
Langkah selanjutnya, taruh/copykan file ini di htdocs dengan langkah
Local Disk C >> XAMPP >> htdocs
Setelah itu, buka web browser, buka alamat
localhost/kikydesweb/
Tampilan akan seperti gambar dibawah ini:
Silakan dicoba. Salam Coding :D
