- Template 1050 kodu

CSS KODU

/ Structural Styles /
html {margin: 0;
padding: 0;
}
body {margin: 0;
color: #cacaca;
padding: 0;
font: normal 9.5pt/16pt verdana, 'trebuchet ms', sans-serif;
background-color: #001519;
}
#bg {width: 744px;
margin-right: auto;
margin-left: auto;
}
#wrap {width: 800px;
border: 1px solid #0f0504;
}
#banner {position: relative;
background: #4d2a26 url(https://img.webme.com/pic/g/guckanwebtasarimlari/header.jpg) no-repeat;
height: 141px;
margin: 0;
padding: 0;
}
#mainpane {overflow: hidden;
background-color: #2b0f0c;
}

/ General Styles /
h1, h2, h3, h4, h5, h6 {font-weight: normal;
}
h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote {margin-top: 10px;
margin-bottom: 10px;
}
a, a:visited, a:focus {color:#ffffff;
font-weight: bolder;
text-decoration:none;
}
a:hover{text-decoration: underline;
}
.grey {color: #cdcdcd;
}
blockquote {font-weight: normal;
font-style: oblique;
margin: 0px 0px 10px 0px;
padding-left:10px;
line-height:1.5;
border-left:4px solid #4d2a26;
}
code {display: block;
margin-left: 30px;
padding: 5px;
}
img {border: 1px solid #4b3735;
margin: 5px;
padding: 2px;
text-align: center;
}
img.float-right {margin: 5px 0px 5px 15px;
float:right;
}
img.float-left {margin: 0 10px 5px 0px;
float:left;
}
table {border-collapse: collapse;
margin: 10px auto 15px auto;
border: 1px solid #3c201d;
}
th {background: #4d2a26;
height: 25px; padding: 0 10px;
color: #ffffff;
text-align: left;
border-left: 1px solid #3c201d;
border-bottom: solid 2px #3c201d;
}
td {padding: 0 10px;
height: 25px;
}
tr.odd {background: #3c201d;
}
tr.even {background: #2b0f0c;
}

form {margin: 10px auto;
padding: 5px;
border: 1px solid #4b3735;
}
label {display: block;
font-weight: bold;
margin: 5px;
}
input {padding: 2px;
border: 1px solid #eee;
}
textarea {width: 400px;
padding: 2px;
border: 1px solid #eee;
height: 100px;
display: block;
}
input.button {margin: 0;
padding: 2px 3px;
border: 1px solid #f2f2f2;
}

/ Header Styles /
#identity {position: absolute;
top: 5px;
right: 85px;
margin: 0px;
padding: 0px;
border: none;
text-align: right;
}
#identity h1 a {color: #fabf67;
font-size: 7pt;
font-weight: bolder;
text-decoration: none;
line-height: 13pt;
}
#identity h2 {color: #fabf67;
font-size: 8pt;
font-weight: bolder;
text-decoration: none;
line-height: 10pt;
}
#identity h1, #identity h2 {margin: 0px;
padding: 0px;
}

#navbar {position: absolute;
top: 5px;
margin: 0px 0 0 567px;
text-align: right;
padding: 0px;
}
#navbar ul {list-style-type: none;
padding: 0px;
width: 100%;
margin: 0px;
}
#navbar li {float: left;
margin: 0px 10px 0 0;
padding: 0px;
display: block;
}
#navbar li a {text-decoration: none;
margin: 0;
padding: 0px;
display: block;
}
#navbar img {border: 2px solid #fff;
}

#about-snippet {position: absolute;
left: 30px;
margin: 30px 0px 0px 0px;
padding: 0px 0px 5px 0px;
float: right;
width: 200px;
}
#about-snippet p {font-size: 8pt;
line-height: 10pt;
color: #f8c781;
padding: 0;
margin: 0;
}
#about-snippet a {font-weight: bolder;
color: #f8c781;
padding: 0;
margin: 0;
}

/ Sdebar Styles /
#leftcolumn {position: relative;
margin: 0 0 10px 0;
padding: 0;
width: 243px;
height: 100%;
float: left;
background: #4d2a26 url(https://img.webme.com/pic/g/guckanwebtasarimlari/sidebar_bg.gif) top left repeat-y;
}
#sidebar {padding: 0;
margin: 0 10px 0 0px;
}
#clearingdiv {margin: 0;
padding: 0;
clear: both;
height: 21px;
background: transparent url(https://img.webme.com/pic/g/guckanwebtasarimlari/sidebar_bottom.gif) bottom left no-repeat;
}
#sidebar h3 {color: #fabf67;
display: block;
margin: 0;
font-size: 1.0em;
font-weight: bold;
padding: 3px 3px 3px 20px;
}
#sidebar p {margin: 0 20px 20px 20px;
padding: 3px 0 3px 0;
}
#sidebar a {font-weight: normal;
}
#sidebar a:hover {color: #efefef;
}
#sidebar p, #sidebar a {color:#cfcfcf;
font-size:9.5pt;
}
#sidebar ul {margin-left: 20px;
padding-left: 0;
list-style: none;
}
#sidebar li {padding-left: 10px;
background-image: url(https://img.webme.com/pic/g/guckanwebtasarimlari/arrow.gif);
background-repeat: no-repeat;
    background-position: 0 6px;
    line-height:18px;
}

/ Content Styles /
#content {padding: 10px;
width: 530px;
float: right;
}
#content h3 {color: #fabf67;
clear: both;
font-size: 11pt;
text-align: left;
font-weight: bold;
border-bottom: 1px solid #4d2a26;
}
#content h3 a {color: #fabf67;
}
#content h3 a:hover {text-decoration: none;
}
#content h4 {margin-bottom:15px;
font-size: 10pt;
font-weight:bold;
}
#content p {margin-bottom:10px;
}
div.metabox {margin: 0 0 10px 10px;
padding: 5px;
width: 160px;
float: right;
font-size: 8pt;
background-color: #4d2a26;
border: 1px solid #220d0c;
color: #e8e8e8;
}

/ Footer Styles /
#footer {background-color: #4d2a26;
border-top: 1px solid #0f0504;
clear: both;
text-align: left;
}
#footer p {margin: 0;
padding: 5px;
color: #cfcfcf;
font: small/1.6em "Lucida Grande", Verdana, Sans-serif;
}
#footer a {text-decoration: underline;
color: #cfcfcf;
}
#footer a:hover {color: #b7b6b6;
}

HTML KODU

<meta content="" name="keywords" />
<meta content="" name="description" />
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<link href="style.css" type="text/css" rel="stylesheet" />
<div id="bg">
<div id="wrap">
<div id="banner">
<div id="identity">
<h1><font size="3">SİTE İSMİ</font></h1>
<h2>Site Slogan</h2>
</div>

<div id="about-snippet">
<p>Güçkanweb tasarım sayfalarına hoşgeldiniz. Tasarımı kullanmak isterseniz kodunu <a href="#">buradan alabilirsiniz.</a></p>
</div>
</div>

<div id="mainpane">
<div id="content">
<h3>BASLIK 1</h3>
<p><font size="2">Thanks for downloading pixabella02, the second in a series of free open source templates designed by Pixabella. The inspiration for this template came from watching the movie Chocolat starring Juliette Binoche. This template is valid XHTML transitional, and includes two page types, a regular html page, and a blog template page. This text is <strong>bold</strong>, this is <u>underlined</u>, and this is <em>italic</em>.</font></p>
<p><font size="2">This page shows examples of a blockquote, placing an image into your page, using a table, a sample contact form, showing code excerpts, and order and unordered lists. Hope you like it.</font></p>
<h4>Blockquote</h4>
<blockquote><font size="2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras bibendum tristique odio. Aenean interdum sem nec elit scelerisque vehicula. Suspendisse vestibulum. In eu lectus. Aliquam sit amet nulla. Donec purus. Nullam commodo porttitor massa. Etiam lobortis tellus in est. Ut pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ac nibh nec quam porttitor sagittis.</font></blockquote>
<h4>An Image With Text</h4>
<p><img class="float-left" height="88" alt="Pink Azalea" width="100" src="https://img.webme.com/pic/g/guckanwebtasarimlari/pink_azalea_small.jpg" /><font size="2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras bibendum tristique odio. Aenean interdum sem nec elit scelerisque vehicula. Suspendisse vestibulum. In eu lectus. Aliquam sit amet nulla. Donec purus. Nullam commodo porttitor massa. Etiam lobortis tellus in est. Ut pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ac nibh nec quam porttitor sagittis.</font></p>
<p><font size="2">Etiam iaculis lectus ut nibh. Etiam interdum nulla ut lectus. Nulla vulputate, arcu eu pulvinar molestie, purus diam sagittis ligula, ac facilisis lacus sapien auctor urna. Etiam leo. Nam eget purus at odio iaculis vehicula. Nam pede orci, varius sit amet, mattis at, scelerisque sed, diam. Ut sagittis ipsum at lorem. Praesent non nibh. Cras vulputate. Cras in lacus ac libero tincidunt aliquam. Morbi placerat tristique lacus. Phasellus enim. Nullam malesuada molestie lectus. Vivamus sit amet arcu. Duis convallis justo ut velit.</font></p>
<h4>A Table with Data</h4>
<table>
    <tbody>
        <tr>
            <th class="first"><font size="2">Username</font></th>
            <th><font size="2">Phone</font></th>
            <th><font size="2">Dept Homepage</font></th>
        </tr>
        <tr class="odd">
            <td class="first"><font size="2">Harry Smith</font></td>
            <td><font size="2">012-1234 5678</font></td>
            <td><a href="#"><font size="2">Accounts Department</font></a></td>
        </tr>
        <tr class="even">
            <td class="first"><font size="2">Susan Jenkins</font></td>
            <td><font size="2">012-2345 6789</font></td>
            <td><a href="#"><font size="2">Marketing Whizzkids</font></a></td>
        </tr>
        <tr class="odd">
            <td class="first"><font size="2">Todd Rhodes</font></td>
            <td><font size="2">012-3456 7891</font></td>
            <td><a href="#"><font size="2">Manufacturing</font></a></td>
        </tr>
        <tr class="even">
            <td class="first"><font size="2">Wendy Kline</font></td>
            <td><font size="2">012-4567 8912</font></td>
            <td><a href="#"><font size="2">Customer Care</font></a></td>
        </tr>
    </tbody>
</table>
<h4>Example Form</h4>
<form action="#">
    <p><label><font size="2">Name</font></label><font size="2"> </font><input alt="Name" size="30" name="dname" value=" " type="text" /><font size="2"> </font><label><font size="2">Email</font></label><font size="2"> </font><input alt="Email" size="30" name="demail" value=" " type="text" /><font size="2"> </font><label><font size="2">Your Comments</font></label> <textarea rows="5" cols="5"></textarea> <br />
    <input class="button" type="submit" value="Sorguyu Gönder" /></p>
</form>
<h4>Code</h4>
<p><code><font size="2">code, pre { <br />
display: block; { <br />
font-size:10pt; <br />
margin:0 0 0 20px; <br />
} </font></code></p>
<h4>Ordered and Unordered Lists</h4>
<font size="2"><strong>Ordered List</strong> </font>
<ol>
    <li><font size="2">First </font></li>
    <li><font size="2">Second </font></li>
    <li><font size="2">Third </font></li>
</ol>
<font size="2"><strong>Unordered List</strong> </font>
<ul>
    <li><font size="2">First </font></li>
    <li><font size="2">Second </font></li>
    <li><font size="2">Third </font></li>
</ul>
</div>

<div id="leftcolumn">
<div id="sidebar">
<div id="SideBarFeature">
<h3><font size="2">BASLIK 2</font></h3>
<p>Sed etiam et lorem ipsum nulla vero et lobortis felis sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros etiam sed commodo.</p>
<p>Nullam malesuada molestie lectus. Vivamus sit amet arcu. Duis convallis justo ut velit.</p>
</div>
<div id="MENU LINK">
<h3><font size="2">Menu Links</font></h3>
<ul>
    <li><a href="index.html">Two Column HTML</a></li>
    <li><a href="index2.html">Two Column Blog</a></li>
    <li><a href="#">Another Link</a></li>
    <li><a href="#">Another Link</a></li>
</ul>
</div>
</div>

<div id="clearingdiv"> </div>
</div>

<div id="footer">
<p>© 2006 Your Name. <a href="#">Contact Me</a>. Design by <a href="http://www.guckanweb.tr.gg">ğolozlu</a></p>
</div>
</div>
</div>
</div>

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?

Ücretsiz kaydol