HTML, CSS, Google Fonts

Community feedback

• 

  Lucas Estevam•210

  @tl-lucasestevamPosted over 3 years ago

  I took a look at your code, the first thing I noticed was the use of a tag called "row", this tag does not exist in HTML, use a div with the row class if you want to bootstrap or in the same style of code as bootstrap the same for col, etc.

  Another thing is also the use of divs around the text, use semantic tags (p, h1, h2, h3, h4, h5, h6, or span). For example your card's title:

  <h1>
  Get <strong>insights</strong> that help your business grow.
  </h1>
  

  the strong in this case is a semantic HTML tag to make part of a text highlighted, then just style it in CSS

  It's also preferable to get by class rather than id, so you won't need to repeat the CSS.

  But the main thing you should do is to think about how you will organize your card, the HTML structure, there is a container that encompasses the entire card, after that, there are two divs where each one has the width: 50%, the first one will be the texts on the second will have a background with the image (you can even use the IMG tag to make it more semantic but then you will have more problems when styling, so a simple solution is to use the background with a linear gradient to put the purple in the image)

  A simpler way to do all this is using flex-box, you can see the documentation at this link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ or in youtube tutorials if prefer but to center the card, for example, you can do the following CSS code:

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

  I think this is the main thing for you to improve your code, English is not my native language so if you haven't understood something feels free to ask.

  I have this problem solved if you want to take a look: https://github.com/tl-lucasestevam/frontend-mentor-card/blob/main/index.html https://github.com/tl-lucasestevam/frontend-mentor-card/blob/main/css/styles.css https://www.frontendmentor.io/solutions/html-css-and-flexbox-sY-UPQbE3

  Marked as helpful

  3

  ---

  

  Heather Smith•220

  @sorengreyPosted over 3 years ago

  @tl-lucasestevam Thank you so much for the in-depth reply! I didn't realize I was supposed to be adding the alignment and min-height to the body instead of the main container. That helps so much. I have started this project over and am taking what you've said here into account. (Row has been removed completely.) Anyway, I will be resubmitting this in the next day or two. Thanks again for your help!

  1
• 

  Dimitrios Politis•285

  @grmajikPosted over 3 years ago

  If I were you, I'd start over. However, if you want to debug this, imagine this.

  Imagine that you have a box (a regular DIV), then in that box you have two more boxes.

  One box holds your image (do max-width: 100%; height: auto;) Another box holds all your text (in here, format the text however you want)

  Now, do display: flex; on the BIG BOX (the outer div). Your two inner boxes will be displayed side by side.

  Now if you do display: flex; height: 100vh align-items: center; justify-content: center; on the BODY tag, you'll get everything in the center of the page. Go from there and figure out the rest.

  Happy coding 💪

  BTW: Get rid of Bootstrap

  Marked as helpful

  1

  ---

  

  Heather Smith•220

  @sorengreyPosted over 3 years ago

  @grmajik I am not using Bootstrap, but I think you're right about starting over... this is a mess. Sad thing is that it looks great on my laptop. But when I submit it here, it breaks. Of course.

  Anyway, thank you so much for the help. I will review your comment and probably resubmit this in a day or so.

  0

  

  Dimitrios Politis•285

  @grmajikPosted over 3 years ago

  @sorengrey You're welcome. Keep making mistakes, otherwise you'll never learn.

  1

  

  Heather Smith•220

  @sorengreyPosted over 3 years ago

  @grmajik I started over and your explanation of how to set up the divs was so helpful. I was really over-complicating things. Thanks again!

  1

  

  Dimitrios Politis•285

  @grmajikPosted over 3 years ago

  @sorengrey Glad I helped ! Let me know when you re-upload the challenge. Keep coding 💪

  1