Как я могу сделать так, чтобы эти поля значков перекрывались? [закрыто] ⇐ CSS

[Anonymous]

Я копировал веб-страницу, но застрял. Я хотел перекрыть четыре поля значков родительского цвета фона и того, который я ему дал. Это сработало, но под ним отображается родительский цвет фона. Как это исправить?
Я ожидал, что белый фон внизу будет полностью белым, но он все равно принял зеленый цвет внизу.

Код: Выделить всё

.hero {
position: relative;
width: 100%;
padding: 60px 0;
background-color: green;
}

.hero h2 {
font-size: 48px;
font-weight: 700;
margin-bottom: 20px;
color: #fff;
}

.hero p {
color: rgba(255, 255, 255, 0.6);
font-weight: 400;
margin-bottom: 30px;
}

/* Container */
.container {
max-width: 1140px;
margin: 0 auto;
padding-right: 15px;
padding-left: 15px;
}

/* Rows and Columns */
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}

.col-lg-6 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 auto;
}

/* For larger devices */
@media (min-width: 992px) {
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%;
}
}

/* Text and Buttons Alignment */
.hero .col-lg-6 {
display: flex;
flex-direction: column;
justify-content: center;
}

.text-center {
text-align: center;
}

.text-lg-start {
text-align: left;
}

@media (min-width: 992px) {
.order-lg-1 {
order: 1;
}

.order-lg-2 {
order: 2;
}

.justify-content-lg-start {
justify-content: flex-start;
}
}

/* Buttons Styling */
.hero .btn-get-started {
font-family: var(--font-primary);
font-weight: 500;
font-size: 15px;
text-decoration: none;
letter-spacing: 1px;
display: inline-block;
padding: 14px 40px;
border-radius: 50px;
margin-right: 10px;
transition: 0.3s;
color: #fff;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(255, 255, 255, 0.1);
}

.hero .btn-get-started:hover {
border-color: rgba(255, 255, 255, 0.5);
}

.btn-watch-video {
font-size: 16px;
transition: 0.5s;
margin-left: 25px;
color: #fff;
font-weight: 600;
display: inline-flex;
align-items: center;
}

.hero .btn-watch-video i {
color: rgba(255, 255, 255, 0.5);
font-size: 32px;
transition: 0.3s;
line-height: 0;
margin-right: 8px;
}

.hero .btn-watch-video:hover i {
color: #fff;
}

/* Responsive Image */
.img-fluid {
max-width: 100%;
height: auto;
}

/* For the Icon boxes */

[class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}

/* Icon Boxes Specific Styles */
.icon-boxes {
position: relative;
}
/* come back to fix */
@media (min-width: 1200px) {
.hero .icon-boxes:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: calc(50% + 20px);
background-color: #fff;
z-index: 1;
}
}

.icon-box {
padding: 60px 30px;
background: #008d7d;
box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.08);
transition: all 0.3s ease-in-out;
position: relative;
overflow: hidden;
z-index: 1;
height: 100%;
width: 100%;
text-align: center;
}

.icon-box:hover {
transform: translateY(-5px);
background: #009786;
}

.icon {
margin-bottom: 20px;
padding-top: 10px;
display: inline-block;
transition: all 0.3s ease-in-out;
font-size: 48px;
line-height: 1;
color: rgba(255, 255, 255, 0.6);
}

.title {
margin-bottom: 15px;
font-weight: 700;
margin-bottom: 15px;
font-size: 24px;
}

.title a {
color: #fff;
text-decoration: none;
transition: color 0.3s;
}

.hero .icon-box:hover .title a,
.hero .icon-box:hover .icon {
color: #fff;
}

/* Responsive Grid Columns */
@media (min-width: 768px) {
.col-md-6 {
flex: 0 0 auto;
width: 50%;
}
}

@media (min-width: 1200px) {
.col-xl-3 {
flex: 0 0 auto;
width: 25%;
}
}

.gy-4 {
row-gap: 1.5rem; /* Adjust based on your design */
}

.mt-5 {
margin-top: 3rem;  /* Adjust based on your design */
}

Код: Выделить всё

Welcome to Impact
Sed autem laudantium dolores. Voluptatem itaque ea consequatur eveniet. Eum quas beatae cumque eum quaerat.

[url=#about]Get Started[/url]
[url=https://www.youtube.com/watch?v=LXb3EKWsInQ][i][/i]Watch Video[/url]



[i]









[/i]
[h4]Lorem Ipsum[/h4]




[i][/i]
[h4]Sed ut perspiciatis[/h4]




[i][/i]
[h4]Magni Dolores[/h4]




[i][/i]
[h4]Nemo Enim[/h4]

Подробнее здесь: https://stackoverflow.com/questions/782 ... es-overlap