- Katılım
- 9 Ara 2020
- Konular
- 71
- Mesajlar
- 255
- Çözümler
- 1
- Tepki puanı
- 218
- Puanları
- 2,110
HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>css deneme8</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style type="text/css">
.otobus {
width: 400px;
height: 600px;
margin: 45px auto 0 auto;
}
.anten {
width: 100px;
height: 2px;
background: black;
margin: 100px auto 0 auto;
transform: rotate(290deg);
}
.solayna {
width: 39px;
height: 25px;
background: #c9f;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-radius: 5px 0 0 5px;
margin-top: 240px;
float: left;
}
.sagayna {
width: 39px;
height: 25px;
background: #c9f;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-radius: 0 5px 5px 0;
margin-top: 240px;
float: left;
}
.cam {
width: 318px;
height: 230px;
border: 1px solid black;
border-radius: 15px 15px 0 0;
float: left;
margin-top: 45px;
}
.kaporta {
width: 318px;
height: 120px;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-radius: 0 0 10px 10px;
clear: both;
margin-left: 40px;
background: #c9f;
}
.sollastik {
width: 50px;
height: 40px;
background: black;
clear: both;
float: left;
border-radius: 0 0 5px 5px;
margin-left: 80px;
}
.saglastik {
width: 50px;
height: 40px;
background: black;
float: left;
border-radius: 0 0 5px 5px;
margin-left: 140px;
}
.dikizayna {
width: 70px;
height: 20px;
border-radius: 5px;
border: 1px solid black;
background: grey;
margin: 30px auto 0 auto;
}
.solkoltuk {
width: 120px;
height: 120px;
background: #90f;
border-radius: 10px 10px 0 0;
margin: 58px 0 0 20px;
float: left;
}
.sagkoltuk {
width: 120px;
height: 120px;
background: #90f;
border-radius: 10px 10px 0 0;
margin: 58px 0 0 37px;
float: left;
}
.solsilecek {
width: 110px;
height: 3px;
background: black;
margin: 118px 0 0 20px
}
.sagsilecek {
width: 110px;
height: 3px;
background: black;
margin: -3px 0 0 -10px;
clear: both;
}
.direksiyon {
width: 60px;
height: 30px;
border-left: 8px solid black;
border-top: 8px solid black;
border-right: 8px solid black;
border-radius: 40px 40px 0 0;
margin: 83px 0 0 20px;
clear: both;
}
.solfar {
width: 50px;
height: 50px;
background: #ff9;
border-radius: 25px;
margin: 30px 0 0 10px;
box-shadow: 5px 5px 15px #f7d3ac;
box-shadow: -5px -5px 15px #f7d3ac;
float: left;
}
.sagfar {
width: 50px;
height: 50px;
background: #ff9;
border-radius: 25px;
margin: 30px 0 0 35px;
box-shadow: 5px 5px 15px #f7d3ac;
box-shadow: -5px -5px 15px #f7d3ac;
float: left;
}
.orta {
width: 150px;
height: 100px;
float: left;
margin: 10px 0 0 12px;
}
.izgara {
width: 70px;
height: 3px;
background: #444;
margin: 25px auto 0 50px;
}
.izgara2 {
width: 80px;
height: 3px;
background: #444;
margin: 5px auto 0 45px
}
.izgara3 {
width: 90px;
height: 3px;
background: #444;
margin: 5px auto 0 40px
}
.izgara4 {
width: 100px;
height: 3px;
background: #444;
margin: 5px auto 0 35px
}
.plaka {
width: 120px;
height: 20px;
background: #ffffff;
border: 1px solid #000000;
margin: 25px auto 0 22px;
}
.plakasol {
width: 15px;
height: 15px;
background: blue;
float: left;
font:bold 10px tahoma;
color:white;
padding:5px 0 0 0;
text-align: center;
}
.plakasag{
width: 105px;
height: 17px;
float: left;
text-align: center;
font:bold 11px tahoma;
padding: 3px 0 0 0;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<script src="" async defer></script>
<div class="otobus">
<div class="anten"></div>
<div class="solayna"></div>
<div class="cam">
<div class="dikizayna"></div>
<div class="solkoltuk">
<div class="solsilecek"></div>
</div>
<div class="sagkoltuk">
<div class="direksiyon"></div>
<div class="sagsilecek"></div>
</div>
</div>
<div class="sagayna"></div>
<div class="kaporta">
<div class="solfar"></div>
<div class="orta">
<div class="izgara"></div>
<div class="izgara2"></div>
<div class="izgara3"></div>
<div class="izgara4"></div>
<div class="plaka">
<div class="plakasol">TR</div>
<div class="plakasag">OYUNCULAR ŞEHRİ</div>
</div>
</div>
<div class="sagfar"></div>
</div>
<div class="sollastik"></div>
<div class="saglastik"></div>
</div>
</body>
</html>Not:Bu kodu Youtube:Web Odası kanalı sayesinde yazdım.
