Не понимаю как все закрепить на своих местах. Есть 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;
}
}