Tutorial Membuat Template Web Sederhana - halo sobat informatics jumpa lagi dengan kita Young Informatics yang pada kali ini akan memberikan tutorial bagaimana cara membuat desain yang sangat minimalis, desain web yang minimalis ini sangat cocok untuk anda yang ingin membuat web sederhana mungkin, nah langsung saja yuk ikuti tutorial kita kali ini.
1. Mula-mula buatlah kode seperti berikut lalu simpan dengan nama myWeb.html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Menu With Multilevel Dropdown</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="Stylesheet" href="style.css"/>
</head>
<body>
<div class="container">
<div class="menu-wrapper">
<button class="menu-toggle">Menu</button>
<div class="multi-level-responsive-menu">
<li style="margin:3px 6px;"><img src="yi.png" width="40px" height="29px"></li>
<li style="width:420px;"></li>
<li><a href="#">Home</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<h2 style="margin:0 auto; margin: 20px; color:blue">Tampilan Web Sederhana</h2>
<h3 style="margin:0 auto; margin: 20px; color:blue">By Young Informatics</h3>
<div class="isi" style="background-color:rgb(80,130,210); width:95%; padding:10px 15px; color:white; font-family: pristina; margin:0 auto; font-size: 20px;">
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.
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
2. Lalu setelah file diatas dibuat kita langsung saja buat file css nya dalam satu folder yang sama seperti diatas simpan file berikut dengan nama style.css
* {
padding:0;
margin:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-box-sizing:border-box;
}
img {
max-width: 100%;
height: auto;
}
ul,ol {
list-style-type: none;
}
body {
background-color: #0273c7;
font-family: 'Arial', sans-serif;
}
.page-title {
font-family: 'cambria', serif;
margin:17px auto;
text-align: center;
color:#fff;
font-size: 17px;
}
.page-title h1 {
font-size:40px;
line-height: 1;
}
.page-title a{
color:#ff7777;
text-decoration: none;
}
.page-title a:hover{
text-decoration: underline;
color: #ff3333;
}
.container {
max-width:700px;
min-height: 500px;
width:100%;
padding:10px;
margin:auto;
background-color:rgb(80,190,125);
}
.menu-wrapper {
margin:10px auto;
position: relative;
width:100%;
}
.menu-wrapper ul{
margin:0;
padding:0;
}
.multi-level-responsive-menu {
background-color: #333;
clear: both;
display: block;
width: 100%;
}
.menu-toggle {
display: none;
}
.multi-level-responsive-menu ul {
padding:0;
display: table;
width: 100%;
list-style: none;
}
.multi-level-responsive-menu ul li ul li:first-child {
border-top: 1px solid #DD3D36;
}
.multi-level-responsive-menu ul li {
position: relative;
display: inline-block;
float:left;
}
.multi-level-responsive-menu ul li:last-child {
border-right: 0;
}
.multi-level-responsive-menu ul li a{
display: block;
text-align: center;
padding:11px 20px;
color:#fff;
text-decoration: none;
line-height: 1;
font-weight: 500;
font-size: 14px;
}
.multi-level-responsive-menu ul li.active a{
background-color:#DD3D36 ;
}
.multi-level-responsive-menu ul li:not(.active) a:hover {
background-color:#DD3D36 ;
}
ul.menu li span.arrow-bottom,
ul.menu li span.arrow-right {
position: absolute;
top:15px;
right:7px;
border:5px solid transparent;
width:0;
height:0;
}
ul.menu li span.arrow-bottom {
border-top-color: #fff;
}
ul.menu li span.arrow-right {
border-left-color: #fff;
}
3. dan Seperti biasa buka kembali file myWeb klik kanan dan open with browser maka akan muncul tampilan webnya seperti ini.
