Czesc. Mam problem gdy chce zmienic strone poprzez nawigacje i gdy sie przemieszcze na inna strone ktora ma mniej tekstu stopka ucieka do gory. Probowalem rozwiazan z google ale nic nie pomoglo. To jest moja 1 strona i nawet nie wiem czy w kodzie sa jakies bledy. Pisalem ta strone wzorujac sie na filmikami z YT z Pasja Informatyki i innymi.
HTML:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DydoconsLTD</title>
<meta name="description" content="Dydo Construction Ltd" />
<meta name="keywords" content="builders,uk,united,kindom,england,builder services" />
<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=Josefin+Sans|Lato" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="#">Procedures</a></li>
<li><a href="#">Property maintenance</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
<div class="header">
<div class="logo"></div>
<img src="img/Logomakr_636Hwi.png" style="display: block; margin: 0 auto"/>
<div style="clear: both;"> </div>
<hr color="#f3f3f3" />
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque condimentum nulla at placerat. Quisque risus sem, lacinia at lobortis at, feugiat at nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent nec ex sit amet risus tempor aliquet. Donec in mi sit amet felis aliquet porta. Proin accumsan tristique ligula, facilisis pulvinar arcu elementum tempor. Nunc eget congue nibh, eu iaculis massa. Nulla a ex suscipit, vehicula odio in, pharetra risus. Phasellus ultrices dui vitae urna consectetur efficitur. Etiam lacinia ac urna ultrices posuere. Morbi euismod scelerisque nisi sodales commodo. Suspendisse ut diam ex. Ut volutpat nulla quis volutpat venenatis. Quisque facilisis tincidunt mollis. Maecenas ac condimentum lacus, et ullamcorper quam.</p>
<p>Quisque consequat orci sem, id scelerisque leo lobortis laoreet. Sed arcu orci, ornare eu diam a, luctus laoreet enim. Pellentesque sapien ligula, bibendum non diam et, aliquam gravida lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur laoreet urna felis, vel condimentum massa ultricies ac. Sed aliquet sollicitudin erat ut malesuada. Pellentesque sapien dolor, tempus id finibus eu, egestas id justo. Maecenas a tellus libero. In ullamcorper tortor ac tincidunt ullamcorper. Proin fringilla pulvinar elit id varius. Morbi luctus ante non mi vulputate laoreet. Mauris sit amet neque quam. Aenean tincidunt est ipsum, ut cursus dolor blandit vel.</p>
<p>Proin convallis tempus arcu in consequat. Morbi sit amet leo orci. Aliquam erat volutpat. Nunc vel ipsum eget quam pharetra tristique. Vestibulum nec dui at nisi facilisis interdum sed eu ex. Sed auctor sodales erat nec suscipit. Aliquam erat volutpat. Aenean et laoreet nunc. Quisque vestibulum felis leo, nec congue nunc tristique et. Nulla lacinia commodo felis. Nulla fermentum urna sed rutrum viverra. Ut at metus consectetur, consectetur sem in, suscipit dolor. Maecenas elit est, rhoncus et ante sit amet, dictum molestie ipsum.</p>
</div>
<div class="fontello">
<div class="fontellodivs">
<div class="solar">
<i class="icon-sun-inv"></i>
<b><p>Solar Installation</p><br></b>
</div>
<div class="design">
<i class="icon-pencil-squared"></i>
<b><p>Design</p><br></b>
</div>
<div class="buidling">
<i class="icon-home"></i>
<b><p>House building</p><br></b>
</div>
<div class="maintenance">
<i class="icon-tools"></i>
<b><p>Maintenance</p><br></b>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="footer">DydoConstructionLtd.Com © 2017. Construct graphic by <a href="http://www.icons8.com" style="text-decoration:none;color:#000000">Icons8</a> from <a href="http://www.flaticon.com/" style="text-decoration:none;color:#000000">Flaticon</a> is licensed under <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" style="text-decoration:none;color:#000000">CC BY 3.0</a>. Made with <a href="http://logomakr.com" title="Logo Maker" style="text-decoration:none;color:#000000">Logo Maker</a> </div>
</div>
</body>
</html>
CSS:
*{box-sizing:border-box; margin: 0; padding: 0;}
html
{
box-sizing: border-box;
}
body
{
background-color: #f7f7f7;
margin: 0 !important;
font-family: 'Lato', sans-serif;
font-size: 20px;
}
.wrapper
{
max-width: 100%;
position:relative;
}
.header
{
max-width: 100%;
}
.logo
{
max-width: 450px;
height: auto;
margin-left: auto;
margin-right: auto;
text-align:center;
padding:15px;
padding-top:40px;
}
.logo > img {
width: 100%;
padding-top: 56.25%;
display: block;
}
.content
{
max-width: 1000px;
padding-left: 15px;
padding-right:15px;
margin-left: auto;
margin-right: auto;
text-align: justify;
padding-top: 60px;
font-size: 19px;
}
.fontello
{
max-width: 100%;
text-align:center;
padding-top: 60px;
padding-bottom:20px;
}
.fontellodivs
{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-bottom: 50px;
}
.solar
{
width:250px;
height:155px;
float:left;
text-transform: uppercase;
color: #3f3f3f;
font-size: 22px;
}
.design
{
width:250px;
height:155px;
float:left;
text-transform: uppercase;
color: #3f3f3f;
font-size: 22px;
}
.buidling
{
width:250px;
height:155px;
float:left;
text-transform: uppercase;
color: #3f3f3f;
font-size: 22px;
}
.maintenance
{
width:250px;
height:155px;
float:left;
text-transform: uppercase;
color: #3f3f3f;
font-size: 22px;
}
.footer
{
text-align: center;
background-color: #f1f1f1;
padding: 15px;
max-width:100%;
bottom:0;
clear: both;
top height:auto;overflow:auto;
}
.nav ul
{
display: flex;
justify-content: space-around;
list-style: none;
text-align: center;
background: #191919;
}
@media screen and (max-width: 700px) {
.nav ul
{
flex-direction: column;
}
}
.nav a
{
color: #fff;
text-decoration: none;
display: block;
padding: 10px;
font-weight: bold;
transition: color .1s;
}
.nav a:hover
{
color: #c39f76;
}
