Skip to content
Submitted over 2 years ago

Responsive fylo landing page using html and css

preetam varun•340
@preetamvarun
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo dark theme landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Community feedback

  • Ahmed Bayoumi•6,740
    @Bayoumi-devPosted over 2 years ago

    Hey preetam,

    My suggestions:

    • Contain the nav bar with <header>
    • Use <nav class="nav-bar"> instead of <div class="nav-bar"> to add more semantics to your project
    • Document should have one main landmark, Contain the component with <main>.
    • All page content should be contained by landmarks, So use semantic elements to add landmarks to the page that make it easier to navigate... So Wrap each section on the page with the <section> landmark.
    • Contain the footer with <footer>

    This is the structure what I mean:

    <body>
    <header>
       <nav class="nav-bar">
           <div class="icon">
               //...
           </div>
           <div class="links">
               //...
           </div>
       </nav>
    </header>

    <main>
       <section class="main-img"> <!-- I suggest you name this section (Hero Section) ->
          //...
       </section>

       <section class="icon-section"> <!-- I suggest you name this section (Features Section) ->
         //...
       </section>


       <section class="productive">
         //...
       </section>


       <section class="testimonials>
         //...
       </section>
    </main>

    <footer class="footer">
       //...
    </footer>
 </body>
    • Page should contain a level-one heading, Change <p>All your files in one secure location,</p> to <h1>All your files in one secure location,</h1> You should always have one h1 per page of the document... <h1> should represent the main heading for the whole page, and for the best practice use only one <h1> per page. There are six levels of section headings <h1> to <h6>

    Hope this is helpful to you... Keep coding👍

    Marked as helpful
    0
    preetam varun•340
    @preetamvarunPosted over 2 years ago

    @Bayoumi-dev Thank you for your valuable suggestions. I will definitely keep this in mind from now on.

    0
    Ahmed Bayoumi•6,740
    @Bayoumi-devPosted over 2 years ago

    @preetamvarun You are welcome😊

    0

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