Witam mam problem z zapisaniem kodu pod stronę którą staram sie stworzyć. Pogubiłem sie sam w zapisie, im głębiej pisalem tym bardziej nie wychodziło. Gdyby ktoś mogł zucic okiem i wytknac błedy i najlepiej ich wytlumaczyc jak to zapisac lepiej, prosciej szybciej byłbym wdzieczny. Najlepiej jak wrzuce caly plik z kodem + grafikami.
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Website Desinger</title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="Zobacz wszystko, co powienieneś wiedzieć o paintballu." />
<meta name="keywords" content="paintball, bron , milsim, military" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|PT+Sans:400,700&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div class="header">
<nav class="nav">
<ul>
<li><a href="#">Strona Główna</a></li>
<li><a href="#">O Mnie</a></li>
<li><a href="#">Projekty</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<div class="logo">
<img src="img/logo.png" height="250" >
</div>
</div>
<div id="bg">
<div class="container">
<div class="main">
<h1>I Am </h1>
<h6><span style="font-size: 18px; font-family: 'Kaushan Script', cursive;">Website desinger</span> </h6>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.</p>
</div>
</div>
<div class="middle">
<div class="title1">
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.</p>
</div>
<div class="title2">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
i css
*
{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body
{
color: #333;
font-size: 19px;
background-image: url("img/bg1.jpg") ;
min-height: 100%;
font-family: 'Lato', sans-serif;
height: 3528px;
width: 1920px;
}
.logo
{
text-align: center;
padding: 10px;
}
.nav
{
width: 100%;
height: 60px;
}
.nav ul
{
max-width: 1024px;
margin-right: auto;
margin-left: auto;
display: flex;
justify-content: space-between;
list-style: none;
height: 60px;
text-align: center;
line-height: 300%;
}
.nav li
{
width: 100%;
font-family: 'PT Sans', sans-serif;
height: 60px;
text-transform: uppercase;
}
.nav a
{
text-decoration: none;
color: white;
height: 60px;
display: block;
font-size: 15px;
}
.nav a:hover
{
background-color: #f7604c;
}
#bg
{
width: 1920px;
min-height: 3000px;
margin-left: auto;
margin-right: auto;
background: url(img/1.png) center no-repeat;
display: block;
margin-top: -70px;
}
.container
{
width: 1024px;
height: 100%;
text-align: center;
padding: 140px;
color: white;
}
.main
{
width: 512px;
height: 550px;
text-align: center;
margin-left: auto;
padding-left: 80px;
padding-top: 50px;
}
.main h1
{
font-size: 80px;
text-transform: uppercase;
font-family: 'PT Sans', sans-serif;
word-spacing: 5px;
}
.main p
{
font-size: 14px;
margin-left: 30px;
margin-top: 5px;
text-align: center;
}
.middle
{
width: 1024px;
height: 100%;
text-align: center;
color: white;
margin-left: auto;
margin-right: auto;
}
.title1
{
width: 482px;
height: 500px;
background-color: #666666;
padding-top: 50px;
margin-left: auto;
float: left;
text-align: center;
font-size: 15px;
padding-left: 50px;
}
.title2
{
width: 482px;
height: 500px;
background-color: #666666;
padding-top: 50px;
margin-left: auto;
float: left;
text-align: center;
font-size: 15px;
}
Jedym slowem rozmieszczenie w sekcji od Container tak aby to mialo rece i nogi nie wychodzi...
+ plik do pobrania z grafikami uzytymi oraz html i css plik. https://uploadfiles.io/0cc6