🌐 Personal Portfolio Landing Page

This is a responsive personal portfolio landing page built using HTML5 and CSS3. It showcases the skills, services, and contact information of a Full Stack Developer — Muhammad Aashir. The design is clean, modern, and interactive, ideal for developers looking to present their work and online presence professionally.

---

🚀 Features

🔹 Hero Section

• Full-screen background image (developer.png) with centered introductory text.
• Welcoming message: ASSALAMUALAIKUM | My Self Muhammad Aashir.
• Profession highlighted: FULL STACK DEVELOPER.
• Typography powered by Roboto Mono.

🔹 Work Section

• Bold header: WORK, I CAN DO FOR YOU..!.
• Styled with a dark slate background and centered light-colored text.

🔹 Service Cards

• Three interactive cards representing:
  • Web Development
  • App Development
  • UI/UX Design
• Each card includes:
  • An image (web.png, mobile.png, uiux.png)
  • A heading and descriptive placeholder text.
• Hover effects:
  • Smooth scaling animation.
  • Enhanced box-shadow for depth.
  • Cursor change for interactivity.
• Layout achieved using Flexbox for responsiveness.

🔹 Bottom Section

• Two content blocks:
  • Contact Me
  • About Us
• Each block features:
  • Rounded corners and drop shadows.
  • Scrollable content area with placeholder text.
  • Consistent styling using Oswald font.
• Flexbox used for side-by-side layout.

🔹 Footer

• Copyright:
  • © Made By: Muhammad Aashir | #WMA-459449
• Social media icons:
  • Facebook, Instagram, LinkedIn, GitHub.
  • SVG icons with hover scaling effects.
  • External links open in new tabs.

---

🎨 Styling Highlights (CSS3)

• Fonts: Imported from Google Fonts — Roboto Mono and Oswald.
• Responsive Design: Uses viewport meta tag and flexible layouts.
• Flexbox: For layout alignment and spacing across sections.
• Transitions: Smooth hover effects on cards and icons.
• Box Shadows: Adds depth to cards and blocks.
• Custom Styling:
  • .lg_content class for large headings.
  • .Div and .Block classes for modular design.
  • .logo class for consistent icon sizing and animation.

---

📁 Folder Structure

Portfolio/
│
├── index.html
├── style.css
└── Images/
    ├── developer.png
    ├── web.png
    ├── mobile.png
    ├── uiux.png
    ├── facebook.svg
    ├── instagram.svg
    ├── linkedin.svg
    └── github.svg

---

📌 How to Use

1. Clone the repository:

   git clone https://github.com/Aashir-Shaikh/portfolio-landing-page.git

2. Open index.html in your browser.
3. Customize content, images, and links as needed.

---

🛠️ Technologies Used

• HTML5
• CSS3
• Google Fonts
• Flexbox

---

📬 Connect with Me

• Facebook
• Instagram
• GitHub