100 days CSS day 1 challenge Solution explained

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, 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 , 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."