Cara Membuat Web Sendiri dengan HTML CSS – Kali ini admin akan berbagi tutorial membuat web statis dengan menggunakan bahasa HTML CSS bertema landing page, untuk script ini saya dapatkan di https://codepen.io/codot/ (terima kasih sudah mempublikasikan karyanya diweb tersebut). Semoga source codenya bermanfaat untuk teman-teman pelajar yang sedang mencari referensi hal ini.
Untuk web sederhana yang satu ini tampilannya cukup menarik, dengan background bergradasi orange dan merah.
Yuk kita simak !
Tutorial Membuat Web Sendiri dengan HTML CSS
Adapun tutorial membuat web keren dan sederhana versi koran-indonesia.com, sebagai berikut.
Langkah 1: Buat File Index.html
Hal pertama yang anda lakukan adalah membuat file “index.html”. Kemudian silahkan copy dan paste script dibawah ini.
<html lang="en">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div class="main-wrap grid-group clear">
<nav class="nav-wrap clear">
<div class="logo grid-3">
<h1 class="right"><a href="#">Afda</a></h1></div>
<div class="main-menu grid-6">
<ul class="right">
<li><a href="#">Main</a></li>
<li><a href="#">Demos</a></li>
<li><a href="#">Portofolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Shortcodes</a></li>
</ul>
</div>
<div class="nav-misc grid-3">
<ul>
<li><a class="cart-btn" href="#"><i class="fa fa-shopping-cart"></i>
</a></li>
<li><a class="search-btn" href="#"><i class="fa fa-search"></i>
</a></li>
</ul>
</div>
</nav>
<header>
<div class="slider">
<h1>Ultimate website builder kit.</h1>
<p>Everything you need to have in order to create a stunning website</p>
<div class="jumpto">
<a href="#"><i class="fa fa-chevron-down"></i></a>
</div>
</div>
</header>
</div>
</body>
</html>
Langkah 2: Buat File Sytle.css
Hal kedua yang anda lakukan adalah membuat file “style.css”. Kemudian silahkan copy dan paste script dibawah ini.
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
* {
margin: 0;
padding: 0;
font-family: 'Roboto Condensed', sans-serif;
}
/* Grid system */
.grid-group {
width: 100%;
}
.grid-group * {
box-sizing: border-box;
}
/* Clear every floated element */
.clear:before,
.clear:after {
height: 0;
width: 0;
display: table;
content: "";
clear: both;
visibility: hidden;
}
[class*='grid-'] {
float: left;
min-height: 1px;r
}
/* We are using 12 grid based */
.grid-1 {
width: 8.333333333333333%;
}
.grid-2 {
width: 16.66666666666667%;
}
.grid-3 {
width: 25%;
}
.grid-4 {
width: 33.33333333333333%;
}
.grid-5 {
width: 41.66666666666667%;
}
.grid-6 {
width: 50%;
}
.grid-7 {
width: 58.33333333333333%;
}
.grid-8 {
width: 66.66666666666667%;
}
.grid-9 {
width: 75%;
}
.grid-10 {
width: 83.33333333333333%;
}
.grid-11 {
width: 91.66666666666667;
}
.grid-12 {
width: 100%;
}
.left {
float: left;
}
.right {
float: right!important;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #222;
}
.main-wrap {
margin: 0 auto;
position: relative;
}
.nav-wrap {
background: -webkit-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* IE10 */
background: -o-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* W3C */
z-index: 99999;
}
.nav-wrap a {
color: #fff;
}
.logo {
padding: 19px;
border: 2px solid rgba(255,255,255,.15);
}
.logo a{
padding: 8px 10px;
display: block;
transition: background 0.55s linear;
}
.logo a:hover {
background: #fff;
color: #2EA9E5;
}
.logo h1 {
text-transform: uppercase;
margin-right: 30px;
border: 2px solid #fff;
}
.main-menu {
border: 2px solid rgba(255,255,255,.15);
border-left: none;
}
.main-menu ul, .nav-misc ul {
list-style: none;
}
.main-menu li, .nav-misc li {
float: left;
}
.main-menu a {
display: block;
padding: 34px 20px;
text-transform: uppercase;
transition: background 0.15s linear;
}
.main-menu a:hover {
background: #2EA9E5;
}
.nav-misc {
padding: 24px;
border: 2px solid rgba(255,255,255,0.15);
border-left: none;
}
.nav-misc a {
display: block;
padding: 10px;
}
.cart-btn {
background: #30A6E2;
border-radius: 500px;
}
.search-btn {
background: #fff;
color: #30A6E2!important;
border-radius: 500px;
margin-left: 15px;
}
header {
background: orange;
height: 100vh;
background: -webkit-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* IE10 */
background: -o-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* W3C */
}
header .slider {
padding: 5% 30%;
color: #fff;
}
header h1 {
text-transform: uppercase;
font-size: 4em
}
.jumpto {
position: absolute;
bottom: 10px;
left: 50%;
}
.jumpto i:hover {
background: #fff;
color: #2EA9E5;
}
.jumpto i {
color: #fff;
font-size: 40px;
background: #2EA9E5;
padding: 15px;
border-radius: 99999px;
transition:
}Penutup
Demikian artikel mengenai Cara Membuat Web Sendiri dengan HTML CSS, semoga bermanfaat untuk anda.
Jika ada kritik maupun saran, anda bisa berkomentar dibawah ini.
Selamat membaca dan ngoding :V
