Responsive Landing page

Greetings Khaled

• heading elements should follow a sequential order and having only one h1 element on a page is considered best practice.
• the immediate child of a ul should be a li element, a div element should not be a direct child of a ul element
• when using an svg , you need to add additional attributes such as role=img for accessibility, for other attributes see the following article, creating accessible svgs

Hello there! Nice work with this project. Looking at your solution, I would suggest the following for you...

• Add the background image in the body rule set
• Considered viewing it between 430px - 900px, the responsive design is stacking up
• Include the hover state of the buttons and links. For the button add background: hsla(171, 52%, 58%, 1); in the .btn.btn--cyan,.lis and .footer__icons. Add background: hsla(232, 100%, 77%, 1); for the .btn.btn--blue:hover.
• Refactor the HTML structures into...

<article class="features">
        <img
          src="images/image-computer.png"
          alt="image computer"
          class="features__image"
        />
        <div class="features__ul">
             <div class="features__list"></div>
             <div class="features__list"></div>
             <divclass="features__list"></div>
        </div>
</article>

better to use div to wrap a section consisting with h3 and p rather than use unordered list ul and li

• Instead of wrap the image with section use div instead, section requires at least one of the heading hierarchy

<div class="img">
        <img
          src="images/image-devices.png"
          alt="devices image"
          class="img__devi"
        />
</div>

<section class="u-mave-up track">
        <h2 class="track__title heading-1">Supercharge your workflow</h2>
        <p class="track__para para-main">
          We’ve got the tools to boost your productivity.
        </p>
</section>

• Remove the commented/unused code to keep it clean

Hope this helps and Keep it going!

Hi there 👋

Congratulate on finishing your project 🎉. The design looks beautiful 😃. Please answer my question: Have you learned the SASS course from Jonas Schmedtmann because the code looks very familiar to me?

Your code is creat I mean overall like writing your code using sass and responsive code. However, just for one landing page creating 4-5 folders and a dozen files is not a good practice 🤔. You can put them in files base, main, layout and components that's all 🙌 because what you are doing is a lot of work. If the website has a few pages then you can divide it ✂.

Let's add some hover effects to buttons to make it better 😉 about your design

Happy coding ☕