Welcome to CSSBattle Challenges!
In this short article, I go through my solution forCSSBattle - #10 Cloaked Spirits challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.
Challenge:
Solution:
<divclass="container"><divclass="parent"><divclass="child left"><divclass="outer-ring"><divclass="inner-ring"></div></div></div><divclass="child center"><divclass="outer-ring"><divclass="inner-ring"></div></div></div><divclass="child right"><divclass="outer-ring"><divclass="inner-ring"></div></div></div></div></div><style>*{box-sizing:border-box;padding:0;margin:0;}.container{width:100%;height:100%;background:#62306D;display:flex;justify-content:center;align-items:end;}.parent{display:flex;align-items:end}.child{background:#F7EC7D;width:100px;border-top-left-radius:100px;border-top-right-radius:100px;}.left,.right{height:150px;}.center{height:250px;}.left,.center,.right{display:flex;flex-direction:column;}.left.outer-ring,.center.outer-ring,.right.outer-ring{display:flex;justify-content:center;align-items:center;width:100px;height:100px;border-radius:50%;}.left.inner-ring,.center.inner-ring,.right.inner-ring{display:flex;justify-content:center;align-items:center;width:60px;height:60px;border-radius:50%;}.left.outer-ring,.right.outer-ring{background:#AA445F;}.left.inner-ring,.right.inner-ring{background:#E38F66;}.center.outer-ring{background:#E38F66;}.center.inner-ring{background:#AA445F;}</style>Key Takeaway(s):
- centering elements vertically and horizontally using flexbox layout
As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Top comments(0)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse
