First HTML/CSS Challenge how do I get the right look for the image??

Community feedback

• 

  Millz•530

  @BrezusPosted over 3 years ago

  hey im a beginner as well for the stats you could put them in a ul and make them list items and set the ul/containers display to flex and that should lay them beside each other or you can go on the individual ul li elements and set them to display:inline-block that will lay them down side by side and then you can set the margins/padding to increase the space they take up and as for the mobile design i follow this youtuber called kevin powell he advises that you do the mobile design first and then use media queries to change the width and other stuff of your design to accomodate wider screens

  0
• 

  Francel•370

  @HaemoffyPosted over 3 years ago

  About your first question: there's a property called "background-blend-mode", this property works if you have "background-color" and "background-image" present or "background-image" or "background-color" with 2 or more values that you can blend in, Info regarding "background-blend-mode" https://www.w3schools.com/cssref/pr_background-blend-mode.asp or you could use a tutorial

  Since you implement your image at the <img> tag itself, you wont achieve what was in the design,(i haven't tried this challenge myself so i could be wrong but from what im seeing, background-blend-mode might be the solution)

  For your 2nd question: you're getting that kind of issue because of the width you applied to them, the width of the container or parent affects the children's width same goes to height. In your code, you gave your parent (the left-half class)or container a width of 50%, now that would also be your children(card-text class) default width, since you applied 70% width, so you're only accepting 70% of the total container's width thus the contents gotten compressed and some of the contents moved below that you did not want to

  Removing the width will solve the issue and giving the padding: 50px to all direction will position them flawlessly without breaking the flow. Code version: .card-text { padding: 50px; text-align: left; }

  Last question: You will eventually learn as it is required Watch this: https://www.youtube.com/watch?v=bn-DQCifeQQ This will teach you how to setup for creating mobile to desktop, it might be hard to wrap around in your head first but just take time and take it slow to understand and do some practices.

  Recommend to learn: css reset box-sizing: border-box; instead of implementing <div> and set display: inline-block for most, use <span> instead, <span> is like div but difference is its default display is inline-block while <div> is block

  for layout: flexbox (first) grid so you wont be using much float since it has drawbacks

  bonus: ill give you a roadmap that I have follwed in my entire journey https://www.mediafire.com/file/0q0kg1watotme5j/2021+Frontend+Roadmap+-+Dark.pdf/file from web dev simplified but dont hesitate to watch other web dev youtubers like traversy, kevin powell

  remember to take it slow, understand firmly, apply what you learn and put into practice, and take breaks damn i wrote too much

  0