Membuat Web Perpustakaan Dengan HTML dan CSS

by on in
Assalamu'alaikum Wr.Wb
Kali ini saya akan membagikan cara pembuatan web perpustakaan dengan menggunakan html dan css.. langsung aja cekidot


1. Index Halaman Utama



!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="main">
                <div class="left">
                    <h3 align="center">Menu</h3>
                    <ul>
                        <li><a href="http://localhost/Belajar_CSS/login.php">Login</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Daftar Buku</a></li>
                    </ul>
                </div>
                <div class="middle">
                    <h2 align="center">Membuat Design Web Responsive</h2><br>
                    <div align="center">
                        <img src="images/data-center.jpg" width="350" height="50">
                    </div>
                </div>
                <div class="right">
                    <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>
<div class="footer"><p align="center">Coppyrigth  2018 Belajar CSS Responsive</a></p>
</div>
</div>
</div>
</body>
</html>


2. Form Login


<html>
<head>
  <title>Login</title>
</head>
<body>
<center>
      <form method="post" action="home.php">
<table width="405" height="169" border="0" cellpadding="0" cellspacing="0">
    <tr bgcolor="#FF0000">
      <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>:
          <input name="username" type="text" id="username" />
      </label></td>
    </tr>
    <tr>
      <td height="26">Password</td>
      <td><label>:
          <input name="password" type="password" id="password" />
      </label></td>
    </tr>
    <tr>
      <td height="48"> </td>
      <td><input name="Login" type="submit" id="Login" value="Login" />
          <input name="Batal" type="submit" id="Batal" value="Batal" /></td>
    </tr>
    <tr bgcolor="#FF0000">
      <td height="26" colspan="2"><div align="right"><strong></strong></div></td>
    </tr>
  </table>
 
  </body>
</html>


3. Home




<!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"></div>
            <div class="main">
                <div class="left">
                    <h3 align="center">Menu</h3>
                    <ul>
                        <li><a href="#">Logout</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="http://localhost/Belajar_CSS/daftarbuku.php">Daftar Buku</a></li>
                    </ul>
                </div>
                <div class="middle">
     <h1 align="center">Selamat Datang Elva<h2><br>
                    <h2 align="center">Membuat Design Web Responsive</h2><br>
                    <div align="center">
                        <img src="images/bcg.jpg" width="350" height="50">
                    </div>
                </div>
                <div class="right">
                    <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>
    </div>
<div class="footer"><p align="center">Coppyrigth  2018 Belajar CSS Responsive</a></p>
</div>
</div>
</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>
<h1><marquee>Selamat Datang Di Perpustakaan Universitas Bina Sarana Informatika</marquee></h1>   
    <div id="container">
            <div class="main">
                <div class="left">
                    <h3 align="center">Menu</h3>
                    <ul>
                        <li><a href="http://localhost/Belajar_CSS/kuiss.html">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">
     <h1 align="center">Selamat Datang Elva<h2><br>
                    <h2 align="center">Daftar Buku</h2><br>

<div class="buku">
    <div class="foto">
        <img src="images/image8.jpg" width="170" height="270">
        <div class="judul">Sejarah Peradaban Islam</div>
        <div class="penulis">Faiqiq Tobroni</div>
    </div>
</div>

<div class="buku">
    <div class="foto">
        <img src="images/image1.jpg" width="170" height="270">
         <div class="judul">Art In The Blood</div>
        <div class="penulis">Faiqiq</div>
    </div>
</div>

<div class="buku">
    <div class="foto">
        <img src="images/image2.jpg" width="170" height="270">
         <div class="judul">Keajaiban Rejeki</div>
        <div class="penulis">Ippo Santosa</div>
    </div>
</div>

<div class="buku">
    <div class="foto">
        <img src="images/image3.jpg" width="170" height="270">
         <div class="judul">Killer Web Design </div>
        <div class="penulis">Su Rahman</div>
    </div>
</div>

<div class="buku">
    <div class="foto">
        <img src="images/image4.jpg" width="170" height="270">
         <div class="judul">Auto Cad 2014 Untuk Pemula</div>
        <div class="penulis">Zico Pratama</div>
    </div>
</div>

<div class="buku">
    <div class="foto">
        <img src="images/image5.jpg" width="170" height="270">
         <div class="judul">Teori Mikro Ekonomi</div>
        <div class="penulis">Bayu Pramutoko</div>
    </div>
</div>

<div class="buku">
    <div class="foto">
        <img src="images/image6.jpg" width="170" height="270">
         <div class="judul">Bahasa Indonesia</div>
        <div class="penulis">Widjono Hs</div>
    </div>
</div>

<div class="buku">
    <div class="foto">
        <img src="images/image7.jpg" width="170" height="270">
         <div class="judul">Metode Penelitian Kuantitatif</div>
        <div class="penulis">Nanang Martono</div>
    </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;
    color: #F8F8FF;
    font-size: 18px;
    font-weight: 600;
}

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: 14px;
    font-weight: 600;
}

.penulis{
    font-size: 12px;
}

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

.header{
    color: #F8F8FF;
    font-size: 50px;
    font-weight: 800;
    width: 1090px;
    background: url(../images/perpus3.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: #744d25;
}

.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;
    color: #ADFF2F;
}
.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: #744d25;
}

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

.right ul li{
    display: block;
}

.right ul li a{
    color: #fff;
    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;
    }

}
By di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)