html - 为什么我的页脚粘在页面中间？

Question

所以我在我的第三个内容 div 中添加了几张图片，这使得页脚要么与它们重叠，要么粘在页面的中间，或者我想是在顶部。我尝试过添加 bottom:0、position:absolute 和 position:relative。

感谢您的帮助。 :D

html,
body {
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: 'source_sans_prolight';
  src: url('font1/sourcesanspro-light-webfont.woff2') format('woff2'), url('font1/sourcesanspro-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'quicksandregular';
  src: url('font2/quicksand-regular-webfont.woff2') format('woff2'), url('font2/quicksand-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
a {
  text-decoration: none;
  color: white;
}
p {
  font-family: 'source_sans_prolight';
  font-size: 16px;
  text-align: justify;
  color: #E6E6E6;
}
h1 {
  font-family: 'quicksandregular';
  font-size: 26px;
  text-align: center;
  color: white;
}
h2 {
  font-family: 'source_sans_prolight';
  font-size: 16px;
  color: white;
  padding-top: 0px;
  padding-left: 15px;
  height: 26px;
}
h3 {
  font-family: 'quicksandregular';
  font-size: 20px;
  text-align: center;
}
h4 {
  font-family: 'quicksandregular';
  font-size: 18px;
  text-align: center;
  color: black;
}
h5 {
  font-family: 'quicksandregular';
  font-size: 26px;
  color: black;
}
img {
  max-width: 100%;
  height: auto;
}
.Header {
  background-color: white;
  width: 100%;
  height: 60px;
  -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  opacity: 0.9;
  position: absolute;
}
.menubutton {
  font-family: 'source_sans_prolight';
  background-color: #EBEBEB;
  color: black;
  width: 100px;
  height: 60px;
  border: none;
  font-size: 18px;
  opacity: 0.8;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.menu {
  float: right;
  position: relative;
}
.dropdown {
  display: none;
  position: absolute;
  background-color: #EBEBEB;
  width: 100px;
}
.dropdown a {
  font-family: 'source_sans_prolight';
  color: black;
  text-decoration: none;
  text-align: center;
  display: block;
  min-height: 20px;
  padding: 10px;
}
.dropdown a:hover {
  background-color: #CBCBCB;
  color: white;
}
.menu:hover .dropdown {
  display: block;
}
.menu:hover .menubutton {
  background-color: #303030;
  color: white;
  opacity: 1;
}
.Logo {
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
}
.socialbutton1 {
  float: left;
  height: 50px;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 10px;
  opacity: 0.5;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.socialbutton1:hover {
  opacity: 1;
}
.socialbutton2 {
  float: left;
  height: 50px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 15px;
  opacity: 0.5;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.socialbutton2:hover {
  opacity: 1;
}
.container1 {
  width: 100%;
  height: 400px;
}
.bkimage1 {
  background-image: url(images/image1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 800px;
}
.title {
  width: 510px;
  padding-top: 150px;
  margin: 0 auto;
}
.title p {
  font-family: 'source_sans_prolight';
  font-size: 17px;
  text-align: center;
  color: #E6E6E6;
  padding-top: 10px;
}
.title h1 {
  font-family: 'quicksandregular';
  font-size: 60px;
  text-align: center;
  color: white;
  height: 50px;
}
.readmore {
  padding-top: 10px;
  width: 100px;
  margin: 0 auto;
}
.readmore1 {
  border: 2px solid white;
  width: 100px;
  height: 40px;
  -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  opacity: 0.5;
  font-family: 'source_sans_prolight';
  font-size: 15px;
  text-align: center;
}
.readmore1:hover {
  opacity: 1;
  background-color: white;
}
.content {
  margin: 0 auto;
  display: flex;
  width: 1024px;
  height: 400px;
}
.firsti {
  margin: 0 auto;
  padding-top: 45px;
  width: 440px;
}
.firstp {
  width: 450px;
  margin: 0 auto;
}
.firstp p {
  font-family: 'source_sans_prolight';
  font-size: 16px;
  color: black;
  text-align: justify;
}
.container2 {
  height: 600px;
}
.bkimage2 {
  height: 1000px;
  background-image: url(images/image1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.content2title {
  margin: 0 auto;
  padding-top: 30px;
}
.content2 {
  margin: 0 auto;
  padding-top: 30px;
  height: 1000px;
  width: 1024px;
  display: flex;
}
.footerbk {
  width: 100%;
  height: 300px;
  background-color: #070707;
  bottom: 0;
  position: absolute;
}
.footer {
  margin: 0 auto;
  width: 500px;
  height: 180px;
  float: left;
  padding-left: 10px;
  padding-top: 20px;
}
.copyright {} .contact {
  padding-top: 5px;
}
.contact a {
  color: #ec4e8c;
  font-family: 'quicksandregular';
  font-size: 20px;
}
.footer2 {
  margin: 0 auto;
  width: 500px;
  float: right;
  padding-top: 20px;
}
.footerlinks {} .footerlink1 {
  padding-left: 15px;
  display: inline;
  transition: .10s ease-in-out;
  -moz-transition: .10s ease-in-out;
  -webkit-transition: .10s ease-in-out;
}
.footerlink1:hover {
  opacity: 0.7;
}
.footerlink2 {
  display: inline;
  padding-left: 20px;
  transition: .10s ease-in-out;
  -moz-transition: .10s ease-in-out;
  -webkit-transition: .10s ease-in-out;
}
.footerlink2:hover {
  opacity: 0.7;
}
@media screen and (max-width: 960px) {
  .Header {
    position: relative;
  }
  .container1 {
    padding-top: 0px;
  }
  .bkimage1 {
    background-image: url(images/image1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
  }
  .title {
    width: 90%;
    padding-top: 10px;
  }
  .title h1 {
    font-family: 'quicksandregular';
    font-size: 80px;
    text-align: center;
    color: white;
    height: 100px;
  }
  .content {
    display: inline;
    width: 90%;
  }
  .firsti {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .firstp {
    width: 90%;
  }
  .c2leftimage {
    margin: 0 auto;
    max-width: 90%;
    heigh: auto;
  }
  .c2rightimage {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .container2 {
    height: 1300px;
  }
  .bkimage2 {
    height: 1300px;
  }
  .content2title {
    padding-top: 30px;
  }
  .content2 {
    display: inline;
  }
  .footerbk {
    height: 630px;
  }
  .footer {
    width: 90%;
  }
  .footer2 {
    margin: 0 auto;
    padding-top: 10px;
    width: 90%;
  }
  .sponsorer {
    height: 60px;
  }
  .footersponsorer {
    display: inline;
  }
  .kicks {} .ica_maxi {
    padding-left: 0px;
    padding-top: 10px;
  }
  .skor {
    padding-left: 0px;
    padding-top: 10px;
  }
  .sparbanken {
    padding-left: 0px;
    padding-top: 10px;
  }
}
@media screen and (max-width: 320px) {
  .Header {
    position: relative;
  }
  .container1 {} .bkimage1 {
    background-image: url(images/image1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
  }
  .title {
    width: 90%;
  }
  .content {
    display: inline;
    width: 90%;
  }
  .firsti {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .firstp {
    width: 90%;
  }
  .c2leftimage {
    margin: 0 auto;
    max-width: 90%;
    heigh: auto;
  }
  .c2rightimage {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .container2 {
    height: 1200px;
  }
  .bkimage2 {
    height: 1200px;
  }
  .content2title {
    padding-top: 30px;
  }
  .content2 {
    display: inline;
  }
  .footerbk {
    height: 700px;
  }
}

<!DOCTYPE html>
<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/style.css" rel="stylesheet">
  <link rel="shortcut icon" href="css/images/favicon.ico">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>Royal Q UF</title>

</head>

<body>

  <div class="Header">

    <div class="Logo">

      <a href="index.html">
        <img src="css/images/logo.png" alt="Logo">
      </a>

    </div>

    <div class="social">

      <div class="socialbutton1">
        <img src="css/images/facebook.svg" alt="Facebook">
      </div>

      <div class="socialbutton2">
        <img src="css/images/instagram.svg" alt="Facebook">
      </div>

    </div>

    <div class="menu">

      <button class="menubutton">
        MENU
      </button>

      <div class="dropdown">

        <a href="#social" class="smoothScroll">
    Our Products
    </a>

        <a href="#kontakt" class="smoothScroll">
    Contact Us
    </a>

      </div>
    </div>
  </div>

  <div class="container1">

    <div class="bkimage1">

      <div class="title">

        <h1>
    CLASSIE THEME
    </h1>

        <p>
          Clean WordPress Theme Made by Hans Nilsson
        </p>

      </div>

      <div class="readmore">

        <a href="#content" class="smoothScroll">

          <button class="readmore1">

            Read More

          </button>

      </div>
      </a>
    </div>

    <div class="content">

      <a name="content"></a>

      <div class="firsti">

        <img src="css/images/imageproduct.jpg" alt="Our Product">

      </div>

      <div class="firstp">

        <h5>
    Our Product

    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus arcu arcu, vel pulvinar orci rhoncus laoreet. Nulla at commodo tellus, sodales feugiat justo. Quisque vitae tristique felis. Morbi bibendum quam risus, ac iaculis mi condimentum in. Donec efficitur justo ipsum, ut pretium mi ornare tristique.
    </p>
    
    <p>
Ut mollis leo id tristique euismod. Curabitur hendrerit ipsum sed turpis sagittis, sit amet luctus diam interdum. Ut bibendum mi ut tristique laoreet. Cras blandit nibh auctor urna aliquet, et rhoncus urna mattis. Praesent ornare nisi ac urna malesuada, sit amet rutrum mauris convallis. Fusce eros sapien, congue eu convallis in, tristique non elit. Sed ac mattis magna.
    </p>
    </h5>

      </div>

    </div>

    <a name="social"></a>

    <div class="container2">

      <div class="bkimage2">

        <div class="content2title">

          <h1>
    Some pictures, woop!
    </h1>

        </div>

        <div class="content2">

          <div class="images1">
            <img src="css/images/1.jpg">
            <img src="css/images/2.jpg">
          </div>
          <div class="images2">
            <img src="css/images/3.jpg">
            <img src="css/images/4.jpg">
          </div>

        </div>
      </div>
    </div>

    <div class="footerbk">

      <div class="footer">

        <div class="copyright">

          <p>
            Copyright © 2016 Company. All rights reserved.
          </p>

        </div>

        <div class="contact">

          <p>
            Awesome street 14
          </p>
          <p>
            Email: ourawesomeemail@email.com
          </p>

        </div>
      </div>

      <div class="footer2">

        <div class="footerlinks">

          <h2>
    Links
    </h2>

        </div>

        <div class="footerlink1">

          <a href="#">
    Facebook
    </a>

        </div>

        <div class="footerlink2">

          <a href="#">
    Instagram
    </a>

        </div>
      </div>
    </div>
    <!--Smooth Scroll-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/smoothscroll.js"></script>
    <!--End of Smooth Scroll-->
</body>

</html>

Answer 1

只需从 footerbk 类中删除绝对位置

html,
body {
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: 'source_sans_prolight';
  src: url('font1/sourcesanspro-light-webfont.woff2') format('woff2'), url('font1/sourcesanspro-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'quicksandregular';
  src: url('font2/quicksand-regular-webfont.woff2') format('woff2'), url('font2/quicksand-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
a {
  text-decoration: none;
  color: white;
}
p {
  font-family: 'source_sans_prolight';
  font-size: 16px;
  text-align: justify;
  color: #E6E6E6;
}
h1 {
  font-family: 'quicksandregular';
  font-size: 26px;
  text-align: center;
  color: white;
}
h2 {
  font-family: 'source_sans_prolight';
  font-size: 16px;
  color: white;
  padding-top: 0px;
  padding-left: 15px;
  height: 26px;
}
h3 {
  font-family: 'quicksandregular';
  font-size: 20px;
  text-align: center;
}
h4 {
  font-family: 'quicksandregular';
  font-size: 18px;
  text-align: center;
  color: black;
}
h5 {
  font-family: 'quicksandregular';
  font-size: 26px;
  color: black;
}
img {
  max-width: 100%;
  height: auto;
}
.Header {
  background-color: white;
  width: 100%;
  height: 60px;
  -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  opacity: 0.9;
  position: absolute;
}
.menubutton {
  font-family: 'source_sans_prolight';
  background-color: #EBEBEB;
  color: black;
  width: 100px;
  height: 60px;
  border: none;
  font-size: 18px;
  opacity: 0.8;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.menu {
  float: right;
  position: relative;
}
.dropdown {
  display: none;
  position: absolute;
  background-color: #EBEBEB;
  width: 100px;
}
.dropdown a {
  font-family: 'source_sans_prolight';
  color: black;
  text-decoration: none;
  text-align: center;
  display: block;
  min-height: 20px;
  padding: 10px;
}
.dropdown a:hover {
  background-color: #CBCBCB;
  color: white;
}
.menu:hover .dropdown {
  display: block;
}
.menu:hover .menubutton {
  background-color: #303030;
  color: white;
  opacity: 1;
}
.Logo {
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
}
.socialbutton1 {
  float: left;
  height: 50px;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 10px;
  opacity: 0.5;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.socialbutton1:hover {
  opacity: 1;
}
.socialbutton2 {
  float: left;
  height: 50px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 15px;
  opacity: 0.5;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.socialbutton2:hover {
  opacity: 1;
}
.container1 {
  width: 100%;
  height: 400px;
}
.bkimage1 {
  background-image: url(images/image1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 800px;
}
.title {
  width: 510px;
  padding-top: 150px;
  margin: 0 auto;
}
.title p {
  font-family: 'source_sans_prolight';
  font-size: 17px;
  text-align: center;
  color: #E6E6E6;
  padding-top: 10px;
}
.title h1 {
  font-family: 'quicksandregular';
  font-size: 60px;
  text-align: center;
  color: white;
  height: 50px;
}
.readmore {
  padding-top: 10px;
  width: 100px;
  margin: 0 auto;
}
.readmore1 {
  border: 2px solid white;
  width: 100px;
  height: 40px;
  -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.75);
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  opacity: 0.5;
  font-family: 'source_sans_prolight';
  font-size: 15px;
  text-align: center;
}
.readmore1:hover {
  opacity: 1;
  background-color: white;
}
.content {
  margin: 0 auto;
  display: flex;
  width: 1024px;
  height: 400px;
}
.firsti {
  margin: 0 auto;
  padding-top: 45px;
  width: 440px;
}
.firstp {
  width: 450px;
  margin: 0 auto;
}
.firstp p {
  font-family: 'source_sans_prolight';
  font-size: 16px;
  color: black;
  text-align: justify;
}
.container2 {
  height: 600px;
}
.bkimage2 {
  height: 1000px;
  background-image: url(images/image1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.content2title {
  margin: 0 auto;
  padding-top: 30px;
}
.content2 {
  margin: 0 auto;
  padding-top: 30px;
  height: 1000px;
  width: 1024px;
  display: flex;
}
.footerbk {
  width: 100%;
  height: 300px;
  background-color: #070707;
  bottom: 0;
}
.footer {
  margin: 0 auto;
  width: 500px;
  height: 180px;
  float: left;
  padding-left: 10px;
  padding-top: 20px;
}
.copyright {} .contact {
  padding-top: 5px;
}
.contact a {
  color: #ec4e8c;
  font-family: 'quicksandregular';
  font-size: 20px;
}
.footer2 {
  margin: 0 auto;
  width: 500px;
  float: right;
  padding-top: 20px;
}
.footerlinks {} .footerlink1 {
  padding-left: 15px;
  display: inline;
  transition: .10s ease-in-out;
  -moz-transition: .10s ease-in-out;
  -webkit-transition: .10s ease-in-out;
}
.footerlink1:hover {
  opacity: 0.7;
}
.footerlink2 {
  display: inline;
  padding-left: 20px;
  transition: .10s ease-in-out;
  -moz-transition: .10s ease-in-out;
  -webkit-transition: .10s ease-in-out;
}
.footerlink2:hover {
  opacity: 0.7;
}
@media screen and (max-width: 960px) {
  .Header {
    position: relative;
  }
  .container1 {
    padding-top: 0px;
  }
  .bkimage1 {
    background-image: url(images/image1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
  }
  .title {
    width: 90%;
    padding-top: 10px;
  }
  .title h1 {
    font-family: 'quicksandregular';
    font-size: 80px;
    text-align: center;
    color: white;
    height: 100px;
  }
  .content {
    display: inline;
    width: 90%;
  }
  .firsti {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .firstp {
    width: 90%;
  }
  .c2leftimage {
    margin: 0 auto;
    max-width: 90%;
    heigh: auto;
  }
  .c2rightimage {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .container2 {
    height: 1300px;
  }
  .bkimage2 {
    height: 1300px;
  }
  .content2title {
    padding-top: 30px;
  }
  .content2 {
    display: inline;
  }
  .footerbk {
    height: 630px;
  }
  .footer {
    width: 90%;
  }
  .footer2 {
    margin: 0 auto;
    padding-top: 10px;
    width: 90%;
  }
  .sponsorer {
    height: 60px;
  }
  .footersponsorer {
    display: inline;
  }
  .kicks {} .ica_maxi {
    padding-left: 0px;
    padding-top: 10px;
  }
  .skor {
    padding-left: 0px;
    padding-top: 10px;
  }
  .sparbanken {
    padding-left: 0px;
    padding-top: 10px;
  }
}
@media screen and (max-width: 320px) {
  .Header {
    position: relative;
  }
  .container1 {} .bkimage1 {
    background-image: url(images/image1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
  }
  .title {
    width: 90%;
  }
  .content {
    display: inline;
    width: 90%;
  }
  .firsti {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .firstp {
    width: 90%;
  }
  .c2leftimage {
    margin: 0 auto;
    max-width: 90%;
    heigh: auto;
  }
  .c2rightimage {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  .container2 {
    height: 1200px;
  }
  .bkimage2 {
    height: 1200px;
  }
  .content2title {
    padding-top: 30px;
  }
  .content2 {
    display: inline;
  }
  .footerbk {
    height: 700px;
  }
}

<!DOCTYPE html>
<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/style.css" rel="stylesheet">
  <link rel="shortcut icon" href="css/images/favicon.ico">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>Royal Q UF</title>

</head>

<body>

  <div class="Header">

    <div class="Logo">

      <a href="index.html">
        <img src="css/images/logo.png" alt="Logo">
      </a>

    </div>

    <div class="social">

      <div class="socialbutton1">
        <img src="css/images/facebook.svg" alt="Facebook">
      </div>

      <div class="socialbutton2">
        <img src="css/images/instagram.svg" alt="Facebook">
      </div>

    </div>

    <div class="menu">

      <button class="menubutton">
        MENU
      </button>

      <div class="dropdown">

        <a href="#social" class="smoothScroll">
    Our Products
    </a>

        <a href="#kontakt" class="smoothScroll">
    Contact Us
    </a>

      </div>
    </div>
  </div>

  <div class="container1">

    <div class="bkimage1">

      <div class="title">

        <h1>
    CLASSIE THEME
    </h1>

        <p>
          Clean WordPress Theme Made by Hans Nilsson
        </p>

      </div>

      <div class="readmore">

        <a href="#content" class="smoothScroll">

          <button class="readmore1">

            Read More

          </button>

      </div>
      </a>
    </div>

    <div class="content">

      <a name="content"></a>

      <div class="firsti">

        <img src="css/images/imageproduct.jpg" alt="Our Product">

      </div>

      <div class="firstp">

        <h5>
    Our Product

    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus arcu arcu, vel pulvinar orci rhoncus laoreet. Nulla at commodo tellus, sodales feugiat justo. Quisque vitae tristique felis. Morbi bibendum quam risus, ac iaculis mi condimentum in. Donec efficitur justo ipsum, ut pretium mi ornare tristique.
    </p>
    
    <p>
Ut mollis leo id tristique euismod. Curabitur hendrerit ipsum sed turpis sagittis, sit amet luctus diam interdum. Ut bibendum mi ut tristique laoreet. Cras blandit nibh auctor urna aliquet, et rhoncus urna mattis. Praesent ornare nisi ac urna malesuada, sit amet rutrum mauris convallis. Fusce eros sapien, congue eu convallis in, tristique non elit. Sed ac mattis magna.
    </p>
    </h5>

      </div>

    </div>

    <a name="social"></a>

    <div class="container2">

      <div class="bkimage2">

        <div class="content2title">

          <h1>
    Some pictures, woop!
    </h1>

        </div>

        <div class="content2">

          <div class="images1">
            <img src="css/images/1.jpg">
            <img src="css/images/2.jpg">
          </div>
          <div class="images2">
            <img src="css/images/3.jpg">
            <img src="css/images/4.jpg">
          </div>

        </div>
      </div>
    </div>

    <div class="footerbk">

      <div class="footer">

        <div class="copyright">

          <p>
            Copyright © 2016 Company. All rights reserved.
          </p>

        </div>

        <div class="contact">

          <p>
            Awesome street 14
          </p>
          <p>
            Email: ourawesomeemail@email.com
          </p>

        </div>
      </div>

      <div class="footer2">

        <div class="footerlinks">

          <h2>
    Links
    </h2>

        </div>

        <div class="footerlink1">

          <a href="#">
    Facebook
    </a>

        </div>

        <div class="footerlink2">

          <a href="#">
    Instagram
    </a>

        </div>
      </div>
    </div>
    <!--Smooth Scroll-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/smoothscroll.js"></script>
    <!--End of Smooth Scroll-->
</body>

</html>