SAAS Landing page Project

Introducing SAAS Project: The Ultimate HTML & CSS Challenge for Aspiring Web Designers!

Introduction

In today’s digital landscape, having a strong foundation in HTML and CSS is essential for anyone wanting to create visually engaging and user-friendly websites. SAAS Project empowers students to put their skills to the test by building stunning, responsive landing pages from scratch. This project goes beyond static pages; it encourages creativity through animations and dynamic styling, ensuring students not only understand the basics of HTML and CSS but also know how to apply them to craft memorable user experiences.

This Assignment is NOT tested. You can use all the desired creativity, but make sure it 100% follows all the requirements!

Please visit the project mockups page

Standard Requirements

• Fork the project to your github account
• Clone the project to your computer
• Open the project in VSCode with code <cloned_repo_folder_name>
• All the tasks of the "Specific requirements" section MUST be solved
• The code of the index.html and styles.css (all css files) should pass the W3C validation (Feel free to use either the W3C web validator VSCode extension or the Online w3c Markup Validation Service)
• The code MUST be formatted with Prettier.
• Push the changes to the Github repo, when finished.
• Submit a .txt file with the Github repo url.

Specific Requirements

General

• The layout of the submitted project must match the Figma mockups as closely as possible (100% match) for all three screen sizes: desktop, tablet, and mobile.
• The project initially includes a single CSS file, but you can use multiple files if needed. Ensure that styles are not duplicated across these files.
• You can use any fonts you prefer, such as standard library sans-serif fonts or sans-serif web fonts.
• The screenshots of the solved version of that project are located in /assets/screenshots/.
• The background image for the top section is located in /assets/bg/.
• The logos of brands used in the project are located in /assets/logos/.
• Other images to be used are located in /assets/images/.
• Icons for buttons, top navigation, and bottom navigation should be implemented using an icon font of your choice (icons should not be images).

Desktop specific

• Transitions and keyframe animations should be functional for desktop devices only.

• The icons in the top section must appear with animations. Use at least two different animations or animation directions.

• The following items must include hover animations:

  • Top navigation items
  • All buttons (e.g., buy, play, form submit) (use the inverse colors for the border, background, text color and the icon color for the hovered state)
  • The main price box in the "Pricing" section (add the shadow around the box for the hovered state)
  • Bottom navigation items
  • "View privacy policy" link in the form

Tablet and mobile specific

• Should not have transition and keyframe animations working.