Araba Site (Uygulama 9)

site

HTML Tarafı

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; <html xmlns=”http://www.w3.org/1999/xhtml”&gt; <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Uyg 9</title> <link rel=”stylesheet” href=”css/style.css” type=”text/css” /> </head> <body> <div id=”kabuk”> <div id=”menü”><p>Hakkımızda &nbsp;&nbsp;+&nbsp;&nbsp; Okulumuz &nbsp;&nbsp;+ &nbsp;&nbsp;Sınıfımız &nbsp;&nbsp;+ &nbsp;&nbsp;Lorem İpsum&nbsp;&nbsp; + &nbsp;&nbsp;Lorem İpsum&nbsp;&nbsp; + &nbsp;&nbsp;İrtibat&nbsp;&nbsp; + &nbsp;&nbsp;AUTO LEASE QUİTE&nbsp;&nbsp;</p></div> <div id=”logo”><img src=”direksion.jpg” /></div> <div id=”resim”><img src=”2013MY-VW-CC-3.jpg” /></div> <div id=”solmenü”><div id=”solmenübaslik”><p><b>AMMOUNCEMENTS & SPECIALS</b></p></div> <p><b>SEPTEMBER 2008</b></p> <p>Don’t forget about our mounthly auto kase specials – Incentives change frequenfty so check back offent</p> <p><div id=”button”>check</div></p> <p><div id=”button1″><img src=”img/soru-işareti-300×300.jpg” />SORRY LİVE CHAT IS UNNAVATABLE</div></p> </div> <div id=”içerik”> <h1>Welcome To Auto Lease Today </h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae congue ipsum. Phasellus eget libero erat. Sed cum lacus pellentesque in. Vivamus ut dapibus risus, at tincidunt urna. Nullam in ornare felis. Donec scelerisque est pretium, blandit nunc vitae, fermentum arcu. Sed condimentum ligula ullamcorper, ultricies eros tincidunt, rhoncus mi. In hac habitasse platea dictumst. Sed pharetra scelerisque eros, ut vulputate odio pretium a.</p> <p>&nbsp;</p> <p>Etiam arcu felis, ultricies at molestie sed, convallis non diam. Phasellus venenatis sem magna, quis aliquet eros pulvinar quis. Mauris non lobortis tortor, a ultricies libero. Aenean euismod rutrum ante, eu tempor elit tincidunt et. Mauris sit amet sollicitudin felis. Donec sed luctus velit. Vivamus luctus ut orci at gravida.</p> <p>&nbsp;</p> <p>Aenean vel ipsum et nibh dictum aliquet.</p>, <p>&nbsp;</p> <ol> <li>Aenean vel ipsum et nibh dictum aliquet.</li> <li>Aenean vel ipsum et nibh dictum aliquet.</li> <li>Aenean vel ipsum et nibh dictum aliquet.</li> <li>Aenean vel ipsum et nibh dictum aliquet.</li> <li>Aenean vel ipsum et nibh dictum aliquet.</li> <li>Aenean vel ipsum et nibh dictum aliquet.</li> </ol> </p> <p>&nbsp;</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae congue ipsum. Phasellus eget libero erat. Sed condimentum nisl et sapien ultricies adipiscing. Pellentesque consequat nulla a ligula molestie fringilla. Aenean gravida fermentum justo, ac cursus nisi tincidunt eget. Nullam placerat neque tincidunt risus ultrices, sed aliquam nunc rutrum. Mauris gravida mattis eros. Praesent vel nisi ac mi porta dignissim. Donec mollis quam et sagittis feugiat. Quisque ornare libero metus, in condimentum lacus pellentesque in. Vivamus ut dapibus risus, at tincidunt urna. Nullam in ornare felis. Donec scelerisque est pretium, blandit nunc vitae, fermentum arcu. Sed condimentum ligula ullamcorper, ultricies eros tincidunt, rhoncus mi. In hac habitasse platea dictumst. Sed pharetra scelerisque eros, ut vulputate odio pretium a.</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae congue ipsum. Phasellus eget libero erat. Sed condimentum nisl et sapien ultricies adipiscing. Pellentesque consequat nulla a ligula molestie fringilla. Aenean gravida fermentum justo, ac cursus nisi tincidunt eget. Nullam placerat neque tincidunt risus ultrices, sed aliquam nunc rutrum. Mauris gravida mattis eros. Praesent vel nisi ac mi porta dignissim. Donec mollis quam et sagittis feugiat. Quisque ornare libero metus, in condimentum lacus pellentesque in. Vivamus ut dapibus risus, at tincidunt urna. Nullam in ornare felis. Donec scelerisque est pretium, blandit nunc vitae, fermentum arcu. Sed condimentum ligula ullamcorper, ultricies eros tincidunt, rhoncus mi. In hac habitasse platea dictumst. Sed pharetra scelerisque eros, ut vulputate odio pretium a.</p> </div> <div id=”solgeridonus”> <p><img src=”ger-donus-logo.jpg” /></p> <p>Lorem İpsum</p> <p>Lle vocal v Lle vocal Lle vocal Lle vocal Lle vocal Lle vocal </p> </div> <div id=”altmenü”><div id=”altmenübuton”><p>Horwide Auto Le…</p></div></div> </div> </body> </html>

CSS TARAFI

@charset “utf-8”; *{ margin:0; padding:0; border:none;} body{ background:#333;} div#kabuk { width:1000px; height:1200px; background-color:#000;;margin:0 auto; border:1px solid #999;} div#menü { width:1000px; height:50px; background-image:url(../img/men%C3%BC.png); border-bottom:#900 solid 5px;} div#menü p { text-align:center;color:#CCC; padding:20px; size:auto;} div#logo img { float:left;} div#resim img { float:left;} div#solmenü { float:left; width:295px; height:500px; background-color:#000;; margin-left:5px; margin-top:-40px;-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;} div#solmenü p{ float:left; color:#CCC;} div#button{ width:70px; height:20px; float:right; border:1px solid #333; margin-top:35px; margin-right:45px; background:#FFF; text-align:center;} div#button1{ width:220px; height:60px; float:right; border:1px solid #CCC; margin-left:10px; background:#FFF; text-align:left; text-align:center; padding:20px; margin-right:15px; margin-top:200px; } div#button1 img { float:left;} div#solmenübaslik{ float:left; width:295px; height:50px; background-color:#313131; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;} div#solmenübaslik p { text-align:center; color:#CCC; margin-top:15px; font:Arial, Helvetica, sans-serif;} div#solgeridonus{ float:left; width:290px; height:350px; background:#000; margin-left:5px; margin-top:5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;} div#solgeridonus img { margin-top:65px; margin-left:5px;} div#solgeridonus p { color:#F00; text-align:center;} div#içerik{width:700px; height:815px; float:right; background:#000; clear:inherit;} div#içerik p { float:left; color:#FFF; margin-left:10px;} div#içerik h1 { float:left; color:#900; margin-left:10px; margin-bottom:10px;} div#içerik ol { float:left; color:#CCC; margin-left:100px; margin-top:10px; clear:left;} div#içerik ol li { float:none; color:#CCC;} div#altmenü{ width:1000px; height:50px; float:left; background:url(../img/altmen%C3%BC.png); margin-top:5px;} div#altmenübuton { width:130px; height:40px; float:left; margin-left:5px; margin-top:2px; background-color:#2A2A2A; border:#999 solid 2px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;} div#altmenübuton p { float:right; text-align:center; margin-top:10px; color:#CCC;}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s