Aligned after commenting
by Sampath
HTML
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://www.sun-xfilm.cn/css/bootstrap.css">
<div class="container-fluid">
<div id="header"><div class="row header">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-8 col-sm-8 col-xs-8"> <h1 class="text-right">Some dummy placeholder - Random text </h1></div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="set-sound">
<img src="images/icons8-sound-50.png" class="img-responsive sound-icon hide">
<p>Some dummy placeholder</p>
</div>
</div>
</div>
</div>
</div>
<div id="content">
<div class="container-fluid-innerchild">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-7 col-sm-7 col-xs-7 no-padding">
<div id="greytext">
<h2 class="grey">Some dummy placeholder - Random text</h2>
</div>
<div class="relative">
<div>
<div id="hrtext">
<p>Some dummy placeholder
</p>
</div>
<div id="hr"></div>
</div>
<div class="identifier" id="div2"></div>
<div class="series-div">
<ul class="series-ul">
<li id="line1" class="active">A 1</li>
<li id="line2">B 1</li>
<li id="line3">C 1</li>
</ul>
</div>
<div id="line"></div>
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" class="img-responsive firstcar-detail fullwidth-img">
</div>
</div>
<div class="col-md-5 col-xs-5 col-sm-5">
<div>
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg"...
CSS
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
html,
body {
font-family: 'Ubuntu', sans-serif;
background-color: lightblue;
color: #000;
}
#content {
color: #787878;
}
.container-fluid-child {
background-color: #fff;
position: relative;
padding: 5%;
}
.container-fluid-innerchild {
background-color: #fff;
position: relative;
border-radius: 25px;
}
.text-white {
color: #fff;
}
.car-image {
width: 35%;
max-width: 35%;
border: 1px solid #000;
}
.step-one {
width: 130px;
height: 130px;
background-color: #81a1b6;
color: #fff;
justify-content: center;
align-items: center;
display: flex;
border-radius: 50%;
}
.sound-icon {
width: 20px;
float: left;
margin-right: 10px;
}
.set-sound {
position: absolute;
top: 2.4em;
width: 100%;
}
.intro-para {
position: absolute;
width: 35%;
font-size: 1.2em;
}
.hyperlink {
color: #fff;
text-decoration: none;
font-size: 1.3em;
}
.hyperlink:hover {
color: #fff;
font-weight: 900;
text-decoration: none;
}
.hyperlink:focus {
color: #fff;
text-decoration: none;
}
.footer {
padding: 1em;
}
.text-over-image {
float: left;
position: absolute;
bottom: 23em;
left: 5em;
}
.relative {
position: relative;
}
.textonimage {
position: absolute;
max-width: 30%;
top: 2%;
font-weight: 600;
}
.ableft {
left: 1em;
}
.abright {
right: 1em;
}
.car {
cursor: pointer;
}
.grey {
color: grey;
font-weight: 600;
margin-left: 1.5em;
max-width: 50%;
position: relative;
top: 1em;
}
.no-padding {
padding: 0px;
}
.firstcar-detail {
border-radius: 25px;
}
#hr {
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(-45deg);
top: 12%;
left: 18%;
height: 20%;
background-color: #000;
width: 1px;
position: absolute;
}
#hrtext {
position: absolute;
bottom: 85%;
left:...
JavaScript
$(".series-ul li").click(function() {
$(".series-ul li").removeClass("active");
$(this).addClass("active");
});