Witam mam do was ogromną prośbę czy mogli byście państwo zobaczyć mój kod html, css oraz juqery i podpowiedzieć mi co bym musiał zmienić czego powinienem jeszcze się douczać (Przechodzę na HTML5 wiec nie miejcie mi za złe że piszę w HTML) bardzo bym prosił o jakie kolwiek porady
<!DOCTYPE html>
<html>
<head>
<title>Szybki Handel</title>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Anton|Chewy|Courgette|Kaushan+Script|Lobster|Pacifico|Yellowtail" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewpoert" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/fontello.css">
</head>
<body onload="startSlider()">
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
});
$(function()
{
$("#slider").fadeIn(3000);
});
$(document).ready(function() {
$('.fb').css('opacity', 1);
$('.fb').css('cursor', 'pointer');
$('.fb').hover(function() { //kursor wchodzi
$(".text2").fadeIn(500);
$(this).stop().animate({'opacity' : 1}, "slow");
},function() { //kursor wychodzi
$(".text2").fadeOut(500);
$(this).stop().animate({'opacity': 0.7}, "slow");
});
$('.gp').hover(function() { //kursor wchodzi
$(".Nazwa").fadeIn(500);
$(this).stop().animate({'opacity' : 1}, "slow");
},function() { //kursor wychodzi
$(".Nazwa").fadeOut(500);
$(this).stop().animate({'opacity': 0.7}, "slow");
});
$(document).ready(function() {
$('#fb').css('opacity', 0.9);
$('#fb').css('cursor', 'pointer');
$('#fb').hover(function() { //kursor wchodzi
$(this).stop().animate({'opacity': 2}, "slow");
},function() { //kursor wychodzi
$(this).stop().animate({'opacity': 0.9}, "slow");
});
});
});
$(function() {
//settings for slider
var width =1500;
var animationSpeed = 1500;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
startSlider();
});
</script>
<div class="wraper">
<div class="nav">
<ul>
<li><a href="#">STRONA GŁÓWNA</a></li>
<li><a href="#">CENNIK</a></li>
<li><a href="#">OFERTY</a></li>
<li><a href="#">KONTAKT</a></li>
</ul>
</div>
<div id="slider" style="display: none;" >
<ul class="slides">
<li class="slide slide1"></li>
<li class="slide slide2"></li>
<li class="slide slide3"></li>
<li class="slide slide1"></li>
</ul>
</div>
<div class="content">
<div class="yt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/vd_GnTBzJ4U" frameborder="0" allowfullscreen></iframe>
</div>
<div class="text"><h3>W dzisiejszym odcinku serii CSS dowiemy się jak stworzyć na stronie internetowej rozwijane menu główne. I to takie menu, które przy przy scrollowaniu, czy przewijaniu strony przyklei się do górnej krawędzi przeglądarki. Pretty awesome! Trik ten jest stosowany na wielu, wielu stronach internetowych, a jak działa menu główne wie każdy użytkownik komputera. Dlatego jest to bardzo intuicyjne rozwiązanie, świetnie nadaje się do bardzo wielu interfejsów.</h3>
<div class="klik">
<span><a href="#">Zobacz wiecej</a></span>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="foter">
<div class="divfoter">
<div class="fb">
<p class="text2" style="display: none;">Znajdzesz nas na Faceboku</p>
<i class="icon-fbfacebook"><a href="www.facebook.com"></a></i>
</div>
<div class="gp">
<p class="Nazwa" style="display: none;">Znajdzesz nas na Google+</p>
<i class="icon-fbgplus"></i>
</div>
</div>
</div>
<div class="bootombar">
</div>
</div>
</body>
</html>
body
{
width: 100%;
margin: 0 !important;
}
.wraper
{
width: 100%;
}
.nav
{
width: 100%;
padding: 10px 0;
text-align:center;
background-color: #2A2A2A;
border-bottom: 2px solid #C2C2C2;
}
ul
{
padding: 0;
margin:0;
list-style-type: none;
font-size:18px;
height:35px;
line-height: 200%;
font-family: 'Courgette', cursive;
display: inline-block;
}
ul a
{
color:#fff;
text-decoration:none;
display: block;
}
ul > li
{
float:left;
width: 160px;
height: 40px;
padding:0 40px;
}
li:hover
{
border-bottom: 2px solid #fff;
}
#slider {
width: 100%;
height: 300px;
overflow: hidden;
}
#slider .slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
#slider .slide {
list-style-type: none;
width: 1420px;
height: 400px;
float: left;
}
.slide1
{
background-image:url("Slajder/slajd1.jpg");
height:200px;
background-position:center;
}
.slide2
{
background-image:url("Slajder/slajd2.jpg");
height:200px;
background-position:center;
}
.slide3
{
background-image:url("Slajder/slajd3.jpg");
height:200px;
background-position:center;
}
.content
{
width: 100%;
background-color: #ECECEC;
display: block;
height: 400px;
}
.yt
{
padding: 40px 20px;
float: left;
width: 560px;
height: 315px;
display: block;
}
.text
{
padding: 25px 50px;
float: left;
display: block;
height: 310px;
width: 560px;
font-size:15px;
font-family: 'Courgette', cursive;
color: #444444;
}
.klik a
{
color: #444444;
background-color: #2A2A2A;
width: 100px;
height: 50px;
text-align: center;
line-height: 290%;
display: block;
float: left
font-size:19px;
text-decoration: none;
color: #fff;
border-radius:5px;
}
.foter
{
width:100%;
height: 160px;
background-color:#4F4F4F;
clear:both;
}
.divfoter
{
margin-left: auto;
margin-right: auto;
width: 1100px;
}
.fb:hover
{
background-color: #3b5998;
}
.text2
{
font-size: 18px;
float:left;
font-family: 'Lato', sans-serif;
display: block;
position: absolute;
padding: 5px;
color:#fff;
}
.fb
{
float: left;
display: block;
text-align: center;
font-size: 100px;
width: 550px;
height: 160px;
}
.gp:hover
{
background-color: #d95333;
}
.Nazwa
{
font-size: 18px;
float:left;
font-family: 'Lato', sans-serif;
display: block;
position: absolute;
padding: 5px;
color:#fff;
}
.gp
{
float: left;
text-align: center;
font-size: 100px;
width: 550px;
height: 160px;
}
.bootombar
{
border-top: 2px solid #C2C2C2;
background-color: #222222;
height: 200px
}
