MEMBANGUN TAMPILAN WEBSITE

WEB RESPONSIVE

Oke guys , kali ini saya akan membahas tentang membuat atau membangun tampilan WEBSITE.
Baik di bawah ini saya menampilakn script sekaligus screenshot hasilnya.

Oke guys langsung saja kita masuk ke pembahasannya ya..

STYLE CSS

Oke disini saya menampilkan script nya langsung ya. sengaja saya tidak menampilkan screenshot nya agar teman-teman yang mau memastikan apakah script sama hasilnya sesuai atau tidak bisa langsng mencobanya.

body{
background: #eee;
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: 1200px;
margin: 25px auto;
}

nav.menu ul{
overflow: hidden;
color: #fff;
list-style: none;
float: left;
padding: 0;
width: 1200px;
margin: 0 0 0;
background: #1abc9c;
-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;
}

.sidebarleft {
float: left;
width: 200px;
}

.sidebar .widget {
padding: 25px;
margin: 0 0 25px;
background: #fff;
border-bottom: 2px solid #fff;
transition: all 0.5s ease;
}

.sidebarleft .widgetleft{
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;
}

.sidebarleft .widgetleft 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%;
}
.footer{
width: 100px;
height: 50px;
border-bottom: silver 1px solid;
position: fixed;
bottom: 0px;
background-color: #ffffff;
z-index: 2;
}
}
}

}

INDEX

<!DOCTYPE html>
<html>
<head>
<title>CLASS E-Learning</title>
<link rel="stylesheet" typ="text/css" href="style.css">
</head>
<body>

<header>
<h1 class="judul">E-LEARNING NATALIA WALTER KIDI DJAWANG</h1>
<h2 class="deskripsi">Memberikan Kemudahan Dalam Pembuatan Disain Web Programming Dengan CSS dan HTML</h2>
</header>

<div class="wrap">

<nav class="menu">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">About Me</a>
</li>
<li>
<a href="#">Kontak</a>
</li>
<li>
<a href="#">Login</a>
</li>
</ul>
</nav>

<aside class="sidebar">
<div class="widget">
<h2>Tutorial</h2>
<p>Selamat datang di e-learning.EPA.com, situs online ini memberikan kemudahan dalam belajar.</p>
</div>
<div class="widget">
<h2>Link Belajar Gratis</h2>
<p>Teman-teman dapat gabung pada forum dibawah ini<br>
<a target="_blank" href="https://www.phpindonesia.id/"> *PHP Indonesia</a>.</p><br>
<a target="blank" href="https://web.facebook.com/groups/codeigniter.id/?_rdc=1&_rdr"> *Facebook Code Igniter</a>.</p>
</div>
</aside>

<aside class="sidebarleft">
<div class="widgetleft">
<h2>MENU UTAMA</h2>
<a target="_blank" href="#"> Daftar Buku</a>.</p> <br>
<a target="_blank" href="#"> Daftar Anggota</a>.</p> <br>
<a target="_blank" href="#"> Daftar Kategori</a>.</p> <br>
</div>

</aside>

<div class="blog">
<div class="conteudo">
<div class="post-info">
Di Posting Oleh <b>Natalia Walter Kidi Djawang</b>
</div>
<img src="bsi.jpeg">
<hl> Kuliah Online Bersama e-learning UBSI</hl>
<hr>
<p>
LMS elearning UBSI tersebut sudah tersediah fasilitas penunjang kegiatan belajar mengajar seperti adanya materi pembelajaran, latihan soal, forum diskusi, ruang chat, video tutorial dan materi tambahan lainnya yang akan ditambahkan oleh dosen pengampuh matakuliah.
</p>
<a hrefa="#" class="continus-lendo">selengkapnya</a>

</div>

<div class="footer">

<div class="container">copyright © 2020 Natalia Walter Kidi Djawang</div>
</ing>
</div>
</div>

</body>

</html>

Cari Blog Ini

WEB ASSIGNMENT