Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>32.Sayfam</title>
<link rel="stylesheet" href="stil.css"/>
</head>
<body>
<div class="ust">
<div class="menu">
<ul>
<li id="logo"><a href="">logo</a></li>
<li id="store"><a href="">store</a></li>
<li id="mac"><a href="">mac</a></li>
<li id="iphone"><a href="">iphone</a></li>
<li id="watch"><a href="">watch</a></li>
<li id="ipad"><a href="">ipad</a></li>
<li id="ipod"><a href="">ipod</a></li>
<li id="itunes"><a href="">itunes</a></li>
<li id="support"><a href="">support</a></li>
<li id="search"><a href="">search</a></li>
</ul>
</div>
</div>
<div class="orta1">
<div class="spot">Change is in the Air.</div>
<div class="ipadgorsel"></div>
<div class="ipadalt">
<div class="ipadaltsol"><a href="">Learn More ></a></div>
<div class="ipadaltsag"><a href="">Watch the Keynote</a></div>
</div>
</div>
<div class="orta2">
<ul>
<li id="a1"><a href="">a1</a></li>
<li id="a2"><a href="">a2</a></li>
<li id="a3"><a href="">a3</a></li>
<li id="a4"><a href="">a4</a></li>
</ul>
</div>
<div class="alt">
<div class="alt1">Shop the <a href="">Apple Online Store</a> (1-800-MY-APPLE), visit an <a href="">Apple Retail Store</a>, or find a reseller.</div>
<div class="alt2">Copyright © 2014 Apple Inc. All rights reserved.  <a href="">Terms of Use</a> |  <a href="">Updated Privacy Policy</a></div>
<div class="alt3"><a href="">Apple</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="">Info</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="">Site Map</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="">Hots News</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="">RSS Feeds</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="">Contact Us</a> <img src="images/usa2.png" width="15" /></div>
</div>
</body> </html>
Kod:
/***** RESET *****/
Kod:



	
Kod:

	
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    /*font-size: 100%;
    vertical-align: baseline;*/
    
}
html, body {height:100%;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;} /
textarea {overflow:auto;}

/***** RESET *****/

@font-face {
    font-family:'Open Sans Condensed';
    src: url(fonts/open_sans_condensed-webfont.eot);
    src: local('Open Sans Condensed'),  
         url('fonts/open_sans_condensed-webfont.woff') format('woff'),  
         url('fonts/open_sans_condensed-webfont.ttf') format('truetype'),
         url('fonts/open_sans_condensed-webfont.svg#Open Sans Condensed') format('svg');
         
}

.ust{ width:100%; height:46px; background:#333 }
.orta1{width:100%; height:455px; background:#fff; padding:120px 0 0 0}
.orta2{width:100%; height:200px; background:#fff}
.alt{width:100%; height:62px; background:#fff; padding:20px 0 0 0}
.menu{ width:1078px; height:46px; margin:0 auto  }
.menu ul li{ float:left}
.menu ul li a{ display:block; text-indent:-2000px}
.menu ul li#logo a{ width:19px; height:23px; background:url(images/tab_apple.png); margin:11px 0 0 0}
.menu ul li#store a{ width:130px; height:20px; background:url(images/tab_store.png); margin:15px 0 0 0}
.menu ul li#mac a{ width:130px; height:20px; background:url(images/tab_mac.png); margin:15px 0 0 0}
.menu ul li#iphone a{ width:130px; height:20px; background:url(images/tab_iphone.png); margin:15px 0 0 0}
.menu ul li#watch a{ width:130px; height:20px; background:url(images/tab_watch.png); margin:15px 0 0 0}
.menu ul li#ipad a{ width:130px; height:20px; background:url(images/tab_ipad.png); margin:15px 0 0 0}
.menu ul li#ipod a{ width:130px; height:20px; background:url(images/tab_ipod.png); margin:15px 0 0 0}
.menu ul li#itunes a{ width:130px; height:20px; background:url(images/tab_itunes.png); margin:15px 0 0 0}
.menu ul li#support a{ width:130px; height:20px; background:url(images/tab_support.png); margin:15px 0 0 0}
.menu ul li#search a{ width:19px; height:19px; background:url(images/search_icon_white.png); margin:15px 0 0 0}
.menu ul li a:hover{ opacity:0.5}
.spot{ width:280px; height:150px; background:url(images/ipadair_logo_large.png) center top no-repeat; margin:0 auto; text-align:center; 
padding:70px 0 0 0; font:40px 'Open Sans Condensed'}
.ipadgorsel{ width:1193px; height:34px; background:url(images/ipadair_xlarge.jpg); margin:0 auto }
.ipadalt{ width:375px; height:40px; margin:50px auto 0 auto}
.ipadaltsol{ width:145px; height:40px; float:left}
.ipadaltsag{ width:220px; height:40px; float:left; margin:0 0 0 10px}
.ipadaltsol a{ font:32px 'Open Sans Condensed'; color:#08c; text-decoration:none }
.ipadaltsag a{ display:block; width:220px; height:40px;  font:32px 'Open Sans Condensed'; color:#08c; text-decoration:none;
background:url(images/sagok1.png) right no-repeat }
.ipadaltsol a:hover{ color:#333; }
.ipadaltsag a:hover{color:#333; background:url(images/sagok2.png) right no-repeat }
.orta2 ul li{ float:left; display:block; width:25%}
.orta2 ul li a{ display:block; height:200px; text-indent:-2000px  }
.orta2 ul li#a1 a{ background:url(images/promo_imac_large.jpg) center  }
.orta2 ul li#a2 a{ background:url(images/promo_iphone6_large.jpg) center; margin:0 0 0 5px  }
.orta2 ul li#a3 a{ background:url(images/promo_ios8_large.jpg) center; margin:0 0 0 5px  }
.orta2 ul li#a4 a{ background:url(images/promo_education_large.jpg) center; margin:0 0 0 5px  }
.alt1{ width:450px; height:15px; font:11px arial; color:#666; margin:0 auto}
.alt2{ width:430px; height:15px; font:11px arial; color:#666; margin:10px auto}
.alt3{ width:390px; height:15px; margin:0 auto}
.alt1 a, .alt2 a{font:11px arial; color:#333; text-decoration:none}
.alt3 a{font:11px arial; color:#666; text-decoration:none} 
.alt1 a:hover, .alt2 a:hover, .alt3 a:hover{text-decoration:underline}







aLinti..