Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ## Reflection
- <div class="circle"></div><div class="down"></div><div class="line"></div><div class="line-line"></div><div class="line-line-line"></div><div class="line-line-line-line"></div>
- <style>
- body {
- background: #D25B70;
- display: flex;
- justify-content: center;
- margin: 50px auto;
- }
- div {
- width: 200px;
- height: 200px;
- }
- .circle {
- width: 200px;
- height: 200px;
- background: #F6DF96;
- border-radius: 50%;
- z-index: 1;
- }
- .down {
- position: absolute;
- top: 50%;
- width: 100%;
- height: 50%;
- background: #6CB3A9;
- }
- .line {
- position: absolute;
- top: 150px;
- width: 100%;
- height: 15px;
- background: #6CB3A9;
- z-index: 1;
- }
- .line-line {
- position: absolute ;
- top: 175px;
- width: 100%;
- height: 15px;
- background: #6CB3A9;
- z-index: 1;
- margin-bottom: 5px;
- }
- .line-line-line {
- position: absolute ;
- top: 200px;
- width: 100%;
- height: 15px;
- background: #6CB3A9;
- z-index: 1;
- margin-bottom: 5px;
- }
- .line-line-line-line {
- position: absolute ;
- top: 225px;
- width: 100%;
- height: 15px;
- background: #6CB3A9;
- z-index: 1;
- margin-bottom: 5px;
- }
- </style>
- <!-- OBJECTIVE -->
- <!-- Write HTML/CSS in this editor and replicate the given target image in the least code possible. What you write here, renders as it is -->
- <!-- SCORING -->
- <!-- The score is calculated based on the number of characters you use (this comment included :P) and how close you replicate the image. Read the FAQS (https://cssbattle.dev/faqs) for more info. -->
- <!-- IMPORTANT: remove the comments before submitting -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement