Asalamuallaikum wr, wb
Kali ini saya akan mengshare pada kalian contoh layout website tampilan depan (frontend).
B. Latarbelakang
Bagi kalian yang mau bikin tampilan layout depan bisa tiru codingan dibawah ini.
C. Maksud dan Tujuan
Memberi tahu cara buat tampilan layout depan website.
D. Pembahasan
berikut kodingannya ganti dengan "index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>coba script</title>
</head>
<body>
<div class="headers">
<h2 class="jika">ADMIN <svg class="pen1" viewBox="0 0 20 20" width="23px" height="22px"><path d="M0 9.002C0 8.45.455 8 .992 8h18.016c.548 0 .992.456.992 1.002v9.996c0 .553-.455 1.002-.992 1.002H.992C.444 20 0 19.544 0 18.998V9.002zm0-8C0 .45.451 0 .99 0h4.02A.99.99 0 0 1 6 1.003v4.994C6 6.551 5.549 7 5.01 7H.99A.99.99 0 0 1 0 5.997V1.003zm7 0C7 .45 7.451 0 7.99 0h4.02A.99.99 0 0 1 13 1.003v4.994C13 6.551 12.549 7 12.01 7H7.99A.99.99 0 0 1 7 5.997V1.003zm7 0C14 .45 14.451 0 14.99 0h4.02A.99.99 0 0 1 20 1.003v4.994C20 6.551 19.549 7 19.01 7h-4.02A.99.99 0 0 1 14 5.997V1.003z"></path></svg>
<svg class="pen2" viewBox="0 0 20 20" width="23px" height="22px"><path d="M7 .995C7 .445 7.447 0 7.999 0H19c.552 0 .999.456.999.995v8.01c0 .55-.447.995-.999.995H8C7.447 10 7 9.544 7 9.005V.995zm0 11.003c0-.551.447-.998.999-.998H19c.552 0 .999.446.999.998v7.004c0 .551-.447.998-.999.998H8A.998.998 0 0 1 7 19.002v-7.004zM0 .992C0 .444.451 0 .99 0h4.02c.546 0 .99.455.99.992v18.016a.996.996 0 0 1-.99.992H.99a.999.999 0 0 1-.99-.992V.992z"></path></svg>
<svg class="pen3" viewBox="0 0 20 20" width="23px" height="22px"><path d="M0 5c0-.552.455-1 .992-1h18.016c.548 0 .992.445.992 1v14c0 .552-.455 1-.992 1H.992A.994.994 0 0 1 0 19V5zM0 1C0 .447.455 0 .992 0h18.016c.548 0 .992.443.992.999v1.002c0 .552-.455.999-.992.999H.992A.992.992 0 0 1 0 2.001V.999z"></path></svg>
<svg class="pen4" viewBox="0 0 20 20" width="23px" height="22px"><title>icon-new-collection</title><rect y="10.36" width="9.64" height="9.64" rx="1" ry="1"></rect><rect x="10.36" y="10.36" width="9.64" height="9.64" rx="1" ry="1"></rect><rect width="9.64" height="9.64" rx="1" ry="1"></rect><rect x="10.36" width="9.64" height="9.64" rx="1" ry="1"></rect></svg></h2>
<div class="rata">
</div>
<div class="headers2">
<div class="ki">
<img src="user.png" width="75" height="75">
<h4 class="namaprofile">Luthfi_oke</h4>
</div>
<div class="link">
<a href="https://codepen.io/upimint">View Profile</a>
</div>
<div class="sidebar1">
<ul class="sidebarda">
<a class="penq1" href="/coba/"><li class="penq1">Home</li>
</ul>
<div class="sidebar2">
<ul class="sidebarda1">
<a class="penq1" href="/coba/ij.html"><li class="penq2">About</li>
</ul>
<div class="sidebar3">
<ul class="sidebarda2">
<a class="penq1" href="/coba/ik.html"><li class="penq3">Help</li>
</ul>
<div class="sidebar4">
<ul class="sidebarda3">
<a class="penq1" href="/coba/as.html"><li class="penq4">Contact</li>
</ul>
</div>
</div>
</div>
</div>
<div class="isi">
<div class="title1">
<h2 class="k">Home</h2>
</div>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>coba script</title>
</head>
<body>
<div class="headers">
<h2 class="jika">ADMIN <svg class="pen1" viewBox="0 0 20 20" width="23px" height="22px"><path d="M0 9.002C0 8.45.455 8 .992 8h18.016c.548 0 .992.456.992 1.002v9.996c0 .553-.455 1.002-.992 1.002H.992C.444 20 0 19.544 0 18.998V9.002zm0-8C0 .45.451 0 .99 0h4.02A.99.99 0 0 1 6 1.003v4.994C6 6.551 5.549 7 5.01 7H.99A.99.99 0 0 1 0 5.997V1.003zm7 0C7 .45 7.451 0 7.99 0h4.02A.99.99 0 0 1 13 1.003v4.994C13 6.551 12.549 7 12.01 7H7.99A.99.99 0 0 1 7 5.997V1.003zm7 0C14 .45 14.451 0 14.99 0h4.02A.99.99 0 0 1 20 1.003v4.994C20 6.551 19.549 7 19.01 7h-4.02A.99.99 0 0 1 14 5.997V1.003z"></path></svg>
<svg class="pen2" viewBox="0 0 20 20" width="23px" height="22px"><path d="M7 .995C7 .445 7.447 0 7.999 0H19c.552 0 .999.456.999.995v8.01c0 .55-.447.995-.999.995H8C7.447 10 7 9.544 7 9.005V.995zm0 11.003c0-.551.447-.998.999-.998H19c.552 0 .999.446.999.998v7.004c0 .551-.447.998-.999.998H8A.998.998 0 0 1 7 19.002v-7.004zM0 .992C0 .444.451 0 .99 0h4.02c.546 0 .99.455.99.992v18.016a.996.996 0 0 1-.99.992H.99a.999.999 0 0 1-.99-.992V.992z"></path></svg>
<svg class="pen3" viewBox="0 0 20 20" width="23px" height="22px"><path d="M0 5c0-.552.455-1 .992-1h18.016c.548 0 .992.445.992 1v14c0 .552-.455 1-.992 1H.992A.994.994 0 0 1 0 19V5zM0 1C0 .447.455 0 .992 0h18.016c.548 0 .992.443.992.999v1.002c0 .552-.455.999-.992.999H.992A.992.992 0 0 1 0 2.001V.999z"></path></svg>
<svg class="pen4" viewBox="0 0 20 20" width="23px" height="22px"><title>icon-new-collection</title><rect y="10.36" width="9.64" height="9.64" rx="1" ry="1"></rect><rect x="10.36" y="10.36" width="9.64" height="9.64" rx="1" ry="1"></rect><rect width="9.64" height="9.64" rx="1" ry="1"></rect><rect x="10.36" width="9.64" height="9.64" rx="1" ry="1"></rect></svg></h2>
<div class="rata">
</div>
<div class="headers2">
<div class="ki">
<img src="user.png" width="75" height="75">
<h4 class="namaprofile">Luthfi_oke</h4>
</div>
<div class="link">
<a href="https://codepen.io/upimint">View Profile</a>
</div>
<div class="sidebar1">
<ul class="sidebarda">
<a class="penq1" href="/coba/"><li class="penq1">Home</li>
</ul>
<div class="sidebar2">
<ul class="sidebarda1">
<a class="penq1" href="/coba/ij.html"><li class="penq2">About</li>
</ul>
<div class="sidebar3">
<ul class="sidebarda2">
<a class="penq1" href="/coba/ik.html"><li class="penq3">Help</li>
</ul>
<div class="sidebar4">
<ul class="sidebarda3">
<a class="penq1" href="/coba/as.html"><li class="penq4">Contact</li>
</ul>
</div>
</div>
</div>
</div>
<div class="isi">
<div class="title1">
<h2 class="k">Home</h2>
</div>
</div>
</div>
</body>
</html>
dan ini css nya ganti dengan "style.css"
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*ini judul*/
.headers{
background-color: #202125;
}
/*ini iconnya*/
.jika{
font-family: sans-serif;
margin-left: 8px;
line-height: 60px;
color: white;
text-transform: uppercase;
letter-spacing: 0.25em;
margin-bottom: 0;
}
.rata {
width: 100%;
background: linear-gradient(to right, rgba(29,189,255,0.6) 0%, rgba(233,204,59,0.6) 34%, rgba(173,96,228,0.6) 68%, rgba(75,207,115,0.6) 100%);
height: 8px;
margin-top: -10px;
}
/*--profil--*/
.headers2{
background-color: #282828FF;
width: 100%;
height: 90px;
margin-bottom: -100px;
}
.ki{
width: 75px;
height: 75px;
margin-top: 14px;
margin-left: 10px;
background-color: white;
display: block;
}
.namaprofile{
color: white;
margin-top: -80px;
margin-left: 87px;
text-transform: none;
margin-bottom: 0.1em;
}
h4.namaprofile {
font-size: 1.2rem;
font-weight: bold;
font-family: 'Lato';
}
.link {
margin-left: 96px;
margin-top: -45px;
}
a {
text-decoration: none;
color: #7F7F7FFF;
font-size: 1.0rem;
cursor: pointer;
}
.pen1 {
fill: rgba(29,189,255,0.6);
margin-left: -8px;
margin-bottom: -1px;
}
.pen2 {
fill: rgba(233,204,59,0.6);
margin-bottom: -1px;
}
.pen3 {
fill: rgba(173,96,228,0.6);
margin-bottom: -1px;
}
.pen4{
fill: rgba(75,207,115,0.6);
margin-bottom: -1px;
}
/*kirinya sidebar*/
.sidebar1{
width: auto;
height: 244px;
background-color: #32333b;
margin-top: 40px;
}
.sidebarda li.penq1{
display: block;
font-size: 1.4rem;
padding: 12px 14px;
margin-bottom: -30px;
border-left: 6px solid rgba(29,189,255,0.6);
border-bottom: 1px solid black;
}
.sidebarda{
background: #030303FF;
list-style: none;
}
li.penq1{
color: white;
font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
line-height: 1.5;
font-weight: 350;
}
li a:hover:not(.penq1){
background: #030303FF;
cursor: pointer;
}
.sidebar2{
width: auto;
background-color: #32333b;
margin-top: 22px;
}
.sidebarda1 li.penq2{
display: block;
font-size: 1.4rem;
padding: 12px 14px;
margin-top: 30px;
border-left: 6px solid rgba(233,204,59,0.6);
border-bottom: 1px solid black;
}
li.penq2{
color: white;
font-family: 'Lato', 'Lucida Grande', 'Lucida sans Unicode', Tahoma, sans-serif;
line-height: 1.5;
font-weight: 350;
}
.sidebarda1:hover{
background: #030303FF;
cursor: pointer;
}
.sidebar3{
width: auto;
background-color: #32333b;
margin-top: -0px;
}
.sidebarda2 li.penq3{
display: block;
font-size: 1.4rem;
padding: 12px 14px;
border-left: 6px solid rgba(173,96,228,0.6);
border-bottom: 1px solid black;
}
li.penq3{
color: white;
font-family: 'Lato', 'Lucida Grande', 'Lucida sans Unicode', Tahoma, sans-serif;
line-height: 1.5;
font-weight: 350;
}
.sidebarda2:hover{
background: #030303FF;
cursor: pointer;
}
.sidebar4{
width: auto;
background-color: #32333b;
margin-top: -0px;
}
.sidebarda3 li.penq4{
display: block;
font-size: 1.4rem;
padding: 12px 14px;
border-left: 6px solid rgba(75,207,115,0.6);
border-bottom: 1px solid black;
}
li.penq4{
color: white;
font-family: 'Lato', 'Lucida Grande', 'Lucida sans Unicode', Tahoma, sans-serif;
line-height: 1.5;
font-weight: 350;
}
.sidebarda3:hover{
background: #030303FF;
cursor: pointer;
}
.isi{
width: auto;
height: 500px;
background-color: #505050FF;
flex: 1 1 auto;
padding: 30px;
}
.isi .title1{
margin-bottom: 0;
display: flex;
align-items: flex-end;
}
.title1{
border-bottom: 5px solid rgba(29,189,255,0.6);
}
.k{
color: white;
font-size: 27px;
font-family: 'Lato', 'Lato Grande', 'Lucida sans Unicode', sans-serif;
}
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*ini judul*/
.headers{
background-color: #202125;
}
/*ini iconnya*/
.jika{
font-family: sans-serif;
margin-left: 8px;
line-height: 60px;
color: white;
text-transform: uppercase;
letter-spacing: 0.25em;
margin-bottom: 0;
}
.rata {
width: 100%;
background: linear-gradient(to right, rgba(29,189,255,0.6) 0%, rgba(233,204,59,0.6) 34%, rgba(173,96,228,0.6) 68%, rgba(75,207,115,0.6) 100%);
height: 8px;
margin-top: -10px;
}
/*--profil--*/
.headers2{
background-color: #282828FF;
width: 100%;
height: 90px;
margin-bottom: -100px;
}
.ki{
width: 75px;
height: 75px;
margin-top: 14px;
margin-left: 10px;
background-color: white;
display: block;
}
.namaprofile{
color: white;
margin-top: -80px;
margin-left: 87px;
text-transform: none;
margin-bottom: 0.1em;
}
h4.namaprofile {
font-size: 1.2rem;
font-weight: bold;
font-family: 'Lato';
}
.link {
margin-left: 96px;
margin-top: -45px;
}
a {
text-decoration: none;
color: #7F7F7FFF;
font-size: 1.0rem;
cursor: pointer;
}
.pen1 {
fill: rgba(29,189,255,0.6);
margin-left: -8px;
margin-bottom: -1px;
}
.pen2 {
fill: rgba(233,204,59,0.6);
margin-bottom: -1px;
}
.pen3 {
fill: rgba(173,96,228,0.6);
margin-bottom: -1px;
}
.pen4{
fill: rgba(75,207,115,0.6);
margin-bottom: -1px;
}
/*kirinya sidebar*/
.sidebar1{
width: auto;
height: 244px;
background-color: #32333b;
margin-top: 40px;
}
.sidebarda li.penq1{
display: block;
font-size: 1.4rem;
padding: 12px 14px;
margin-bottom: -30px;
border-left: 6px solid rgba(29,189,255,0.6);
border-bottom: 1px solid black;
}
.sidebarda{
background: #030303FF;
list-style: none;
}
li.penq1{
color: white;
font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
line-height: 1.5;
font-weight: 350;
}
li a:hover:not(.penq1){
background: #030303FF;
cursor: pointer;
}
.sidebar2{
width: auto;
background-color: #32333b;
margin-top: 22px;
}
.sidebarda1 li.penq2{
display: block;
font-size: 1.4rem;
padding: 12px 14px;
margin-top: 30px;
border-left: 6px solid rgba(233,204,59,0.6);
border-bottom: 1px solid black;
}
li.penq2{
color: white;
font-family: 'Lato', 'Lucida Grande', 'Lucida sans Unicode', Tahoma, sans-serif;
line-height: 1.5;
font-weight: 350;
}
.sidebarda1:hover{
background: #030303FF;
cursor: pointer;
}
.sidebar3{
width: auto;
background-color: #32333b;
margin-top: -0px;
}
.sidebarda2 li.penq3{
display: block;
font-size: 1.4rem;
padding: 12px 14px;
border-left: 6px solid rgba(173,96,228,0.6);
border-bottom: 1px solid black;
}
li.penq3{
color: white;
font-family: 'Lato', 'Lucida Grande', 'Lucida sans Unicode', Tahoma, sans-serif;
line-height: 1.5;
font-weight: 350;
}
.sidebarda2:hover{
background: #030303FF;
cursor: pointer;
}
.sidebar4{
width: auto;
background-color: #32333b;
margin-top: -0px;
}
.sidebarda3 li.penq4{
display: block;
font-size: 1.4rem;
padding: 12px 14px;
border-left: 6px solid rgba(75,207,115,0.6);
border-bottom: 1px solid black;
}
li.penq4{
color: white;
font-family: 'Lato', 'Lucida Grande', 'Lucida sans Unicode', Tahoma, sans-serif;
line-height: 1.5;
font-weight: 350;
}
.sidebarda3:hover{
background: #030303FF;
cursor: pointer;
}
.isi{
width: auto;
height: 500px;
background-color: #505050FF;
flex: 1 1 auto;
padding: 30px;
}
.isi .title1{
margin-bottom: 0;
display: flex;
align-items: flex-end;
}
.title1{
border-bottom: 5px solid rgba(29,189,255,0.6);
}
.k{
color: white;
font-size: 27px;
font-family: 'Lato', 'Lato Grande', 'Lucida sans Unicode', sans-serif;
}
dan ini hasilnya :
Semoga apa yang saya sharekan bisa bermanfaat, jangan lupa ikuti blog saya dan komen di bawah apabila masih belum paham atau belum mengerti. Sekian dari saya.
Wasalamuallaikum wr, wb
0 komentar:
Post a Comment