here’s my codee codepenmy link
"I have tried it, but the image is still in one vertical line."
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body {
background-color: #333;
}
.inner {
padding-top: 20p x;
}
.header {
text-align: center;
color: #fff;
padding: 1rem;
position: relative;
}
.header:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
height: 4px;
width: 100px;
background-color: #2ecc71;
}
.container1 {
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-content: center;
align-items: center;
text-align: center;
grid-gap: 10px;
padding: 1rem 80px;
font-size: 1.2rem;
}
.skill-box1 {
padding: 1rem;
color: #ddd;
cursor: pointer;
}
.skill-title1 {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem;
margin-bottom: 0.5rem;
}
.skill-title1:after {
content: '';
position: absolute;
bottom: 0;
right: 50%;
width: 35px;
height: 4px;
border-radius: 2px 0 0 2px;
background-color: #2ecc71;
}
.skill-title1:before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 35px;
height: 4px;
border-radius: 0 2px 2px 0;
background-color: #2ecc71;
}
.img1 {
width: 90px;
height: 90px;
padding: 10px;
position: relative;
border-radius: 45px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.img1:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 90px;
background: rgba(100, 100, 100, 0.5);
border-radius: 45px 0 0 45px;
}
.skill-title1 h3 {
color: #fff;
margin: 0.5rem;
}
.skill-icon1 {
width: 50px;
z-index: 2;
}
<div class="inner">
<div class="header">
<h1>Kemampuan</h1>
</div>
<div class="container1">
<div class="skill-box1">
<div class="skill-title1">
<div class="img1">
<img src="https://swimburger.net/media/ppnn3pcl/azure.png" class="skill-icon1">
</div>
<h3>MIKROTIK</h3>
</div>
<div class="skill-box1">
<div class="skill-title1">
<div class="img1">
<img src="https://swimburger.net/media/ppnn3pcl/azure.png" class="skill-icon1">
</div>
<h3>MIKROTIK</h3>
</div>
>Solution :
You are missing 2 closing tags for skill-box1,
this should work:
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="inner">
<div class="header">
<h1>Kemampuan</h1>
</div>
<div class="container1">
<div class="skill-box1">
<div class="skill-title1">
<div class="img1">
<img src="https://swimburger.net/media/ppnn3pcl/azure.png" class="skill-icon1">
</div>
<h3>MIKROTIK</h3>
</div>
</div>
<div class="skill-box1">
<div class="skill-title1">
<div class="img1">
<img src="https://swimburger.net/media/ppnn3pcl/azure.png" class="skill-icon1">
</div>
<h3>MIKROTIK</h3>
</div>
</div>
</div>
</div>
</body>
</head>