This repository contains the CSS styling for a multi-section web page. The layout has been designed to be responsive and visually appealing across different devices. The sections include a Header, Hero section, About section, Projects section, Skills section, Contact section, Education section, Achievements section, and Hobbies section.
- Font Import: The font "Poppins" is imported from Google Fonts for a modern and clean look.
- Global Variables: Defined CSS variables for primary colors and hover states to maintain consistency.
- Reset Styles: Applied a global reset for margin, padding, and box-sizing to ensure uniformity across different browsers.
- Grid Layout: The body uses a CSS Grid to define the main areas of the page.
- Positioning: The header is fixed at the top with a background color and padding for spacing.
- Typography: The header title uses a typewriter effect for dynamic visual interest.
- Navigation: Flexbox is used to align navigation items horizontally.
- Grid Layout: Utilizes a two-column grid for the main content and image.
- Responsive Design: Adjusts layout for smaller screens using media queries.
- Flexbox Layout: Uses flexbox for arranging content and images side-by-side.
- Styling: Includes padding, margin, and background color for visual separation.
- Card Layout: Projects are displayed in card format with hover effects for interactivity.
- Flexbox: Flexbox is used to align project cards horizontally.
- Card Layout: Skills are presented in cards with hover effects and transitions.
- Flexbox: Uses flexbox for arranging cards and ensuring responsiveness.
- Form Styling: Styled form with input fields, labels, and submit button.
- Responsive Design: Ensures form elements adjust for smaller screens.
- Card Layout: Education items are displayed in a card format with hover effects.
- Grid Layout: Uses CSS Grid to arrange education cards.
- Content Layout: Uses a centered layout for achievements with hover effects on images.
- List Layout: Hobbies are displayed in a grid layout with hover effects for interactivity.
- Responsive Design: Adjusts the layout for smaller screens using media queries.
- Media Queries: Media queries are used throughout the CSS to adjust the layout and font sizes for different screen sizes.
- Flexbox and Grid: Flexbox and Grid layouts are used for arranging content, ensuring that the layout adapts to various screen sizes.
This CSS has been designed to provide a clean, modern, and responsive look for the web page, ensuring that it looks great on both desktop and mobile devices.