student name: Chakradhar Abhinay Mocherla NUid:002825781 Faculty: prof. Amuthan Arulraj Assignment -4 The goal of this assignment is to learn about CSS positioning, Grid layout / Flexbox, and SCSS features like variables, mixins, inheritance, loops, functions, math operations, etc.

Files and Descriptions

main.scss

• Description: This is the main SCSS file where other SCSS files are imported and compiled.
• Commands/Procedure: Use a CSS preprocessor like SASS to compile this file into a standard CSS file. Example: sass main.scss main.css

_variables.scss

• Description: Defines color variables, font variables, spacing, media query breakpoints, and more.
• Attributes/Concepts Covered:
  • Variable declarations
• Usage: Import this file into other SCSS files to maintain consistency in variable usage.

_mixins.scss

• Description: Contains mixins for reusability of styles, such as box shadows, text styling, and transitions.
• Attributes/Concepts Covered:
  • Mixins for reuse
• Usage: Include this file in other SCSS files and use mixins for consistent styling.

_header.scss

• Description: Contains styles for the header section of the web page, including navigation and logo.
• Attributes/Concepts Covered:
  • CSS positioning for layout
  • Box shadow
  • Flexbox for layout
• Usage: Used for styling the header section of the web page.

_navbar.scss

• Description: Contains styles for the navigation bar, including the logo and links.
• Attributes/Concepts Covered:
  • CSS positioning for layout
  • Flexbox for alignment
• Usage: Used for styling the navigation bar.

_hotel.scss

• Description: Styles for the hotel section, including images, ratings, and reviews.
• Attributes/Concepts Covered:
  • Nested styling
  • Flexbox for layout
• Usage: Used for styling the hotel section.

_reviews.scss

• Description: Contains styles for reviews, including review items and text.
• Attributes/Concepts Covered:
  • CSS positioning for layout
  • Flexbox for alignment
  • Box shadow for styling
• Usage: Used for styling the reviews section.

_footer.scss

• Description: Styles for the footer section, including logos, social media links, and lists.
• Attributes/Concepts Covered:
  • Flexbox for alignment
  • Box shadow for styling
• Usage: Used for styling the footer section.

_colors.scss

• Description: Defines color variables used in other SCSS files.
• Attributes/Concepts Covered:
  • Variable declarations
• Usage: Import this file to ensure consistent color usage throughout styles.

Compilation and Usage

1. Install SASS: If not already installed, use npm install -g sass to install SASS.

2. Compilation: Compile the main .scss file into a CSS file. Example: sass main.scss main.css.

3. Importing Files: Import the necessary .scss files into main.scss to use their styles.

4. Usage: Apply the compiled main.css to your HTML file to style your web page.