3-column-preview-card-component by using html and css in pycharm

Community feedback

• Account deletedPosted about 4 years ago

  First I thought it might be because you got the wrong path but you wrote <img scr="images/icon-sedans.svg">, it's supposed to besrc not scr.

  20
• 

  Irinella B.•80

  @3vilBonobo

  Posted about 4 years ago

  Hi Angela! Here's some feedback on your solution:

  1. As Thulanigamteni already pointed out, you misspelled src in your <img> tabs that's why your images doesn't show up properly.

  2. You can accomplish round corners with "border-radius" CSS property. It can take one value for all four corners or a separate value for each corner, all in pixels. Make sure to use the value both in parent and child elements when needed.

  Also, some further advice to improve your solution:

  • Try to use the correct font family for your headers. -Try to align the elements in each of your cards to the left. Try to adjust the min-max width of your each card so you avoid the bug of them changing size when you hover over the buttons.
  • It's a good practice to begin with an <h1> header and adjust the font size if necessary, using CSS. Header tags have a more semantic meaning than just declaring the size of your fonts. -Try not to use "id" especially in small projects. I know that it kinda makes sense when you have some unique elements but it takes up a lot more memory space than classes and maybe it can make things more complicated than needed. You can always specify you unique element by adding an extra class.

  I hope I helped a little, very nice effort overall! Keep up the good work!

  00
• 

  Yashasvi Singh•890

  @aUnicornDev

  Posted about 4 years ago

  These 3 items are flex items... and you always want to keep them in a single row. So get rid of flex-wrap as that will push a single item out of the row as it does in viewport <1420px.

  For rounded columns, you can use one of the below

      border-radius: 10px 0px 0px 10px;
  }
  .column3{
      border-radius: 0px 10px 10px 0px;
  }
  

  .flex-container>*:first-child
  {
   border-radius: 10px 0px 0px 10px;
  }
  .flex-container>*:last-child
  {
      border-radius: 0px 10px 10px 0px;
  }
  

  00