Review needed for Colored Markers using Position property

I need a review. This is the code I wrote for building a set of color markers. I used the Position property.

HTML

<!DOCTYPE html>
<html lang="en-in">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Colored Markers">
    <link rel="stylesheet" href="../css/color-marker.css">
    <title>Color Markers</title>
</head>

<body>
        <h1>CSS Color Markers</h1>
        <div class="wrapper">
            <div class="markers" id="one">
                <div class="capline"></div>
                <div class="dim"></div>
            </div>
            <div class="markers" id="two">
                <div class="capline"></div>
                <div class="dim"></div>
            </div>
            <div class="markers" id="three">
                <div class="capline"></div>
                <div class="dim"></div>
            </div>
        </div>
</body>

</html>

CSS

h1 {
    text-align: center;
    color: #0028b8;
}

.wrapper {
    /* border: 1px solid green; */
    width: 400px;
    margin: 0 auto;
}

.markers {
    background-image: linear-gradient(To bottom, rgb(168, 72, 109) 5px, rgb(255, 103, 182), rgb(168, 72, 109));
    height: 42px;
    width: 350px;
    margin: 20px auto;
    position: relative;
}

#one {
    background-image: linear-gradient(To bottom, #ad496c 5px, rgb(255, 64, 137), rgb(168, 72, 109));
    box-shadow: 0px 0px 20px 3px #ad496ca9;
}

#two {
    background-image: linear-gradient(To bottom, #719c41 5px, rgb(80, 255, 103), rgb(63, 144, 110));
    box-shadow: 0 0px 25px 5px #719c41a8;
}

#three {
    background-image: linear-gradient(To bottom, #374b83 5px, rgb(96, 90, 255), rgb(84, 55, 127));
    box-shadow: 0 0px 20px 5px #374b83a9;
}

.dim {
    background-color: #ffffff78;
    height: 42px;
    position: absolute;
    right: 25px;
    left: 125px;
    z-index: 1;
    vertical-align: center;
}

.capline {
    background-color: #ffffff78;
    border-left: 6.5px solid #000000c2;
    border-right: 6.5px solid #000000c2;
    width: 5px;
    height: 40px;
    padding: 1px;
    position: absolute;
    left: 105px;
}

Welcome to the community!

Could you please provide the step this is for to allow the community to assist you?

Wishing you good progress on your coding journey.

1 Like

Okay, Thank you for your reply. :smiley:

Sorry, my English is not very good. I will try to explain.

I did the project Building a Set of Colored Markers’ in my own way.

What I did was follow the HTML code from the original project and made a change in the CSS.

I used the position property in classes .dim and .capline to adjust themselves in the class .wrapper

Is this the correct method?