I cannot figure out for the life of me how i can title my color boxes within the div i have created. any help will be greatly appreciated. screenshot and code below
(in the screenshot i have my problem, but i want to put the names of the colors i have given each RGB above their corresponding boxes, how can i do this? thanks in advance!)
HTML Code:
<main>
<h2 class="colors-title">Colors</h2>
<div class="colors-container">
<ul>
<li class="colors-name">Maroon Red</li>
<div class="box" id="maroon-red">
<p>rgb(192, 57, 43)</p></div>
<li>Royal Purple</li>
<div class="box" id="royal-purple">
<p>rgb(142, 68, 173)</p></div>
<li>Calm Blue</li>
<div class="box" id="calm-blue">
<p>rgb(52, 152, 219)</p></div>
<li>Moss Green</li>
<div class="box" id="moss-green">
<p>rgb(26, 188, 156)</p></div>
<li>Mustard Yellow</li>
<div class="box" id="mustard-yellow">
<p>rgb(241, 196, 15)</p></div>
<li>Autumn Orange</li>
<div class="box" id="autumn-orange">
<p>rgb(211, 84, 0)</p></div>
</ul>
</div>
CSS Code:
/main part of site, the content/
.colors-title {
text-align: center;
}
.colors-container {
justify-content: center;
display: inline-flexbox;
border: 1px solid rgba(251, 186, 11);
border-radius: 5px;
background-color: rgba(251, 186, 114, 0.2);
padding: 45px 20px;
}
.colors-container > ul > li {
list-style: none;
}
ul {
display: flex
}
.colors-name {
position: ;
display: inline-flex;
text-align: center;
}
.box {
width:50px;
border: 1px solid;
padding: 25px;
margin: 2px;
position: relative;
}
Thanks again for whoever takes the time to look at this and provide feedback!