Template Website OLX
Hai, kali ini aku mau berbagi template website OLX, template ini masih banyak kekurangan tapi untuk tampilan sudah mirip dengan OLX
Template ini murni css yang saya buat sendiri .
kekurangan dari template ini adalah
- Belum ada nya javascript
- tampilan jika di responsive kan masih acak-acakkan
Berikut gambaran source code css nya
body{
margin: 0px;
}
section{
padding-left: 180px;
padding-right: 180px;
font-family: sans-serif;
}
.logo{
width: 100%;
height: 100%;
}
.logo-gambar{
width: 93px;
height: 93px;
}
.slogan{
padding-left: 10px;
top:50px;
position: absolute;
font-size:20px;
font-weight:normal;
line-height:20px;
color: #545352;
}
.masuk{
padding-left: 550px;
top:50px;
position:absolute;
font-size:18px;
font-weight:normal;
line-height:20px;
}
.tambah-iklan{
padding-left: 705px;
top:43px;
position: absolute;
font-size:18px;
font-weight:normal;
line-height:20px;
}
.button-tambah-iklan {
background-color: #ff6a21; /* Orange */
border: none;
color: white;
padding: 7px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
.button-tambah-iklan:hover{
background-color: #fea377;
}
.button-cari {
background-color: #8709c1; /* Orange */
border: none;
color: white;
padding: 9px 25px 9px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 2px;
cursor: pointer;
margin-left: 10px;
}
a{
color: #0d85c3;
text-decoration: none;
position:relative;
}
a:hover{
color: #ff6a21;
}
.pencarian{
width: 935px;
background-color: #e2dae3;
position: relative;
border-radius: 5px;
padding: 15px 0px 15px 15px;
}
.kategori{
float: left;
margin-top: 10px;
width: 500px;
position: relative;
}
.ads{
padding-left:30px;
text-align: right;
float: left;
margin-top: 10px;
width: 450px;
position: relative;
}
Berikut source code html nya
<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="icon" type="image/x-icon" href="assets/img/logo.png">
<link rel="stylesheet" href="assets/css/font-awesome/4.5.0/css/font-awesome.min.css" media="all">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<title>OLX Versi Saya</title>
</head>
<body>
<section id="header">
<header>
<div class="">
<div class="logo">
<a href="https://www.olx.co.id/"><img src="assets/img/logo.png" class="logo-gambar" alt="Cara Tepat Jual Cepat" title="OLX Indonesia, situs jual beli. Cara Tepat Jual Cepat"></a>
<span class="slogan">
Cara Tepat Jual Cepat
</span>
<span class="masuk">
<a href="https://www.olx.co.id/"><strong><li class="fa fa-user" style="padding-right:5px;"></li> Akun Saya</strong></a>
</span>
<span class="tambah-iklan">
<a href=""><button class="button-tambah-iklan" type="button" name="button"><li class="fa fa-plus"></li> Pasang Iklan</button></a>
</span>
</div>
</div>
</header>
</section>
<section id="pencarian">
<div class="pencarian">
<form class="" action="index.html" method="post">
<input type="text" class="provinsi" name="" value="" placeholder="Semua Provinsi">
<input type="text" class="cari" name="" value="" placeholder="2.883.258 iklan disekitar anda">
<button type="button" class="button-cari" name="button"><strong><li class="fa fa-search"></li> Cari</strong></button>
</form>
</div>
</section>
<section>
<div class="kategori">
<div class="mobil">
<img src="assets/img/mobil.png" alt="">
<br>
<label for="mobil"><a href="">Mobil</a></label>
</div>
<div class="motor">
<img src="assets/img/motor.png" alt="">
<br>
<label for="motor"><a href="">Motor</a></label>
</div>
<div class="properti">
<img src="assets/img/rumah.png" alt="">
<br>
<label for="properti"><a href="">Properti</a></label>
</div>
<div class="fashion">
<img src="assets/img/fashion.png" alt="">
<br>
<label for="fashion"><a href="">Fashion dan Keperluan Pribadi</a></label>
</div>
<div class="elekronik">
<img src="assets/img/hp.png" alt="">
<br>
<label for="elekronik"><a href="">Elektronik & Gadget</a></label>
</div>
<div class="hobbi">
<img src="assets/img/olahraga.png" alt="">
<br>
<label for="hobbi"><a href="">Hobi & Olahraga</a></label>
</div>
<div class="rumahtangga">
<img src="assets/img/rumahtangga.png" alt="">
<br>
<label for="rumahtangga"><a href="">Rumah Tangga</a></label>
</div>
<div class="bayi">
<img src="assets/img/bayi.png" alt="">
<br>
<label for="bayi"><a href="">Perlengkapan Bayi & Anak</a></label>
</div>
<div class="kantor">
<img src="assets/img/kantor.png" alt="">
<br>
<label for="kantor"><a href="">Kantor & Industri</a></label>
</div>
<div class="jasa">
<img src="assets/img/jasa.png" alt="">
<br>
<label for="jasa"><a href="">Jasa & Lowongan</a></label>
</div>
</div>
<div class="ads">
<a href=""><img src="assets/img/ads.jpg" alt=""></a>
</div>
</section>
Nanti bisa terkena Copyright dari situs aslinya.
Masih sederhana bukan ? buat kalian yang menginginkan templatenya bisa hubungi saya di kontak yang ada. Terimakasih sudah berkunjung.
Perhatian: Kami tidak pernah meminta imbalan atau biaya dalam bentuk apapun terhadap rekrutmen disitus ini apabila ada pihak yang mengatasnamakan kami atau perusahaan meminta biaya seperti transportasi atau akomodasi atau yang lainnya bisa dipastikan itu PALSU.
0 Response to "Template Website OLX "
Posting Komentar