Cara Membuat Web HTML CSS Keren by Olive Zamzam – Kali ini admin akan berbagi tutorial membuat web sederhana dengan menggunakan bahasa HTML css bertema informasi kecantikan (beauty), untuk script ini saya dapatkan di https://codepen.io/zamzam99/ (terima kasih sudah mempublikasikan karyanya diweb tersebut). Semoga scriptnya bermanfaat untuk teman-teman pelajar yang sedang mencari referensi hal ini.
Untuk web yang satu ini tampilannya cukup menarik, dengan desain kotak-kotak dan responsive.
Yuk kita simak !
Cara Membuat Website Keren Menggunakan 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.
<!DOCTYPE html>
<html>
<head>
<title>PROGRAMER TEKNIK</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- bagian header template -->
<header>
<h1 class="judul">PROGRAMER TEKNIK</h1>
</header>
<!-- akhir bagian header template -->
<div class="wrap">
<!-- bagian menu -->
<nav class="menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Karya</a>
</li>
<li>
<a href="#">Tutorial</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</nav>
<!-- akhir bagian menu -->
<!-- bagian sidebar website -->
<aside class="sidebar">
<div class="widget">
<h2>Wellcome</h2>
<p>Selamat datang di PROGRAMER TEKNIK situs ini sebuah tampoilan web sederhana.</p>
</div>
<div class="widget">
<h2>Tentang web</h2>
<p>Apa itu Website?
Website adalah kumpulan informasi/kumpulan page yang biasa diakses lewat jalur internet. Setiap orang di berbagai tempat dan segala waktu bisa menggunakannya selama terhubung secara online di jaringan internet. Secara teknis, website adalah kumpulan dari page, yang tergabung kedalam suatu domain atau subdomain tertentu. Website-website yang ada berada di dalam World Wide Web(WWW) Internet.</p>
</div>
</aside>
<!-- akhir bagian sidebar website -->
<!-- bagian konten Blog -->
<div class="blog">
<div class="conteudo">
<div class="post-info">
Karya Dari <b>OLIVE ZAMZAM</b>
</div>
<img src="https://i.ibb.co/LScQqYJ/1.png" alt="1" border="0"></a>
<hr>
<a href="#" class="continue-lendo">Selengkapnya →</a>
</div>
<div class="conteudo">
</body>
<script>document.getElementsByTagName("h1")[0].style.fontSize = "80px";</script>
</html>Langkah 2: buat file style.css
Hal kedua yang anda lakukan adalah membuat file “style.css”. Kemudian silahkan copy dan paste script dibawah ini.
body {
background: #5F9EA0;
margin:0;
font-family: 'Open Sans', sans-serif;
}
hr {
border:0;
background:#dedede;
height:1px;
}
header{
text-align: center;
color: #232323;
}
header .judul{
font-size: 17pt;
}
header .deskripsi{
font-size: 11pt;
}
.wrap {
width: 950px;
margin:25px auto;
}
nav.menu ul {
overflow:hidden;
color:#fff;
list-style: none;
float:left;
padding:0;
width: 650px;
margin:0 0 0;
background: #DC143C;
-webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
-moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
}
nav.menu ul li {
margin:0;
float:left;
}
nav.menu ul a {
padding:25px;
display:block;
font-weight:600;
font-size: 16px;
color:#fff;
text-transform: uppercase;
transition: all 0.5s ease;
text-decoration: none;
}
nav.menu ul a:hover {
text-decoration: underline;
background:#16a085;
}
.sidebar {
float:right;
width:275px;
}
.sidebar .widget {
padding:25px;
margin:0 0 25px;
background:#fff;
border-bottom: 2px solid #fff;
transition: all 0.5s ease;
}
.sidebar .widget:hover {
border-bottom: 2px solid #3498db;
}
.sidebar .widget h2 {
padding:0;
margin:0 0 15px;
color:#3498db;
font-size: 18px;
font-weight:800;
text-transform: uppercase;
}
.sidebar .widget p {
font-size: 14px;
}
.sidebar .widget p:last-child {
margin:0;
}
.blog {
float:left;
}
.conteudo {
width:600px;
padding:25px;
margin:25px auto;
background: #fff;
border:1px solid #dedede;
-webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
-moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
}
.conteudo img {
min-width: 650px;
margin:0 0 25px -25px;
max-width: 650px;
}
.conteudo h1 {
padding:0;
margin:0 0 15px;
font-weight: normal;
color: #666;
font-family: Georgia;
}
.conteudo p:last-child {
margin: 0;
}
.conteudo .continue-lendo {
color:#000;
transition: all 0.5s ease;
text-decoration: none;
font-weight: 700;
}
.conteudo .continue-lendo:hover {
margin-left:10px;
}
.post-info {
float: right;
font-size: 12px;
margin: -10px 0 15px;
text-transform: uppercase;
}
@media screen and (max-width: 960px) {
.header {
position:inherit;
}
.wrap {
width: 90%;
margin:25px auto;
}
.sidebar {
width:100%;
margin:25px 0 0;
float:right;
}
.sidebar .widget {
padding:5%;
}
nav.menu ul {
width: 100%;
}
nav.menu ul {
float:inherit;
}
nav.menu ul li {
float:inherit;
margin:0;
}
nav.menu ul a {
padding:15px;
font-size: 16px;
border-top:1px solid #1abf9f;
border-bottom:1px solid #16a085;
}
.blog {
width:90%;
}
.conteudo {
float:inherit;
margin:0 auto 25px;
width:101%;
border:1px solid #dedede;
padding:5%;
background: #fff;
}
.conteudo img {
max-width: 110%;
margin:0 0 25px -5%;
min-width: 110%;
}
.conteudo .continue-lendo:hover {
margin-left:0;
}
}
@media screen and (max-width: 460px) {
nav.menu ul a {
padding:15px;
font-size: 14px;
}
.sidebar {
display:none
}
.post-info {
display:none;
}
.conteudo {
margin:25px auto;
}
.conteudo img {
margin:-5% 0 25px -5%;
}
}Penutup
Demikian artikel Cara Membuat Web HTML CSS Keren by Olive Zamzam. Semoga artikel ini bermanfaat.
Jika ada kritik maupun saran, anda bisa berkomentar dibawah ini.
Selamat membaca dan ngoding 😀
