index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css" /> <link type="text/css" rel="stylesheet" href="http://fast.fonts.com/cssapi/7437551d-ab4b-4ece-bc20-f8956f5b84cd.css"/> </head> <body> <div id="container"> <div id="nav"> <div id="logobar"> <div class="maincontainer"> <div id="logo_right">SLOGAN </div> </div> </div> </div> <div id="main"> <div id="col1"> </div> <div id="col2"> <div id="socialpanel"> Znajdziesz mnie: <img src='images/facebook.png' alt="Odwiedź mnie na Facebooku" /> <img src='images/twitter.png' alt="Śledź mnie na Twitterze" /> </div> </div> </div> <div id="footer"> <div class="maincontainer"> <div id="footer_left"> </div> </div> </div> </div> </body> </html>
style.css
/* To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. */ /* Created on : 2014-10-21, 10:29:26 Author : krzysztof */ body { background-color: #e0e0e0; //background-image: url(images/ironpatern.png); font-family: "HelveticaNeueW02-Thin"; } img { alignment-adjust: right; } #container { width:100%; } #nav { background-color: white; width: 100%; padding: 15px 0 5px 0; } #nav a:hover{ color: #0080ff; text-decoration: none; } .toplink { color: grey; padding: 0px 15px 0px 15px; text-decoration: none; } #logobar { background-color: #0080ff; margin: 10px 0px 10px 0px; padding: 0px 50px 0px 0px; height: 100px; line-height: 100px; text-align: right; vertical-align: middle; font-size: 12; } .maincontainer { width: 900px; margin-left: auto; margin-right: auto; } #logo_left { width: 35%; text-align: right; margin-right: 10px; color: #ffffff; font-size: 24; font-weight: bold; float: left; } #logo_center { width: 1%; border: solid 1px blue; margin: 25px 0px 25px 0px; padding: 49px 0px 0px 0px; background-color: blue; color: blue; float: left; } #logo_right { width: 55%; font-size: 14; text-align: left; margin-left: 10px; letter-spacing: 2mm; float: left; } #main { width: 900px; margin-left: auto; margin-right: auto; float: inherit; } #col1 { width: 570px; height: 500px; float: left; } #col2 { background-color: #ffffff; width: 230px; padding: 15px 15px 0px 15px; margin: 10px auto; float: right; text-align: center; } #socialpanel { background-color: #e0e0e0; color: #0080ff; margin-bottom: 15px; padding: 15px 15px 15px 15px; text-transform: uppercase; } #loginpanel { background-color: #000000; color: #ffffff; margin-bottom: 15px; padding: 15px 15px 15px 15px; text-transform: uppercase; } #newsletter { background-color: blue; color: #ffffff; margin-bottom: 15px; padding: 15px 15px 15px 15px; font-weight: bold; } .news { background-color: #ffffff; width: 600px; height: 150px; margin: 10px auto; padding: 15px 15px 15px 15px; float: left; } #footer { width: 100%; background-color: #0080ff; color: #ffffff; margin: 10px 0px 10px 0px; padding: 15px 0px 15px 0px; float: right; } #footer_left { text-align: left; } #footer_right { text-align: right; font-size: 12px; padding-right: 15px; } #footer a:hover{ color: #e0e0e0; text-decoration: none; } .footlink { color: #ffffff; padding: 0px 15px 0px 15px; text-decoration: none; }