Cardboard CSS HTML by ajdonato

Community feedback

• 

  Sky•120

  @sky-1991-siaPosted over 3 years ago

  how did you find out what are widths exactly? it's really close to the design

  Marked as helpful

  1

  ---

  

  Amazon Donato•75

  @ajdonatoPosted over 3 years ago

  @sky-1991-sia In the style-guide.md file you have the project measurements.

  0

  

  Sky•120

  @sky-1991-siaPosted over 3 years ago

  @ajdonato i just have these file and there is no measurements like your code

  The designs were created to the following widths:

  • Mobile: 375px
  • Desktop: 1440px

  Colors

  Primary

  • Very dark blue (main background): hsl(233, 47%, 7%)
  • Dark desaturated blue (card background): hsl(244, 38%, 16%)
  • Soft violet (accent): hsl(277, 64%, 61%)

  Neutral

  • White (main heading, stats): hsl(0, 0%, 100%)
  • Slightly transparent white (main paragraph): hsla(0, 0%, 100%, 0.75)
  • Slightly transparent white (stat headings): hsla(0, 0%, 100%, 0.6)

  Typography

  Body Copy

  • Font size: 15px

  Font

  • Family: Inter

  • Weights: 400, 700

  • Family: Lexend Deca

  • Weights: 400

  0

  

  Amazon Donato•75

  @ajdonatoPosted over 3 years ago

  @sky-1991-sia OK, I misinterpreted your question. You want to know how I got to "card" size. The project width is 1444px, and the image in the "design" folder has the same dimension. What I did was open it in "photoshop" and take the measurements. You'll get them all that way.

  1
• 

  Sebastian Porini•265

  @zebokPosted over 3 years ago

  Hey Donato!

  Desktop version looks great, well done. Otherwise, mobile and tablet version are not the best. Specially tablet version. Check about the overflow in the page. It looks like everything is going out of the window/browser. Try adding some max-width property.

  I have 2 tips for you: First one: Never use margins to position an element. Just use margin to give a space between elements.

  Second one: Check out about the "picture" tag and how you can set different images with the srcset attribute. The srcset attribute is used to offer list of possible images based on size.

  Here you have a little example. The img element will take "small.jpg" as the scr attribute.

  UNLESS! the screen width is 800px or more. In that case, the image will take the "big.jpg" as his src attribute.

  <picture> <source srcset="big.jpg" media="(min-width: 800px)"> <img src="small.jpg" alt="" /> </picture>

  So you will have differents images depending on the screen width. And, with grid property: "order" you can set the child to go first or after. And place it correctly in the body. The idea of setting display="none" to the card-img classes is not the best approach. You can read more about picture and srcset here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

  Thats all mate! Keep practicing! Hope my tips help you. I am learning as well. Some day, we will become experts ;)

  Marked as helpful

  1

  ---

  

  Amazon Donato•75

  @ajdonatoPosted over 3 years ago

  @zebok Thanks for the feedback. Really the "display: none" is wrong, but I didn't know how to reverse the order of blocks. Then I found out that I can use "flex-direction: row-reverse" for this. As for tablet mode, I'll do it tomorrow. And thanks for the "srcset" tip I've never seen about it, it really is very useful.

  1

  

  Amazon Donato•75

  @ajdonatoPosted over 3 years ago

  @zebok I made a responsive for tablet mode, organized the other modes, removed the "display: none" and the alignment with "margin". I just haven't used "srcset " yet, but I read all the documentation about it and I'll definitely use it in the other challenges. Thanks again for the feedback.

  1

  

  Sebastian Porini•265

  @zebokPosted over 3 years ago

  @ajdonato Hey! Its much much better now! Nice one man!

  ;)

  1

  

  Amazon Donato•75

  @ajdonatoPosted over 3 years ago

  @zebok Thanks

  1