Tugas Membuat Web Perpustakaan dengan CSS dan HTML

1. Index Halaman Utama

<html>

<head>

<title>Login</title>

</head>

<body>

<td height="37" colspan="2"><div align="center"><strong>PLEASE LOGIN</strong></div></td>

</tr>

<tr>

<td width="95" height="32">Username</td>

<td width="304"><label>:

</label></td>

</tr>

<tr>

<td height="26">Password</td>

<td><label>:

</label></td>

</tr>

<tr>

</tr>

</tr>

</table>

</div>

</body>

</html>

3.Home

<!DOCTYPE html>

<head>

<title>Belajar Design Dengan CSS</title>

</head>

<body>

<h1><marquee>Selamat Datang Di Perpustakaan Universitas Bina Sarana Informatika</marquee></h1>

<div class="header">Contoh Web Responsive Menggunakan CSS</div>

<ul>

<li><a href="Kuiss.html">Logout</a></li>

<li><a href="http://localhost/Belajar_CSS/daftar_buku.php">Daftar Buku</a></li>

</ul>

</div>

<h1 align="center">Selamat Datang Fajri<h2><br>

<h2 align="center">Membuat Design Web Responsive</h2><br>

</div>

<h3 align="center">Buku Terpopuler</h3>

<p>

<ul>

<li><a href="#">Mahir Dengan PHP</a></li>

<li><a href="#">Hack Android Untuk Pemula</a></li>

<li><a href="#">Trik Bermain SQL Server 2005</a></li>

</ul>

</p>

</div>

<div class="footer"><p align="center">Coppyrigth 2018 Belajar CSS Responsive</a></p>

</div>

</body>

</html>

4.Daftar Buku

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/Style.css">
<title>Belajar Design Dengan CSS</title>
</head>
<body>

<div id="container">
<div class="header">Contoh Web Responsive Menggunakan CSS</div>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href="http://localhost/Belajar_CSS/">Logout</a></li>
<li><a href="http://localhost/Belajar_CSS/home.php">Home</a></li>
<li><a href="#">Daftar Buku</a></li>
</ul>

<h3 align="center">Buku Terpopuler</h3>

<ul>
<li><a href="#">Mahir Dengan PHP</a></li>
<li><a href="#">Hack Android Untuk Pemula</a></li>
<li><a href="#">Trik Bermain SQL Server 2005</a></li>
</ul>

</div>

</div>
<div class="middle2">

<h2 align="center">Daftar Buku</h2><br>

<div class="buku">
<div class="foto">
<img src="images/1.jpg" width="170" height="270">
<div class="judul">Modern Web Desain</div>
<div class="penulis">Zaenal A Rozi</div>
</div>
</div>

<div class="buku">
<div class="foto">
<img src="images/2.jpg" width="170" height="270">
<div class="judul">PHP Komplet</div>
<div class="penulis">Jubille Enterprise</div>
</div>
</div>

<div class="buku">
<div class="foto">
<img src="images/4.jpg" width="170" height="270">
<div class="judul">WEB Programing</div>
<div class="penulis">Tim EMS</div>
</div>
</div>

<div class="buku">
<div class="foto">
<img src="images/5.jpg" width="170" height="270">
<div class="judul">Pemrograman Web </div>
<div class="penulis">Supono Virdiandry Putratama</div>
</div>
</div>

<div class="buku">
<div class="foto">
<img src="images/6.jpg" width="170" height="270">
<div class="judul">Buku Sakti Pemrograman WEB</div>
<div class="penulis">Didik Setiawan</div>
</div>
</div>

<div class="buku">
<div class="foto">
<img src="images/7.jpg" width="170" height="270">
<div class="judul">Desain Web Praktis</div>
<div class="penulis">Budi Kurniawan, S.kom</div>
</div>
</div>

<div class="buku">
<div class="foto">
<img src="images/8.jpg" width="170" height="270">
<div class="judul">Responsive Web Design</div>
<div class="penulis">Husein Alatas</div>
</div>
</div>

<div class="buku">
<div class="foto">
<img src="images/9.jpg" width="170" height="270">
<div class="judul">Pendidikan Fisika</div>
<div class="penulis">Hermawan F</div>
</div>
</div>

<div align="center">
</div>
</div>

</div>
</div>
<div class="footer"><p align="center">Coppyrigth 2018 Belajar CSS Responsive</a></p>
</div>
</div>
</div>
</body>
</html>

5. Style CSS

*{
padding :0 ;
margin :0 ;
}

body{
width: 100%;
background-color: #a8a8a8;

}

.marquee{
background-color: #ffffffd7;
color: #0006ff
}

p{
margin-bottom: 20px;
line-height: 1.5em;
}

h3{
font : white;
border-bottom: 1px solid #08010f;
}

a{
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: inherit;
font-size: 20px;
color: #d4d2db;
}

a:hover{
color: #ff0000;
}

.kotak{
padding-top: 300px;
}

.buku{
border:1px solid #000;
float:left;
width: 23%;
margin:6px;
padding:5px;
}

.foto img{
border: 1px solid #000000;

}

.judul{
font-size: 18px;
font-weight: 600;
}

.penulis{
font-size: 14px;

}

*{
box-sizing: border-box;
}

#container{
max-width: 100%;
background: #0c7575d7;
overflow: hidden;
margin : 0px 50px;
padding: 10px 50px 10px 50px;
}

.header{
color: #fff;
background: url(../images/00.jpg);
font-size: 30px;
height: 150px;
text-align : center;
background-color: #218acf;
}

.header h1{
color: green;
font-family: 'Times New Roman', Times, serif;
font-style: italic;
display: inline;
}

/* main */

.left{
width: 250px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
background-color: #0c5986;
}

.left ul{
list-style-type: none;
}

.left ul li{
display: block;
}

.left ul li a{
display: block;
border-bottom: 1px solid #dedede;
margin-bottom: 10px;
padding: 10px 5px;
font: #64bed4;
}

.left ul li a:hover{
color: #ADFF2F ;
}

.middle{
width: 500px;
border: 1px solid #dedede;
padding: 5px;
margin: 10px;
float: left;
}

.middle img{
background-image: img src="images/..vizta.jpg";
max-width: 100%;
height: auto;
}

.middle a{
font-weight: bold;
}

.middle2{
width: 800px;
border: 1px solid #dedede;
padding: 5px;
margin: 10px;
float: left;
}

.right{
width: 250px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
background-color: #0c5986;
}

.right ul{
list-style-type: none;
}

.right ul li{
display: block;
}

.right ul li a{
display: block;
border-bottom: 1px solid #dedede;
margin-bottom: 10px;
padding: 10px 5px;
}

.right ul li a:hover{
color: #ADFF2F ;
}

#footer{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 28pt;
color: #6813c9;
clear: both;
border: 1px solid #dedede;
padding: 15px;
}

@media screen and(max-width:995px){
#container{
width: 100%;
}
#left-columm{
width: 70%;
}
#right-columm{
width: 30%;
}
img{
width: 100%;
}
}

/* MEDIA QUIRIES (Responsive)***********/

@media screen and (max-width:1080px){
.container{
width: 100%;
}
.left{
width: 25%;
background: #0c7575d7;
}
.middle{
width: 68%;
float: right;
}
.right{
clear: both;
padding: 1% 4%;
width: auto;
float: none;
background: #0c7575d7;
}
}

/* Untuk ukuran layar 700px kebawah */

@media screen and (max-width:780px){
.header,
.footer{
text-align: center;
}
.left{
width: auto;
float: none;
}

.middle{
width: auto;
float: none;
}

.right{
width: auto;
float: none;
}
}

Cari Blog Ini

HF

Tugas Membuat Web Perpustakaan dengan CSS dan HTML

Komentar

Posting Komentar

Postingan populer dari blog ini

Menghitung Volume Kubus Menggunakan Operator Aritmatika & String

Resume Jaringan Komputer