contoh layout website tampilan depan (frontend)
A. Pendahuluan
oke bertemu lagi dengan saya kali ini saya akan sharing cara pembuatan layout website simplelest
langsung saja simak artikelnya.
B. Latar belakang
bagi kalian yang mau bikin tampilan layout depan bisa tiru codingan dibawah ini
C. Maksud dan tujuan
mengasih tahu semua orang cara buat tampilan layout depan website
D. Pelaksanakan
berikut kodingannya ganti dengan "index.html"
dan ini css nya ganti dengan "style.css"
dan ini hasilnya :
oke bertemu lagi dengan saya kali ini saya akan sharing cara pembuatan layout website simplelest
langsung saja simak artikelnya.
B. Latar belakang
bagi kalian yang mau bikin tampilan layout depan bisa tiru codingan dibawah ini
C. Maksud dan tujuan
mengasih tahu semua orang cara buat tampilan layout depan website
D. Pelaksanakan
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 :
E. Waktu pelaksanaan
2 hari
F. referensi
codepen
G. Penutup
oke sekian dari saya bila ada kesalahan saya minta maaf dan semoga bermanfaat
#salam codings
Komentar
Posting Komentar