Agung Arpan: Kuis Web Pemograman 1 (Web Responsive Perpustakaan)

Source Code

index.html

<!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>

<h1><marquee>Selamat Datang Di Perpustakaan Universitas Bina Sarana Informatika</marquee></h1>
<div id="container">
<div class="header">"AYO MEMBACA"</div>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>

<li><a href="login.php">Login</a></li>

<li><a href="#">Home</a></li>
<li><a href="#">Daftar Buku</a></li>
</ul>
</div>
<div class="middle">
<h3 align="center">Berita</h3>
<h2 align="center">Membuat Design Web Responsive</h2><br>
<div align="center">
<img src="images/data-center.jpg" width="350" height="50">
</div>
<p><a href="#">Baca Selengkapnya >></a></p>
</div>
<div class="right">
<h3 align="center">Buku Terpopuler</h3>
<p>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Pemrograman</a></li>
<li><a href="#">Database</a></li>
</ul>
</p>
</div>
</div>
</div>
<div class="footer"><p align="center">Coppyrigth 2018 Belajar CSS Responsive</a></p>
</div>
</div>
</body>

</html>

login.php

<html>
<head>
<title>LOGIN</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="kotak_login">
<p class="tulisan_login">Silahkan login</p>

<form action="home.php" method="post">
<label>Username</label>
<input type="text" name="username" class="form_login" placeholder="Username atau email ..">
<br>
<label>Password</label>
<input type="text" name="password" class="form_login" placeholder="Password ..">

<input type="submit" class="tombol_login" value="LOGIN">

<br/>
<br/>
<center>
<a class="link" href="index.html">kembali</a>
</center>
</form>

</div>

home.php

<!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>PERPUSTAKAAN</title>
</head>
<body>
<div id="container">
<div class="header">SELAMAT DATANG <?php echo $_POST['username'];?> </div>

<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>

<li><a href="#">Login</a></li>

<li><a href="#">Home</a></li>
<li><a href="buku.php">Daftar Buku</a></li>
</ul>
</div>
<div class="middle">
<h3 align="center">PERPUSTAKAAN</h3>
<h2 align="center">UNIVERSITAS BINA SARANA INFORMATIKA</h2><br>
<div align="center">
<img src="images/data-center.jpg" width="350" height="50">
</div>
<p><a href="#">Baca Selengkapnya >></a></p>
</div>
<div class="right">
<h3 align="center">Buku Terpopuler</h3>
<p>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Pemrograman</a></li>
<li><a href="#">Database</a></li>
</ul>
</p>
</div>
</div>
</div>
<div class="footer"><p align="center">Coppyrigth 2018 Belajar CSS Responsive</a></p>
</div>
</div>
</body>
</html>

buku.php

<!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>Buku</title>
<body>
<style>
img {
width: 200px;
height: 150px;
border: 4px solid #575D63;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<img class="gambar1" src="sim.jpg"><img class="gambar2" src="koalakamal.jpg">
<img class="gambar3" src="robinhood.jpg"><img class="gambar4" src="laskarpelangi.jpg">
<img class="gambar5" src="tehnologi.jpg"><img class="gambar6" src="sejarah.jpg">
<img class="gambar6" src="dilan.jpg"><img class="gambar7" src="piknik.jpg">
<img class="gambar8" src="ceritarakyat.jpg"><img class="gambar9" src="download.jpg">
<center>
<a class="link" href="index.html">KEMBALI</a>
</center>
</body>
</html>

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;
}

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

.header{

font-size: 30px;
text-align : center;
background-color: #218acf;
}

.header h1{

font-family: 'Times New Roman', Times, serif;
font-style: italic;
}

/* main */

.left{
width: 240px;
border: 10px dotted;
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: #ca1414 ;
}

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

.middle2{
width: 490px;
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;
}

.right{
width: 250px;
border: 10px dotted;
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: #ca1414;
}

#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: 80%;
}
}

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

@media screen and (max-width:1080px){
.container{
width: 100%;
}
.left{
width: 25%;
background: #0c7575d7;
}
.middle{
width: 60%;
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;
}
}

Tampilan Index