<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Karta FUT</title>
<meta name="description" content="Zamów własną kartę fut!" />
<meta name="keywords" content="karta fut, twoja karta fut, twoja karta" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Anton|Arvo" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="rectangle">
<div class="tile1"><img class="zdj1" src="kartafut.png" width="300px" height="46px" /></div>
<div class="tile2"><img class="zdj4" src="stronaglowna.png" width="230px" height="38px"/></div>
<div class="tile2"><img class="zdj4" src="faq.png" width="230px" height="38px" /></div>
<div class="tile2"><img class="zdj4" src="opinie.png" width="230px" height="38px" /></div>
<div class="tile2"><img class="zdj4" src="kontakt.png" width="230px" height="38px" /></div>
</div>
<div id="tlo" style="clear: both">
<div class="pojemniki"><img " class="zdj2" src="kiedrzynek.png" width="280px" height="420px" />
<div class="przycisk"><img class="zdj3" src="twojakartafut.png" width="300px" height="46px" /></div>
</div>
<div class="pojemniki"><img " class="zdj2" src="hazard.png" width="280px" height="420px" />
<div class="przycisk"><img class="zdj3" src="gotowakartafut.png" width="300px" height="46px" /></div>
</div>
</div>
</div>
</div>
</body>
</html>
Kod CSS:
body {
background-image: url(FIFA18_EASHomepage.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#container
{
width: 100%;
margin-left: auto;
margin-right: auto;
}
#rectangle
{
width: 100%;
height:66px;
text-align: center;
background-color: #404040;
float: left;
border-top: 3px solid #ffffff;
border-bottom: 3px solid #ffffff;
border-left: 3px solid #ffffff;
border-right: 3px solid #ffffff;
}
#tlo
{
width:100%;
text-align: center;
float: left;
}
.tile1
{
width: 300px;
height: 45px;
float:left;
position: relative;
left:10px;
top:10px;
right:10px;
}
.tile2
{
width: 17.5%;
height: 46px;
float:left;
font-family: 'Anton', sans-serif;
padding:10px;
position: relative;
left:10px;
margin-left:1%;
}
.tile2:hover
{
background-color: #4d4d4d
}
.pojemniki
{
width: 40%;
height:530px;
float: left;
background-image: url(tlo.png);
background-repeat: no-repeat;
background-size: cover;
margin:60px;
margin-left:5%;
margin-right:5%;
}
.przycisk
{
width:310px;
height:56px;
background-color: #ffcc00;
margin-right:auto;
margin-left:auto;
margin-top:30px;
border-top: 3px solid #cca300;
border-bottom: 3px solid #cca300;
border-left: 3px solid #cca300;
border-right: 3px solid #cca300;
}
.przycisk:hover
{
background-color: #eebb00;
}
.zdj2
{
position: relative;
top:20px
}
.zdj3
{
position: relative;
top:5px
}
.zdj4
{
position: relative;
top:4px
}
Po powiększaniu się strona się rozjeżdża z wszystkimi kafelkami
POMOCY