页脚重叠网站内容

时间:2018-05-15 14:18:59

标签: html footer

我正在运行一个Drupal网站并且目前有关于当前页脚的问题,我试图找出为什么它不断重叠整个网站,我已经能够发现页脚的颜色是问题,我尝试改变颜色,同样的问题发生。我试过在页脚之前放一个div标签,在页脚之前放一条水平线。

下面我已经附上代码页脚是一个响应式网站,页脚的主要目的是让它能够在移动设备和桌面上运行,只是避免了这个问题的最后一个问题。得到解决。每个部分都包含每个功能的标题,包括在

第一部分是最顶部的样式表,包含表单的高度和宽度。页脚颜色标记为ct-footer,仅包含每个部分的标记,例如ct-footer background或ct-footer pre for forms和div。



html,
body,
img,
figure {
  max-width: 100%;
}

html,
body {
  overflow-x: hidden;
  color: #000;
  -ms-overflow-style: scrollbar;
  -webkit-font-smoothing: antialiased;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}

a {
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.ct-u-paddingTop10 {
  padding-top: 10px !important;
}

.ct-footer {
  background-color: #111;
  padding-top: 70px;
  margin-top: 20px;
  position: relative;
}

.ct-footer-pre {
  width: 100%;
  padding-bottom: 55px;
  border-bottom: 1px solid #555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ct-footer-pre span {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #ebebeb;
  font-size: 30px;
}

.ct-footer-pre .form-group {
  position: relative;
  margin: 0;
}

.ct-footer-pre .form-group:before,
.ct-footer-pre .form-group:after {
  content: '';
  display: table;
}

.ct-footer-pre .form-group:after {
  clear: both;
}

.ct-footer-pre .form-group input {
  border: 1px solid #39a2bf;
  background-color: #333;
  color: #fff;
  height: 50px;
  padding: 0 30px;
  margin: 0 5px;
  border-radius: 0 !important;
}

.ct-footer-pre .form-group button {
  height: 50px;
  position: relative;
  width: 80px;
  padding: 0
}

.ct-footer-list {
  padding: 50px 0;
  list-style: none;
  padding-left: 0;
  display: table;
  width: 100%;
  border-bottom: 1px solid #555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ct-footer-list>li .ct-footer-list-header {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #3a98b2;
  font-size: 30px;
}

.ct-footer-list>li ul {
  list-style: none;
  padding-left: 0;
}

.ct-footer-list>li ul li a {
  color: #fff;
}

.ct-footer-list>li ul li a:hover,
.ct-footer-post a:hover {
  text-decoration: underline;
}

.ct-footer-post {
  background: #000;
  padding: 30px 0;
}

.ct-footer-post .inner-left,
.ct-footer-post .inner-right {
  padding: 20px 0;
}

.ct-footer-post ul {
  list-style: none;
  padding-left: 0;
  margin: 0 -20px;
}

.ct-footer-post ul li {
  display: inline-block;
  margin: 0 20px;
}

.ct-footer-post a {
  color: #fff;
}

.ct-footer-post p {
  color: #fff;
}

.ct-footer-meta {
  padding-top: 30px;
}

.ct-footer-meta .ct-socials {
  padding: 20px 0;
}

.ct-footer-meta .ct-socials li {
  padding: 0 3px;
}

.ct-footer--with-button {
  padding-top: 150px;
}

address {
  color: #fff;
  display: inline-block;
}

address span {
  font-weight: 600;
}

address a {
  color: #fff;
}

address a:hover {
  text-decoration: underline;
}

.btn {
  font-family: 'Open Sans Condensed', sans-serif;
  border-radius: 0;
  border: none;
  text-transform: uppercase;
  color: #111;
  font-size: 26px;
  padding: 12px 30px;
}

.btn.btn-motive {
  background-color: #00bff3;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}

.btn.btn-motive:hover,
.btn.btn-motive:hover:active {
  background-color: #00bff3;
}

.btn.btn-violet {
  color: #fff;
  background-color: #4f4f99;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}

.btn.btn-violet:hover {
  background-color: #37376b;
}

.btn.btn-violet:hover:active {
  background-color: #2f2f5b
}

.btn.btn-green {
  color: #fff;
  background-color: #43670f;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}

.btn.btn-green:hover {
  background-color: #36520c;
}

.btn.btn-green:hover:active {
  background-color: #314a0b;
}

.btn.btn-red {
  color: #fff;
  background-color: #da2229;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}

.btn.btn-red:hover {
  background-color: #ae1b21;
}

.btn.btn-red:hover:active {
  background-color: #9d181e
}

.btn.btn-white {
  background-color: #fff;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}

.btn.btn-white:hover {
  background-color: #d9d9d9;
}

.btn.btn-white:hover:active {
  background-color: #c9c9c9
}

.btn.btn-large {
  padding: 20px 50px;
  font-size: 30px;
  white-space: normal;
}

.ct-mediaSection {
  background-attachment: fixed;
}

.ct-section_header--type1 {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #000;
  font-size: 115px;
  text-transform: uppercase;
}

.ct-section_header--type2 small {
  font-family: 'coquette', fantasy;
  font-size: 58px;
  line-height: .7;
  display: block;
  font-weight: 700;
  position: relative;
  left: -12px;
}

.ct-section_header--type2 span {
  font-family: 'Bebas Neue';
  font-size: 115px;
  line-height: .8;
}

.ct-section_header--type2 img {
  display: inline-block;
  float: left;
  position: relative;
  top: 15px;
  padding-right: 3px;
}

.ct-section_header--type3 {
  text-align: center;
}

.ct-section_header--type3 small {
  font-family: 'coquette', fantasy;
  font-size: 50px;
  padding: 15px 0;
  font-weight: 700;
  color: #fff;
  background-image: url("/core/fileparse.php/16/urlt/../images/ribbon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block
}

.ct-section_header--type3 span {
  font-family: 'Bebas Neue';
  font-size: 150px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .85
}

.ct-section_header--type4 {
  text-align: center;
}

.ct-section_header--type4:before,
.ct-section_header--type4:after {
  content: '';
  display: table
}

.ct-section_header--type4:after {
  clear: both
}

.ct-section_header--type4 small {
  font-family: 'coquette', fantasy;
  font-size: 50px;
  color: inherit;
  font-weight: 700;
  display: block
}

.ct-section_header--type4 span {
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: 400;
  font-weight: bold;
  font-size: 150px;
  text-transform: uppercase;
  display: block;
  line-height: .7
}

.ct-section_header+p {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1.5px;
  text-align: center;
}

.ct-section_header--type4+p {
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: 400;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}


/* Media Queries */

@media (min-width:1200px) {
  .ct-footer-pre {
    display: table;
  }
  .ct-footer-pre>.inner {
    display: table-cell;
    vertical-align: middle;
  }
  .ct-footer-list>li {
    width: 20%;
    display: table-cell;
    vertical-align: top;
  }
  .ct-footer-list>li:last-child {
    width: 7%;
  }
}

@media (max-width:1199px) {
  .ct-footer-pre .form-group {
    padding-top: 15px
  }
}

@media (max-width: 1199px) {
  .ct-footer-list>li {
    display: inline-block;
    float: left;
  }
}

@media (min-width:992px) {
  .ct-footer-post .inner-left {
    float: left;
  }
  .ct-footer-post .inner-right {
    float: right;
  }
}

@media (max-width:991px) {
  .ct-footer-post {
    text-align: center;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .ct-footer-list>li {
    width: 33.3333%;
  }
}

@media (min-width:768px) {
  .ct-footer-post p {
    display: inline-block;
  }
  .ct-footer-post p+p {
    padding-left: 50px;
  }
}

@media (max-width:767px) {
  address {
    padding-top: 30px;
  }
}

@media (min-width: 480px) and (max-width:767px) {
  .ct-footer-list>li {
    width: 50%;
  }
}

@media (min-width:480px) {
  .ct-footer-pre .form-group button {
    top: -1px;
  }
  .ct-footer-pre .form-group input {
    width: 331px;
  }
}

@media (max-width:479px) {
  .ct-footer-pre .form-group input {
    float: left;
    width: 70%;
    margin: 0;
  }
  .ct-footer-pre .form-group button {
    float: left;
    width: 30%;
  }
  .ct-footer-list>li {
    width: 100%;
    text-align: center;
  }
  .ct-footer-list {
    padding: 20px 0;
  }
  .btn.btn-large {
    padding: 20px 10px;
    line-height: .9;
    font-size: 26px;
    letter-spacing: -.2px;
  }
  .ct-section_header--type1 {
    font-size: 60px;
    line-height: .8;
  }
  .ct-section_header+p {
    font-size: 22px;
  }
  .ct-section_header--type3 small {
    font-size: 25px;
  }
  .ct-section_header--type4 small {
    font-size: 40px;
  }
  .ct-section_header--type3 span {
    font-size: 90px;
  }
  .ct-section_header--type4 span {
    font-size: 80px;
  }
  .ct-section_header--type4+p {
    font-size: 28px;
  }
}

<footer class="ct-footer">
  <div class="container">
    <form action="" enctype="multipart/form-data" method="post" name="contentForm">&nbsp;</form>

    <ul class="ct-footer-list text-center-sm">
      <li>
        <h2 class="ct-footer-list-header">Contract Vehicles</h2>

        <ul>
          <li><a href="">Company</a></li>
          <li><a href="">Clients</a></li>
          <li><a href="">News</a></li>
          <li><a href="">Careers</a></li>
        </ul>
      </li>
      <li>
        <h2 class="ct-footer-list-header">Services</h2>

        <ul>
          <li><a href="">Design</a></li>
          <li><a href="">Marketing</a></li>
          <li><a href="">Sales</a></li>
          <li><a href="">Programming</a></li>
          <li><a href="">Support</a></li>
        </ul>
      </li>
      <li>
        <h2 class="ct-footer-list-header">About us</h2>

        <ul>
          <li><a href="">Thought Leadership</a></li>
          <li><a href="">Webinars</a></li>
          <li><a href="">Events</a></li>
          <li><a href="">Sponsorships</a></li>
          <li><a href="">Advisors</a></li>
          <li><a href="">Training Program</a></li>
          <li><a href="">Activities &amp; Campaigns</a></li>
        </ul>
      </li>
      <li>
        <h2 class="ct-footer-list-header">Resources&nbsp;</h2>

        <ul>
          <li><a href="">WebCorpCo Blog</a></li>
          <li><a href="">Hackathons</a></li>
          <li><a href="">Videos</a></li>
          <li><a href="">News Releases</a></li>
          <li><a href="">Newsletters</a>
            <ul>
              <li><a href="">FAQ</a></li>
              <li><a href="">Our Board</a></li>
              <li><a href="">Our Staff</a></li>
              <li><a href="">Contact Us</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

    <div class="ct-footer-meta text-center-sm">
      <div class="row">
        <div class="col-sm-6 col-md-2"><img alt="logo" src="https://www.solodev.com/assets/footer/logo.png" /></div>

        <div class="col-sm-6 col-md-3">
          <address><span>WebCorpCo</span><br />
123 Easy Street<br />
Orlando, Florida, 32801<br />
<span>Phone: <a href="tel:5555555555">(555) 555-8899</a></span></address>
        </div>

        <div class="col-sm-6 col-md-2 ct-u-paddingTop10">
          <a href="" target="_blank"><img alt="app store" src="https://www.solodev.com/assets/footer/appstore.png" /></a>
        </div>

        <div class="col-sm-6 col-md-2 ct-u-paddingTop10">
          <a href="" target="_blank"><img alt="google play store" src="https://www.solodev.com/assets/footer/androidstore.png" /></a>
        </div>

        <div class="col-sm-6 col-md-3">
          <ul class="ct-socials list-unstyled list-inline">
            <li>
              <a href="" target="_blank"><img alt="facebook" src="https://www.solodev.com/assets/footer/facebook-white.png" /></a>
            </li>
            <li>
              <a href="" target="_blank"><img alt="twitter" src="https://www.solodev.com/assets/footer/twitter-white.png" /></a>
            </li>
            <li>
              <a href="" target="_blank"><img alt="youtube" src="https://www.solodev.com/assets/footer/youtube-white.png" /></a>
            </li>
            <li>
              <a href="" target="_blank"><img alt="instagram" src="https://www.solodev.com/assets/footer/instagram-white.png" /></a>
            </li>
            <li>
              <a href="" target="_blank"><img alt="pinterest" src="https://www.solodev.com/assets/footer/pinterest-white.png" /></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="ct-footer-post">
    <div class="container">
      <div class="inner-left">
        <ul>
          <li><a href="">FAQ</a></li>
          <li><a href="">News</a></li>
          <li><a href="">Contact Us</a></li>
        </ul>
      </div>

      <div class="inner-right">
        <p>Copyright © 2016 WebCorpCo.&nbsp;<a href="">Privacy Policy</a></p>

        <p><a class="ct-u-motive-color" href="" target="_blank">Web Design</a> by DigitalUs on <a href="" target="_blank">Solodev CMS</a></p>
      </div>
    </div>
  </div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我做的步骤是让页脚保持原位并且不与内容重叠,这样做了一个和我甚至添加了一个


来仔细检查问题,在开头码。页脚保持原位,不再与网站内容重叠。它也是一个非常敏感的页脚加上改进。

<style type="text/css">html,
body,
img,
figure {
  max-width: 100%;
}
html,
body {
  overflow-x: hidden;
  color: #000;
  -ms-overflow-style: scrollbar;
  -webkit-font-smoothing: antialiased;
}
a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}
a {
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
.ct-u-paddingTop10 {
  padding-top: 10px !important;
}
.ct-footer {
  background-color: #111;
  padding-top: 70px;
  margin-top: 20px;
  position: relative;
}
.ct-footer-pre {
  width: 100%;
  padding-bottom: 55px;
  border-bottom: 1px solid #555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-footer-pre span {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #ebebeb;
  font-size: 30px;
}
.ct-footer-pre .form-group {
  position: relative;
  margin: 0;
}
.ct-footer-pre .form-group:before,
.ct-footer-pre .form-group:after {
  content: '';
  display: table;
}
.ct-footer-pre .form-group:after {
  clear: both;
}
.ct-footer-pre .form-group input {
  border: 1px solid #39a2bf;
  background-color: #333;
  color: #fff;
  height: 50px;
  padding: 0 30px;
  margin: 0 5px;
  border-radius: 0 !important;
}
.ct-footer-pre .form-group button {
  height: 50px;
  position: relative;
  width: 80px;
  padding: 0
}
.ct-footer-list {
  padding: 50px 0;
  list-style: none;
  padding-left: 0;
  display: table;
  width: 100%;
  border-bottom: 1px solid #555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-footer-list > li .ct-footer-list-header {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #3a98b2;
  font-size: 30px;
}
.ct-footer-list > li ul {
  list-style: none;
  padding-left: 0;
}
.ct-footer-list > li ul li a {
  color: #fff;
}
.ct-footer-list > li ul li a:hover,
.ct-footer-post a:hover {
  text-decoration: underline;
}
.ct-footer-post {
  background: #000;
  padding: 30px 0;
}
.ct-footer-post .inner-left,
.ct-footer-post .inner-right {
  padding: 20px 0;
}
.ct-footer-post ul {
  list-style: none;
  padding-left: 0;
  margin: 0 -20px;
}
.ct-footer-post ul li {
  display: inline-block;
  margin: 0 20px;
}
.ct-footer-post a {
  color: #fff;
}
.ct-footer-post p {
  color: #fff;
}
.ct-footer-meta {
  padding-top: 30px;
}
.ct-footer-meta .ct-socials {
  padding: 20px 0;
}
.ct-footer-meta .ct-socials li {
  padding: 0 3px;
}
.ct-footer--with-button {
  padding-top: 150px;
}
address {
  color: #fff;
  display: inline-block;
}
address span {
  font-weight: 600;
}
address a {
  color: #fff;
}
address a:hover {
  text-decoration: underline;
}
.btn {
  font-family: 'Open Sans Condensed', sans-serif;
  border-radius: 0;
  border: none;
  text-transform: uppercase;
  color: #111;
  font-size: 26px;
  padding: 12px 30px;
}
.btn.btn-motive {
  background-color: #00bff3;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-motive:hover,
.btn.btn-motive:hover:active {
  background-color: #00bff3;
}
.btn.btn-violet {
  color: #fff;
  background-color: #4f4f99;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-violet:hover {
  background-color: #37376b;
}
.btn.btn-violet:hover:active {
  background-color: #2f2f5b
}
.btn.btn-green {
  color: #fff;
  background-color: #43670f;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-green:hover {
  background-color: #36520c;
}
.btn.btn-green:hover:active {
  background-color: #314a0b;
}
.btn.btn-red {
  color: #fff;
  background-color: #da2229;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-red:hover {
  background-color: #ae1b21;
}
.btn.btn-red:hover:active {
  background-color: #9d181e
}
.btn.btn-white {
  background-color: #fff;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-white:hover {
  background-color: #d9d9d9;
}
.btn.btn-white:hover:active {
  background-color: #c9c9c9
}

.btn.btn-large {
  padding: 20px 50px;
  font-size: 30px;
  white-space: normal;
}
.ct-mediaSection {
  background-attachment: fixed;
}
.ct-section_header--type1 {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #000;
  font-size: 115px;
  text-transform: uppercase;
}
.ct-section_header--type2 small {
  font-family: 'coquette', fantasy;
  font-size: 58px;
  line-height: .7;
  display: block;
  font-weight: 700;
  position: relative;
  left: -12px;
}
.ct-section_header--type2 span {
  font-family: 'Bebas Neue';
  font-size: 115px;
  line-height: .8;
}
.ct-section_header--type2 img {
  display: inline-block;
  float: left;
  position: relative;
  top: 15px;
  padding-right: 3px;
}
.ct-section_header--type3 {
  text-align: center;
}
.ct-section_header--type3 small {
  font-family: 'coquette', fantasy;
  font-size: 50px;
  padding: 15px 0;
  font-weight: 700;
  color: #fff;
  background-image: url("/core/fileparse.php/16/urlt/../images/ribbon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block
}
.ct-section_header--type3 span {
  font-family: 'Bebas Neue';
  font-size: 150px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .85
}
.ct-section_header--type4 {
  text-align: center;
}
.ct-section_header--type4:before,
.ct-section_header--type4:after {
  content: '';
  display: table
}
.ct-section_header--type4:after {
  clear: both
}
.ct-section_header--type4 small {
  font-family: 'coquette', fantasy;
  font-size: 50px;
  color: inherit;
  font-weight: 700;
  display: block
}
.ct-section_header--type4 span {
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: 400;
  font-weight: bold;
  font-size: 150px;
  text-transform: uppercase;
  display: block;
  line-height: .7
}
.ct-section_header + p {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1.5px;
  text-align: center;
}
.ct-section_header--type4 + p {
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: 400;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

/* Media Queries */

@media (min-width:1200px) {
  .ct-footer-pre {
    display: table;
  }
  .ct-footer-pre > .inner {
    display: table-cell;
    vertical-align: middle;
  }
  .ct-footer-list > li {
    width: 20%;
    display: table-cell;
    vertical-align: top;
  }
  .ct-footer-list > li:last-child {
    width: 7%;
  }
}

@media (max-width:1199px) {
  .ct-footer-pre .form-group {
      padding-top: 15px
  }
}
@media (max-width: 1199px) {
  .ct-footer-list > li {
    display: inline-block;
    float: left;
  }
}
@media (min-width:992px) {
  .ct-footer-post .inner-left {
    float: left;
  }
  .ct-footer-post .inner-right {
    float: right;
  }
}
@media (max-width:991px) {
  .ct-footer-post {
    text-align: center;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .ct-footer-list > li {
    width: 33.3333%;
  }
}
@media (min-width:768px) {
  .ct-footer-post p {
    display: inline-block;
  }
  .ct-footer-post p + p {
    padding-left: 50px;
  }
}
@media (max-width:767px) {
  address {
    padding-top: 30px;
  }
}
@media (min-width: 480px) and (max-width:767px) {
  .ct-footer-list > li {
    width: 50%;
  }
}
@media (min-width:480px) {
  .ct-footer-pre .form-group button {
    top: -1px;
  }
  .ct-footer-pre .form-group input {
    width: 331px;
  }
}
@media (max-width:479px) {
  .ct-footer-pre .form-group input {
    float: left;
    width: 70%;
    margin: 0;
  }
  .ct-footer-pre .form-group button {
    float: left;
    width: 30%;
  }
  .ct-footer-list > li {
    width: 100%;
    text-align: center;
  }
  .ct-footer-list {
    padding: 20px 0;
  }
  .btn.btn-large {
    padding: 20px 10px;
    line-height: .9;
    font-size: 26px;
    letter-spacing: -.2px;
  }
  .ct-section_header--type1 {
    font-size: 60px;
    line-height: .8;
  }
  .ct-section_header + p {
    font-size: 22px;
  }
  .ct-section_header--type3 small {
    font-size: 25px;
  }
  .ct-section_header--type4 small {
      font-size: 40px;
  }
  .ct-section_header--type3 span {
    font-size: 90px;
  }
  .ct-section_header--type4 span {
      font-size: 80px;
  }
  .ct-section_header--type4 + p {
    font-size: 28px;
  }
}
</style>
<div class="container">&nbsp;</div>

<footer class="ct-footer">
<div class="container">
<form action="" enctype="multipart/form-data" method="post" name="contentForm">&nbsp;</form>

<ul class="ct-footer-list text-center-sm">
    <li>
    <h2 class="ct-footer-list-header">Contract Vechciles</h2>

    <ul>
        <li><a href="">Company</a></li>
        <li><a href="">Clients</a></li>
        <li><a href="">News</a></li>
        <li><a href="">Careers</a></li>
    </ul>
    </li>
    <li>
    <h2 class="ct-footer-list-header">Services</h2>

    <ul>
        <li><a href="">Design</a></li>
        <li><a href="">Marketing</a></li>
        <li><a href="">Sales</a></li>
        <li><a href="">Programming</a></li>
        <li><a href="">Support</a></li>
    </ul>
    </li>
    <li>
    <h2 class="ct-footer-list-header">About us</h2>

    <ul>
        <li><a href="">Thought Leadership</a></li>
        <li><a href="">Webinars</a></li>
        <li><a href="">Events</a></li>
        <li><a href="">Sponsorships</a></li>
        <li><a href="">Advisors</a></li>
        <li><a href="">Training Program</a></li>
        <li><a href="">Activities &amp; Campaigns</a></li>
    </ul>
    </li>
    <li>
    <h2 class="ct-footer-list-header">Resources&nbsp;</h2>

    <ul>
        <li><a href="">WebCorpCo Blog</a></li>
        <li><a href="">Hackathons</a></li>
        <li><a href="">Videos</a></li>
        <li><a href="">News Releases</a></li>
        <li><a href="">Newsletters</a>
        <ul>
            <li><a href="">FAQ</a></li>
            <li><a href="">Our Board</a></li>
            <li><a href="">Our Staff</a></li>
            <li><a href="">Contact Us</a></li>
        </ul>
        </li>
    </ul>
    </li>
</ul>

<div class="ct-footer-meta text-center-sm">
<div class="row">
<div class="col-sm-6 col-md-2"><img alt="logo" src="https://www.solodev.com/assets/footer/logo.png" /></div>

<div class="col-sm-6 col-md-3">
<address><span>WebCorpCo</span><br />
123 Easy Street<br />
Orlando, Florida, 32801<br />
<span>Phone: <a href="tel:5555555555">(555) 555-8899</a></span></address>
</div>

<div class="col-sm-6 col-md-2 ct-u-paddingTop10">&nbsp;<a href="" target="_blank">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</a></div>

<div class="col-sm-6 col-md-3">
<p><a href="" target="_blank"><img alt="facebook" src="https://www.solodev.com/assets/footer/facebook-white.png" /></a><a href="" target="_blank"><img alt="twitter" src="https://www.solodev.com/assets/footer/twitter-white.png" /></a><a href="" target="_blank"><img alt="youtube" src="https://www.solodev.com/assets/footer/youtube-white.png" /></a><a href="" target="_blank"><img alt="instagram" src="https://www.solodev.com/assets/footer/instagram-white.png" /></a><a href="" target="_blank"><img alt="pinterest" src="https://www.solodev.com/assets/footer/pinterest-white.png" /></a></p>
</div>
</div>
</div>
</div>

<div class="ct-footer-post">
<div class="container">
<div class="inner-left">
<ul>
    <li><a href="">FAQ</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Contact Us</a></li>
</ul>
</div>

<div class="inner-right">
<p>Copyright © 2016 WebCorpCo.&nbsp;<a href="">Privacy Policy</a></p>

<p><a class="ct-u-motive-color" href="" target="_blank">Web Design</a> by DigitalUs on <a href="" target="_blank">Solodev CMS</a></p>
</div>
</div>
</div>
</footer>
相关问题