Question 42541 in Html Question posted in
Some basic documentation can be found here.

How can I add a bullet image to the top right side 3 times – Html

image

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>
Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    It seems like you have some unnecessary divs that could be causing some issues. Without knowing if you have anything planned for those, I might suggest removing them.

    I reworked your code a bit, and employed display:flex on the div containing the image and text. Using flex box, the div defaults to a row layout. Then I can use align-items:center to get everything to even out.

    Login or Signup to reply.
  3. 0

    To remove the error in the HTML code, you need to close the first div tag with class container1 before opening the second div tag with class skill-box1

    the correct code is:

    <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> <!-- close the first skill-box1 div here -->
    <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>

    and try to use the comments in the code

    to add a bullet image to the top right side 3 times, you can use the CSS ::before or ::after pseudo-elements on a container element and position them accordingly

    so refer any article or youtube video to learn pseudo elements

    and if you are facing error in the alignment of images try to use FLEXBOX it helps you to apply css easily

    see a tutorial regarding it u will get your problem solved

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search