Looking for help in arranging div elements in a way that they resemble an equalizer, similar to the one shown in this screenshot Equalizer. Can you provide advice on how to remove the dots from the list? I've already attempted using the CSS property (list-style-type: none) but it didn't work.
Additionally, how can I create a gradient color effect for this equalizer, transitioning from lighter to darker shades from top to bottom?
Thank you in advance.
* {
padding: 0;
margin: 0;
}
body {
background: #333333;
}
li:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
ul li {
background: linear-gradient(orange, yellow);
margin: 5px;
}
.blocks {
position: relative;
top: 40px;
left: 15px;
display: inline-block;
width: 40px;
height: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>;
<title>Equalizer</title>
<link rel="stylesheet" href="equalizer.css">
</head>
<body>
<div class="blocks">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--<div></div>
<div></div>
<div></div>
<div></div>
<div></div>-->
</div>
<div class="blocks">
<ul>
<li></li>
<li></li>
</ul>
<!--<div></div>
<div></div>-->
</div>
<div className="blocks">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>-->
</div>
<div className="blocks">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--<div></div>
<div></div>
<div></div>
<div></div>
<div></div>-->
</div>
<div className="blocks">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!--<div></div>
<div></div>
<div></div>;-->
</div>
</body>
</html>