WorderExpress

complete

Önizleme:

/* ----------------------- layout ----------*/
.wrapper {
	margin: 0 auto;
	min-width: 980px;
}
.main_content {
}
/* ------------------ HEADER HERE -------------------*/
.header {
	width: 100%;
	background: #1ca6d7;
}
.header-container {
	width: 980px;
	margin: 0 auto;
	padding: 22px 0;
}
.header-container .logo {
	display: inline-block;
	float: left;
	padding: 0 0 0 34px;
}
.header-container .logo a {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 38px;
	color: #ffffff;
	font-weight: normal;
	display: block;
}
.header-container .toll-free {
	display: inline-block;
	float: right;
	padding: 20px 27px 0 0;
}
.header-container .toll-free p {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	font-weight: normal;
	display: inline-block;
}
/*-------------------------------------------*/

/* ------------------------- NAVIGATION HERE ---------------*/
.nav {
	width: 100%;
	background: url(https://img.webme.com/pic/w/worderexpress/complete_nav-bg.jpg) repeat-x;
}
.nav-in {
	width: 980px;
	margin: 0 auto;
}
.nav-in ul {
	width: 727px;
	margin: 0 auto;
}
.nav-in ul li {
	float: left;
	display: inline-block;
	background: url(https://img.webme.com/pic/w/worderexpress/complete_nav-li-bg.png) no-repeat right center;
	padding: 16px 37px 16px 0;
	margin: 0 0 0 41px;
}
.nav-in ul li a {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 16px;
	color: #ffffff;
	display: inline-block;
}
.nav-in ul li a span {
}
.nav-in ul li a:hover {
}
.ped {
	padding-right: 0 !important;
}
/* ---------------------------------------------------------*/

/* ------------------------ MIAN CONTENT HERE --------------*/
.container {
	width: 980px;
	margin: 0 auto;
	padding-top: 20px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 24px;
	background: #ffffff;
}
.container-in {
	width: 940px;
	margin: 0 auto;
}
.container-in img {
	padding-top: 0;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 20px;
}
.read1 {
	width: 301px;
	background: #eeeeee;
	float: left;
	padding: 26px 0 23px 0;
	margin: 0 18px 0 0;
}
.read1-img1 {
	width: 32px;
	height: 30px;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 22px;
}
.read1 h3 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #333333;
	font-weight: normal;
	text-align: center;
	padding: 0 0 22px;
}
.read1 p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	font-weight: normal;
	text-align: center;
	line-height: 20px;
	padding: 0 9px 27px 9px;
}
.read1 a {
	width: 97px;
	margin: 0 auto;
	background: #1ca6d7;
	border-radius: 6px;
	position: relative;
	behavior: url(PIE.htc);
	display: block;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #ffffff;
	font-size: 11px;
	padding: 7px 0 6px;
}
.read1 a:hover {
	text-decoration: underline;
}
.welcome {
	margin-top: 20px;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 32px;
	padding: 22px 0 26px 18px;
	background-color: #f6f6f6;
}
.welcome h5 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 20px;
	color: #333333;
	display: inline-block;
	padding: 0 0 18px;
}
.welcome p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333;
	font-weight: normal;
	display: inline-block;
	padding: 0 34px 0 0;
	line-height: 20px;
}
.welcome a {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 11px;
	color: #ffffff;
	display: inline-block;
	text-decoration: underline;
	line-height: 20px;
	margin: 0 0 0 5px;
}
.welcome a:hover {
	text-decoration: none;
}
.bottom-cont1 {
	width: 264px;
	float: left;
	padding: 0 0 0 20px;
	margin: 0 43px 0 0;
}
.bottom-cont1 h6 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 20px;
	color: #333333;
	display: inline-block;
	padding: 0 0 13px;
}
.bottom-cont1 p {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	color: #666666;
	display: inline-block;
	line-height: 20px;
	padding: 0 0 10px 0;
}
.bottom-cont1 ul {
	display: inline-block;
}
.bottom-cont1 ul li {
	display: inline-block;
}
.bottom-cont1 ul li a {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	padding: 0 0 0 18px;
	background: url(https://img.webme.com/pic/w/worderexpress/complete_arrow-li.png) no-repeat left center;
	color: #1ca6d7;
	display: block;
	line-height: 24px;
}
.bottom-cont1 ul li a:hover {
	text-decoration: underline;
}
.bottom-cont1 span {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	color: #1ca6d7;
	display: block;
	line-height: 24px;
	;
	background: url(https://img.webme.com/pic/w/worderexpress/complete_arrow-li.png) no-repeat left center;
	padding: 0 0 0 13px;
}
/* ---------------------------------------------------------*/

/* ------------------ FOOTER HERE --------------------------*/
.footer {
	width: 100%;
	background: #333333;
}
.footer-in {
	width: 980px;
	margin: 0 auto;
	padding: 36px 0 36px 0;
}
.social-icons {
	float: left;
	padding: 0 0 0 28px;
	display: inline-block;
}
.social-icons ul {
	float: left;
	display: inline-block;
}
.social-icons ul li {
	float: left;
	display: inline-block;
	margin: 0 10px 0 0;
}
.social-icons ul li a {
	display: block;
}
.copy {
	float: right;
	display: inline-block;
	padding: 0 15px 0 0;
}
.copy p {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 11px;
	color: #999999;
	display: inline-block;
}
.copy a {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 11px;
	color: #999999;
	display: inline-block;
	text-decoration: underline;
}
.copy a:hover {
	text-decoration: none;
}
/* ---------------------------------------------------------*/

</style>

<div class="wrapper"> 
  
  
  <div class="header">
    <div class="header-container">
      <div class="logo"> <a href="#">Complete</a> </div>
      <div class="toll-free">
        <p>Call us toll free: 1-800-123-4567</p>
      </div>
      <div class="clear"></div>
    </div>
  </div>
   
  
  
  <div class="nav">
    <div class="nav-in">
      <ul>
        <li class="last"><a href="#">Home </a></li>
        <li><a href="#">About us </a></li>
        <li><a href="#">Services </a></li>
        <li><a href="#">Careers </a></li>
        <li><a href="#">Blog </a></li>
        <li class="no_bg ped"><a href="#">Contact us</a></li>
      </ul>
      <div class="clear"></div>
    </div>
  </div>
   
  
  
  <div class="container">
    <div class="container-in"> <img src="https://img.webme.com/pic/w/worderexpress/complete_container-bg.jpg" width="940" height="327" alt="img" />
      <div class="read1">
        <div class="read1-img1"> <img src="https://img.webme.com/pic/w/worderexpress/complete_read1-img.png" width="32" height="30" alt="img" /> </div>
        <h3>Lorem ipsum dolor</h3>
        <p>Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat.</p>
        <a href="#">READ MORE</a> </div>
      <div class="read1">
        <div class="read1-img1"> <img src="https://img.webme.com/pic/w/worderexpress/complete_read2-img.png" width="32" height="32" alt="img" /> </div>
        <h3>Maecenas tempus</h3>
        <p>Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat.</p>
        <a href="#">READ MORE</a> </div>
      <div class="read1 last">
        <div class="read1-img1"> <img src="https://img.webme.com/pic/w/worderexpress/complete_read3-img.png" width="32" height="32" alt="img" /> </div>
        <h3>Vivamus elementum</h3>
        <p>Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat.</p>
        <a href="#">READ MORE</a> </div>
      <div class="clear"></div>
      <div class="welcome">
        <h5>Welcome to our company</h5>
        <p>SAYFA İÇERİĞİNİZ BURAYA GELECEKTİR.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Vivamus laoreet era  sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat mauris, id viverra leo ante sed leo. Vivamus fermentum dignissim sem, quis pellentesque dolor posuere vel. In vitae lorem ligula, a congue nibh. Lorem ipsum dolor sit amet.<a href="#">Read More</a></p>
      </div>
      <div class="bottom-cont1">
        <h6>Why choose us?</h6>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </p>
      </div>
      <div class="bottom-cont1">
        <h6>Our services</h6>
        <ul>
          <li><a href="#">Lorem ipsum dolor sit amet</a></li>
          <li><a href="#"> Aenean commodo ligula eget dolor</a></li>
          <li><a href="#">Cum sociis natoque penatibus</a></li>
          <li><a href="#">Nulla consequat massa quis enim</a></li>
          <li><a href="#">Donec pede justo, fringilla vel</a></li>
          <li><a href="#">Aliquet nec, vulputate eget, arcu.</a></li>
          <li><a href="#"> In enim justo, rhoncus ut, imperdiet </a></li>
          <li><a href="#"> Venenatis vitae justo</a></li>
        </ul>
      </div>
      <div class="bottom-cont1 last">
        <h6>Latest news</h6>
        <span> December 20, 2013</span>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        <span>December 16, 2013</span>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.</p>
      </div>
      <div class="clear"></div>
    </div>
  </div>
   
  
  
  <div class="footer">
    <div class="footer-in">
      <div class="social-icons">
        <ul>
          <li><a href="#"><img src="https://img.webme.com/pic/w/worderexpress/complete_face-book.png" width="16" height="16" alt="img" /></a></li>
          <li><a href="#"><img src="https://img.webme.com/pic/w/worderexpress/complete_twitter.png" width="16" height="16" alt="img" /></a></li>
          <li class="last"><a href="#"><img src="https://img.webme.com/pic/w/worderexpress/complete_google.png" width="16" height="16" alt="img" /></a></li>
        </ul>
        <div class="clear"></div>
      </div>
      <div class="copy">
        <p>Copyright © 2013 WebsiteName. All rights reserved. Design by <a href="http://www.freecsstemplates.com" target="_blank" rel="nofollow">FreeCSSTemplates.com</a></p>
      </div>
      <div class="clear"></div>
    </div>
  </div>
   
  
</div>

Kod:

Tasarımın Üstü;

<div class="wrapper"> 
  
  
  <div class="header">
    <div class="header-container">
      <div class="logo"> <a href="#">Complete</a> </div>
      <div class="toll-free">
        <p>Call us toll free: 1-800-123-4567</p>
      </div>
      <div class="clear"></div>
    </div>
  </div>
   
  
  
  <div class="nav">
    <div class="nav-in">
      <ul>
        <li class="last"><a href="#">Home </a></li>
        <li><a href="#">About us </a></li>
        <li><a href="#">Services </a></li>
        <li><a href="#">Careers </a></li>
        <li><a href="#">Blog </a></li>
        <li class="no_bg ped"><a href="#">Contact us</a></li>
      </ul>
      <div class="clear"></div>
    </div>
  </div>
   
  
  
  <div class="container">
    <div class="container-in"> <img src="https://img.webme.com/pic/w/worderexpress/complete_container-bg.jpg" width="940" height="327" alt="img" />
      <div class="read1">
        <div class="read1-img1"> <img src="https://img.webme.com/pic/w/worderexpress/complete_read1-img.png" width="32" height="30" alt="img" /> </div>
        <h3>Lorem ipsum dolor</h3>
        <p>Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat.</p>
        <a href="#">READ MORE</a> </div>
      <div class="read1">
        <div class="read1-img1"> <img src="https://img.webme.com/pic/w/worderexpress/complete_read2-img.png" width="32" height="32" alt="img" /> </div>
        <h3>Maecenas tempus</h3>
        <p>Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat.</p>
        <a href="#">READ MORE</a> </div>
      <div class="read1 last">
        <div class="read1-img1"> <img src="https://img.webme.com/pic/w/worderexpress/complete_read3-img.png" width="32" height="32" alt="img" /> </div>
        <h3>Vivamus elementum</h3>
        <p>Pellentesque diam ligula, egestas eget rhoncus vel, hendrerit in sem. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Viva mus laoreet erat sit amet ante ullamcorper vestibulum. Duis porta, nisl sed cursus volutpat, est nulla placerat.</p>
        <a href="#">READ MORE</a> </div>
      <div class="clear"></div>
      <div class="welcome">
        <h5>Welcome to our company</h5>
        <p>

Tasarımın Altı

</p>
      </div>
      <div class="bottom-cont1">
        <h6>Why choose us?</h6>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </p>
      </div>
      <div class="bottom-cont1">
        <h6>Our services</h6>
        <ul>
          <li><a href="#">Lorem ipsum dolor sit amet</a></li>
          <li><a href="#"> Aenean commodo ligula eget dolor</a></li>
          <li><a href="#">Cum sociis natoque penatibus</a></li>
          <li><a href="#">Nulla consequat massa quis enim</a></li>
          <li><a href="#">Donec pede justo, fringilla vel</a></li>
          <li><a href="#">Aliquet nec, vulputate eget, arcu.</a></li>
          <li><a href="#"> In enim justo, rhoncus ut, imperdiet </a></li>
          <li><a href="#"> Venenatis vitae justo</a></li>
        </ul>
      </div>
      <div class="bottom-cont1 last">
        <h6>Latest news</h6>
        <span> December 20, 2013</span>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        <span>December 16, 2013</span>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.</p>
      </div>
      <div class="clear"></div>
    </div>
  </div>
   
  
  
  <div class="footer">
    <div class="footer-in">
      <div class="social-icons">
        <ul>
          <li><a href="#"><img src="https://img.webme.com/pic/w/worderexpress/complete_face-book.png" width="16" height="16" alt="img" /></a></li>
          <li><a href="#"><img src="https://img.webme.com/pic/w/worderexpress/complete_twitter.png" width="16" height="16" alt="img" /></a></li>
          <li class="last"><a href="#"><img src="https://img.webme.com/pic/w/worderexpress/complete_google.png" width="16" height="16" alt="img" /></a></li>
        </ul>
        <div class="clear"></div>
      </div>
      <div class="copy">
        <p>Copyright © 2013 WebsiteName. All rights reserved. Design by <a href="http://www.freecsstemplates.com" target="_blank" rel="nofollow">FreeCSSTemplates.com</a></p>
      </div>
      <div class="clear"></div>
    </div>
  </div>
   
  
</div>

CSS kısmı

/*====================================== reset.css is here ========================================*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
	outline: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset, img {
	border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
caption, th {
	text-align: left;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: bold;
}
q:before, q:after {
	content: '';
}
abbr, acronym {
	border: 0;
}
.clear {
	clear: both;
	font-size: 0px;
	line-height: 0px;
	display: block;
}
.last {
	margin: 0 !important;
}
.pad_last {
	padding: 0 !important;
}
.no_bg {
	background: none !important;
}
/**************************************************************************************/
a {
	color: #000;
	text-decoration: none;
	outline: 0 none;
}
a:hover {
	color: #000;
	text-decoration: none;
}
h1 {
	font-size: 24px;
}
h2 {
	font-size: 22px;
}
h3 {
	font-size: 18px;
}
h4 {
	font-size: 16px;
}
h5 {
	font-size: 14px;
}
h6 {
	font-size: 12px;
}
/*----------------------------------------------------------------------------------*/
html {
}
body {
	color: #b1b1b1;
	font-family: "Arial", Verdana, Tahoma;
	font-size: 12px;
	background: #f4f4f4;
}
.flt_lt {
	float: left;
	display: inline;
}
.flt_rt {
	float: right;
	display: inline;
}
/* ---------------------------------------------------------------------------------*/

Yeni Eklenen Sayfalar

En son eklenen sayfaları burada bulabilirsiniz.

ŞUBAT08

Tasarım: wellformed

Önizleme...Devamını Oku -->
ŞUBAT08

Tasarım: complete

Önizleme...Devamını Oku -->
OCAK26

Tasarım: redmarket

Önizleme...Devamını Oku -->
OCAK26

Tasarım: skycolored

Önizleme...Devamını Oku -->
OCAK26

Değişen Sayfa Title Kodu

Önizleme: Bu sitenin title'ında uygulanmaktadır...Devamını Oku -->

COPYRIGHT (c) 2014 - 2014 worderexpress.tr.gg. Tüm hakları saklıdır.Tasarım FreeCSSTemplates.org'a aittir. | Fotoğraflar Fotogrph'a aittir. Bu gün 2 (2 tık) kişi buradaydı! Şu ana kadar 5596 (9517 tık) kişi bu sayfayı ziyaret etti.

Toplist - Yan Bağlantılar

complete

WorderExpress

complete

Yeni Eklenen Sayfalar

Tasarım: wellformed

Tasarım: complete

Tasarım: redmarket

Tasarım: skycolored

Değişen Sayfa Title Kodu