Skip to content
Submitted about 2 years ago

Creative agency single page, React - Swiper -Styled Components

David•8,000
@DavidMorgade
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Creative agency single-page site
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hello and welcome to my Creative agency, single page solution

Extra Features:

  • Sticky Navbar for easier navigation.
  • Smooth navigation clicking the links from the navbar
  • Custom Swiper.js Slider.
  • Personal changes on hover, image sizes, buttons sizes

Breakpoints:

  • Mobile: 375px - 768px
  • Tablet: 768px - 1440px
  • Desktop: 1440px+

Things that I learnt:

  • CSS Mask
  • Improved a lot on pseudoelements (thanks to kevin powel vids)
  • More components, and more reusable components

Built with:

  • React
  • Styled Components
  • Swiper.js

Question to the community:

Sticky navbar, do you think is a good idea? Thoughts on navbar size when navigating on the page?

Hope you like it!, any feedback would be appreciate, I would apply all the changes that you suggest me here!

Community feedback

  • Jonathan•510
    @corjonPosted about 2 years ago

    When I scroll down a bit on the live site, the navbar starts to flicker. Looks good otherwise!

    Marked as helpful
    1
    David•8,000
    @DavidMorgadePosted about 2 years ago

    @corjon Hello Jonathan,

    Thanks for testing and finding this bug, I was not aware of it.

    Fixed it using a wrapper div with a fixed height and position sticky, now the page should not flicker!

    Thanks you a lot!

    1
  • Rimsha•240
    @rimshubPosted about 2 years ago

    Hi David, great solution, everything is working smoothly and nice.

    About your question, I think it is great idea to have a sticky navigation on home page for large screens but on small screens there's space issue sometimes so its better to go with non-sticky. Also you can just make hamburger icon sticky for small screens.

    Also, it depends on necessity of it. For example for large sites it is good to have a sticky navbar as it enables customer to navigate swiftly. But for a one page small website or where there's little or no scrolling then there's no need of it.

    1

Please log in to post a comment

Log in with GitHub

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