Advertisement
cypherine

Target #91

Nov 27th, 2021
71
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.75 KB | None | 0 0
  1. ## Reflection
  2.  
  3. <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>
  4. <style>
  5.  
  6.   body {
  7.     background: #D25B70;
  8.     display: flex;
  9.     justify-content: center;
  10.     margin: 50px auto;
  11.   }
  12.   div {
  13.     width: 200px;
  14.     height: 200px;
  15.    
  16.   }
  17.   .circle {
  18.     width: 200px;
  19.     height: 200px;
  20.     background: #F6DF96;
  21.     border-radius: 50%;
  22.     z-index: 1;
  23.   }
  24.  
  25.   .down {
  26.     position: absolute;
  27.     top: 50%;
  28.     width: 100%;
  29.     height: 50%;
  30.     background: #6CB3A9;
  31.    
  32.   }
  33.  
  34.   .line {
  35.     position: absolute;
  36.     top: 150px;
  37.     width: 100%;
  38.     height: 15px;
  39.     background: #6CB3A9;
  40.     z-index: 1;
  41.  
  42.    
  43.   }
  44.     .line-line {
  45.     position: absolute ;
  46.     top: 175px;
  47.     width: 100%;
  48.     height: 15px;
  49.     background: #6CB3A9;
  50.     z-index: 1;
  51.     margin-bottom: 5px;
  52.    
  53.   }
  54.  
  55.       .line-line-line {
  56.     position: absolute ;
  57.     top: 200px;
  58.     width: 100%;
  59.     height: 15px;
  60.     background: #6CB3A9;
  61.     z-index: 1;
  62.     margin-bottom: 5px;
  63.    
  64.   }
  65.  
  66.         .line-line-line-line {
  67.     position: absolute ;
  68.     top: 225px;
  69.     width: 100%;
  70.     height: 15px;
  71.     background: #6CB3A9;
  72.     z-index: 1;
  73.     margin-bottom: 5px;
  74.    
  75.   }
  76. </style>
  77.  
  78. <!-- OBJECTIVE -->
  79. <!-- 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 -->
  80.  
  81. <!-- SCORING -->
  82. <!-- 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. -->
  83.  
  84. <!-- IMPORTANT: remove the comments before submitting -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement