< Back to Frontend Friday Folks Index

Pastel Logo

Highlighted solution (407 characters)
1 
<div>
2 
<div id=c></div>
3 
<div id=r></div>
4 
</div>
5 
<style>
6 
  body {
7 
    display: grid;
8 
    place-items: center;
9 
    background: #19191A;
10 
  }
11 
  #c {
12 
    isolation: isolate;
13 
    background: conic-gradient(#4F77FF 50%, #9AD5FF 0 75%, #4F77FF 0);
14 
    width: 150px;
15 
    height: 150px;
16 
    border-radius: 50%;
17 
  }
18 
  #r {
19 
    margin-top: -75px;
20 
    width: 75px;
21 
    height: 125px;
22 
    background: #F9E492;
23 
  }
24 
</style>
This is the first time I used isolation: isolate! From my understanding, it creates a new z-index stack and it allows me to put regular elements on top of each other, without having to position: absolute them. See MDN for more information about isolation.
< Back to Frontend Friday Folks Index