Flexbox, pseudo element.

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this. Both desktop and mobile layout is good.

  Regarding your query, I think you did good on that white dot using ::after that is just for visual right and you don't really need to make some element on it.

  Though you can shorten it more by just using only the percentage selector. The percentage selector will have the long black background, the ::before of it will have the pink bar, then the ::after will have the white circle.

  Also on your body tag, I saw that you used a lot of different background properties.

      background-color: var(--Very-Dark-Blue);
      background-image: url(./images/bg-desktop.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: 100% 130%;
  

  You could shorten it via using background like this background: var(--Very-Dark-Blue) url(./images/bg-desktop.png) no-repeat 100% 130%; though I don't know how to add the background-size.

  Also instead of using height: 100vh on the body tag, use min-height: 100vh on it and add a padding to the top and bottom of the body to prevent the layout from touching both ceiling and flooring.

  But still, really good job on this one^^

  0

  ---

  

  Mohamed•325

  @MohamedBehharPosted over 3 years ago

  @pikamart Thanks dude, this will definitely help me a lot I really appreciate it especially the short property of the background.

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  I would not have used :after to make the dot I would have just put a div in your div with class full and made that div display flex then justified it end

  That is what I did in my solution but your solution seems to work also

  https://www.frontendmentor.io/solutions/fylo-date-storage-component-html-and-css-7xoTr3nkH

  0

  ---

  

  Mohamed•325

  @MohamedBehharPosted over 3 years ago

  @palgramming Thanks a lot for your feedback, I think putting the dot in a div is the best way, I didn't really think of it. I have another question for you sir, should I start learning javascript, or wait until I master the css!

  0