Przedszkolak
Postów: 2
Data rejestracji: 21.12.2010 11:06
|
Tzw. mam go w HTML'u :) Ale zupe?nie nie mam poj?cia jak da? go na PHP-Fusion
Kod Index.php
<!DOCTYPE html>
<html lang="pl">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
</head>
<body id="page1">
<header>
<div class="container_12">
<div class="logo">
<h1><img src="images/logo.png" alt=""></h1>
</div>
<nav>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
</div>
</header>
<section id="content">
<section class="row-1">
<div class="container_12">
<div class="clearfix">
<div class="grid_4">
<div class="box">
<h2>Panel 1<span></span></h2>
Tre??
</div>
</div>
<div class="grid_4">
<div class="box">
<h2>Panel 2<span></span></h2>
Tre??
</div>
</div>
<div class="grid_4">
<div class="box">
<h2>Panel 3<span></span></h2>
Tre??
</div>
</div>
</div>
</div>
</section>
<section class="row-2">
<div class="container_12">
<div class="clearfix">
<div class="grid_8">
<h3>News'y</h3>
<div class="img-box">
Tre??
</div>
</div>
<div class="grid_4">
<div class="indent">
<h3>Menu</h3>
<ul class="list2">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
</section>
<footer>
<div class="container_12">
<div class="indent">
2007-2010 Bristo.pl</a>
</div>
</div>
</footer>
</body>
</html>
Kod Styles.css
a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt,
em, embed,
fieldset, figcaption, figure, font, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd,
keygen,
label, legend, li,
meter,
nav,
object, ol, output,
p, pre, progress,
q,
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul,
var{
background: transparent;
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top; }
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
table, table td {
padding:0;
border:none;
border-collapse:collapse;
}
img {
vertical-align:top;
}
embed {
vertical-align:top;
}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
/*----------------------------------------------------------------------------------------------------*/
body {
background:#212121;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1.0625em;
color:#989999;
}
html { min-width:980px;}
html, body { height:100%;}
/*----------------------------------------------------------------------------------------------------*/
.container_12 {
font-size:.75em;
}
/*----------------------------------------------------------------------------------------------------*/
header{
height:144px;
overflow:hidden;
border-bottom:1px solid #fff;
background:url(../images/header-bg.jpg) 0 0 repeat-x #404040; /* Opera */
background-image: -moz-linear-gradient(top, #161516, #404040); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #161516),color-stop(1, #404040)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#161516', EndColorStr='#404040'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#161516', EndColorStr='#404040')"; /* IE8 */
}
/*----------------------------------------------------------------------------------------------------*/
section#content {
}
/*----------------------------------------------------------------------------------------------------*/
aside{
float: left;
width: 33.3%;
}
/*----------------------------------------------------------------------------------------------------*/
footer .indent {
padding:18px 6px 24px 0;
}
/*----------------------------------------------------------------------------------------------------*/
.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}
.alignright { text-align:right;}
.aligncenter { text-align:center;}
.wrapper {
width:100%;
overflow:hidden;
}
/*----------------------------------------------------------------------------------------------------*/
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
/*----------------------------------------------------------------------------------------------------*/
figure img {
margin:0 20px 0 0;
float:left;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:20px;
}
.extra-wrap {
overflow:hidden;
}
p {margin-bottom:17px;}
.p1 { margin-bottom:8px;}
.p2 { margin-bottom:17px;}
.p3 { margin-bottom:25px;
}
/*----------------------------------------------------------------------------------------------------*/
a {
color:#ec8c04;
outline:none;
}
a:hover{
text-decoration:none;
}
h2 {
font-size:24px;
line-height:1.2em;
font-weight:normal;
color:#353535;
overflow:hidden;
padding:22px 0 24px 61px;
letter-spacing:-1px;
position:relative;
}
h2 span {
display:block;
background:url(../images/line-dot.gif) 0 0 repeat-x;
position:absolute;
left:0;
top:57px;
width:100%;
height:1px;
overflow:hidden;
z-index:10;
}
h2.icon1 {
background:url(../images/jaka? tam ikonka.jpg) no-repeat 3px 0;
}
h2.icon2 {
background:url(../images/jaka? tam ikonka.jpg) no-repeat 3px 0;
}
h2.icon3 {
background:url(../images/jaka? tam ikonka.jpg) no-repeat 3px 0;
}
h3 {
color:#353535;
font-size:24px;
line-height:1.2em;
font-weight:normal;
margin-bottom:1em;
}
h4 {
font-size:16px;
line-height:20px;
font-weight:normal;
font-style:italic;
color:#c17821;
margin-bottom:1em;
}
h5 {
font-size:1em;
font-weight:normal;
color:#d1d1d1;
margin-bottom:1em;
}
h6 {
font-size:1em;
font-weight:normal;
color:#d1d1d1;
}
mark { font-weight:bold; color:#000;}
.button {
font-size:13px;
font-weight:bold;
text-transform:uppercase;
font-style:italic;
text-shadow:1px 1px 0 #000;
color:#fff;
text-decoration:none;
padding:10px;
background:url(../images/button-bg2.gif) 0 0 repeat-x #131313;
display:inline-block;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(js/PIE.htc);
position:relative;
}
.button:hover {
background:url(../images/button-bg1.gif) 0 0 repeat-x #e77e00;
text-shadow:1px 1px 0 #a55d08;
}
/*----------------------------------------------------------------------------------------------------*/
.box {
background:url(../images/box-bg.gif) 0 100% repeat-x #fff;
border:1px solid #c3c6c8;
padding:10px 23px 30px 23px;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
behavior:url(js/PIE.htc);
position:relative;
color:#808080;
height:350px;
}
.address {
float:left;
padding-bottom:17px;
}
.address dt {
margin-bottom:16px;
}
.address dt strong {
color:#000;
}
.address dd {
clear:both;
}
.address dd span {
float:left;
width:95px;
}
/*----------------------------------------------------------------------------------------------------*/
header .logo {
position:absolute;
background:url(../images/no-link) no-repeat 100% 0;
padding-right:38px;
top:41px;
left:36px;
width:174px;
}
header .logo h1 {
font-size:42px;
line-height:1.2em;
color:#fff;
font-weight:normal;
letter-spacing:-2px;
}
header .logo h1 a {
color:#fff;
text-decoration:none;
text-shadow:1px 1px 0 #000;
}
header .logo span {
font-size:15px;
font-style:italic;
color:#fff;
text-shadow:1px 1px 0 #000;
float:right;
margin-top:-10px;
}
/*----------------------------------------------------------------------------------------------------*/
header nav {
position:absolute;
right:6px;
top:106px;
}
header nav li {
float:left;
padding-left:1px;
}
header nav li a {
width:132px;
text-align:center;
float:left;
font-size:14px;
color:#fff;
text-shadow:1px 1px 0 #000;
text-decoration:none;
padding:11px 0 17px 0;
background:url(../images/nav-bg1.gif) no-repeat 0 0;
}
header nav li a:hover, header nav li a.current {
background:url(../images/nav-bg2.gif) no-repeat 0 0;
font-style:italic;
text-transform:uppercase;
text-shadow:1px 1px 0 #a55d08;
font-size:12px;
}
/*----------------------------------------------------------------------------------------------------*/
#content .indent {
padding:0 0 0 30px;
}
#content .row-1 {
background:url(../images/content-bg1.gif) 0 0 repeat-x #fefefe;
padding:12px 0 20px 0;
}
#content .row-2 {
background:url(../images/content-bg2.gif) 0 0 repeat-x #3e3e3e;
padding:36px 0 53px 0;
}
#content .row-2 h3 {
color:#fff;
}
#content .row-2 .button {
background:url(../images/button-bg1.gif) 0 0 repeat-x #e77e00;
text-shadow:1px 1px 0 #a55d08;
}
#content .row-2 .button:hover {
background:url(../images/button-bg2.gif) 0 0 repeat-x #131313;
text-shadow:1px 1px 0 #000;
}
.list1 {
margin-bottom:17px;
}
.list1 li {
background:url(../images/arrow1.gif) no-repeat 0 6px;
padding:0 0 0 12px;
font-size:10px;
text-transform:uppercase;
}
.list1 li a {
color:#ec8c04;
}
.list2 {
padding-bottom:14px;
}
.list2 li {
background:url(../images/marker1.gif) no-repeat 0 4px;
padding:0 0 8px 22px;
border-bottom:1px dotted #646b6d;
margin-bottom:6px;
}
.list2 li a {
color:#989999;
text-decoration:none;
}
.list2 li a:hover {
color:#fff;
}
/*----------------------------------------------------------------------------------------------------*/
footer {
background:#212121;
border-top:1px solid #080808;
text-align:right;
color:#8b8b8b;
}
footer a {
color:#8b8b8b;
}
footer nav {
margin:0 -18px 4px 0;
}
footer nav li {
display:inline;
color:#313131;
font-size:10px;
}
footer nav li a {
color:#8b8b8b;
text-transform:uppercase;
padding:0 18px 0 15px;
}
footer nav li a:hover, footer nav li a.current {
color:#fff;
text-decoration:none;
}
/*----------------------------------------------------------------------------------------------------*/
#contacts-form fieldset {
border:none;
width:100%;
overflow:hidden;
display:block;
}
#contacts-form label {
display:block;
height:71px;
overflow:hidden;
}
#contacts-form input {
color:#111;
border:1px solid #a09b96;
background:none;
padding:3px 0 3px 5px;
width:220px;
background:#fff;
color:#000;
}
#contacts-form textarea {
color:#111;
border:1px solid #a09b96;
background:#fff;
padding:3px 0 3px 5px;
width:375px;
overflow:auto;
height:156px;
margin-bottom:18px;
color:#000;
}
#contacts-form .button {
float:right;
margin-left:10px;
}
.inner_copy {border:0;color:#f00;float:left;width:50%!important;margin:-202px 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:12px}
/*----------------------------------------------------------------------------------------------------*/
.container_12 {
margin-left: auto;
margin-right: auto;
width: 948px;
position:relative;
}
/*----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
float: left;
position: relative;
margin-left: 6px;
margin-right: 6px;
}
/*----------------------------------------------------------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/*----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1 {
width:67px;
}
.container_12 .grid_2 {
width:146px;
}
.container_12 .grid_3 {
width:225px;
}
.container_12 .grid_4 {
width:304px;
}
.container_12 .grid_5 {
width:383px;
}
.container_12 .grid_6 {
width:462px;
}
.container_12 .grid_7 {
width:541px;
}
.container_12 .grid_8 {
width:620px;
}
.container_12 .grid_9 {
width:699px;
}
.container_12 .grid_10 {
width:778px;
}
.container_12 .grid_11 {
width:857px;
}
.container_12 .grid_12 {
width:936px;
}
/*----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1 {
padding-left:79px;
}
.container_12 .prefix_2 {
padding-left:158px;
}
.container_12 .prefix_3 {
padding-left:237px;
}
.container_12 .prefix_4 {
padding-left:316px;
}
.container_12 .prefix_5 {
padding-left:395px;
}
.container_12 .prefix_6 {
padding-left:474px;
}
.container_12 .prefix_7 {
padding-left:553px;
}
.container_12 .prefix_8 {
padding-left:632px;
}
.container_12 .prefix_9 {
padding-left:711px;
}
.container_12 .prefix_10 {
padding-left:790px;
}
.container_12 .prefix_11 {
padding-left:869px;
}
/*----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1 {
padding-right:79px;
}
.container_12 .suffix_2 {
padding-right:158px;
}
.container_12 .suffix_3 {
padding-right:237px;
}
.container_12 .suffix_4 {
padding-right:316px;
}
.container_12 .suffix_5 {
padding-right:395px;
}
.container_12 .suffix_6 {
padding-right:474px;
}
.container_12 .suffix_7 {
padding-right:553px;
}
.container_12 .suffix_8 {
padding-right:632px;
}
.container_12 .suffix_9 {
padding-right:711px;
}
.container_12 .suffix_10 {
padding-right:790px;
}
.container_12 .suffix_11 {
padding-right:869px;
}
/*----------------------------------------------------------------------------------------------------*/
.container_12 .push_1 {
left:79px;
}
.container_12 .push_2 {
left:158px;
}
.container_12 .push_3 {
left:237px;
}
.container_12 .push_4 {
left:316px;
}
.container_12 .push_5 {
left:395px;
}
.container_12 .push_6 {
left:474px;
}
.container_12 .push_7 {
left:553px;
}
.container_12 .push_8 {
left:632px;
}
.container_12 .push_9 {
left:711px;
}
.container_12 .push_10 {
left:790px;
}
.container_12 .push_11 {
left:869px;
}
/*----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1 {
left:-79px;
}
.container_12 .pull_2 {
left:-158px;
}
.container_12 .pull_3 {
left:-237px;
}
.container_12 .pull_4 {
left:-316px;
}
.container_12 .pull_5 {
left:-395px;
}
.container_12 .pull_6 {
left:-474px;
}
.container_12 .pull_7 {
left:-553px;
}
.container_12 .pull_8 {
left:-632px;
}
.container_12 .pull_9 {
left:-711px;
}
.container_12 .pull_10 {
left:-790px;
}
.container_12 .pull_11 {
left:-869px;
}
/*----------------------------------------------------------------------------------------------------*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
I chcia?bym wiedzie? jak zakodowa? HTML do PHP-Fusion
flynex dodał/a następującą plik:
Edytowane przez flynex dnia 21.12.2010 13:01:30
|
