Flexbox, pseudo element.

Solution retrospective
Hey guys, can anyone tell me how to make the little white dot! Your remarks and advice are very welcome
Please log in to post a comment
Log in with GitHubCommunity feedback
- @pikapikamart
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 thisbackground: var(--Very-Dark-Blue) url(./images/bg-desktop.png) no-repeat 100% 130%;
though I don't know how to add thebackground-size
.Also instead of using
height: 100vh
on thebody
tag, usemin-height: 100vh
on it and add a padding to the top and bottom of thebody
to prevent the layout from touching both ceiling and flooring.But still, really good job on this one^^
- P@palgramming
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
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord