Skip to content
Submitted about 2 years ago

Responsive landing page using html and css

Iniyavan•220
@Iniy96
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo landing page with two column layout
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Help me out with setting the background. And in this project, I have set the background in the HTML page as img type. I have set the margin and border as 0. Even then I can see a white line below the image(background curve). Why was that happening??

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hi Iniyavan,

    Congratulation on completing another frontend mentor challenge. I have some suggestions regarding your solution if you don't mind:

    • You should use <header> to wrap the <nav>.
    • The alternate text of the logo should not be hidden from the accessibility tree, Use the website's name as an alternate text alt=”Fylo". Remember that a website's logo is one of the most meaningful images on a site so use proper alt for it.
    • If you are going to leave the logo not wrapped by <a>, it’s better to place it out the <nav> as it does not navigate the user in anywhere (only an image).
    • You should use <form> to wrap the input and the button, it's much likely to be a button with type="submit" instead of <a>. To know when to use <a> or <button> in a specific situation, you must understand that every action on site falls under two different categories:

    1. Actions where users affect the website’s back-end or front-end.

    2. Actions where users won’t affect the website at all.

    Action where users affect the website itself is where you use a button. For example, sign-up and purchase actions are often buttons. The user in these situations are creating a new account and completing a monetary transaction, which are actions that affect the website’s back-end. Creating new posts or making comments are actions that change a website’s content and what the user sees.

    Actions where users won’t affect the website are where you use a link. These actions that take users from one page to another without changing anything on the website’s back or front-end.

    • You should use the<nav > landmark to wrap the footer navigation. Then you should add aria-label=”secondary “ or aria-label=”footer” to it. A brief description of the purpose of the navigation, omitting the term "navigation", as the screen reader will read both the role and the contents of the label. Thenavelement in the header could use an aria-label="primary" or aria-label=”main” attribute on it. The reason for this is that, you should add the aria-label for a nav element if you are using the nav more than once on the page.You can read more in MDN
    • In the footer’s logo , the SVG does not contain any visible text that describes the graphic, we need to add the alternative text (invisible) by:

    1. <title>A short title of the SVG</title>

    2. Add the appropriate ID’s to the <title>.

    3. It must be the first child of its parent element.

    On the <svg> tag, add aria-labelledby="uniqueTitleID”.

    Overall, great work on this one. Hopefully this feedback helps.

    Marked as helpful
    0
  • バレンタイン 😈•64,190
    @VCaramesPosted about 2 years ago

    Hey there! Here are some suggestions to help improve your code:

    • Your site’s HMTL is lacking a proper structure. To improve your sites HMTL structure, you want to set up your code in the following manner (only did parent containers):
      <body>
      <header>
        <nav></nav>
      </header>
      <main>
        <section class="hero-section"></section>
        <section class="productive-section"></section>
        <section class="cta-section"></section>
      </main>
      <footer></footer>
    </body>

    • The Alt Tag description in the logo needs to be improved upon. The logo is arguably the most important image in you page. So the description should state the company name.

    • For the testimonial, you want to wrapped it in a Figure Element, the individuals information should be wrapped in a Figcaption Element and lastly, the testimonial itself should be wrapped in a Blockquote Element.

    Code:

    <figure>
   <blockquote></blockquote>
   <figcaption></figcaption>
</figure>

    More Info:

    ARTICLE

    • Implement a Mobile First approach 📱 > 🖥

    With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

    If you have any questions or need further clarification, let me know.

    Happy Coding! 👻🎃

    Marked as helpful
    0
  • Frank Ruiz•410
    @fruizoteroPosted about 2 years ago

    It is due to the line-height that all block elements have in this case your div with the "background" class. Add this and it should fix it:

    .background {
    width: 100%;
    line-height: 0; 
}

    Line height

    Marked as helpful
    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