Skip to content Skip to sidebar Skip to footer

Membuat Tampilan Google dengan CSS3 Keren

Assalamu'alaikum Wr.Wb, bertemu lagi dengan saya Muhammad Tajuddin, dalam tutorial Cara Membuat Tampilan Google dengan CSS3 Keren, sedikit perubahan dalam desainnya, ya sedikit berbeda sih dengan Google aslinya, tapi untuk tampilan yang saya buat ini lebih keren lho...
Berikut Tampilannya
Tampilan Search Google | Karya Dunia Programming
"Bagaimana cara membuatnya min..? jadi tidak sabar nih pengen nyobak hehehe, habisnya keren tuh keliatannya"
Oke, kalau tidak sabar, ya langsung saja, Ayo...!!
Buat folder kalian contoh, Google, dan simapn script HTML dibawah ini dengan nama index.html

Script HTML
<!doctype html>
<html>
<head>
<title>Jobsheet 8</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<form action="" method="get">
<div id="form">
<div class="kotak1">
<p class="p2">G</p><p class="p3">o</p><p class="p4">o</p><p class="p2">g</p><p class="p5">l</p><p class="p3">e</p>
</div>
<p class="p1">Mesin Pencarian</p>
<input name="cari" type="text" placeholder="Cari" class="cari">
<input type="image" class="button" src="images/search.png">
<div class="wrapper2">
<div class="iklan1">
<h4>Tampilan Gambar Pada Kotak 1</h4>
<img src="images/2.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 1
</div>
<div class="iklan2">
<h4>Tampilan Gambar Pada Kotak 2</h4>
<img src="images/2.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 2
</div>
<div class="iklan3">
<h4>Tampilan Gambar Pada Kotak 3</h4>
<img src="images/3.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 3
</div>
<div class="iklan4">
<h4>Tampilan Gambar Pada Kotak 4</h4>
<img src="images/4.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 4
</div>
<div class="iklan5">
<h4>Tampilan Gambar Pada Kotak 5</h4>
<img src="images/3.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 5
</div>
</div>
</div>
</form>
</body>
</html>

Selanjutnya copykan script CSS dibawah ini kedalam file yang berbeda dengan HTM tadi. akan tetapi diletakkan dalam satu folder.

Script CSS
body {
    background: #ffffff;
    font-family: Arial;
}
#form {
    background: #ffffff;
    width: 1200px;
    height: 500px;
    padding: 10px;
    border-radius: 4px;
    margin: auto;
    margin-top: 60px;
}
.kotak1 {
    width: 130px;
    height: 50px;
    border: 0px solid black;
    position: absolute;
    margin-left: 535px;
    margin-right: auto;
}
.p2 {
    font-size: 2.5em;
    color: #3498db;
    text-align: center;
    margin-bottom: -10px;
    margin-top: 10px;
    float: left;
}
.p3 {
    font-size: 2.5em;
    color: #e74c3c;
    text-align: center;
    margin-bottom: -10px;
    margin-top: 10px;
    float: left;
}
.p4 {
    font-size: 2.5em;
    color: #f1c40f;
    text-align: center;
    margin-bottom: -10px;
    margin-top: 10px;
    float: left;
}
.p5 {
    font-size: 2.5em;
    color: #2ecc71;
    text-align: center;
    margin-bottom: -10px;
    margin-top: 10px;
    float: left;
}
.p1 {
    font-size: 1.5em;
    color: #c9c9c9;
    text-align: center;
    padding-top: 50px;
}
input.cari {
    width: 700px;
    height: 50px;
    border: 1px solid #c9c9c9;
    border-radius: 3px 0px 0px 3px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 200px;
    font-size: 1em;
    color: #c9c9c9;
    float: left;
}
input.cari:focus {
    border: 1px solid #2ecc71;
    box-shadow: glow variation;
   
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    text-decoration: none;
}
input.button {
    background: #e74c3c;
    padding: 16px;
    color: #ffffff;
    width: 23px;
    height: 23px;
    border-radius: 0px 3px 3px 0px;
    border: 0px solid #000000;
    margin-left: -5px;
    margin-bottom: -22px;
    float: left;
}
input.button:hover {
    background: #3498db;
   
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    text-decoration: none;
}
.wrapper2 {
    width: 1080px;
    height: 280px;
    text-align: center;
    margin-top: 90px;
    border: 0px solid black;
    position: absolute;
    margin-left: 50px;
}
img {
    width: 150px;
    height: 90px;
    cursor: pointer;
    border: 1px solid #c9c9c9;
}
.iklan1 {
    width: 175px;
    height: 270px;
    border: 2px solid #1abc9c;
    float: left;
    margin-left: 0px;
    border-radius: 5px;
    padding: 10px;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan2 {
    width: 175px;
    height: 270px;
    border: 2px solid #8e44ad;
    float: left;
    margin-left: 20px;
    border-radius: 5px;
    padding: 10px;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan3 {
    width: 175px;
    height: 270px;
    border: 2px solid #3498db;
    float: left;
    margin-left: 20px;
    border-radius: 5px;
    padding: 10px;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan4 {
    width: 175px;
    height: 270px;
    border: 2px solid #c0392b;
    float: left;
    margin-left: 20px;
    border-radius: 5px;
    padding: 10px;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan5 {
    width: 175px;
    height: 270px;
    border: 2px solid #e67e22;
    float: left;
    margin-left: 20px;
    border-radius: 5px;
    padding: 10px;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan1:hover {
    background: #16a085;
    color: #ffffff;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan2:hover {
    background: #9b59b6;
    color: #ffffff;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan3:hover {
    background: #3498db;
    color: #ffffff;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan4:hover {
    background: #c0392b;
    color: #ffffff;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}
.iklan5:hover {
    background: #e67e22;
    color: #ffffff;
   
    transition: 1.5s all;
    -webkit-transition: 1.5s all;
    -moz-transition: 1.5s all;
    -o-transition: 1.5s all;
    text-decoration: none;
}

Bagaimana...? menarik bukan tampilannya...? mau mencoba yang lain..?, Ikuti terus tutorial-tutorial menarik Dunia Programming Lainnya, dengan cara kirimkan alamat email kalian dikanan blog ini. dijamin kalian tidak akan ketinggalan informasi, Oke Saya pamit dulu hehehe, Terimakasih.

2 comments for "Membuat Tampilan Google dengan CSS3 Keren"

  1. Mantap :)
    Kuy buatin gw Form Login dung..

    ReplyDelete
    Replies
    1. Oke, Untuk Form Login saya akan buatkan dan desainnya pastinya Hasil tangan sendiri :), Terima Kasih sudah mampir :)

      Delete

Berlangganan via Email