Pomoc oko HTML/CSS :: Web development ~ Hosting ~ Web zarada

Pozdrav svima. Imam jedan mali problem. Poceo sam da radim jedan sajt od nule. Napravio sam pocetnu formu u html-u i nesto doterao u css-u. Ali glavni problem imam sa content sadrzajem,jer tu planiram da uradim shop(ima 6 proizvoda). https://snag. gy/fTdvej ,kao sto je na slici. Kako da u html/css-u doteram da to bude kao sto je na slici(kako da poredjam proizvode i tekst koji prati te proizvode sa tim da kruzic sa kolicima bude odmah ispod proizvoda a background textura da bude vidljiva iza proizvoda. Tekst,proizvod i kruzic da budu posebni elementi. . Stranica je https://snag. gy/hytuNC ovog tipa. I pokusao sam da sredim header da menja boju kada se skroluje ali nikako da uspe :( kao i to da podesim sekciju ispod shopa(slika sa listom,tekstom i dva pravougaonika gde se nalazi tekst i pdf slikica kao sto je na primeru. Ovo sam ja nesto pokusavao ali ne znam kako dalje,zakucao sam se :cry:. Unapred zahvalan :D

<!DOCTYPE html>

<html>
<head>
<title>ZeolitFit</title>
<link href="style. css" type="text/css" rel="stylesheet">

<script type="text/javascript">
$(window). on("scroll", function() {
if($(window). scrollTop() > 500) {
$(". header"). addClass("active");
} else {
$(". header"). removeClass("active");
}
});
</script>

</head>
<body>
<header>
<div class="wrapper">
<div class="header">
<h1 class="logo"><a href="#main-banner">ZeolitFit</a></h1>
<nav>
<h2>Main Navigation</h2>
<ul>
<li><a href="#main-banner">STARTSEITE</a></li>
<li><a href="#shop">PRODUKTE</a></li>
<li><a href="">ÜBER UNS</a></li>
<li><a href="#footer">KONTAKT</a></li>
</ul>
</nav>
</div>
</div>

</header>


<div id="main-banner">
<img src="images/Header-background. jpg" alt="Welcome to ZeolitFit">
</div>
<div class="wrapper">
<div id="second-banner">
<img src="images/second-banner1. png">
</div>
<div id="shop">
<div class="wrapper">
<section id="shop">
<ul>
<li class="pic1">
<img src="images/product1. . png">
</li>
<li class="pic2">
<img src="images/product2. . png">
</li>
<li class="pic3">
<img src="images/product3. . png">
</li>
<li class="pic4">
<img src="images/product4. . png">
</li>
<li class="pic5">
<img src="images/product5. . png">
</li>
<li class="pic6">
<img src="images/product6. . png">
</li>
</ul>
</section>
</div>
</div>
<div class="wrapper">
<div id="trd-banner">
<img src="images/image3289. png" height="100" width="100">
</div>

</div>
</div>



<footer>
<div id="footer">
<div class="wrapper">
<ul>
<li style="margin:50px"><img src="images/white-logo. png"></li>
<li style="margin:-50px 50px">©All rights reserved ZeolithFit 2016</li>
</ul>
<ul style="float:center;margin:60px -30px;padding:-50px -90px">
<li style="font-family:Sans;color:#fff;text-align:center;font-size:18px">ZeolithFit</li>
<li style="font-family:Sans;color:#fff;text-align:center;font-size:16px">Gerlgasse</li>
<li style="font-family:Sans;color:#fff;text-align:center">1030 Wien</li>
<li style="text-align:center;font-size:16px">Geschaftsfuhrung:</li>
<li style="text-align:center;font-size:16px">eMail:</li>
<li style="text-align:center;font-size:16px">www. ZeolithFit. com</li>
<li style="text-align:center;font-size:16px">Telefon: </li>

</ul>
<ul style="margin:45px;padding:-70px 90px">
<li style="margin:20px;text-align:center;font-size:18px">Bankverbindung</li>
<li style="color:#fff;text-align:center">Oberbank AG Wien</li>
<li style="color:#fff;text-align:center">IBAN </li>
<li style="color:#fff;text-align:center">BIC: </li>

</ul>

</div>

</div>
</footer>

</body>

</html>

and CSS

body{
font-family:Tahoma;
margin: 0;
}

. wrapper{
width:100%;
max-width:1900px;
padding: 0 10px;
margin: 0 auto;
}

h1. logo{
background-image:url(images/Logo. svg);
background-repeatNo-repeat;
width:200px;
height:60px;
text-indent: -10000px;
float:left;

}

header nav{
float:left;
margin:1px 330px;
}

header nav h2{
text-indent: -10000px;
height:0;
margin:0;
}

header nav li{
float:left;
list-style-type:none;
margin:30px 20px;

}

header nav li a{
text-decoration:none;
color:#333;
font-size:17px;
text-align:right;
}

#main-banner,#main-banner img{
width:100%;

}

#second-banner,#second-banner img{
width:100%;
margin-top:-1px;
margin:-5px;
position:static;

}

#trd-banner,#trd-banner img{
width:100%;
margin:-10px;

}

#footer-below,#footer-below img{
width:100%;
}
. shop{
margin-top:-18px;
background-image:url(images/shopbg. png);
width:100%;
max-width: 1400px;

}

#shop ul{
padding:0 auto;

}

#shop li{
float:left;
width:46%;
margin:10px 20px -4px;
list-style-type: none;

}

#shop li img{
width:46%;
margin:0;
margin-top:10px;
margin-bottom:100px;
padding:0;
}

. pic1 img{
float:right;
width:100%;
-webkit-transition:width 2s,height4s;
transition:width 2s,height 4s;
}
. pic1:hover{
width:300%;
height:300%;
}
. pic3 img{
float:right;
width:100%;

}
. pic2 img{
width:100%;

}
. pic4 img{
width:100%;
}
. pic5 img{
width:100%;
float:right;
}
. pic6 img{
width:100%;
}

#shop li a{
color:#333;
text-decoration:none;
float:left;
}

#shop ul:after{
content="";
display:block;
clear:both;
}

footer{
background:#2a3a44;
margin-top:-3px;
padding:30px 0;

}

footer :after{
content: "";
display:block;
clear:both;
}

footer ul{
font-family:Sans;
font-size:14px;
float:left;
padding:0;
list-style-type:none;
color:#868f99;
width:30%;
margin-right:2%;
}

footer li{
margin:10px 110px 10px;
}

header{
position:fixed;
width:100%;
display:block;
background-color:transparent;
right:0;
left:0;
padding:0px;
}

header . scrolling {
background-color:#fff;
}



html {
background:transparent;
height: 5000px;
}

. header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 10000;
transition: all 0. 2s ease-in-out;
height: auto;
background-color:transparent;

text-align: center;
line-height: 40px;
}

. header. active {
background:#fff;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0. 25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0. 25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0. 25);
}