0

Не понимаю как все закрепить на своих местах. Есть 3 коды, header slider и footer. По отдельности все работает правильно, но вот не понимаю как все правильно совместить.

<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>header</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- <script src="https://kit.fontawesome.com/a076d05399.js"></script> -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap" rel="stylesheet">
</head>
<body>
  <!-- header -->
    <nav>
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <label class="logo">Logo</label>
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </nav>
    <section></section>
    <!-- header -->
    <!-- slider -->
    <div class="content1">
  <div class="wrapper">
    <div class="carousel owl-carousel">
      <div class="card card-1">A</div>
      <div class="card card-2">B</div>
      <div class="card card-3">C</div>
      <div class="card card-4">D</div>
      <div class="card card-5">E</div>
    </div>
  </div>
<script>
  $(".carousel").owlCarousel({
    margin:10,
    loop:true,
    autoplay:true,
    autoplayTimeout:2000, //2000ms
    autoplayHoverPause:true,
    responsive:{
      0:{
        items:1,
        nav:false
      },
      600:{
        items:2,
        nav:false
      },
      1000:{
        items:3,
        nav:false
      }
    }

  });
</script>
<!-- slider -->

<!-- footer -->
    

    </div>
  <footer>
    <div class="main-content">
      <div class="left box">
        <h2>About us</h2>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <div class="social">
            <a href="#"><span class="fab fa-facebook-f"></span></a>
            <a href="#"><span class="fab fa-twitter"></span></a>
            <a href="#"><span class="fab fa-instagram"></span></a>
            <a href="#"><span class="fab fa-youtube"></span></a>
            </div>
          </div>
        </div>
        <div class="center box">
          <h2> Address</h2>
          <div class="content">
            <div class="place">
              <span class="fas fa-map-marker-alt"></span>
              <span class="text">steet</span>
        </div>
        <div class="phone">
              <span class="fas fa-phone-alt"></span>
              <span class="text">5011012301</span>
        </div>
        <div class="email">
              <span class="fas fa-envelope"></span>
              <span class="text">gamil</span>
          </div>
        </div>
      </div>
      <div class="right box">
        <h2>Contact us</h2>
        <div class="content">
          <form action="#">
            <div class="email">
              <div class="text">Email *</div>
              <input type="email" required>
            </div>
            <div class="msg">
              <div class="text">Message *</div>

              <textarea rows="2" cols="25" required></textarea>
            </div>
            <div class="btn">
              <button type="submit">Send</button>
            </div>
          </form>
        </div>

    </div>
  </div>
  <div class="bottom">
    <center>
      <span class="credit">Created By <a href="#">name</a> | </span>
      <span class=" far fa-copyright"></span><span>2020 All rights reserved.</span>
    </center>
    
  </div>
  </footer>
  <!-- footer -->


  </body>
</html>


















!!!!!!!!STYLE!!!!!!!!!!!



*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
body{
  font-family: montserrat;
}
nav{
  background: grey;
  height: 80px;
  width: 100%;
/*  position: fixed;
  left: 0;
  top: 0;*/
}

label.logo{
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
}
nav ul{
  float: right;
  margin-right: 20px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}
nav ul li a{
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}
a.active,a:hover{
  background: #1b9bff;
  transition: .5s;
}
.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check{
  display: none;
}
@media (max-width: 952px){
  label.logo{
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a{
    font-size: 16px;
  }
}
@media (max-width: 858px){
  .checkbtn{
    display: block;
  }
  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2c3e50;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a{
    font-size: 20px;
  }
  a:hover,a.active{
    background: none;
    color: #0082e6;
  }
  #check:checked ~ ul{
    left: 0;
  }
}
section{
  background: url(bg1.jpg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
}









/*slider*/

body{
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.wrapper{
  width: 100%;
}
.carousel{
  max-width: 1200px;
  margin: auto;
  padding: 0 30px;
}

.carousel .card{
  color: #fff;
  text-align: center;
  margin: 20px 0;
  line-height: 250px;
  font-size: 90px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}

.carousel .card-1{
    background: #ed1c24;
}
.carousel .card-2{
    background: #0072bc;
}
.carousel .card-3{
    background: #39b54a;
}
.carousel .card-4{
    background: #f26522;
}
.carousel .card-5{
    background: #630460
}

.owl-dots{
    text-align: center;
    margin-top: 40px;
}

.owl-dot{
  height: 15px;
  width: 45px;
  margin: 0 5px;
  outline: none;
  border-radius: 14px;
  border: 2px solid #0072bc!important;
  box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.owl-dot:hover,
.owl-dot.active{
    background: #0072bc !important;
}

/*footer*/

*{
    margin:0;
    padding: 0;
    color: #d9d9d9;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;

}
.content1{
  position: relative;
  margin: 130px auto;
  text-align: center;
  padding: 0 20px;
}
.content1 .text{
  font-size: 2.5rem;
  font-weight: 600;
  color: #202020;
}
.content1 .p{
  font-size: 2.1875rem;
  font-weight: 600;
  color: #202020;
}

footer{
    position: fixed;
    bottom:0px;
    width: 100%;
    background: #111;
}


.main-content{
    display: flex;

}
.main-content .box{
    flex-basis: 50%;
    padding: 10px 20px;
}

.box h2{
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;

}

.box .content{
    margin: 20px 0 0 0;
    position: relative;
}

.box .content:before{
    position: absolute;
    content: '';
    top: -10px;
    height: 2px;
    width: 100%;
    background: #1a1a1a;
}

.box .content:after{
    position: absolute;
    content: '';
    height: 2px;
    width: 15%;
    background: #f12020;
    top:-10px;
}

.left .content p {
    text-align: justify;
}

.left .content .social{
    margin:20px 0 0 0;

}


.left .content .social a{
    padding: 0 2px;
}

.left .content .social a span{
    height: 40px;
    width: 40px;
    background: #1a1a1a;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    border-radius: 5px;
    transition:0.3s;
}

.left .content .social a span:hover{
    background: #f12020;
}


.center .content .fas{
    font-size: 1.4375rem;
    background-color: #1a1a1a;
    height: 45px;
    width: 45px;
    line-height: 45px;
    text-align: center;
    border-radius:50%;
    transition: 0.3s;cursor: pointer;
}


.center .content .fas:hover{
    background: #f12020; 
}

.center .content .text{
    font-size: 1.0625rem;
    font-weight: 500;
    padding-left: 10px;
}

.center .content .phone{
    margin:10px 0;
}

.right form .text{
    font-size: 1.0625rem;
    margin-bottom: 2px;
    color: #656565;
}

.right form .msg{
    margin-top: 10px;
}

.right form input, .right form textarea{
    width: 100%;
    font-size: 1.0625rem;
    background:#151515;
    padding-left: 10px;
    border: 1px solid #222222;
}
.right form input:focus,
.right form textarea:focus{
  outline-color: #3498db;
}
.right form input{
    height: 35px;
}

.right form.btn{
    margin-top: 10px;
}

.right form .btn button{
    height: 40px;
    width: 100%;
    border: none;
    outline: none;
    background: #f12020;
    font-size: 1.0625rem;
    font-weight: 500;
    cursor: pointer;
    transition: .3s;
}

.right form .btn button:hover{
    background: #000;
}

.bottom center{
    padding: 5px;
    font-size: 0.9375rem;
    background: #151515;

}

.bottom center span{
    color: #656565;
}

.bottom center a{
    color:#f12020;
    text-decoration:none;
}

.bottom center a:hover{
    text-decoration: underline;
}


@media screen and (max-width: 900px) {
  footer{
    position: relative;
    bottom: 0px;
  }
  .main-content{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .main-content .box{
    margin: 5px 0;
  }
}



1 ответ 1

0

Для body надо установить flex-direction: column;

А так же контент расположить в теге <section>ТУТ КОД СЛАЙДЕРА И ВСЕ ТАКОЕ</section>

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body {
  font-family: montserrat;
    flex-direction: column;
}

nav {
  background: grey;
  height: 80px;
  width: 100%;
  /*  position: fixed;
  left: 0;
  top: 0;*/
}

label.logo {
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
}

nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a {
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}

a.active,
a:hover {
  background: #1b9bff;
  transition: .5s;
}

.checkbtn {
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}

@media (max-width: 952px) {
  label.logo {
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a {
    font-size: 16px;
  }
}

@media (max-width: 858px) {
  .checkbtn {
    display: block;
  }
  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2c3e50;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a {
    font-size: 20px;
  }
  a:hover,
  a.active {
    background: none;
    color: #0082e6;
  }
  #check:checked~ul {
    left: 0;
  }
}

section {
  background: url(bg1.jpg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
    width: 100%;
}


/*slider*/

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.wrapper {
  width: 100%;
}

.carousel {
  max-width: 1200px;
  margin: auto;
  padding: 0 30px;
}

.carousel .card {
  color: #fff;
  text-align: center;
  margin: 20px 0;
  line-height: 250px;
  font-size: 90px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

.carousel .card-1 {
  background: #ed1c24;
}

.carousel .card-2 {
  background: #0072bc;
}

.carousel .card-3 {
  background: #39b54a;
}

.carousel .card-4 {
  background: #f26522;
}

.carousel .card-5 {
  background: #630460
}

.owl-dots {
  text-align: center;
  margin-top: 40px;
}

.owl-dot {
  height: 15px;
  width: 45px;
  margin: 0 5px;
  outline: none;
  border-radius: 14px;
  border: 2px solid #0072bc!important;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.owl-dot:hover,
.owl-dot.active {
  background: #0072bc !important;
}


/*footer*/

* {
  margin: 0;
  padding: 0;
  color: #d9d9d9;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

.content1 {
  position: relative;
  margin: 130px auto;
  text-align: center;
  padding: 0 20px;
}

.content1 .text {
  font-size: 2.5rem;
  font-weight: 600;
  color: #202020;
}

.content1 .p {
  font-size: 2.1875rem;
  font-weight: 600;
  color: #202020;
}

footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: #111;
}

.main-content {
  display: flex;
}

.main-content .box {
  flex-basis: 50%;
  padding: 10px 20px;
}

.box h2 {
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
}

.box .content {
  margin: 20px 0 0 0;
  position: relative;
}

.box .content:before {
  position: absolute;
  content: '';
  top: -10px;
  height: 2px;
  width: 100%;
  background: #1a1a1a;
}

.box .content:after {
  position: absolute;
  content: '';
  height: 2px;
  width: 15%;
  background: #f12020;
  top: -10px;
}

.left .content p {
  text-align: justify;
}

.left .content .social {
  margin: 20px 0 0 0;
}

.left .content .social a {
  padding: 0 2px;
}

.left .content .social a span {
  height: 40px;
  width: 40px;
  background: #1a1a1a;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  transition: 0.3s;
}

.left .content .social a span:hover {
  background: #f12020;
}

.center .content .fas {
  font-size: 1.4375rem;
  background-color: #1a1a1a;
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
  cursor: pointer;
}

.center .content .fas:hover {
  background: #f12020;
}

.center .content .text {
  font-size: 1.0625rem;
  font-weight: 500;
  padding-left: 10px;
}

.center .content .phone {
  margin: 10px 0;
}

.right form .text {
  font-size: 1.0625rem;
  margin-bottom: 2px;
  color: #656565;
}

.right form .msg {
  margin-top: 10px;
}

.right form input,
.right form textarea {
  width: 100%;
  font-size: 1.0625rem;
  background: #151515;
  padding-left: 10px;
  border: 1px solid #222222;
}

.right form input:focus,
.right form textarea:focus {
  outline-color: #3498db;
}

.right form input {
  height: 35px;
}

.right form.btn {
  margin-top: 10px;
}

.right form .btn button {
  height: 40px;
  width: 100%;
  border: none;
  outline: none;
  background: #f12020;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  transition: .3s;
}

.right form .btn button:hover {
  background: #000;
}

.bottom center {
  padding: 5px;
  font-size: 0.9375rem;
  background: #151515;
}

.bottom center span {
  color: #656565;
}

.bottom center a {
  color: #f12020;
  text-decoration: none;
}

.bottom center a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 900px) {
  footer {
    position: relative;
    bottom: 0px;
  }
  .main-content {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .main-content .box {
    margin: 5px 0;
  }
}
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>header</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- <script src="https://kit.fontawesome.com/a076d05399.js"></script> -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap" rel="stylesheet">
</head>

<body>

  <!-- header -->
  <nav>
    <input type="checkbox" id="check">
    <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
    <label class="logo">Logo</label>
    <ul>
      <li><a class="active" href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Feedback</a></li>
    </ul>
  </nav>
  <!-- header -->
     <section>
  <!-- slider -->
  <div class="content1">
    <div class="wrapper">
      <div class="carousel owl-carousel">
        <div class="card card-1">A</div>
        <div class="card card-2">B</div>
        <div class="card card-3">C</div>
        <div class="card card-4">D</div>
        <div class="card card-5">E</div>
      </div>
    </div>
    <script>
      $(".carousel").owlCarousel({
        margin: 10,
        loop: true,
        autoplay: true,
        autoplayTimeout: 2000, //2000ms
        autoplayHoverPause: true,
        responsive: {
          0: {
            items: 1,
            nav: false
          },
          600: {
            items: 2,
            nav: false
          },
          1000: {
            items: 3,
            nav: false
          }
        }

      });
    </script>
    <!-- slider -->
</section>
    <!-- footer -->
  </div>
  
  <footer>
    <div class="main-content">
      <div class="left box">
        <h2>About us</h2>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <div class="social">
            <a href="#"><span class="fab fa-facebook-f"></span></a>
            <a href="#"><span class="fab fa-twitter"></span></a>
            <a href="#"><span class="fab fa-instagram"></span></a>
            <a href="#"><span class="fab fa-youtube"></span></a>
          </div>
        </div>
      </div>
      <div class="center box">
        <h2> Address</h2>
        <div class="content">
          <div class="place">
            <span class="fas fa-map-marker-alt"></span>
            <span class="text">steet</span>
          </div>
          <div class="phone">
            <span class="fas fa-phone-alt"></span>
            <span class="text">5011012301</span>
          </div>
          <div class="email">
            <span class="fas fa-envelope"></span>
            <span class="text">gamil</span>
          </div>
        </div>
      </div>
      <div class="right box">
        <h2>Contact us</h2>
        <div class="content">
          <form action="#">
            <div class="email">
              <div class="text">Email *</div>
              <input type="email" required>
            </div>
            <div class="msg">
              <div class="text">Message *</div>

              <textarea rows="2" cols="25" required></textarea>
            </div>
            <div class="btn">
              <button type="submit">Send</button>
            </div>
          </form>
        </div>

      </div>
    </div>
    <div class="bottom">
      <center>
        <span class="credit">Created By <a href="#">name</a> | </span>
        <span class=" far fa-copyright"></span><span>2020 All rights reserved.</span>
      </center>

    </div>
  </footer>
  <!-- footer -->
</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.