chciałbym by selector after był po sekcji second-section, jednak wskakuje mi dalej, oto kod html i css, after jest opisany pod koniec cssa
html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <script src="https://use.fontawesome.com/2af48de262.js"></script> -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<header>
<nav>
<img src="img/logo.jpg" class="logo" alt=""></a>
</nav>
</header>
<div class="container">
<div class="row first-section">
<h1 class="heading text-center">Heading</h1>
<h5 class="heading-two text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
</div>
<div class="row second-section">
<div class="col-sm divs">
<h6 class="first-heading">Heading</h6>
<p>Lorem ipsum dolor sit amet.</p>
<img src="img/images.png" alt="">
</div>
<div class="col-sm divs">
<h6 class="first-heading">Heading</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenea uismod bibendum laoreet. Proin gravida dolor sit amet lacus.</p>
</div>
<div class="col-sm divs">
<h6 class="first-heading">Ultra Mega Super Long Heading</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenea uismod bibendum laoreet. Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<!-- <div class="row">
</div> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>
</body>
</html>
css
* {
box-sizing: border-box;
}
body {
width: 100%;
}
body header {
width: 100%;
}
body header nav {
width: 100%;
padding: 0;
max-width: 1172px;
height: 85px;
color: #ffffff;
margin: auto;
}
body header nav .logo {
margin: 23px 0;
}
body .container {
max-width: 100%;
padding: 0;
}
body .container .first-section {
margin: 0;
height: 177px;
background-color: #215398;
max-width: 100%;
}
body .container .first-section .heading {
margin: 60px 0 0 0;
height: 52px;
color: #ffffff;
font-family: 'arial regular';
}
body .container .first-section .heading-two {
height: 65px;
color: #5f83b5;
margin: 0;
font-family: 'arial regular';
padding: 0;
}
body .container .second-section {
height: 288px;
background-color: #215398;
justify-content: center;
font-family: 'arial regular';
}
body .container .second-section .divs {
height: 228px;
max-width: 330px;
padding: 0 35px;
margin: 0 8.5px;
background-color: white;
}
body .container .second-section .divs .first-heading{
margin-top: 42px;
text-align: center;
font-size: 20px;
padding: 0;
margin-bottom: 10px;
font-family: 'rubikregular';
color: #2d3236;
}
body .container .second-section .divs p {
font-size: 15px;
margin: 0;
word-break: break-all;
width: 100%;
font-family: 'rubikregular';
padding:0;
text-align: center;
color: #929495;
}
body .container .second-section .divs img {
width: 42px;
height: 42px;
margin: 15px 109px;
}
body .container .second-section ::after {
content: "";
position: absolute;
width: 30px;
height: 30px;
background-color: #ff3859;
border-radius: 50%;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);
}