#2 Teljes design kód

Sziasztok!

Ismételten egy vihető design kóddal érkeztem. Az előző nagyon felkapottnak tűnt, így gondoltam csinálok még egyet. Fejlődtem is, ezért remélem sokatok hasznára lesz. 

Ha viszed, kérlek jelezd kommentben!

Ha esetleg segítségre lenne szükséged nyugodtan írj e-mailt vagy kommentet!

Kinézete:

CSS Kód:

body {

background: #c9cce5;

}

.header {

width: 900px;

left: -10px;

position: relative;

top: -10px;

border-left: 5px solid #d0a339;

border-right: 5px solid #d0a339;

}

#Blog1 {

background: #fafaf2;

width: 585px;

left: -80px;

top: -63px;

padding: 5px 9px 5px 9px;

border-radius: 0px 0px 0px 0px;

border-right: 5px solid #d0a339;

border-top: 5px solid #d0a339;

}

.post-body {

position: relative;

background: #58658e;

width: 550px;

left: 11px;

top: -10px;

padding: 5px 2px 5px 7px;

border-radius: 10px 10px 0px 0px;

}

.main-inner .column-left-inner {  

background: #58658e;

width: 254px;

position: relative;

right: 10px;

top: -133px;

padding: 10px 31px 30px 12px;

border-left: 5px solid #d0a339;

border-top: 5px solid #d0a339;

border-radius: 0px 20px 0px 20px;

}

.main-inner .column-left-inner .widget{

width: 230px;

background: #fafaf2;

position: relative;

right: 5px;

top: 10px;

border-radius: 10px 10px 10px 10px;

padding: 10px 12px 10px 12px;

}

.main-inner .column-left-inner h2 {

text-align: center;

top: 5px;

left: 0px; 

letter-spacing: 10px;

}

#HTML1 {

width: 230px;

left: px;

position: relative;

top: 15px;

}

a.menu:link, a.menu:active, a.menu:visited {

width: 200px;

height: 10px;

padding-top: 5px;

padding-bottom: 10px;

display: inline-block;

background: #d0a339;

text-align: center; 

text-transform: uppercase;

font-family: trebuchet ms;

font-size: 0px;

margin: 0px 10px 7px 15px; 

-webkit-transition-duration: .50s;

-moz-transition-duration: .50s;

}

a.menu:hover {

color: #000;

background: transparent;

border-bottom: 1px solid #d0a339;

font-size: 12px;

width: 200px;

height: 10px;

letter-spacing: 10px;

border-radius: 0px 0px 0px 0px;

padding-top: 10px;

padding-bottom: 10px;

text-decoration: none !important;

-webkit-transition-duration: .80s;

}

h3 {

text-align: center; 

font-family: trebuchet ms;

text-transform: upperase;

margin: 0px 0px 0px 0px;

letter-specing: 3px;

}

h2 {

text-align: center; 

}

.date-header span { 

position: relative;

left: 0px;

top: 9px;

width:80px;

letter-spacing: 10px;

padding: 5px 1px 5px 5px;

}

#PageList1 li a:link, #PageList1 li a:visited {

display: inline-block;

border-bottom: dotted 14px;

width: 150px;

margin-bottom: -2px;

font-famia:Arial;

font-size: 12px;

text-align: center;

letter-spacing: 2px;

cursor: pointer;

padding: 3px;

 -webkit-transition-duration: .50s;}

#PageList1 li a:hover {

border-radius: 10px;

background: #;

color:  #000; !important;

transition-timing-function: linear !important;

transition-duration: 0.6s !important;

transition-property: all !important;

box-shadow: inset 0px 30px 0px #fff,inset 00px 60px 0px white, inset 00px 90px 0px white;

}

a:link {

 text-decoration: none !important; }

#Stats1 {

text-align: center;

text-shadow: 0px 1px 0px #888;

font-family: Arial;

color: #000 !important;

}.comment-content {

background: RGBa(221,221,221,0.2);

color: #000;

padding: 13px;

border-right: 3px solid #58658e;

border-bottom: 3px solid #58658e;

border-left: 3px solid #d0a339;

border-top: 3px solid #d0a339;

} 

 .comments .avatar-image-container {

position: relative;

overflow: hidden;

float: left;

max-height: 36px;

width: 34px;

}

.avatar-image-container {

border-left: 3px solid #58658e;

border-top: 3px solid #58658e;

border-right: 3px solid #d0a339;

border-bottom: 3px solid #d0a339;

}

.post-footer {

background: #58658e;

width: 543px;

text-align: center;

border-radius: 0px 0px;

text-transform: none;

font-family: Arial;

font-size: 12px;

text-align: left;

padding: 8px !important;

color: #000 !important;

margin-left: 11px !important;

margin-top: -11px !important;

border-radius: 0px 0px 10px 10px;

}

a:link {

text-decoration:none !important;}

a:link {

transition:all 1s;

-moz-transition:all 1s;

-webkit-transition:all 1s;

-o-transition:all 1s;}

a:hover {

transition:all 1s;

-moz-transition:all 1s;

-webkit-transition:all 1s;

-o-transition:all 1s;}

}

Hogy a menü megjelenjen, HTML/JavaScript-be ezt kell beilleszteni:

<a class='menu' href="blog link">Főoldal</a>

<a class='menu' href="blog link">Menü</a>

<a class='menu' href="blog link">Menü1</a>

<a class='menu' href="blog link">Menü2</a>

A blog elrendezésénél csak a bal oldalra kell sáv, más szóval:

sidebar-left1

Bejegyzés címének mérete: 32px

Link színe: #d0a339

Meglátogatott link színe: #999999

Fókuszálás színe: #58658e

Külső háttér: #c9cce5

A többi háttér átlátszó!

Modul címének mérete: 19px

Modul cím színe: #d0a339

Másodlagos szín: #999999

Kép felirat színe: #000000

A kimaradt színek nem fontosak, valamint átlátszóak.

Remélem tudtam segíteni. Ha viszed kérlek jelezd!