I have had much fun trying this challenge, learnt a few things and got better at others. It is my last challenge in the Newbie category. Cant wait to start the Junior category's challenges.
Latest solutions
Typemaster pre-launch landing page
#pure-css#accessibilitySubmitted 8 days ago. Media query and responsive design. . Height and Width for the Elements
Workit landing page
#pure-cssSubmitted about 2 months ago. Media query understanding . understand the width and height more and how to focus with them for each element in each media screen size .
Latest comments
- P@oryanhachWhat are you most proud of, and what would you do differently next time?@Mazen922
Hi Oryan this is very nice solution for the challenge , i like how you center the phone image and make borders in the right , left corners ... but i have better way to do so..
give the hero section :: after pseudo class and check my gitbub repo to take the image for the curve in order to make it the right way .
make the image on background using background-image and set it as position absolute for relative hero section and also don't forget the margin-top on the phone because i saw you don't use it .
Hope this could help and all the best for you :)
- P@VirginiaPat@Mazen922
Hi Virginia Nice work in general , just small tip to make your work responsive , try to give the image on the right "the circle image" to give it overflow :hidden or to the all container of your website ..
Hope it could help and best of luck (:.
Marked as helpful - P@pietrodev01What are you most proud of, and what would you do differently next time?
Workit Landing Page
Here's what I learned:
To make a circle make sure the width and height are the same as it is on figma and use border radius.
Curved bottom: clip-path: ellipse(100% 100% at top); ellipse(100% 100%) → Creates an ellipse that spans 100% of the width and 100% of the height of the element
at top → cuts the ellipse at the top of the element with the ellipse on the bottom
To put an image on top of the ellipse I had to create an element outside of its container. I then did position absolute and centered it.
On the desktop version I set the width of the photo to a vw value so it is responsive with width (calc(25vw + 20vh)). I set the value of left of the img container to a vw value as well so its container is responsive with width.
@Mazen922This is a nice solution for the challenge .
Just a small tip to make your website responsive in the desktop version
.Try to make the shapes at the left and right in the hero-section "the circles shape " with :after and :before pseduo classes in order to make the overflow:hidden work and Don't give them block display you don't have to . this will make it perfect .
All the best :)
- @Mazen922@Mazen922
Thanks @ecemgo it worked well with me in HTML feedback, but in CSS advice the body tag styling couldn't be centered by your code, but I got it 😊👌.