::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/*Header*/
/*---------------------*/
.wrap {
height: 50px;
line-height: 50px;
background-color: #ba0000;
}
.wrap p{
font-size: 16px;
color: #fff;
}
.list {
color: #fff;
cursor: pointer;
}
.logo {
cursor: pointer;
}
.main-nav {
height: 120px;
line-height: 120px;
background-color: #ffcc00;
}
.main-nav ul{
display: flex;
list-style: none;
color: #fff;
font-size: 16px;
}
.main-nav ul li {
padding-right: 40px;
}
.main-nav ul li a {
color: #ba0000;
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
}
.main-nav ul li a:after {
content: '';
display: block;
width: 100%;
height: 2px;
background-color: #ba0000;
transform: scaleX(0);
transition: all 0.1s ease-in-out;
}
.main-nav ul li a:hover {
font-weight: bold;
}
.main-nav ul li a:hover:after{
content: '';
transform: scaleX(1)
}
.search {
cursor: pointer;
position: relative;
}
.search i {
position: absolute;
top: 40px;
right: 30px;
color: #fff;
}
/*Main*/
/*-----------------------*/
.wrap_3 {
height: 82vh;
background: linear-gradient(45deg,#ba0000,transparent), url(../image/main_bg.png) no-repeat;
}
.wrap_3 h1 {
padding-top: 130px;
padding-bottom: 40px;
font-weight: 900;
font-size: 70px;
color: #fff;
}
.wrap_3 span {
display: block;
width: 120px;
height: 4px;
background-color: #ffcc00;
position: absolute;
top: 520px;
left: 400px;
}
.main_text {
color: #ffcc00;
font-size: 20px;
padding-top: 85px;
padding-bottom: 40px;
}
.advantage {
color: #fff;
text-transform: uppercase;
padding-bottom: 40px;
font-weight: 500;
}
.advantage a{
width: 4px;
height: 4px;
background-color: #ffcc00;
border-radius: 50%;
}
.block a{
font-size: 16px;
text-transform: uppercase;
border: 2px solid #fff;
padding: 20px 30px;
color: #fff;
text-decoration: none;
border-radius: 30px;
margin-right: 20px;
font-weight: 600;
transition: all 0.3s ease;
}
.block a:hover {
background-color: #ffcc00;
color: #ba0000;
border:none;
box-shadow: 0 10px 18px rgba(255, 204, 0, 0.4);
}
/*Section*/
/*----------------------*/
section {
height: 740px;
}
section h2 {
padding-top: 125px;
padding-bottom: 100px;
color: #ba0000;
font-size: 55px;
font-weight: 900;
}
section .list {
height: 135px;
}
.list h4 {
color: #ba0000;
font-size: 20px;
font-weight: 800;
padding-top: 20px;
text-transform: uppercase;
}
.list p {
color: #777;
font-size: 16px;
line-height: 26px;
}
.list a{
color: #222;
font-size: 17px;
font-weight: 600;
padding-top: -40px;
}
.list i{
color: #ba0000;
}
.strong {
padding-top: 40px;
padding-left: 31px;
height: 360px;
background-color: #ba0000;
}
.strong h4 {
color: #fff;
font-size: 20px;
font-weight: 600;
}
.strong span {
display: block;
width: 70px;
height: 2px;
background-color: #ffcc00;
margin-top: 31px;
margin-bottom: 31px;
}
.strong p {
color: #fff;
font-size: 16px;
line-height: 26px;
}
.location {
display: flex;
height: 50px;
width: 180px;
}
.location p{
height: 50px;
width: 180px;
background-color: #9d0000;
padding: 15px 40px 15px 21px;
}
.location i {
width: 65px;
height: 50px;
background-color: #ffcc00;
line-height: 50px;
text-align: center;
color: #ba0000;
font-size: 16px;
}
.button_yellow {
display: block;
width: 150px;
color: #ba0000;
padding: 18px 30px;
background-color: #ffcc00;
border-radius: 30px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
box-shadow: 0 10px 18px rgba(255, 204, 0, 0.4);
margin-top: 20px;
}
.button_yellow:hover {
text-decoration: none;
color: #ba0000;
}
/*Section-2*/
/*------------------------------*/
.wrap_5 {
height: 750px;
background:url(../image/sec_2_bg.png) no-repeat;
background-size: cover;
background-blend-mode: multiply;
background-color: rgba(39,15,4,0.6);
}
.sec_2_h2 {
color: #fff;
font-size: 50px;
font-weight: 700;
padding-top: 170px;
padding-left: 70px;
margin-bottom: -50px;
}
.block_play {
padding: 21px 21px 21px 15px;
border-radius: 50%;
background-color: #ffcc00;
text-align: center;
margin-left: 48%;
margin-bottom: 210px;
box-shadow: 0 10px 18px rgba(255, 204, 0, 0.4);
}
.block_play span{
width: 16px;
height: 18px;
line-height: 18px;
color: #ba0000;
display: block;
margin-bottom:
font-size: 21px;
font-weight: 900;
}
.sec_2_image {
display: flex;
margin-left: 375px;
}
.sec_2_image img {
width: 375px;
margin-right: 30px;
margin-top: -3px;
}
.sec_2_text {
width: 375px;
padding-left: 30px;
box-shadow: 0 10px 18px rgba(191, 191, 191, 0.4);
}
.sec_2_image h4{
color: #ba0000;
font-size: 20px;
font-weight: 700;
padding-top: 30px;
padding-bottom: 30px;
}
.sec_2_image i {
padding-right: 5px;
color: #ffcc00;
}
.sec_2_image p {
line-height: 3px;
color: #777;
font-size: 17px;
}
.sec_2_image p:last-child {
padding-bottom: 30px;
}
/*Section-3*/
/*----------------------*/
/*Вот ошибка*/
.wrap_6 {
padding-top: 400px;
background-color: #ba0000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Work</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="script/script.js" defer></script>
<script src="script/jquery-3.3.1.min.js"></script>
</head>
<body>
<header>
<div class="wrap">
<div class="container">
<div class="row">
<div class="lang col-md-2">
<p>English <i class="fas fa-chevron-down"></i></p>
</div>
<div class="listcol-md-4 offset-md-6">
<p><i class="fas fa-users"></i> Contact Center
Country Profile <i class="fas fa-chevron-down"></i>
</p>
</div>
</div>
</div>
</div>
<div class="main-nav">
<div class="container">
<div class="row">
<div class="col-md-2 logo">
<img src="image/logo.png" alt="">
</div>
<div class="col-md-8 nav">
<nav>
<ul>
<li><a href="#">Express</a></li>
<li><a href="#">Parcel & Ecommerce </a></li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Mail</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
<div class="col-md-1 search offset-1">
<img src="image/circle.png" alt="">
<i class="fas fa-search"></i>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="wrap_3">
<div class="container">
<div class="row">
<h1 class="col-md-6">We Deliver <br>With Speed</h1>
<span class="col-md-3"></span>
<p class="main_text col-md-8">When an unknown printer took a galley of type and scrambledit <br> to make a type specimen book. It has survived not only five centuries</p>
<p class="advantage col-md-7">Amazing <a href="#"></a> Quick <a href="#"></a> 24/7 Supports</p>
</div>
<div class="row">
<div class="block">
<a href="#" class="col-md-2">Learn More</a>
<a href="#" class="col-md-3">dhl worldwide</a>
</div>
</div>
</div>
</div>
</main>
<section class="section_1">
<div class="wrap_4">
<div class="container">
<div class="row">
<h2 class="col-md-12">Awesome Services</h2>
<div class="col-md-3 list">
<img src="image/item_1.png" alt="">
<h4>Express Services</h4>
<p>When an unknown printer took a galley of type and scrambled it to make a type specimen.</p>
<a href="#">Read More <i class="fas fa-caret-right"></i></a>
</div>
<div class="col-md-3 list">
<img src="image/item_2.png" alt="">
<h4>Express Services</h4>
<p>When an unknown printer took a galley of type and scrambled it to make a type specimen.</p>
<a href="#">Read More <i class="fas fa-caret-right"></i></a>
</div>
<div class="col-md-3 list ">
<img src="image/item_3.png" alt="">
<h4>Express Services</h4>
<p>When an unknown printer took a galley of type and scrambled it to make a type specimen.</p>
<a href="#">Read More <i class="fas fa-caret-right"></i></a>
</div>
<div class="col-md-3 strong">
<h4>DHl Worldwide</h4>
<span></span>
<p>When an unknown prot printer type and scra</p>
<div class="location">
<p class>Location </p>
<i class="fas fa-chevron-down"></i>
</div>
<a href="" class="button_yellow">Explore list</a>
</div>
</div>
</div>
</div>
</section>
<section class="section_2">
<div class="wrap_5">
<div class="container-fluid">
<div class="row">
<h2 class="col-md-10 sec_2_h2 offset-2">One of the best international service provider</h2>
<div class="block_play">
<span class="col-md-2 play"><i class="fas fa-caret-right"></i></span>
</div>
<div class="w-100"></div>
<div class="sec_2_image">
<div class="sec_2_block col-md-4">
<img src="image/sec_2_1.png " alt="">
<div class="sec_2_text">
<h4>Aerospace Provider</h4>
<p> <i class="fas fa-caret-right"></i> When an unknown printer took.</p>
<p> <i class="fas fa-caret-right"></i> Make a type specimen book.</p>
<p> <i class="fas fa-caret-right"></i> It has survived.</p>
<p> <i class="fas fa-caret-right"></i> Airlines unknown specimen.</p>
</div>
</div>
<div class="sec_2_block col-md-4">
<img src="image/sec_2_1.png" alt="">
<div class="sec_2_text">
<h4>Poppins Proved</h4>
<p><i class="fas fa-caret-right"></i> When an unknown printer took.</p>
<p><i class="fas fa-caret-right"></i> Make a type specimen book.</p>
<p><i class="fas fa-caret-right"></i> It has survived.</p>
<p><i class="fas fa-caret-right"></i> Airlines unknown specimen.</p>
</div>
</div>
<div class="sec_2_block col-md-4">
<img src="image/sec_2_1.png" alt="">
<div class="sec_2_text">
<h4>Airline Specimen</h4>
<p> <i class="fas fa-caret-right"></i> When an unknown printer took.</p>
<p> <i class="fas fa-caret-right"></i> Make a type specimen book.</p>
<p> <i class="fas fa-caret-right"></i> It has survived.</p>
<p> <i class="fas fa-caret-right"></i> Airlines unknown specimen.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section_3">
<div class="wrap_6">
<div class="container">
<div class="row">
<h3 class="col-md-12">Excellence. Simply delivered.</h3>
<p class="col-md-8">International express deliveries; global freight forwarding by air, sea, road and rail;
warehousing solutions from packaging, to repairs, to storage; mail deliveries worldwide;
and other customized logistic services – with everything DHL does, we
help connect people and improve their lives.</p>
<a href="#" class="col-md-2 offset-2">learn more</a>
</div>
</div>
</div>
</section>
</body>
</html>