Indra Droid: Tugas Web Perpustakaan Indra Droid

Tugas Web Perpustakaan Indra Droid

Di web perpustakaan Indra Droid ini menggunakan 4 file yaitu :

- File index.html
- File daftar-buku.html
- File login.html
- File Style.css

Kelebihan :

Memakai Boostrap
Running Text
Fast Loading
Responsive

Kekurangan / Bug :

Pada Form login, Tombol Login dan Tomol Batal Tidak berfungsi
Tampilan sederhana

Di bawah ini Script 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>Perpustakaan Indra Droid</title>
</head>
<body>
<h1>
<marquee>Selamat Datang Di Perpustakaan Indra Droid</marquee></h1>
<div id="container">
        <div class="header">
Perpustakaan Indra Droid</div>
<div class="main">
                <div class="left">
                    <h3 align="center">
Menu</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="daftar-buku.html">Daftar Buku</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</div>
<div class="middle">
                    <h3 align="center">
Daftar Book</h3>
<h2 align="center">
Membuat Design Web Perpustakaan</h2>
<br>
                    <div align="center">
                        <img src="images/data-center.jpg" width="350" height="50">
      <br>
      <div dir="ltr" style="text-align: left;" trbidi="on">
      Dengan segenap rasa senang saya bisa membuild web ini, kalian bisa mendownload Script ini dengan cara download diblogger saya atau bisa didownload <br />
<br />
       ~ <a href="https://indradroid99.blogspot.co.id/" target="_blank">Situs</a> ~<br />
<br />
Sekian dan terimakasih...
     </div>
</div>
</div>
<div class="right">
                    <h3 align="center">
Buku Terpopuler</h3>
<p>
<ul>
<li><a href="https://indradroid99.blogspot.co.id">IndraDroid 99</a></li>
<li><a href="https://indradroid07.blogspot.co.id">Indra Droid 07</a></li>
</ul>
</p>
</div>
</div>
</div>
<div class="footer">
<p align="center">
© 2018 | All Rights Reserved | Build Web by : Indra Droid</a></p>
</div>
</div>
</body>
</html>

Di bawah ini Script daftar-buku.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>Perpustakaan Indra Droid</title>
</head>
<body>
<h1>
<marquee>Selamat Datang Di Perpustakaan Indra Droid</marquee></h1>
<div id="container">
        <div class="header">
Perpustakaan Indra Droid</div>
<div class="main">
                <div class="left">
                    <h3 align="center">
Menu</h3>
<ul>
<li><a href="index.html">Back to home</a></li>
<li><a href="daftar-buku.html">Daftar Buku</a></li>
</ul>
</div>
<div class="middle">
                    <h3 align="center">
List Book</h3>
<h2 align="center">
List Book Terpopuler</h2>
<br>
                    <div align="center">
      <div dir="ltr" style="text-align: left;" trbidi="on">
       List buku terpopuler kali ini adalah tentang :<br />
      <br />
           1. Cara Instalasi Windows 7 Ultimate 64 bit<br />
        2. Cara Mengatasi Lag pada Windows 7 Ultimate 64 bit<br />
        3. Cara Instalasi Driver Windows 7 Ultimate 64 bit dengan benar<br />
        4. Cara Mangatasi Keyboard Tidak Mau Tersambung Pada PC<br />
        5. Cara mengatasi Bluescreen Pada Laptop
       </div>
</div>
</div>
<div class="right">
                    <h3 align="center">
Friend List</h3>
<p>
<ul>
<li><a href="https://indradroid99.blogspot.co.id">IndraDroid 99</a></li>
<li><a href="https://indradroid07.blogspot.co.id">Indra Droid 07</a></li>
</ul>
</p>
</div>
</div>
</div>
<div class="footer">
<p align="center">
© 2018 | All Rights Reserved | Build Web by : Indra Droid</a></p>
</div>
</div>
</body>
</html>

Di bawah ini Script login.html

Di bawah ini Script Style.css

*{
    padding :0 ;
    margin  :0 ;
}

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

}

marquee{
    background-color: #ffffffd7;
    color: #000f
}

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

.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: 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: #ca1414 ;
}

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

.box-login {
 width: 400px;
 min-height: 300px;
 border: 1px solid #666;
 margin: 10% auto;
 border-radius: 5px;
 background: #f9f9f9;
}

.header-box {
 width: 100%;
 height: 40px;
 background-color: #3366ff;
 color: #fff;
 text-align: center;
 line-height: 40px;
 font-size: 18px;
 font-weight: bold;
 border-top-right-radius: 5px;
 border-top-left-radius: 5px;
}

.box-login form input[type=text] {
 width: 90%;
 height: 30px;
 border: 1px solid #999;
 margin: 1% 0;
 padding-left: 2%;
 font-size: 16px;
}

.box-login form input[type=password] {
 width: 90%;
 height: 30px;
 border: 1px solid #999;
 margin: 1% 0;
 padding-left: 2%;
 font-size: 16px;
}

.box-login form input[type=submit] {
 padding: 3% 10%;
 display: inline-block;
 background-color: #3366ff;
 color: #fff;
 border: 1px solid #3366ff;
 cursor: pointer;
 font-size: 16px;
}

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

Sekian dari saya semoga tugas saya diterima dengan baik

Indra Droid

Tugas Web Perpustakaan Indra Droid

No comments:

Post a Comment