https://www.codeply.com/go/tXGn5pdD4A
тоящее время я работаю над одним из макетов с использованием Bootstrap 4, и внутри контейнера есть один необычный элемент, фон которого выходит за пределы контейнера. Не уверен, как именно это нужно сделать. Я пытался реализовать это с позиции: абсолютная, но я не фанат этого из-за нарушения оперативности в этом случае.
Проблемным элементом является текст «Смотреть видео» с фоном.
Буду признателен за любую помощь. Благодарю.
/* VIDEO */
.video {
padding: 70px 0;
position: relative;
}
.video .video-wrapper p {
font-size: 14px;
line-height: 30px;
font-style: italic;
margin-top: 10px;
}
.video .description-wrapper h3 {
font-size: 20px;
line-height: 25px;
}
.video .description-wrapper .box {
padding: 10px 15px;
}
.bg-colored {
color: #fff;
background-color: #0b3b52;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Videos</title>
</head>
<body>
<section class="video">
<div class="container">
<div class="row">
<div class="col-md-5 video-wrapper">
<img src="https://i.imgur.com/mVWlLQt.png" class="img-fluid" alt="">
<p>Name video 5:45</p>
</div>
<div class="col-md-7 description-wrapper">
<div class="row align-items-center">
<div class="col-md-6 box">
<h3>Keep your club organized online,
we save time and energy for you!
</h3>
</div>
<div class="col-md-6 box bg-colored">
<h3>Watch the video</h3>
</div>
<div class="col-md-12">
<p>
Managing a team could also be a hassle free and easy activity.
CRM42 is a web based platform with a user friendly interface, offering a comfortable and profitable experience while using it. Create your new management strategy and focus on getting the best results.
Your goal is now our goal!
</p>
<p>
CRM42 gives you a complete solution with a 360-degree view of your players, including complete management of their contracts, injuries, medicals, offers, past teams, even family members, bank accounts and all sponsors information.
Accessible for your entire staff, anytime from anywhere.
</p>
<p>
Let’s make something awesome together!
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>