25-Oct-25 · GhalaAlnmasi · Oct 27, 2025 · Oct 27, 2025 · Oct 28, 2025 · Oct 28, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,138 +1,2 @@
-# LAB_HTML_CSS
-
-
-# Learn the about HTML/CSS and apply your learning on 4 mini projects!
-- Eatch mini project is in a seperate folder. 
-- Your final result should have at least 4 web mini projects (you can create more while learning!)
-
-## Learning plan for HTML/CSS with resources. You'll find more resources submitted to discord.
-
-### 1: Introduction to HTML
-**Goals:** Understand the basic structure of a web page and essential HTML elements.
-
-1. **Basic Structure**
-   - Learn about HTML tags and the structure of an HTML document.
-   - Create your first HTML file with `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>` tags.
-   - Resources: MDN Web Docs - [HTML Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)
-
-2. **Text and Formatting**
-   - Learn about headings (`<h1>` to `<h6>`), paragraphs (`<p>`), bold (`<b>`), and italic (`<i>`).
-   - Practice creating and formatting text.
-   - Resources: W3Schools - [HTML Elements](https://www.w3schools.com/html/html_elements.asp)
-
-3. **Links and Images**
-   - Learn how to create links (`<a>`) and add images (`<img>`).
-   - Understand attributes like `href` and `src`.
-   - Resources: W3Schools - [HTML Links](https://www.w3schools.com/html/html_links.asp), [HTML Images](https://www.w3schools.com/html/html_images.asp)
-
-4. **Lists and Tables**
-   - Learn about ordered (`<ol>`) and unordered (`<ul>`) lists, and list items (`<li>`).
-   - Introduction to tables (`<table>`, `<tr>`, `<td>`, `<th>`).
-   - Resources: MDN Web Docs - [HTML Lists](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul), [HTML Tables](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
-
-5. **Forms and Input**
-   - Learn about forms (`<form>`) and input elements (`<input>`, `<textarea>`, `<button>`, `<select>`, etc.).
-   - Resources: MDN Web Docs - [HTML Forms](https://developer.mozilla.org/en-US/docs/Learn/Forms)
-
-6. **Review and Practice**
-   - Review all the topics covered so far.
-   - Build a simple web page incorporating text, images, links, lists, tables, and a form.
-   - Resources: Any HTML tutorial platform for practice (e.g., Codecademy, FreeCodeCamp).
-
-7. **Mini Project**
-   - Create a webpage of your choosing. examples:a  list of hobbies, favorite links,a contact form, about a football team you support, etc.
-   - Resources: Personal creativity and practice.
-   -    - Path: `html/introduction/`
-
-### 2: Introduction to CSS
-**Goals:** Understand the basics of CSS and how to style HTML elements.
-
-1. **Basic Syntax and Selectors**
-   - Learn about the structure of CSS rules (selectors, properties, and values).
-   - Understand different types of selectors: element, class, ID, and universal.
-   - Resources: MDN Web Docs - [CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)
-
-2. **Colors and Backgrounds**
-   - Learn how to apply colors using names, HEX, RGB, and HSL values.
-   - Learn about background properties: `background-color`, `background-image`, `background-repeat`, etc.
-   - Resources: W3Schools - [CSS Colors](https://www.w3schools.com/css/css_colors.asp), [CSS Backgrounds](https://www.w3schools.com/css/css_background.asp)
-
-3. **Text Styling**
-   - Learn about font properties: `font-family`, `font-size`, `font-weight`, `font-style`, and `text-align`.
-   - Understand how to use Google Fonts.
-   - Resources: Google Fonts, MDN Web Docs - [CSS Fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/font)
-
-4. **Unit of Measurements & Positions**
-   - Learn about Unit of Measurements & Positions
-   - Resources:  [Unit of Measurements](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units). [CSS Posiition](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
-5. **Box Model**
-   - Understand the box model: `margin`, `border`, `padding`, and `content`.
-   - Learn how to use `width`, `height`, `box-sizing`.
-   - Resources: MDN Web Docs - [Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
-
-6. **Layout Basics**
-   - Introduction to display properties: `block`, `inline`, `inline-block`, `none`.
-   - Learn about CSS positioning: `static`, `relative`, `absolute`, `fixed`.
-   - Resources: W3Schools - [CSS Layout](https://www.w3schools.com/css/css_positioning.asp)
-
-7. **Flexbox Basics**
-   - Introduction to Flexbox layout model.
-   - Learn properties like `display: flex`, `justify-content`, `align-items`, and `flex-direction`.
-   - Resources: CSS Tricks - [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
-
-8. **Mini Project**
-   - Create a styled version of the personal webpage from `1` section.
-   - Use various CSS properties learned throughout the week.
-   - Resources: Personal creativity and practice.
-   - Path: `css/introduction/`
-
-### 3: Advanced HTML & CSS Concepts
-**Goals:** Deepen understanding of HTML and CSS with advanced concepts and techniques.
-
-1. **1: Semantic HTML**
-   - Learn about semantic HTML tags: `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`.
-   - Resources: MDN Web Docs - [HTML5 Semantic Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section)
-
-2. **2: Responsive Design**
-   - Learn about media queries and responsive design principles.
-   - Understand how to create a responsive layout that adapts to different screen sizes.
-   - Resources: MDN Web Docs - [Responsive Design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)
-
-3. **Day 3: CSS Transitions and Animations**
-   - Learn how to add transitions (`transition-property`, `transition-duration`) and animations (`@keyframes`, `animation-name`).
-   - Resources: MDN Web Docs - [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions), [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
-
-4. **4: Advanced Selectors and Pseudo-classes**
-   - Learn about attribute selectors, pseudo-classes (`:hover`, `:nth-child`), and pseudo-elements (`::before`, `::after`).
-   - Resources: MDN Web Docs - [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), [Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), [Pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
-
-5. **5: CSS Frameworks**
-   - Introduction to popular CSS frameworks like Bootstrap and Tailwind CSS.
-   - Learn how to incorporate a framework into your project.
-   - Resources: Bootstrap - [Introduction](https://getbootstrap.com/docs/5.3/getting-started/introduction/), Tailwind CSS - [Getting Started](https://tailwindcss.com/docs)
-
-6. **6: Accessibility and Best Practices**
-   - Learn about web accessibility and how to make your site accessible.
-   - Understand best practices for writing clean and maintainable CSS.
-   - Resources: WebAIM - [Introduction to Web Accessibility](https://webaim.org/intro/), MDN Web Docs - [CSS Best Practices](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)
-
-7. **Mini Project**
-   - Create an article webpage from about "AI Revolution".
-   - Use HTML/CSS properties learned throughout the week. With images and videos if needed.
-   - Resources: Personal creativity and practice.
-   - Path: `article/ai/`
-
-### Additional Tips
-- **Practice Regularly:** Consistency is key to mastering HTML and CSS.
-- **Build Projects:** Apply what you learn by building small projects.
-- **Join Communities:** Engage with online communities (e.g., Stack Overflow, Reddit, Twitter) for support and inspiration.
-- **Stay Updated:** Web technologies evolve; keep learning and exploring new techniques.
-
-### 4 Mini CV PROJECT:
-#### Mini Project
-- Apply all you've learned on your webpage.
-- Create a CV page about yourselft.
-- Path: `careers/cv/`
-
-**Remeber:** a CV is:
-  ``` A CV – or Curriculum Vitae – is an itemized list of a person's entire education, publications, accomplishments, notable projects, awards, honors, achievements, and professional experiences. In one document you're trying to sum up your whole career in detail, focusing mainly on the academic side. ```
+## Bonus landing page Summary:
+This landing page is inspired by Apple’s clean and modern design, featuring a minimalistic layout, large hero section, and clear call-to-action buttons. It has been adapted and developed to showcase a real project management company, highlighting its services, products, and features. The design emphasizes clarity, professionalism, and visual appeal, while remaining responsive across devices. Images and content have been customized to represent the company’s offerings, making it a functional and attractive presentation for clients and visitors.
diff --git a/article/.DS_Store b/article/.DS_Store
diff --git a/article/ai/.DS_Store b/article/ai/.DS_Store
diff --git a/article/ai/images/.DS_Store b/article/ai/images/.DS_Store
diff --git a/article/ai/images/ai_future.jpg b/article/ai/images/ai_future.jpg
diff --git a/article/ai/images/ai_systems.jpg b/article/ai/images/ai_systems.jpg
diff --git a/article/ai/images/bg_dark.jpg b/article/ai/images/bg_dark.jpg
diff --git a/article/ai/images/bg_light.jpg b/article/ai/images/bg_light.jpg
diff --git a/article/ai/images/robot.glb b/article/ai/images/robot.glb
diff --git a/article/ai/index.html b/article/ai/index.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AI Revolution 🌍</title>
+
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Poppins:wght@700&display=swap" rel="stylesheet">
+
+  <!-- ✅ Load Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+
+  <!-- ✅ Tailwind Dark Mode Configuration -->
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ['Inter', 'ui-sans-serif', 'system-ui'], // for regular text
+            heading: ['Poppins', 'ui-sans-serif', 'system-ui'], // for headings
+          }
+        }
+      }
+    }
+  </script>
+
+  <!-- 3D Model Viewer -->
+  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
+
+  <!-- External CSS -->
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body class="bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-500">
+
+  <!-- Light/Dark Mode Toggle Button -->
+  <button id="modeToggle" aria-label="Toggle Light/Dark Mode"
+    class="fixed top-5 right-5 z-[9999] bg-gray-200 dark:bg-gray-700 text-lg p-2 rounded-full shadow hover:scale-105 transition">
+    🌓
+  </button>
+
+  <!-- Header -->
+  <header class="text-center py-8 bg-white dark:bg-gray-800 shadow-md transition">
+    <h1 class="font-heading text-4xl font-extrabold mb-2 animate-pulse">The AI Revolution 🤖</h1>
+    <p class="text-gray-600 dark:text-gray-300">
+      Exploring how Artificial Intelligence is reshaping our world
+    </p>
+  </header>
+
+  <!-- Navigation Bar -->
+  <nav class="bg-gray-100 dark:bg-gray-800 shadow-md sticky top-0 z-50 transition">
+    <ul class="flex justify-center gap-8 p-4">
+      <li><a href="#intro" class="hover:text-indigo-600 dark:hover:text-pink-400 transition">Introduction</a></li>
+      <li><a href="#impact" class="hover:text-indigo-600 dark:hover:text-pink-400 transition">Impact</a></li>
+      <li><a href="#future" class="hover:text-indigo-600 dark:hover:text-pink-400 transition">Future</a></li>
+    </ul>
+  </nav>
+
+  <!-- Floating 3D Robot -->
+  <model-viewer 
+     src="images/robot.glb" 
+     alt="3D Robot"
+     auto-rotate 
+     camera-controls 
+     class="fixed bottom-5 right-5 w-20 h-20 md:w-32 md:h-32 z-50">
+  </model-viewer>
+
+  <!-- Main Content -->
+  <main class="max-w-4xl mx-auto px-6 py-10">
+
+    <!-- Introduction Section -->
+    <section id="intro" class="mb-12 fade-in">
+      <article class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow hover:shadow-xl transition">
+        <h2 class="font-heading text-2xl font-bold mb-3 dark:text-pink-300">Introduction to AI</h2>
+        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
+          Artificial Intelligence (AI) refers to the simulation of human intelligence in machines. 
+          It enables computers to learn from data, recognise patterns, and make decisions — 
+          shaping industries from healthcare to transportation.
+        </p>
+        <img src="images/ai_systems.jpg" 
+             alt="AI concept" class="rounded-lg mt-4 shadow w-full max-w-xl h-auto mx-auto" />
+      </article>
+    </section>
+
+    <!-- Impact Section -->
+    <section id="impact" class="mb-12 fade-in">
+      <article class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow hover:shadow-xl transition">
+        <h2 class="font-heading text-2xl font-bold mb-3 dark:text-pink-300">AI’s Impact on Society</h2>
+        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
+          AI has already transformed our lives. From self-driving cars and smart assistants 
+          to medical diagnoses, it has improved accuracy, efficiency, and accessibility. 
+          However, it also raises ethical questions about privacy, bias, and employment.
+        </p>
+        <div class="relative pt-[56.25%]">
+         <iframe class="absolute top-0 left-0 w-full h-full rounded-lg shadow"
+          src="https://www.youtube.com/embed/KqLTfgZrEKw?si=GnxpLhmwhEy2WVap" 
+          title="YouTube video player" frameborder="0" 
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+          referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
+         </iframe>
+        </div>
+      </article>
+    </section>
+
+    <!-- Future Section -->
+    <section id="future" class="fade-in">
+      <article class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow hover:shadow-xl transition">
+        <h2 class="font-heading text-2xl font-bold mb-3 dark:text-pink-300">The Future of AI</h2>
+        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
+          The future of AI is both exciting and uncertain. With advancements in deep learning, 
+          robotics, and neural networks, we are moving closer to a world where AI can augment 
+          human creativity and decision-making in powerful ways.
+        </p>
+        <img src="images/ai_future.jpg" 
+             alt="Future AI" class="rounded-lg mt-4 shadow w-full max-w-xl h-auto mx-auto" />
+      </article>
+    </section>
+
+  </main>
+
+  <!-- Footer -->
+  <footer class="bg-gray-900 dark:bg-gray-950 text-gray-300 dark:text-gray-400 py-6 text-center mt-10">
+    <p>© 2025 AI Insights | Built with ❤️, Tailwind CSS & CSS Animations</p>
+  </footer>
+
+  <!-- ✅ JavaScript -->
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      // Toggle between light and dark mode
+      const toggle = document.getElementById("modeToggle");
+      if (toggle) {
+        toggle.addEventListener("click", () => {
+          document.documentElement.classList.toggle("dark");
+          console.log("🌗 Mode toggled");
+        });
+      }
+
+      // Fade-in animation for sections
+      const faders = document.querySelectorAll(".fade-in");
+      const appearOptions = { threshold: 0.3, rootMargin: "0px 0px -50px 0px" };
+      const appearOnScroll = new IntersectionObserver((entries, observer) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("appear");
+            observer.unobserve(entry.target);
+          }
+        });
+      }, appearOptions);
+      faders.forEach((fader) => appearOnScroll.observe(fader));
+    });
+  </script>
+
+</body>
+</html>
diff --git a/article/ai/style.css b/article/ai/style.css
@@ -0,0 +1,39 @@
+/* 🌤 Default (Light Mode) Background */
+body {
+  background-image: url("images/bg_light.jpg");
+  background-size: cover;          /* Make the image fill the entire page */
+  background-position: center;     /* Center the background image */
+  background-repeat: no-repeat;    /* Prevent the image from repeating */
+  background-attachment: fixed;    /* Keep the image fixed while scrolling */
+  min-height: 100vh;               /* Ensure it fills at least the full viewport height */
+  transition: background-image 0.5s ease-in-out; /* Smooth transition when switching modes */
+}
+
+/* 🌙 Dark Mode Background */
+.dark body {
+  background-image: url("images/bg_dark.jpg");
+}
+
+/* 🤖 Robot waving animation */
+@keyframes robot-wave {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  25% { transform: translateY(-5px) rotate(-5deg); }
+  50% { transform: translateY(0) rotate(5deg); }
+  75% { transform: translateY(-5px) rotate(-5deg); }
+}
+
+.robot {
+  animation: robot-wave 5s infinite ease-in-out; /* Continuous waving animation */
+}
+
+/* ✨ Fade-in effect when scrolling */
+.fade-in {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+}
+
+.fade-in.appear {
+  opacity: 1;
+  transform: translateY(0);
+}