Submitted over 3 years ago

Sunnyside agency landing page with HTML & CSS

@FlorianJourde

A solution to the Agency landing page challenge

Solution retrospective

So, my main question would be : how to use container by the same way bootstrap do ? I mean, I definided some width to my page to be as close as the design at possible, but I guess it would be better if my colors continue on right and left, instead of this black background. How can I define a nice wrapper in native HTML/CSS ?

Also, I wanted to animate my toggle burger-menu, but I struggled because of display: block... any suggestions ?

However, pretty interesting and real-sized exercice ! Liked it, altrough it was a bit long !

Code

Please log in to post a comment

Community feedback

P
Ken•4,915
@kens-visuals
Posted over 3 years ago
Hey @FlorianJourde 👋🏻

I have some suggestions for the project.
- I recommend using ul and li for the both navs at the top and bottom, also you could put the social media icons in a list as well. Although they don't look like so, but they are lists and it would be semantically more correct to write them like so.
- Next, -for the logo, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here.
- alt tags for the user's images should be their names, like this:
```
<img src="images/image-emily.jpg" alt="Emily R.">
```
- Lastly, to answer your question about width, avoid using fixed widths that's what causing problem here and add those black lines on the both sides on every viewport width. For such big things like layouts, images, etc. the best choice would relative units, such as percentages.
I hope this was helpful 👨🏻‍💻 other than that, you did a pixel perfect job, well done. Cheers 👾
Marked as helpful

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