Tometoo0304• 60
@Tometoo0304
Submitted
Ahmed
@Ahmed-l2
All comments
- Ahmed• 80
@Ahmed-l2
Posted
Great job!
0 - Aaryan Chaudhary• 10
@AaryanChy
Submitted
Ahmed• 80@Ahmed-l2
Posted
Looks great and almost identical!
0 - Arthur• 30
@drk-Arthur
Submitted
What specific areas of your project would you like help with?
I have no idea how to make the mobile design.
Ahmed• 80@Ahmed-l2
Posted
For the mobile design, you can use CSS Media Queries, it will only take you a few minutes to understand how it works. CSS Media Queries allow you to apply different styles for different screen sizes, making your web design responsive and adaptable to various devices.
Here's an example:
Desktop Styles
main { margin-top: 100px; margin-bottom: 50px; border-radius: 20px; padding: 40px; background-color: lightblue; }Mobile Styles with Media Queries
To change the
mainelement's style for screens that are 768px wide or less, use the following Media Query:@media (max-width: 768px) { main { margin-top: 20px; margin-bottom: 20px; border-radius: 0; padding: 10px; background-color: lightcoral; } }This Media Query modifies the
mainelement's styling specifically for smaller screens.I hope this was clear enough for you to understand :)
0 - Control222• 210
@Control222
Submitted
What challenges did you encounter, and how did you overcome them?
Difficulty with list marker. First changed list-style-position inside, but then could not make any gap between the marker and the text, so needed to change and find another method. Thankfully with margin and padding on ul and li elements it was doable
Ahmed• 80@Ahmed-l2
Posted
Looks great and almost identical to the original design!
0 - Ejiofor John• 400
@echocode1
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of designing it even when I know it lacks a lot
What challenges did you encounter, and how did you overcome them?
the colors giving seems a bit different from the starter designs i saw .had to generate some random color which took a whole lot of time
What specific areas of your project would you like help with?
how to blend the mobile view to the desktop view though they look same to me.
Ahmed• 80@Ahmed-l2
Posted
Looks pretty good, something things I could point out that you're missing is the color change to green when hovering over the buttons and all the colors you need are provided in the style-guide.md.
Marked as helpful
0 - Julio Salas• 20
@WebDesign-MultiMedia
Submitted
Ahmed• 80@Ahmed-l2
Posted
Looks good, maybe just a few touchups can be done and it will match the original design, like the bottom spacing, and the size of the avatar, along with the use of the correct weights for the texts.
0 What are you most proud of, and what would you do differently next time?
Made with:
- HTML 🦴
- SCSS 🖌️
- JS 🤖
- mobile-first approach 📲📲
- autoprefixer for browser compatibility 🧭
- minified files for better performance 🚀
Ahmed• 80@Ahmed-l2
Posted
The design looks great, and the inclusion of camera holes is a subtle yet creative touch.
2- Shivam-Bhagat• 30
@Shivam-Bhagat
Submitted
Ahmed• 80@Ahmed-l2
Posted
Overall looks good but if you want it to be as close to the design, you need to add some padding to the elements and use the font colors provided in the project files along with the weights.
0
