Tell us what’s happening:
Hi! I’m at the complementary-colors bit of the Applied Visual Design section and I decided to make a color wheel to help figure things out, using what’s been covered so far. Mostly all well and good, but the final color-block disappears as soon as I set position to absolute. Reordering things in both the html and css, z-index, etc, doesn’t seem to work, every other div was done the exact same way, and not sure what I’m missing?
Your code so far
<style>
body {
position: relative;
background-color: #eee;
}
.grounding {
position: absolute;
top: 40%;
left: 47%;
background-color: #000;
width: 100px;
height: 100px;
}
.red {
width: 100px;
height: 100px;
background-color: #f00;
border-radius: 50%;
position: absolute;
left: 0px;
bottom: 200px;
}
.orange {
width: 100px;
height: 100px;
background-color: #f80;
border-radius: 50%;
position: absolute;
left: 100px;
bottom: 175px;
}
.yellow {
width: 100px;
height: 100px;
background-color: #ff0;
border-radius: 50%;
position: absolute;
left: 175px;
bottom: 100px;
}
.lightGreen {
width: 100px;
height: 100px;
background-color: #8f0;
border-radius: 50%;
position: absolute;
left: 200px;
bottom: 0px;
}
.green {
width: 100px;
height: 100px;
background-color: #0f0;
border-radius: 50%;
position: absolute;
left: 175px;
top: 100px;
}
.pastellyGreen {
width: 100px;
height: 100px;
background-color: #0f8;
border-radius: 50%;
position: absolute;
left: 100px;
top: 175px;
}
.cyan {
width: 100px;
height: 100px;
background-color: #0ff;
border-radius: 50%;
position: absolute;
left: 0px;
top: 200px;
}
.lightBlue {
width: 100px;
height: 100px;
background-color: #08f;
border-radius: 50%;
position: absolute;
right: 100px;
top: 175px;
}
.blue {
width: 100px;
height: 100px;
background-color: #00f;
border-radius: 50%;
position: absolute;
right: 175px;
top: 100px;
}
.purple {
width: 100px;
height: 100px;
background-color: #80f;
border-radius: 50%;
position: absolute;
right: 200px;
top: 0px;
}
.magenta {
width: 100px;
height: 100px;
background-color: #f0f;
border-radius: 50%;
position: absolute;
right: 175px;
bottom: 100px;
}
.pink {
wifth: 100px;
height: 100px;
background-color: #f08;
border-radius: 50%;
position: absolute;
right: 100px;
bottom: 175px;
}
</style>
<body>
<div class="grounding">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="lightGreen"></div>
<div class="green"></div>
<div class="pastellyGreen"></div>
<div class="cyan"></div>
<div class="lightBlue"></div>
<div class="blue"></div>
<div class="purple"></div>
<div class="magenta"></div>
<div class="pink"></div>
</div>
</body>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36.
Challenge: Adjust the Color of Various Elements to Complementary Colors
Link to the challenge:
