Cara Membuat Halaman Website Dengan HTML dan CSS
Seperti yang telah dijelaskan pada postingan sebelum-sebelumnya. Selain menggunakan html untuk membuat halaman website kita juga perlu menggunakan CSS untuk mempercantik halaman web tersebut. Ada baiknya kalian mempelajari apa itu HTML dan CSS.
Nah, dibawah ini saya telah siapkan contoh code html dan css. Jadi silahkan mencoba.
Berikut file index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/img/icon.png">
<meta http-equiv="X-UACompatible" content="IE=edge">
<title>Dwi Kitchen</title>
<link rel="stylesheet" href="mycss.css">
</head>
<style>
</style>
<body>
<nav>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li style="float: left; text-align: center;"><a href="index.html"><img src="assets/img/brand2.svg" alt="Navbar Brand" width="30px;" class="logo-brand"><div class="brand-title">Dwi Kitchen</div></a></li>
<li><a href="login.html">Login</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
<span class="logo"><img src="assets/img/brand2.svg" alt="Logo" width="120px"></span>
<div class="judul">Dwi Kitchen</div>
<p class="motto">"Tiada Hari Tanpa Makan, Yuk Makan"</p>
<a href="menu.html" class="btn">Pilih Menu</a>
</body>
</html>
Berikut file CSSnya. Beri nama mycss.css:
body{
background-image: linear-gradient(-90deg, #5f4d93 15%, #e37682 85%);
/*background-image: url("images/overlay.png"), -webkit-linear-gradient(45deg, #e37682 15%, #5f4d93 85%);
background-image: url("images/overlay.png"), -ms-linear-gradient(45deg, #e37682 15%, #5f4d93 85%);
background-image: url("images/overlay.png"), linear-gradient(45deg, #e37682 15%, #5f4d93 85%);*/
}
.judul{
font-family: Cairo;
color: white;
margin: 0 auto;
text-align: center;
letter-spacing: 3px;
font-size: 46px;
}
.motto{
font-family: Cairo;
color: white;
margin: 0 auto;
text-align: center;
font-size: 19px;
font-style: italic;
letter-spacing: 2px;
}
.logo img{
display: block;
margin: 0 auto;
max-width: 75%;
padding-top: 10%;
}
.btn {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
position: relative;
margin-top: 50px;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 10px;
font-family: sans-serif;
}
nav{
font-family: Cairo;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li{
float: right;
}
li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.logo-brand{
position: absolute;
left: 10px;
top: 23px;
}
.brand-title{
padding-left: 22px;
font-size: 18px;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: Cairo;
text-decoration: none;
color: #fff;
background: #f44336;
text-align: center;
padding: 10px 0;
display: none;
border-radius: 10px;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
@media only screen and (max-width: 576px) {
body{
background-image: linear-gradient(-90deg, #5f4d93 15%, #DA0CFF 85%);
}
ul{
position: static;
float: left;
display: none;
}
li{
margin-bottom: 1px;
}
ul li, li a{
width: 100%;
}
.show-menu {
display:block;
}
.logo-brand{
display: none;
}
}
/* titillium-web-regular - latin */
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 400;
src: url('../fonts/titillium-web-v8-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'),
url('../fonts/titillium-web-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/titillium-web-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/titillium-web-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/titillium-web-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/titillium-web-v8-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* cairo-regular - latin */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400;
src: url('../fonts/cairo-v6-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Cairo'), local('Cairo-Regular'),
url('../fonts/cairo-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/cairo-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/cairo-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/cairo-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/cairo-v6-latin-regular.svg#Cairo') format('svg'); /* Legacy iOS */
}
Hasilnya:
Berikut tadi adalah kode html dan css nya. Semoga membantu :)
Seperti yang telah dijelaskan pada postingan sebelum-sebelumnya. Selain menggunakan html untuk membuat halaman website kita juga perlu menggunakan CSS untuk mempercantik halaman web tersebut. Ada baiknya kalian mempelajari apa itu HTML dan CSS.
Nah, dibawah ini saya telah siapkan contoh code html dan css. Jadi silahkan mencoba.
Berikut file index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/img/icon.png">
<meta http-equiv="X-UACompatible" content="IE=edge">
<title>Dwi Kitchen</title>
<link rel="stylesheet" href="mycss.css">
</head>
<style>
</style>
<body>
<nav>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li style="float: left; text-align: center;"><a href="index.html"><img src="assets/img/brand2.svg" alt="Navbar Brand" width="30px;" class="logo-brand"><div class="brand-title">Dwi Kitchen</div></a></li>
<li><a href="login.html">Login</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
<span class="logo"><img src="assets/img/brand2.svg" alt="Logo" width="120px"></span>
<div class="judul">Dwi Kitchen</div>
<p class="motto">"Tiada Hari Tanpa Makan, Yuk Makan"</p>
<a href="menu.html" class="btn">Pilih Menu</a>
</body>
</html>
Berikut file CSSnya. Beri nama mycss.css:
body{
background-image: linear-gradient(-90deg, #5f4d93 15%, #e37682 85%);
/*background-image: url("images/overlay.png"), -webkit-linear-gradient(45deg, #e37682 15%, #5f4d93 85%);
background-image: url("images/overlay.png"), -ms-linear-gradient(45deg, #e37682 15%, #5f4d93 85%);
background-image: url("images/overlay.png"), linear-gradient(45deg, #e37682 15%, #5f4d93 85%);*/
}
.judul{
font-family: Cairo;
color: white;
margin: 0 auto;
text-align: center;
letter-spacing: 3px;
font-size: 46px;
}
.motto{
font-family: Cairo;
color: white;
margin: 0 auto;
text-align: center;
font-size: 19px;
font-style: italic;
letter-spacing: 2px;
}
.logo img{
display: block;
margin: 0 auto;
max-width: 75%;
padding-top: 10%;
}
.btn {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
position: relative;
margin-top: 50px;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 10px;
font-family: sans-serif;
}
nav{
font-family: Cairo;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li{
float: right;
}
li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.logo-brand{
position: absolute;
left: 10px;
top: 23px;
}
.brand-title{
padding-left: 22px;
font-size: 18px;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: Cairo;
text-decoration: none;
color: #fff;
background: #f44336;
text-align: center;
padding: 10px 0;
display: none;
border-radius: 10px;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
@media only screen and (max-width: 576px) {
body{
background-image: linear-gradient(-90deg, #5f4d93 15%, #DA0CFF 85%);
}
ul{
position: static;
float: left;
display: none;
}
li{
margin-bottom: 1px;
}
ul li, li a{
width: 100%;
}
.show-menu {
display:block;
}
.logo-brand{
display: none;
}
}
/* titillium-web-regular - latin */
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 400;
src: url('../fonts/titillium-web-v8-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'),
url('../fonts/titillium-web-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/titillium-web-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/titillium-web-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/titillium-web-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/titillium-web-v8-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* cairo-regular - latin */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400;
src: url('../fonts/cairo-v6-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Cairo'), local('Cairo-Regular'),
url('../fonts/cairo-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/cairo-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/cairo-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/cairo-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/cairo-v6-latin-regular.svg#Cairo') format('svg'); /* Legacy iOS */
}
Hasilnya:
Berikut tadi adalah kode html dan css nya. Semoga membantu :)
Komentar
Posting Komentar