100 days CSS day 1 challenge Solution explained
Tags: css, 100daysofcss, html, webdev
Published: 2023-08-07 20:10:45


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4c09dubxsgwwl2e6ixia.png)

**HTML CODE**

```
<div class="frame">
  <div class="center">
    <div class="number">
      <div class="one-one"></div>
      <div class="one-two"></div>
      <div class="zero-one"></div>
      <div class="zero-two"></div>
    </div>
    <span class="big">Days</span>
    <span class="small">CSS Challenge</span>
  </div>
</div>
```
**CSS CODE**

```
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
  background: #43389F;
  background: -webkit-linear-gradient(bottom left, #43389F 0%, #4ec6ca 100%);
  background: -moz-linear-gradient(bottom left, #43389F 0%, #4ec6ca 100%);
  background: -o-linear-gradient(bottom left, #43389F 0%, #4ec6ca 100%);
  background: linear-gradient(to top right, #43389F 0%, #4ec6ca 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43389F', endColorstr='#4ec6ca',GradientType=1 ); 
  font-family: 'Courier New', 'Courier', sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50.8%;
  left: 50.5%;
  transform: translate(-50%,-50%);
}

.number {
  position: relative;
  height: 100px;
  width: 200px;

  .one-one {
    position: absolute;
    z-index: 1;
    top: 0;
    left: -16px;
    height: 40px;
    width: 20px;
    background: #fff;
    border-radius: 3px;
    transform: rotate(50deg);
    box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
  }

  .one-two {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0px;
    height: 100px;
    width: 24px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
  }

  .zero-one, 
  .zero-two {
    position: absolute;
    z-index: 8;
    top: 0;
    left: 17px;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 24px solid #fff;
    box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
  }

  .zero-two {
    z-index: 6;
    left: 100px;
  }
}

.big {
  position: relative;
  z-index: 20;
  display: block;
  font-size: 82px;
  line-height: 60px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 6px;
}

.small {
  position: relative;
  z-index: 20;
  display: block; 
  font-size: 23px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .04em;
}
```

**EXPLANATION**

- The **.frame** selector applies styles to the div element with the class of frame. This is the outermost container of the challenge.
  - The **position: absolute** property positions the element relative to its closest positioned ancestor, which in this case is the body element.
  - The **top: 50%** and **left: 50%** properties move the element to the center of its parent element.
  - The **width: 400px** and **height: 400px** properties set the size of the element to 400 pixels by 400 pixels.
  - The **margin-top: -200px** and **margin-left: -200px** properties offset the element by half of its width and height, so that it is exactly centered in the viewport.
  - The **border-radius: 2px** property rounds the corners of the element slightly.
  - The **box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3)** property adds a subtle shadow to the element, giving it some depth.
  - The **background** property sets the background color of the element to a gradient that goes from purple (#43389F) to turquoise (#4ec6ca) diagonally. The different prefixes (-webkit-, -moz-, -o-, and no prefix) are used to ensure compatibility with different browsers. The filter property is used for Internet Explorer.
  - The **font-family**, **color**, **-webkit-font-smoothing**, and **-moz-osx-font-smoothing** properties set the font and color of the text inside the element, and make it look smoother on different screens.

- The **.center** selector applies styles to the div element with the class of center. This is the inner container of the challenge that holds the number and the text.
  - The **position: absolute** property positions the element relative to its closest positioned ancestor, which in this case is the frame div.
  - The **top: 50.8%** and **left: 50.5%** properties move the element slightly below and to the right of the center of its parent element. This is done to create a visual balance with the number and the text.
  - The **transform: translate(-50%,-50%)** property shifts the element by half of its width and height, so that it is centered in its parent element.

- The **.number** selector applies styles to the div element with the class of number. This is the container that holds the two digits of the number "100".
  - The **position: relative** property positions the element relative to its normal position in the document flow.
  - The **height: 100px** and **width: 200px** properties set the size of the element to 100 pixels by 200 pixels.

- The **.one-one**, **.one-two**, **.zero-one**, and **.zero-two** selectors apply styles to the div elements with these classes. These are the elements that create the shapes of the digits "1" and "0".
  - The **position: absolute** property positions each element relative to its closest positioned ancestor, which in this case is the number div.
  - The **z-index** property sets the stacking order of each element, so that some elements appear above or below others.
  - The **top**, **left**, **height**, **width**, and **border-radius** properties set the position and size of each element, and round their corners if needed.
  - The **background** or **border** properties set the color of each element, using white (#fff) for consistency.
  - The **transform: rotate()** property rotates some elements by a certain degree, to create an angle or a curve.
  - The **box-shadow** property adds a shadow to each element, giving them some depth.

- The **.big** selector applies styles to the span element with the class of big. This is the text that says "Day 001".
  - The **position: relative** property positions the element relative to its normal position in the document flow.
  - The **z-index: 20** property sets a high stacking order for this element, so that it appears above all other elements in its parent container.
  - The **display: block** property makes this element behave like a block-level element, taking up its own line.
  - The **font-size: 82px**, **line-height: 60px**, **text-transform: uppercase**, and **font-weight: 700** properties set the size, spacing, and weight of the text, making it look bold and capitalized.
  - The **margin-top: 6px** property adds some space above this element, creating a gap between it and the previous element.

- The **.small** selector applies styles to the span element with the class of small. This is the text that says "CSS Challenge".
  - The **position: relative** property positions the element relative to its normal position in the document flow.
  - The **z-index: 20** property sets a high stacking order for this element, so that it appears above all other elements in its parent container.
  - The **display: block** property makes this element behave like a block-level element, taking up its own line.
  - The **font-size: 23px**, **line-height: 20px**, **text-transform: uppercase**, and **font-weight: 700** properties set the size, spacing, and weight of the text, making it look bold and capitalized.
  - The **letter-spacing: .04em** property adds some extra space between each letter, making the text more readable.


**CREDITS:**
"[Bing](https://www.bing.com/chat), a chat mode of Microsoft Bing search, helped me create this post. Bing can speak different languages, generate various content, and answer questions in depth.

This code is based on the  [100 days CSS ](https://100dayscss.com/), a website with daily CSS tasks for all levels. Learn more and see other solutions here. Follow them on Twitter, Facebook, or Instagram for updates and community."