Co zrobić ?
Html:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Wojciech Skirło - Potrtfolio</title>
<meta name="description" content="Serweis o starych grach" />
<meta name="keywords" content="serwis, gry, stare gry, programowanie, html" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="css/fontello.css" rel="stylesheet" type="text/css" />
<link href=' https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light|Amatic+SC|Indie+Flower&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">
<span style="color: #c34f4f;">Jan</span>K <span style="color: #c34f4f"></span>.</br><div style="font-size: 40px;">Nie czekaj. Zamów już dziś!</div>
<div style="clear:both;"></div>
</div>
</div>
<div class="nav">
<ol>
<li><a href="#">Strona Główna</a></li>
<li><a href="#">Gry filmowe</a>
<ul>
<li><a href="#">Home Alone</a></li>
<li><a href="#">Mario Bros</a></li>
<li><a href="#">Duck Tales</a></li>
<li><a href="#">Top Gun</a></li>
</ul>
</li>
<li><a href="#">Bijatyki</a>
<ul>
<li><a href="#">Mortal Comat</a></li>
<li><a href="#">Mario Bros</a></li>
<li><a href="#">Duck Tales</a></li>
<li><a href="#">Turtles</a></li>
</ul>
</li>
<li><a href="#">Gry sportowe</a>
<ul>
<li><a href="#">Ski Jump</a></li>
<li><a href="#">Mario Bros</a></li>
<li><a href="#">Duck Tales</a></li>
<li><a href="#">Tenis</a></li>
</ul>
</li>
<li><a href="#">O autorze</a>
<ul>
<li><a href="#">Kontakt</a></li>
</ul>
</li>
</ol>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum sapien vel turpis ultricies, eget hendrerit dolor efficitur. Aliquam ornare, nulla non elementum venenatis, nulla tellus consequat eros, nec aliquet nunc neque non justo. Integer eu ultrices nunc, ac condimentum enim. Ut dictum laoreet arcu, non euismod urna venenatis quis. Nullam aliquet justo ut facilisis finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi tellus, vehicula eu elementum at, elementum eu magna. Mauris sed sapien quis sem consequat vulputate. Donec dapibus sit amet tortor nec dignissim. Phasellus ac rhoncus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus in arcu sed massa scelerisque facilisis nec non sapien.</p>
<p>Fusce vel eros aliquet, tristique orci vel, viverra purus. Mauris quis euismod neque. Proin dignissim aliquam sapien in convallis. Nam tincidunt nibh quis vestibulum pretium. Suspendisse dapibus ante cursus ipsum sollicitudin gravida. In vel libero vitae sem posuere accumsan. Aenean at tellus porta, volutpat massa eu, dictum odio. Etiam dictum gravida leo, at maximus nulla rutrum sit amet. Proin nec nisi ante. Nulla ornare volutpat diam non faucibus. Aliquam imperdiet eleifend mi non bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer sit amet arcu eget leo tincidunt hendrerit.</p>
<p>Etiam lacinia varius augue, non tincidunt dui pulvinar sit amet. Suspendisse quis tristique turpis. Pellentesque in magna ut quam auctor sodales ac sed sapien. Duis et nisl posuere, semper dui sed, sodales sapien. Phasellus id nisi purus. Vivamus feugiat odio vitae sagittis mollis. Sed mauris ipsum, accumsan nec elit in, porta ornare magna. Morbi interdum turpis mi, in sodales enim luctus et. Nunc a gravida magna.</p>
<p>Maecenas lacinia pellentesque semper. Pellentesque porta erat eu dapibus eleifend. Ut ut lectus tincidunt, hendrerit purus non, aliquet risus. Praesent aliquet lorem id nisi lobortis laoreet. Nunc ut interdum purus. Suspendisse ornare vel nunc ut pharetra. Donec luctus velit nunc, sed ultrices tellus tempus eget. Sed luctus scelerisque dolor vitae facilisis.</p>
<p>Vivamus auctor neque augue. Nullam commodo pharetra risus commodo dignissim. Curabitur pretium, lectus nec blandit ullamcorper, nulla sapien faucibus odio, vel suscipit neque diam et mi. Ut ornare urna eget ex tincidunt euismod. Quisque egestas a risus nec iaculis. Vivamus hendrerit fermentum risus. Integer vitae egestas neque. Nam maximus turpis quis vulputate dignissim. Fusce pretium nulla in malesuada sodales. Etiam at auctor tellus, et ullamcorper mi. Integer nulla ligula, pulvinar et nisl at, condimentum facilisis quam. In consequat facilisis elit sed dignissim. Cras cursus nisi nec purus sodales, quis rhoncus quam scelerisque. Nullam sollicitudin augue ac lobortis vestibulum. Vestibulum sit amet ligula finibus, molestie eros sit amet, iaculis neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit leo a lectus ullamcorper laoreet. Phasellus sit amet ullamcorper justo, quis pharetra erat. Aenean semper, elit id elementum faucibus, tortor neque semper tortor, varius blandit libero quam quis odio. Duis quis laoreet erat, ac hendrerit neque. Cras aliquet sem non tortor sodales condimentum. Mauris ut risus sodales, euismod eros rutrum, convallis nulla. Duis sapien sem, feugiat ac interdum quis, facilisis eu ante. Morbi rutrum interdum est, nec fermentum dolor consequat nec.
</p>
<p>Nullam rhoncus dictum turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas a nulla sagittis, commodo tortor vitae, finibus mi. Sed non maximus magna. Nullam varius sed erat vitae tristique. Pellentesque posuere tellus ut sapien varius, et consectetur tellus placerat. Cras id tortor tellus.</p></div>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<a href ="https://www.facebook.com" target = "_blank" class = "tilelink"><i class="icon-facebook"></i>
</div>
<div class="yt">
<a href ="https://www.youtube.com" target = "_blank" class = "tilelink"><i class="icon-youtube"></i>
</div>
<div class="tw">
<a href ="https://twitter.com/?lang=pl" target = "_blank" class = "tilelink"><i class="icon-twitter"></i>
</div>
<div class="gplus">
<a href ="https://plus.google.com/" target = "_blank" class = "tilelink"><i class="icon-gplus"></a></i>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="footer">Jan K. - Portfolio 2016 © <span style="color: #c34f4f;">Wszelkie prawa zastrzeżone.</div></span>
</div>
<script src="jquery-1.12.1.min.js"></script>
<script>
$(document).ready(function() {
var NavY = $('.nav').offset().top;
var stickyNav = function(){
var ScrollY = $(window).scrollTop();
if (ScrollY > NavY) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
</body>
</html>
CSS:
body
{
background: url(img/tlo.png); /*from http://subtlepatterns.com*/
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
margin: 0 !important;
}
.wrapper
{
width: 100%;
}
.header
{
width:100%;
padding: 40px 0;
}
.logo
{
width: 450px;
font-size: 78px;
margin-left: auto;
margin-right: auto;
font-family: 'Amatic SC', cursive;
text-align: center;
}
.nav
{
width: 100%;
padding: 10px 0 ;
background-color: #c34f4f;
text-align: center;
border-top: 1px solid #751b1b;
border-bottom: 1px solid #751b1b;
}
.content
{
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: justify;
padding-top: 10px;
padding-bottom: 20px;
}
.socials
{
width: 100%;
top-align: center;
background-color: #292929;
}
.socialdivs
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.fb
{
width: 250px;
height: 150px;
float: left;
text-align: center;
}
.fb:hover
{
background-color: #4668b3;
}
.yt
{
width: 250px;
height: 150px;
float: left;
text-align: center;
}
.yt:hover
{
background-color: #d94348;
}
.tw
{
width: 250px;
height: 150px;
float: left;
text-align: center;
}
.tw:hover
{
background-color: #3095d3;
}
.gplus
{
width: 250px;
height: 150px;
float: left;
text-align: center;
}
.gplus:hover
{
background-color: #d95333;
}
.footer
{
text-align: center;
padding: 30px;
background-color: #222222;
}
.sticky
{
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
}
ol
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
}
ol a
{
color: white;
text-decoration: none;
display: block;
border-radius: 0px 0px 16px 16px;
}
ol > li
{
float: left;
width: 150px;
height: 40px;
border-right: 1px dashed #751b1b;
}
ol > li:first-child
{
border-left: 1px dashed #751b1b;
}
ol > li:hover
{
background-color: #cf6969;
}
ol > li:hover > a
{
color: #451717;
}
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
display: none;
}
ol > li:hover > ul
{
display: block;
}
ol > li > ul > li
{
background-color: #cf6969;
position: relative;
z-index: 100;
border-top: 1px dashed #751b1b;
}
ol > li > ul > li:hover
{
background-color: #c34f4f;
}
ol > li > ul > li:hover > a
{
color: #451717;
}
a.tilelink
{
color: white;
text-decoration: none;
display: block;
width: 250px;
height: 150px;
}
