Simple component HTML/CSS

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="wrapper"> with the main tag to make the content/page accessible. click here for more on web-accessibility and semantic html

  Give the alt attribute in the img a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

  There is no need to style .wrapper. Give the body a background-color of pale-blue, use the colors that were given in the styleguide.md found in the zip folder you downloaded, a background-image with a background-size of contain and a background-repeat of no-repeat.

  body{
  background-color: hsl(pale-blue);
  background-image: url();
  background-repeat: no-repeat;
  background-size: contain;
  }
  

  To center .card on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  For a responsive content, replace the width in .card with max-width , increase its value for it to be equivalent to the design. max-width: 416px which is 26rem/em

  This challenge requires a media query, in the media query you only have to change the background-image of the body. For more on media queries, click here

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  mark_pherz•450

  @mark-pherzPosted over 1 year ago

  Dear @Hassiai ! Your reply in extremely helpful! Thank you so much !

  0
• 

  Ambadi M P•380

  @SoaphubPosted over 1 year ago

  Hello mark_pherz, great work and keep coding and have fun. I reviewed your code in GitHub. The background is not two-colour curved. It's an image placed on the background colour (--very_pale_blue: #f5f7ff) and the images are in your images folder. There are two images one for the desktop view (pattern-background-desktop.svg) and the other one for the mobile view(pattern-background-mobile.svg). You could follow the following steps in the stylesheet to get it right.

  • Move the bg colour from .wraper to the body tag. So the bg colour will be filled in the background of all elements. Even height: 100% or 100vh to take the size of the window screen.
  • Now you could add an image through .wraper div using background-image: url("the location of desktop image"), add width:100% to cover the width screen and height how much ever you want. The .card div would have displaced.
  • Finally, you could add position: absolute to .card div to make it like a popup card. Then add left: 50%, right: 50% and transform: translate(-50%, -50%) to make it in center of the page.
  • To change image in mobile view, use media queries for responsive websites. Even you can reduce card size or image size in different breakpoints and avoid content overflowing out of the screen. eg: @media (max-width: 991.98px){ .wraper{ background-image: url("the location of desktop image") } }. Check W3School to know more about media querry.

  Marked as helpful

  0