From a1abdb8fb3ffbbcd34d165bc9ca447fff1d23933 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Wed, 11 Dec 2024 19:39:30 +0430
Subject: [PATCH 01/39] Elyas Sharifi

done all
---
 4-Exercises/Lesson-1/1a.Click.html        | 1 +
 4-Exercises/Lesson-1/1b.buttons.html      | 2 ++
 4-Exercises/Lesson-1/1c.Hello,world.html  | 1 +
 4-Exercises/Lesson-1/1d.p-and-p.html      | 2 ++
 4-Exercises/Lesson-1/1e.googlelink.html   | 1 +
 4-Exercises/Lesson-1/1g.backtoamazan.html | 5 +++++
 6 files changed, 12 insertions(+)
 create mode 100644 4-Exercises/Lesson-1/1a.Click.html
 create mode 100644 4-Exercises/Lesson-1/1b.buttons.html
 create mode 100644 4-Exercises/Lesson-1/1c.Hello,world.html
 create mode 100644 4-Exercises/Lesson-1/1d.p-and-p.html
 create mode 100644 4-Exercises/Lesson-1/1e.googlelink.html
 create mode 100644 4-Exercises/Lesson-1/1g.backtoamazan.html

diff --git a/4-Exercises/Lesson-1/1a.Click.html b/4-Exercises/Lesson-1/1a.Click.html
new file mode 100644
index 0000000..5d196e5
--- /dev/null
+++ b/4-Exercises/Lesson-1/1a.Click.html
@@ -0,0 +1 @@
+<button>Click</button>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1b.buttons.html b/4-Exercises/Lesson-1/1b.buttons.html
new file mode 100644
index 0000000..1d01259
--- /dev/null
+++ b/4-Exercises/Lesson-1/1b.buttons.html
@@ -0,0 +1,2 @@
+<button>Elyas</button>
+<button>Beans</button>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1c.Hello,world.html b/4-Exercises/Lesson-1/1c.Hello,world.html
new file mode 100644
index 0000000..01cfcd7
--- /dev/null
+++ b/4-Exercises/Lesson-1/1c.Hello,world.html
@@ -0,0 +1 @@
+<p>Hello, World!</p>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1d.p-and-p.html b/4-Exercises/Lesson-1/1d.p-and-p.html
new file mode 100644
index 0000000..e667f0e
--- /dev/null
+++ b/4-Exercises/Lesson-1/1d.p-and-p.html
@@ -0,0 +1,2 @@
+<p>Hello, World!</p>
+<p>Today, I did some amazing things</p>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1e.googlelink.html b/4-Exercises/Lesson-1/1e.googlelink.html
new file mode 100644
index 0000000..433ec92
--- /dev/null
+++ b/4-Exercises/Lesson-1/1e.googlelink.html
@@ -0,0 +1 @@
+<a href="https://www.google.com/" target="_blank">Search with Google</a>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1g.backtoamazan.html b/4-Exercises/Lesson-1/1g.backtoamazan.html
new file mode 100644
index 0000000..9d474a4
--- /dev/null
+++ b/4-Exercises/Lesson-1/1g.backtoamazan.html
@@ -0,0 +1,5 @@
+<a href="https://www.amazon.com/">Back to Amazon</a>
+<p>Nick Black Running Shoes</p>
+<p>$39-in stock</p>
+<p>Free delivery tomorrow</p>
+<button>Add to cart</button> <button>Buy now</button>
\ No newline at end of file

From 66a846faae49dbd33d4c5e784a8c0da1dafdc6d3 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Thu, 19 Dec 2024 14:23:41 +0430
Subject: [PATCH 02/39] 12

---
 4-Exercises/Lesson-1/Lesson-2/challenge.html  | 23 ++++++
 .../Lesson-1/Lesson-2/popular.buttons.html    | 75 +++++++++++++++++++
 2 files changed, 98 insertions(+)
 create mode 100644 4-Exercises/Lesson-1/Lesson-2/challenge.html
 create mode 100644 4-Exercises/Lesson-1/Lesson-2/popular.buttons.html

diff --git a/4-Exercises/Lesson-1/Lesson-2/challenge.html b/4-Exercises/Lesson-1/Lesson-2/challenge.html
new file mode 100644
index 0000000..709de17
--- /dev/null
+++ b/4-Exercises/Lesson-1/Lesson-2/challenge.html
@@ -0,0 +1,23 @@
+<a href="">Back to Amazon</a>
+<p class="title">Nike Black Running Shoes</p>
+<p class="price">$39 - in stock</p>
+<p>Free delivery tomorrow</p>
+<button>Add to Cart</button>
+<button>Buy now</button>
+
+	
+<style>
+    a{
+        color: rgb(0, 113, 133);
+        font-size: 13px;
+    }
+    .title {
+        font-size: 20px;
+        font-weight: bold;
+    }
+    .price {
+        color: rgb(0, 118, 0);
+        font-size: 10px;
+
+    }
+</style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-2/popular.buttons.html b/4-Exercises/Lesson-1/Lesson-2/popular.buttons.html
new file mode 100644
index 0000000..a13e141
--- /dev/null
+++ b/4-Exercises/Lesson-1/Lesson-2/popular.buttons.html
@@ -0,0 +1,75 @@
+<Button style="
+    background-color: black;
+    color: white;
+    padding: 8px 10px;
+    font-size: 12px;
+    display: block;
+    font-family: Roboto, Arial">
+    Request now
+</Button>
+
+<button style="
+    background-color: rgb(243, 243, 48);
+    color: rgb(26, 25, 25);
+    margin-top: 40px;
+    padding: 10px 30px;
+    border: none;
+    border-radius: 30px;
+    font-size: 15px;
+    display: block">
+    Add to Cart
+</button>
+
+<button style="
+    background-color: rgb(102, 207, 102);
+    margin-top: 40px;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    display: block;">
+    Sing up
+</button>
+<button style="
+    background-color: rgb(125, 20, 185);
+    color: white;
+    border: none;
+    margin-top: 40px;
+    border-radius: 5px;
+    padding: 8px 15px;
+    margin-right: 8px;">
+    Get started
+</button>
+<button style="
+    border: 1px solid rgb(46, 85, 97);
+    background: white;
+    padding: 7px 15px;
+    border-radius: 2px;
+    margin-right: 100px;
+    color: rgb(3, 67, 87);">
+    Download
+</button>
+
+<button style="
+    background-color: blue;
+    color: white;
+    padding: 8px 18px;
+    margin-top: 40px;
+    border-radius: 30px;
+    border: none;
+    font-size: 15px;
+    font-weight: 500;
+    ">
+    Apply on company website
+</button>
+<button style="
+    background-color: white;
+    border-radius: 30px;
+    border: 1px solid lightskyblue;
+    color: lightskyblue;
+    font-size: 15px;
+    padding: 8px 18px;
+    margin-left: 5px;">
+    Save
+</button>
+

From eb7e68a0de27b1515d3d767c1c4e4672571aed89 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Thu, 19 Dec 2024 15:14:52 +0430
Subject: [PATCH 03/39] 1

---
 4-Exercises/Lesson-1/Lesson-2/challenge.html  | 39 ++++++++++++----
 .../Lesson-1/Lesson-3/challenge-exercise.html | 44 +++++++++++++++++++
 4-Exercises/Lesson-1/Lesson-3/opacity.html    | 15 +++++++
 4-Exercises/Lesson-1/Lesson-3/shadow.html     | 16 +++++++
 4 files changed, 105 insertions(+), 9 deletions(-)
 create mode 100644 4-Exercises/Lesson-1/Lesson-3/challenge-exercise.html
 create mode 100644 4-Exercises/Lesson-1/Lesson-3/opacity.html
 create mode 100644 4-Exercises/Lesson-1/Lesson-3/shadow.html

diff --git a/4-Exercises/Lesson-1/Lesson-2/challenge.html b/4-Exercises/Lesson-1/Lesson-2/challenge.html
index 709de17..2f7d50a 100644
--- a/4-Exercises/Lesson-1/Lesson-2/challenge.html
+++ b/4-Exercises/Lesson-1/Lesson-2/challenge.html
@@ -1,23 +1,44 @@
-<a href="">Back to Amazon</a>
+<a href="https://www.amazon.com/"  target="_blank">Back to Amazon</a>
 <p class="title">Nike Black Running Shoes</p>
-<p class="price">$39 - in stock</p>
-<p>Free delivery tomorrow</p>
-<button>Add to Cart</button>
-<button>Buy now</button>
+<p class="price">$39 &#45; in stock.</p>
+<p class="short-text">Free delivery tomorrow.</p>
+<button class="adding">Add to Cart</button>
+<button class="adding buying">Buy now</button>
 
 	
 <style>
     a{
         color: rgb(0, 113, 133);
-        font-size: 13px;
+        font-size: 20px;
     }
     .title {
         font-size: 20px;
-        font-weight: bold;
+        font-weight: bolder;
     }
     .price {
         color: rgb(0, 118, 0);
-        font-size: 10px;
-
+        font-size: 13px;
+        font-weight: bold;
+    }
+    .short-text{
+        font-size: 15px;
+        line-height: 12px;
+    }
+    .adding {
+        font-size: 15px;
+        background-color: rgb(255, 216, 20);
+        border-radius: 30px;
+        border: none;
+        padding: 10px 30px;
+        margin-top: 15px;
+        margin-right: 13px;
+        font-family: arial;
+    }
+    .adding:hover {
+        cursor: pointer;
+    }
+    .buying {
+        padding: 10px 35px;
+        background-color: rgb(255, 164, 28);
     }
 </style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-3/challenge-exercise.html b/4-Exercises/Lesson-1/Lesson-3/challenge-exercise.html
new file mode 100644
index 0000000..2f7d50a
--- /dev/null
+++ b/4-Exercises/Lesson-1/Lesson-3/challenge-exercise.html
@@ -0,0 +1,44 @@
+<a href="https://www.amazon.com/"  target="_blank">Back to Amazon</a>
+<p class="title">Nike Black Running Shoes</p>
+<p class="price">$39 &#45; in stock.</p>
+<p class="short-text">Free delivery tomorrow.</p>
+<button class="adding">Add to Cart</button>
+<button class="adding buying">Buy now</button>
+
+	
+<style>
+    a{
+        color: rgb(0, 113, 133);
+        font-size: 20px;
+    }
+    .title {
+        font-size: 20px;
+        font-weight: bolder;
+    }
+    .price {
+        color: rgb(0, 118, 0);
+        font-size: 13px;
+        font-weight: bold;
+    }
+    .short-text{
+        font-size: 15px;
+        line-height: 12px;
+    }
+    .adding {
+        font-size: 15px;
+        background-color: rgb(255, 216, 20);
+        border-radius: 30px;
+        border: none;
+        padding: 10px 30px;
+        margin-top: 15px;
+        margin-right: 13px;
+        font-family: arial;
+    }
+    .adding:hover {
+        cursor: pointer;
+    }
+    .buying {
+        padding: 10px 35px;
+        background-color: rgb(255, 164, 28);
+    }
+</style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-3/opacity.html b/4-Exercises/Lesson-1/Lesson-3/opacity.html
new file mode 100644
index 0000000..1daf1be
--- /dev/null
+++ b/4-Exercises/Lesson-1/Lesson-3/opacity.html
@@ -0,0 +1,15 @@
+<button>Request now</button>
+
+<style>
+    button {
+        color: white;
+        background: black;
+        padding: 15px;
+        border-radius: 10px;
+        transition: opacity 1s;
+    }
+    button:hover {
+        cursor: pointer;
+        opacity: 0.8;
+    }
+</style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-3/shadow.html b/4-Exercises/Lesson-1/Lesson-3/shadow.html
new file mode 100644
index 0000000..32e948c
--- /dev/null
+++ b/4-Exercises/Lesson-1/Lesson-3/shadow.html
@@ -0,0 +1,16 @@
+<button>Sign up</button>
+
+<style>
+    button {
+        background-color: green;
+        color: white;
+        font-size: 12px;
+        border-radius: 5px;
+        font-weight: 800;
+        padding: 10px 20px;
+        border: none;
+    }
+    button:hover {
+        box-shadow: 0px 4px 10px 0px #80808070;
+    }
+</style>
\ No newline at end of file

From b0c1193e8bde0a76b36249ce3ffafb8ff681e644 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Thu, 19 Dec 2024 17:20:38 +0430
Subject: [PATCH 04/39] HTML CSS

---
 .../Lesson-1/Lesson-3/challenge-exercise.html | 20 +++++++++++---
 .../Lesson-1/Lesson-4/challenges/Click.html   | 16 ++++++++++++
 .../Lesson-1/Lesson-4/challenges/Number.html  | 17 ++++++++++++
 .../Lesson-1/Lesson-4/challenges/Stretch.html | 15 +++++++++++
 .../Lesson-4/challenges/pagination.html       | 26 +++++++++++++++++++
 5 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 4-Exercises/Lesson-1/Lesson-4/challenges/Click.html
 create mode 100644 4-Exercises/Lesson-1/Lesson-4/challenges/Number.html
 create mode 100644 4-Exercises/Lesson-1/Lesson-4/challenges/Stretch.html
 create mode 100644 4-Exercises/Lesson-1/Lesson-4/challenges/pagination.html

diff --git a/4-Exercises/Lesson-1/Lesson-3/challenge-exercise.html b/4-Exercises/Lesson-1/Lesson-3/challenge-exercise.html
index 2f7d50a..088abd9 100644
--- a/4-Exercises/Lesson-1/Lesson-3/challenge-exercise.html
+++ b/4-Exercises/Lesson-1/Lesson-3/challenge-exercise.html
@@ -11,17 +11,21 @@
         color: rgb(0, 113, 133);
         font-size: 20px;
     }
+    a:hover {
+        color: red;
+        transition: color 0.5s;
+    }
     .title {
-        font-size: 20px;
+        font-size: 35px;
         font-weight: bolder;
     }
     .price {
         color: rgb(0, 118, 0);
-        font-size: 13px;
+        font-size: 20px;
         font-weight: bold;
     }
     .short-text{
-        font-size: 15px;
+        font-size: 23px;
         line-height: 12px;
     }
     .adding {
@@ -36,9 +40,19 @@
     }
     .adding:hover {
         cursor: pointer;
+        background: rgb(196, 164, 8);
+    }
+    .adding:active {
+        opacity: 0.5;
     }
     .buying {
         padding: 10px 35px;
         background-color: rgb(255, 164, 28);
     }
+    .buying:hover {
+        background: rgb(255, 165, 120);
+    }
+    .buying:active {
+        opacity: 0.5;
+    }
 </style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-4/challenges/Click.html b/4-Exercises/Lesson-1/Lesson-4/challenges/Click.html
new file mode 100644
index 0000000..70c0ea2
--- /dev/null
+++ b/4-Exercises/Lesson-1/Lesson-4/challenges/Click.html
@@ -0,0 +1,16 @@
+<button>Shadow</button>
+
+<style>
+    button {
+        background: green;
+        color: #ffffff;
+        box-shadow: 4px 4px 5px gray;
+        padding: 5px 10px;
+        font-size: 20px;
+        border: none;
+    }
+    button:active {
+        box-shadow: none;
+        margin: 8px 0 0 8px;
+    }
+</style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-4/challenges/Number.html b/4-Exercises/Lesson-1/Lesson-4/challenges/Number.html
new file mode 100644
index 0000000..f384dc1
--- /dev/null
+++ b/4-Exercises/Lesson-1/Lesson-4/challenges/Number.html
@@ -0,0 +1,17 @@
+<button>One</button>
+<button>Two</button>
+<button>Three</button>
+
+<style>
+    button {
+        background: green;
+        color: white;
+        padding: 10px 20px;
+        border: none;
+        margin: 10px 10px;
+        transition: padding 0.5s ease;
+    }
+    button:hover {
+        padding: 10px 25px;
+    }
+</style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-4/challenges/Stretch.html b/4-Exercises/Lesson-1/Lesson-4/challenges/Stretch.html
new file mode 100644
index 0000000..16535de
--- /dev/null
+++ b/4-Exercises/Lesson-1/Lesson-4/challenges/Stretch.html
@@ -0,0 +1,15 @@
+<button>Stretch</button>
+
+<style>
+    button {
+        color: white;
+        background-color: green;
+        padding: 14px 14px;
+        border: none;
+        font-size: 17px;
+        transition: padding 0.9s ease-in-out;
+    }
+    button:hover {
+        padding: 20px 40px;   
+    }
+</style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-4/challenges/pagination.html b/4-Exercises/Lesson-1/Lesson-4/challenges/pagination.html
new file mode 100644
index 0000000..8f2af33
--- /dev/null
+++ b/4-Exercises/Lesson-1/Lesson-4/challenges/pagination.html
@@ -0,0 +1,26 @@
+<button class="back">Back</button>
+<a href="#">1</a>
+<a href="#">2</a>
+<a href="#">3</a>
+<a href="#">4</a>
+<a href="#">5</a>
+<button  class="next">Next</button>
+
+<style>
+    button {
+        padding: 4px 14px;
+        font-size: 20px;
+        margin-top: 10px;
+    }
+    a {
+        font-size: 23px;
+        padding: 0 5px;
+        color: rgb(105, 23, 105);
+    }
+    .back {
+        margin-right: 10px;
+    }
+    .next {
+        margin-left: 10px;
+    }
+</style>
\ No newline at end of file

From 40b15cdf4fd6c460ba74f166c3286e41094131d9 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Thu, 19 Dec 2024 23:08:07 +0430
Subject: [PATCH 05/39] 1

---
 4-Exercises/Lesson-1/1a.Click.html            | 12 ++-
 4-Exercises/Lesson-1/1b.buttons.html          | 14 ++-
 4-Exercises/Lesson-1/1c.Hello,world.html      | 12 ++-
 4-Exercises/Lesson-1/1d.p-and-p.html          | 14 ++-
 4-Exercises/Lesson-1/1e.googlelink.html       | 12 ++-
 4-Exercises/Lesson-1/1g.backtoamazan.html     | 20 +++--
 .../Lesson-1/Lesson-2/popular.buttons.html    | 75 ----------------
 .../Lesson-1/Lesson-3/challenge-exercise.html | 58 -------------
 4-Exercises/Lesson-1/Lesson-3/opacity.html    | 15 ----
 4-Exercises/Lesson-1/Lesson-3/shadow.html     | 16 ----
 .../Lesson-1/Lesson-4/challenges/Click.html   | 16 ----
 .../Lesson-1/Lesson-4/challenges/Number.html  | 17 ----
 .../Lesson-1/Lesson-4/challenges/Stretch.html | 15 ----
 .../Lesson-4/challenges/pagination.html       | 26 ------
 .../{Lesson-1 => }/Lesson-2/challenge.html    | 26 ++++--
 4-Exercises/Lesson-2/popular.buttons.html     | 86 +++++++++++++++++++
 4-Exercises/Lesson-3/challenge-exercise.html  | 69 +++++++++++++++
 4-Exercises/Lesson-3/opacity.html             | 25 ++++++
 4-Exercises/Lesson-3/shadow.html              | 25 ++++++
 4-Exercises/Lesson-4/Click.html               | 25 ++++++
 4-Exercises/Lesson-4/Number.html              | 26 ++++++
 4-Exercises/Lesson-4/Stretch.html             | 24 ++++++
 4-Exercises/Lesson-4/pagination.html          | 35 ++++++++
 4-Exercises/Lesson-5/Challenges/Purchase.html | 61 +++++++++++++
 .../Lesson-5/Challenges/freeCodeCamp.html     | 48 +++++++++++
 .../Challenges/simple-conversion.html         | 47 ++++++++++
 4-Exercises/Lesson-5/Verdana.html             | 65 ++++++++++++++
 4-Exercises/Lesson-6/index.html               | 18 ++++
 4-Exercises/Lesson-6/style.css                | 18 ++++
 29 files changed, 661 insertions(+), 259 deletions(-)
 delete mode 100644 4-Exercises/Lesson-1/Lesson-2/popular.buttons.html
 delete mode 100644 4-Exercises/Lesson-1/Lesson-3/challenge-exercise.html
 delete mode 100644 4-Exercises/Lesson-1/Lesson-3/opacity.html
 delete mode 100644 4-Exercises/Lesson-1/Lesson-3/shadow.html
 delete mode 100644 4-Exercises/Lesson-1/Lesson-4/challenges/Click.html
 delete mode 100644 4-Exercises/Lesson-1/Lesson-4/challenges/Number.html
 delete mode 100644 4-Exercises/Lesson-1/Lesson-4/challenges/Stretch.html
 delete mode 100644 4-Exercises/Lesson-1/Lesson-4/challenges/pagination.html
 rename 4-Exercises/{Lesson-1 => }/Lesson-2/challenge.html (57%)
 create mode 100644 4-Exercises/Lesson-2/popular.buttons.html
 create mode 100644 4-Exercises/Lesson-3/challenge-exercise.html
 create mode 100644 4-Exercises/Lesson-3/opacity.html
 create mode 100644 4-Exercises/Lesson-3/shadow.html
 create mode 100644 4-Exercises/Lesson-4/Click.html
 create mode 100644 4-Exercises/Lesson-4/Number.html
 create mode 100644 4-Exercises/Lesson-4/Stretch.html
 create mode 100644 4-Exercises/Lesson-4/pagination.html
 create mode 100644 4-Exercises/Lesson-5/Challenges/Purchase.html
 create mode 100644 4-Exercises/Lesson-5/Challenges/freeCodeCamp.html
 create mode 100644 4-Exercises/Lesson-5/Challenges/simple-conversion.html
 create mode 100644 4-Exercises/Lesson-5/Verdana.html
 create mode 100644 4-Exercises/Lesson-6/index.html
 create mode 100644 4-Exercises/Lesson-6/style.css

diff --git a/4-Exercises/Lesson-1/1a.Click.html b/4-Exercises/Lesson-1/1a.Click.html
index 5d196e5..5e6027a 100644
--- a/4-Exercises/Lesson-1/1a.Click.html
+++ b/4-Exercises/Lesson-1/1a.Click.html
@@ -1 +1,11 @@
-<button>Click</button>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Button</title>
+</head>
+<body>
+    <button>Click</button>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1b.buttons.html b/4-Exercises/Lesson-1/1b.buttons.html
index 1d01259..e65bcfc 100644
--- a/4-Exercises/Lesson-1/1b.buttons.html
+++ b/4-Exercises/Lesson-1/1b.buttons.html
@@ -1,2 +1,12 @@
-<button>Elyas</button>
-<button>Beans</button>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Buttons</title>
+</head>
+<body>
+    <button>Elyas</button>
+    <button>Beans</button>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1c.Hello,world.html b/4-Exercises/Lesson-1/1c.Hello,world.html
index 01cfcd7..f07400b 100644
--- a/4-Exercises/Lesson-1/1c.Hello,world.html
+++ b/4-Exercises/Lesson-1/1c.Hello,world.html
@@ -1 +1,11 @@
-<p>Hello, World!</p>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Paragraph</title>
+</head>
+<body>
+    <p>Hello, World!</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1d.p-and-p.html b/4-Exercises/Lesson-1/1d.p-and-p.html
index e667f0e..bd5ec78 100644
--- a/4-Exercises/Lesson-1/1d.p-and-p.html
+++ b/4-Exercises/Lesson-1/1d.p-and-p.html
@@ -1,2 +1,12 @@
-<p>Hello, World!</p>
-<p>Today, I did some amazing things</p>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Paragraphs</title>
+</head>
+<body>
+    <p>Hello, World!</p>
+    <p>Today, I did some amazing things</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1e.googlelink.html b/4-Exercises/Lesson-1/1e.googlelink.html
index 433ec92..4c154e6 100644
--- a/4-Exercises/Lesson-1/1e.googlelink.html
+++ b/4-Exercises/Lesson-1/1e.googlelink.html
@@ -1 +1,11 @@
-<a href="https://www.google.com/" target="_blank">Search with Google</a>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Google</title>
+</head>
+<body>
+    <a href="https://www.google.com/" target="_blank">Search with Google</a>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/1g.backtoamazan.html b/4-Exercises/Lesson-1/1g.backtoamazan.html
index 9d474a4..5b6a908 100644
--- a/4-Exercises/Lesson-1/1g.backtoamazan.html
+++ b/4-Exercises/Lesson-1/1g.backtoamazan.html
@@ -1,5 +1,15 @@
-<a href="https://www.amazon.com/">Back to Amazon</a>
-<p>Nick Black Running Shoes</p>
-<p>$39-in stock</p>
-<p>Free delivery tomorrow</p>
-<button>Add to cart</button> <button>Buy now</button>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Amazone</title>
+</head>
+<body>
+    <a href="https://www.amazon.com/">Back to Amazon</a>
+    <p>Nick Black Running Shoes</p>
+    <p>$39-in stock</p>
+    <p>Free delivery tomorrow</p>
+    <button>Add to cart</button> <button>Buy now</button>    
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-2/popular.buttons.html b/4-Exercises/Lesson-1/Lesson-2/popular.buttons.html
deleted file mode 100644
index a13e141..0000000
--- a/4-Exercises/Lesson-1/Lesson-2/popular.buttons.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<Button style="
-    background-color: black;
-    color: white;
-    padding: 8px 10px;
-    font-size: 12px;
-    display: block;
-    font-family: Roboto, Arial">
-    Request now
-</Button>
-
-<button style="
-    background-color: rgb(243, 243, 48);
-    color: rgb(26, 25, 25);
-    margin-top: 40px;
-    padding: 10px 30px;
-    border: none;
-    border-radius: 30px;
-    font-size: 15px;
-    display: block">
-    Add to Cart
-</button>
-
-<button style="
-    background-color: rgb(102, 207, 102);
-    margin-top: 40px;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 5px;
-    display: block;">
-    Sing up
-</button>
-<button style="
-    background-color: rgb(125, 20, 185);
-    color: white;
-    border: none;
-    margin-top: 40px;
-    border-radius: 5px;
-    padding: 8px 15px;
-    margin-right: 8px;">
-    Get started
-</button>
-<button style="
-    border: 1px solid rgb(46, 85, 97);
-    background: white;
-    padding: 7px 15px;
-    border-radius: 2px;
-    margin-right: 100px;
-    color: rgb(3, 67, 87);">
-    Download
-</button>
-
-<button style="
-    background-color: blue;
-    color: white;
-    padding: 8px 18px;
-    margin-top: 40px;
-    border-radius: 30px;
-    border: none;
-    font-size: 15px;
-    font-weight: 500;
-    ">
-    Apply on company website
-</button>
-<button style="
-    background-color: white;
-    border-radius: 30px;
-    border: 1px solid lightskyblue;
-    color: lightskyblue;
-    font-size: 15px;
-    padding: 8px 18px;
-    margin-left: 5px;">
-    Save
-</button>
-
diff --git a/4-Exercises/Lesson-1/Lesson-3/challenge-exercise.html b/4-Exercises/Lesson-1/Lesson-3/challenge-exercise.html
deleted file mode 100644
index 088abd9..0000000
--- a/4-Exercises/Lesson-1/Lesson-3/challenge-exercise.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<a href="https://www.amazon.com/"  target="_blank">Back to Amazon</a>
-<p class="title">Nike Black Running Shoes</p>
-<p class="price">$39 &#45; in stock.</p>
-<p class="short-text">Free delivery tomorrow.</p>
-<button class="adding">Add to Cart</button>
-<button class="adding buying">Buy now</button>
-
-	
-<style>
-    a{
-        color: rgb(0, 113, 133);
-        font-size: 20px;
-    }
-    a:hover {
-        color: red;
-        transition: color 0.5s;
-    }
-    .title {
-        font-size: 35px;
-        font-weight: bolder;
-    }
-    .price {
-        color: rgb(0, 118, 0);
-        font-size: 20px;
-        font-weight: bold;
-    }
-    .short-text{
-        font-size: 23px;
-        line-height: 12px;
-    }
-    .adding {
-        font-size: 15px;
-        background-color: rgb(255, 216, 20);
-        border-radius: 30px;
-        border: none;
-        padding: 10px 30px;
-        margin-top: 15px;
-        margin-right: 13px;
-        font-family: arial;
-    }
-    .adding:hover {
-        cursor: pointer;
-        background: rgb(196, 164, 8);
-    }
-    .adding:active {
-        opacity: 0.5;
-    }
-    .buying {
-        padding: 10px 35px;
-        background-color: rgb(255, 164, 28);
-    }
-    .buying:hover {
-        background: rgb(255, 165, 120);
-    }
-    .buying:active {
-        opacity: 0.5;
-    }
-</style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-3/opacity.html b/4-Exercises/Lesson-1/Lesson-3/opacity.html
deleted file mode 100644
index 1daf1be..0000000
--- a/4-Exercises/Lesson-1/Lesson-3/opacity.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<button>Request now</button>
-
-<style>
-    button {
-        color: white;
-        background: black;
-        padding: 15px;
-        border-radius: 10px;
-        transition: opacity 1s;
-    }
-    button:hover {
-        cursor: pointer;
-        opacity: 0.8;
-    }
-</style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-3/shadow.html b/4-Exercises/Lesson-1/Lesson-3/shadow.html
deleted file mode 100644
index 32e948c..0000000
--- a/4-Exercises/Lesson-1/Lesson-3/shadow.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<button>Sign up</button>
-
-<style>
-    button {
-        background-color: green;
-        color: white;
-        font-size: 12px;
-        border-radius: 5px;
-        font-weight: 800;
-        padding: 10px 20px;
-        border: none;
-    }
-    button:hover {
-        box-shadow: 0px 4px 10px 0px #80808070;
-    }
-</style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-4/challenges/Click.html b/4-Exercises/Lesson-1/Lesson-4/challenges/Click.html
deleted file mode 100644
index 70c0ea2..0000000
--- a/4-Exercises/Lesson-1/Lesson-4/challenges/Click.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<button>Shadow</button>
-
-<style>
-    button {
-        background: green;
-        color: #ffffff;
-        box-shadow: 4px 4px 5px gray;
-        padding: 5px 10px;
-        font-size: 20px;
-        border: none;
-    }
-    button:active {
-        box-shadow: none;
-        margin: 8px 0 0 8px;
-    }
-</style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-4/challenges/Number.html b/4-Exercises/Lesson-1/Lesson-4/challenges/Number.html
deleted file mode 100644
index f384dc1..0000000
--- a/4-Exercises/Lesson-1/Lesson-4/challenges/Number.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<button>One</button>
-<button>Two</button>
-<button>Three</button>
-
-<style>
-    button {
-        background: green;
-        color: white;
-        padding: 10px 20px;
-        border: none;
-        margin: 10px 10px;
-        transition: padding 0.5s ease;
-    }
-    button:hover {
-        padding: 10px 25px;
-    }
-</style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-4/challenges/Stretch.html b/4-Exercises/Lesson-1/Lesson-4/challenges/Stretch.html
deleted file mode 100644
index 16535de..0000000
--- a/4-Exercises/Lesson-1/Lesson-4/challenges/Stretch.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<button>Stretch</button>
-
-<style>
-    button {
-        color: white;
-        background-color: green;
-        padding: 14px 14px;
-        border: none;
-        font-size: 17px;
-        transition: padding 0.9s ease-in-out;
-    }
-    button:hover {
-        padding: 20px 40px;   
-    }
-</style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-4/challenges/pagination.html b/4-Exercises/Lesson-1/Lesson-4/challenges/pagination.html
deleted file mode 100644
index 8f2af33..0000000
--- a/4-Exercises/Lesson-1/Lesson-4/challenges/pagination.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<button class="back">Back</button>
-<a href="#">1</a>
-<a href="#">2</a>
-<a href="#">3</a>
-<a href="#">4</a>
-<a href="#">5</a>
-<button  class="next">Next</button>
-
-<style>
-    button {
-        padding: 4px 14px;
-        font-size: 20px;
-        margin-top: 10px;
-    }
-    a {
-        font-size: 23px;
-        padding: 0 5px;
-        color: rgb(105, 23, 105);
-    }
-    .back {
-        margin-right: 10px;
-    }
-    .next {
-        margin-left: 10px;
-    }
-</style>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-1/Lesson-2/challenge.html b/4-Exercises/Lesson-2/challenge.html
similarity index 57%
rename from 4-Exercises/Lesson-1/Lesson-2/challenge.html
rename to 4-Exercises/Lesson-2/challenge.html
index 2f7d50a..477ed4f 100644
--- a/4-Exercises/Lesson-1/Lesson-2/challenge.html
+++ b/4-Exercises/Lesson-2/challenge.html
@@ -1,11 +1,8 @@
-<a href="https://www.amazon.com/"  target="_blank">Back to Amazon</a>
-<p class="title">Nike Black Running Shoes</p>
-<p class="price">$39 &#45; in stock.</p>
-<p class="short-text">Free delivery tomorrow.</p>
-<button class="adding">Add to Cart</button>
-<button class="adding buying">Buy now</button>
-
-	
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
     a{
         color: rgb(0, 113, 133);
@@ -41,4 +38,15 @@
         padding: 10px 35px;
         background-color: rgb(255, 164, 28);
     }
-</style>
\ No newline at end of file
+</style>
+    <title>Challenge Exercise</title>
+</head>
+<body>
+    <a href="https://www.amazon.com/"  target="_blank">Back to Amazon</a>
+    <p class="title">Nike Black Running Shoes</p>
+    <p class="price">$39 &#45; in stock.</p>
+    <p class="short-text">Free delivery tomorrow.</p>
+    <button class="adding">Add to Cart</button>
+    <button class="adding buying">Buy now</button>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-2/popular.buttons.html b/4-Exercises/Lesson-2/popular.buttons.html
new file mode 100644
index 0000000..0823017
--- /dev/null
+++ b/4-Exercises/Lesson-2/popular.buttons.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Popular Butttons</title>
+</head>
+<body>
+    <Button style="
+        background-color: black;
+        color: white;
+        padding: 8px 10px;
+        font-size: 12px;
+        display: block;
+        font-family: Roboto, Arial">
+        Request now
+    </Button>
+
+    <button style="
+        background-color: rgb(243, 243, 48);
+        color: rgb(26, 25, 25);
+        margin-top: 40px;
+        padding: 10px 30px;
+        border: none;
+        border-radius: 30px;
+        font-size: 15px;
+        display: block">
+        Add to Cart
+    </button>
+
+    <button style="
+        background-color: rgb(102, 207, 102);
+        margin-top: 40px;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 5px;
+        display: block;">
+        Sing up
+    </button>
+    <button style="
+        background-color: rgb(125, 20, 185);
+        color: white;
+        border: none;
+        margin-top: 40px;
+        border-radius: 5px;
+        padding: 8px 15px;
+        margin-right: 8px;">
+        Get started
+    </button>
+    <button style="
+        border: 1px solid rgb(46, 85, 97);
+        background: white;
+        padding: 7px 15px;
+        border-radius: 2px;
+        margin-right: 100px;
+        color: rgb(3, 67, 87);">
+        Download
+    </button>
+
+    <button style="
+        background-color: blue;
+        color: white;
+        padding: 8px 18px;
+        margin-top: 40px;
+        border-radius: 30px;
+        border: none;
+        font-size: 15px;
+        font-weight: 500;
+    ">
+        Apply on company website
+    </button>
+    <button style="
+        background-color: white;
+        border-radius: 30px;
+        border: 1px solid lightskyblue;
+        color: lightskyblue;
+        font-size: 15px;
+        padding: 8px 18px;
+        margin-left: 5px;">
+        Save
+    </button>    
+</body>
+</html>
+
+
diff --git a/4-Exercises/Lesson-3/challenge-exercise.html b/4-Exercises/Lesson-3/challenge-exercise.html
new file mode 100644
index 0000000..937c188
--- /dev/null
+++ b/4-Exercises/Lesson-3/challenge-exercise.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        a{
+            color: rgb(0, 113, 133);
+            font-size: 20px;
+        }
+        a:hover {
+            color: red;
+            transition: color 0.5s;
+        }
+        .title {
+            font-size: 35px;
+            font-weight: bolder;
+        }
+        .price {
+            color: rgb(0, 118, 0);
+            font-size: 20px;
+            font-weight: bold;
+        }
+        .short-text{
+            font-size: 23px;
+            line-height: 12px;
+        }
+        .adding {
+            font-size: 15px;
+            background-color: rgb(255, 216, 20);
+            border-radius: 30px;
+            border: none;
+            padding: 10px 30px;
+            margin-top: 15px;
+            margin-right: 13px;
+            font-family: arial;
+        }
+        .adding:hover {
+            cursor: pointer;
+            background: rgb(196, 164, 8);
+        }
+        .adding:active {
+            opacity: 0.5;
+        }
+        .buying {
+            padding: 10px 35px;
+            background-color: rgb(255, 164, 28);
+        }
+        .buying:hover {
+            background: rgb(255, 165, 120);
+        }
+        .buying:active {
+            opacity: 0.5;
+        }
+    </style>    
+    <title>Challenge Exercise</title>
+</head>
+<body>
+    <a href="https://www.amazon.com/"  target="_blank">Back to Amazon</a>
+    <p class="title">Nike Black Running Shoes</p>
+    <p class="price">$39 &#45; in stock.</p>
+    <p class="short-text">Free delivery tomorrow.</p>
+    <button class="adding">Add to Cart</button>
+    <button class="adding buying">Buy now</button>    
+</body>
+</html>
+
+
+	
diff --git a/4-Exercises/Lesson-3/opacity.html b/4-Exercises/Lesson-3/opacity.html
new file mode 100644
index 0000000..b56681c
--- /dev/null
+++ b/4-Exercises/Lesson-3/opacity.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        button {
+            color: white;
+            background: black;
+            padding: 15px;
+            border-radius: 10px;
+            transition: opacity 1s;
+        }
+        button:hover {
+            cursor: pointer;
+            opacity: 0.8;
+        }
+    </style>    
+    <title>CSS opacity</title>
+</head>
+<body>
+    <button>Request now</button>    
+</body>
+</html>
+
diff --git a/4-Exercises/Lesson-3/shadow.html b/4-Exercises/Lesson-3/shadow.html
new file mode 100644
index 0000000..e438a30
--- /dev/null
+++ b/4-Exercises/Lesson-3/shadow.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        button {
+            background-color: green;
+            color: white;
+            font-size: 12px;
+            border-radius: 5px;
+            font-weight: 800;
+            padding: 10px 20px;
+            border: none;
+        }
+        button:hover {
+            box-shadow: 0px 4px 10px 0px #80808070;
+        }
+    </style>
+    <title>CSS Shadow</title>
+</head>
+<body>
+    <button>Sign up</button>    
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-4/Click.html b/4-Exercises/Lesson-4/Click.html
new file mode 100644
index 0000000..cd7d43b
--- /dev/null
+++ b/4-Exercises/Lesson-4/Click.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        button {
+            background: green;
+            color: #ffffff;
+            box-shadow: 4px 4px 5px gray;
+            padding: 5px 10px;
+            font-size: 20px;
+            border: none;
+        }
+        button:active {
+            box-shadow: none;
+            margin: 8px 0 0 8px;
+        }
+    </style>    
+    <title>CSS Shadows</title>
+</head>
+<body>
+    <button>Shadow</button>   
+</body>
+</html>
diff --git a/4-Exercises/Lesson-4/Number.html b/4-Exercises/Lesson-4/Number.html
new file mode 100644
index 0000000..0d946e2
--- /dev/null
+++ b/4-Exercises/Lesson-4/Number.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        button {
+            background: green;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            margin: 10px 10px;
+            transition: padding 0.5s ease;
+        }
+        button:hover {
+            padding: 10px 25px;
+        }
+    </style>
+    <title>Numbers</title>
+</head>
+<body>
+    <button>One</button>
+    <button>Two</button>
+    <button>Three</button>    
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-4/Stretch.html b/4-Exercises/Lesson-4/Stretch.html
new file mode 100644
index 0000000..16fcf61
--- /dev/null
+++ b/4-Exercises/Lesson-4/Stretch.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        button {
+            color: white;
+            background-color: green;
+            padding: 14px 14px;
+            border: none;
+            font-size: 17px;
+            transition: padding 0.9s ease-in-out;
+        }
+        button:hover {
+            padding: 20px 40px;   
+        }
+    </style>
+    <title>Stretch button</title>
+</head>
+<body>
+    <button>Stretch</button>    
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-4/pagination.html b/4-Exercises/Lesson-4/pagination.html
new file mode 100644
index 0000000..d01fb81
--- /dev/null
+++ b/4-Exercises/Lesson-4/pagination.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        button {
+            padding: 4px 14px;
+            font-size: 20px;
+            margin-top: 10px;
+        }
+        a {
+            font-size: 23px;
+            padding: 0 5px;
+            color: rgb(105, 23, 105);
+        }
+        .back {
+            margin-right: 10px;
+        }
+        .next {
+            margin-left: 10px;
+        }
+    </style>
+    <title>Pagination</title>
+</head>
+<body>
+    <button class="back">Back</button>
+    <a href="#">1</a>
+    <a href="#">2</a>
+    <a href="#">3</a>
+    <a href="#">4</a>
+    <a href="#">5</a>
+    <button  class="next">Next</button>    
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-5/Challenges/Purchase.html b/4-Exercises/Lesson-5/Challenges/Purchase.html
new file mode 100644
index 0000000..bc1a6d1
--- /dev/null
+++ b/4-Exercises/Lesson-5/Challenges/Purchase.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        .container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            margin-top: 20px;
+        }
+        button {
+            margin-top: 15px;
+            background-color: rgb(46, 46, 216);
+            color: white;
+            border: none;
+            padding: 8px 20px;
+            border-radius: 20px;
+            font-size: 20px;
+        }
+        .purchase {
+            margin-top: 10px;
+            font-weight: 500;
+            font-size:  12px;
+        }
+        p {
+            margin: 0;
+            font-family: Arial;
+        }
+        .new {
+            color: red;
+            font-weight: 800;
+            font-size: 20px;
+             
+        }
+        .fTitle {
+            font-weight: 900;
+            margin-top: 8px;
+            font-size: 25px;
+        }
+        .big {
+            font-weight: 900;
+            font-size: 40px;
+            margin-top: 4px;
+    
+        }
+    </style>
+    <title>Purchase form</title>
+</head>
+<body>
+    <div class="container">
+        <p class="new">New</p>
+        <p class="fTitle">MacBook Pro</p>
+        <p class="big">Supercharged for pros.</p>
+        <p class="purchase">From &#36;2000</p>
+        <button>Buy</button>
+    </div>    
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-5/Challenges/freeCodeCamp.html b/4-Exercises/Lesson-5/Challenges/freeCodeCamp.html
new file mode 100644
index 0000000..beea67d
--- /dev/null
+++ b/4-Exercises/Lesson-5/Challenges/freeCodeCamp.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        .container {
+            font-family: arial;
+            display: flex;
+            margin: 0;
+            margin-top: 10px;
+            justify-content: flex-start;
+            flex-direction: column;
+        }
+        .info {
+            color: black;
+            font-weight: 200;
+            width: 400px;
+            margin-top: 8px;
+            line-height: 21px;
+        }
+        .coursename {
+            font-weight: 900;
+            font-size: 15px;
+            margin: 0;
+        }
+        .course-link {
+            color: gray;
+            margin-left: 2px;
+            font-weight: 100;
+            cursor: pointer;
+        }
+        .duration {
+            color: gray;
+            margin-left: 5px;
+            font-weight: 100;
+        }
+    </style>
+    <title>FreeCodeCamp</title>
+</head>
+<body>
+    <div class="container">
+        <p class="coursename">freeCodeCamp.org <span class="course-link">@freeCodeCamp</span><span class="duration">1h</span></p>
+        <p class="info">As a web developer. you'll want to make your project easy to use and navigate around. </p>
+        <p style="margin-top: 6px;">Here <span style="color: skyblue; cursor: pointer;">@chp&#95;it</span> outlines the top skills new developers should have.</p>
+    </div>    
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-5/Challenges/simple-conversion.html b/4-Exercises/Lesson-5/Challenges/simple-conversion.html
new file mode 100644
index 0000000..29376cf
--- /dev/null
+++ b/4-Exercises/Lesson-5/Challenges/simple-conversion.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        .container {
+            display: flex;
+            flex-direction: column;
+            Justify-content: flex-start;
+            align-items: flex-start;
+            font-family: arial;
+        }
+        .red {
+            color: red;
+        }
+        p {
+            margin: 0;
+        }
+        .num {
+            font-size: 30px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+        .info {
+            margin-top: 10px;
+        }
+        .small-currency {
+            font-size: 15px;
+            color: gray;
+            font-weight: 100;
+        }
+        .green-things {
+            color: rgb(135, 240, 135);
+            font-size: 15px;
+        }
+    </style>
+    <title>Simple-Convertor</title>
+</head>
+<body>
+    <div class="container">
+        <p class="num">1,049.61 <span class="small-currency">USD</span></p>
+        <p class="green-things">+20.05(1.75%) today</p>
+        <p class="info">After hours 1,048.00 <span class="red">- 1.61 (0.15%)</span></p>
+    </div>    
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-5/Verdana.html b/4-Exercises/Lesson-5/Verdana.html
new file mode 100644
index 0000000..66ff2a5
--- /dev/null
+++ b/4-Exercises/Lesson-5/Verdana.html
@@ -0,0 +1,65 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        h1 {
+            font-family: verdana;
+            font-weight: 900;
+            margin: 0;
+        }
+        .tahoma {
+            font-family : tahoma;
+        }
+        li {
+            font-weight: 700;
+            font-size: 25px;
+        }
+        .short-info {
+            margin: 0;
+            margin-top: 6px;
+            font-family: verdana;
+        }
+        .long-info {
+            margin-top: 25px;
+            width: 320px;
+            font-family: verdana;
+            font-weight: 600;
+        }
+        button {
+            cursor: pointer;
+            background-color: green;
+            color: white;
+            border: none;
+            padding: 8px 25px;
+            border-radius: 5px;
+            font-family: verdana;
+            font-weight: 800;
+        }
+        h5 {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: verdana;
+            font-weight: 700;
+            font-size: 30px;
+            padding-bottom: 30px;
+            border-bottom: 1px solid gray;
+        }
+    </style>
+    <title>Courses Example</title>
+</head>
+<body>
+    <h1>HTML CSS Courses</h1>
+    <p class="short-info">Beginner to Pro</p>
+    <p class="long-info">In this course, we'll learn the skills you need to become a developer.</p>
+    <button>Get Started</button>
+    <h5>Other Font-Family Modles</h5>
+    <ul>
+        <li class="tahoma">This is Tahoma Font Mode</li>
+        <li style="font-family: Arial;">This is the Arial Font Mode</li>
+    </ul>    
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-6/index.html b/4-Exercises/Lesson-6/index.html
new file mode 100644
index 0000000..5d05d62
--- /dev/null
+++ b/4-Exercises/Lesson-6/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Model 3</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Model 3</h1>
+        <p>Order online for <span class="link">Touchless Delivery</span></p>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-6/style.css b/4-Exercises/Lesson-6/style.css
new file mode 100644
index 0000000..6592a33
--- /dev/null
+++ b/4-Exercises/Lesson-6/style.css
@@ -0,0 +1,18 @@
+.container {
+    margin: 0;
+    font-family: "Montserrat", serif;
+    font-weight: 500;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+h1 {
+    margin: 5px 0 0 0;
+    margin-top: 10px;
+}
+.link {
+    color: rgb(7, 42, 87);
+    text-decoration: underline;
+    cursor: pointer;
+}
\ No newline at end of file

From 8376e3c32187504e17b5dd011854a8146bea8bec Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Fri, 20 Dec 2024 17:06:28 +0430
Subject: [PATCH 06/39] 1

---
 4-Exercises/Lesson-7/LinkedIn/linkedIn.css   | 54 ++++++++++++++++++++
 4-Exercises/Lesson-7/LinkedIn/linkedIn.html  | 17 ++++++
 4-Exercises/Lesson-7/Twitter/index.html      | 16 ++++++
 4-Exercises/Lesson-7/Twitter/style.css       | 33 ++++++++++++
 4-Exercises/Lesson-8/Googe-Search/index.html | 15 ++++++
 4-Exercises/Lesson-8/Googe-Search/style.css  | 34 ++++++++++++
 6 files changed, 169 insertions(+)
 create mode 100644 4-Exercises/Lesson-7/LinkedIn/linkedIn.css
 create mode 100644 4-Exercises/Lesson-7/LinkedIn/linkedIn.html
 create mode 100644 4-Exercises/Lesson-7/Twitter/index.html
 create mode 100644 4-Exercises/Lesson-7/Twitter/style.css
 create mode 100644 4-Exercises/Lesson-8/Googe-Search/index.html
 create mode 100644 4-Exercises/Lesson-8/Googe-Search/style.css

diff --git a/4-Exercises/Lesson-7/LinkedIn/linkedIn.css b/4-Exercises/Lesson-7/LinkedIn/linkedIn.css
new file mode 100644
index 0000000..83e1992
--- /dev/null
+++ b/4-Exercises/Lesson-7/LinkedIn/linkedIn.css
@@ -0,0 +1,54 @@
+.container {
+    margin-top: 10px;
+    border: 2px solid rgb(1, 8, 1);
+    border-radius: 5px;
+    height: 200px;
+    width: 500px;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+/* .container:hover {
+    border: none;
+} */
+.mail {
+    display: block;
+    font-weight: 500;
+    color: rgb(99, 98, 98);
+    margin: 8px;
+    margin-left: 10px;
+}
+#Email {
+    margin-left: 10PX;
+    width: 350px;
+    padding: 5px 2px;
+    box-shadow: 1px 1px 5px gray;
+    border-radius: 5px;
+    padding-left: 20px;
+    border-color: gray;
+    cursor: pointer;
+}
+#Email::Placeholder {
+    color: rgb(82, 81, 81);
+}
+p {
+    margin-left: 12PX;
+    color: rgb(82, 81, 81);
+}
+button {
+    cursor: pointer;
+    padding: 10px 130px;
+    color: white;
+    font-size: 20px;
+    background-color: blue;
+    font-family: tahoma;
+    font-weight: 500;
+    border: none;
+    margin-left: 12px;
+    border-radius: 30px;
+}
+button:hover {
+    opacity: 0.7;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-7/LinkedIn/linkedIn.html b/4-Exercises/Lesson-7/LinkedIn/linkedIn.html
new file mode 100644
index 0000000..e15fc6e
--- /dev/null
+++ b/4-Exercises/Lesson-7/LinkedIn/linkedIn.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="linkedIn.css">
+    <title>LinkedIn sign up</title>
+</head>
+<body>
+    <div class="container">
+        <span class="mail">Email:</span>
+        <input type="email" id="Email" placeholder="Enter you Email">
+        <p>By clicking Agree &#38; Join, you agree the Privacy Policy. </p>
+        <button>Agree &#38; Join</button>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-7/Twitter/index.html b/4-Exercises/Lesson-7/Twitter/index.html
new file mode 100644
index 0000000..90c4ebf
--- /dev/null
+++ b/4-Exercises/Lesson-7/Twitter/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Twitter Text box!</title>
+</head>
+<body>
+    <div class="container">
+        <img src="https://pbs.twimg.com/profile_images/1787368256669405184/PgdH_ExX_400x400.jpg" alt="">
+        <input type="message" placeholder="What's happening?">
+        <button>Tweet</button>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-7/Twitter/style.css b/4-Exercises/Lesson-7/Twitter/style.css
new file mode 100644
index 0000000..f475702
--- /dev/null
+++ b/4-Exercises/Lesson-7/Twitter/style.css
@@ -0,0 +1,33 @@
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+img {
+    width: 50px;
+    border-radius: 50px;
+    margin: 10px;
+}
+input {
+    border: none;
+    padding: 20px 70px;
+    padding-left: 15px;
+    font-size: 20px;
+    outline: none;
+}
+input::placeholder{
+    font-size: 20px;
+    font-family: tahoma;
+}
+button {
+    height: 40px;
+    width: 100px;
+    border-radius: 30px;
+    color: white;
+    background: blue;
+    font-weight: 700;
+    border: none;
+    cursor: pointer;
+    margin-left: 5px;
+    margin-right: 5px;
+}
diff --git a/4-Exercises/Lesson-8/Googe-Search/index.html b/4-Exercises/Lesson-8/Googe-Search/index.html
new file mode 100644
index 0000000..8bdbf46
--- /dev/null
+++ b/4-Exercises/Lesson-8/Googe-Search/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Google Search</title>
+</head>
+<body>
+    <div class="container">
+        <img src="https://149352766.v2.pressablecdn.com/wp-content/uploads/2016/10/google-logo.png" alt="">
+        <input type="search" placeholder="Search Google or type URL">
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-8/Googe-Search/style.css b/4-Exercises/Lesson-8/Googe-Search/style.css
new file mode 100644
index 0000000..8ebc2e7
--- /dev/null
+++ b/4-Exercises/Lesson-8/Googe-Search/style.css
@@ -0,0 +1,34 @@
+.container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 100px;
+}
+img {
+    width: 400px;
+    height: 150PX;
+    object-fit: cover;
+}
+input {
+    border-radius: 30px;
+    box-shadow: 1px 3px 5px gray;
+    height: 50px;
+    width: 500px;
+    font-size: 16px;
+    padding: 0 15px;
+    cursor: pointer;
+    outline: none;
+    transition: height 1s; 
+    border: none;
+}
+input:hover {
+    height: 100px;
+}
+input::Placeholder {
+    padding-left: 15px;
+    font-size: 16px;
+}
+input:active {
+    height: 200px;
+}
\ No newline at end of file

From b7e09bf1eabcea38a0e44de3736296d4c7f8ceb4 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Fri, 20 Dec 2024 17:06:38 +0430
Subject: [PATCH 07/39] 1

---
 .../Lesson-8/Googe-Search/Sign up form/index.html    | 12 ++++++++++++
 .../Lesson-8/Googe-Search/Sign up form/style.css     |  0
 2 files changed, 12 insertions(+)
 create mode 100644 4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html
 create mode 100644 4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css

diff --git a/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html b/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html
new file mode 100644
index 0000000..d82773e
--- /dev/null
+++ b/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html	
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Sign up form</title>
+</head>
+<body>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css b/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css
new file mode 100644
index 0000000..e69de29

From 5fefebe8a5db9e4e6aeb86395264cf5ac7f977ce Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Fri, 20 Dec 2024 17:25:06 +0430
Subject: [PATCH 08/39] 1

---
 4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html | 4 +++-
 4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css  | 7 +++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html b/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html
index d82773e..24ddc12 100644
--- a/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html	
+++ b/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html	
@@ -7,6 +7,8 @@
     <title>Sign up form</title>
 </head>
 <body>
-    
+    <div class="container">
+        <input type="text">
+    </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css b/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css
index e69de29..34643da 100644
--- a/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css	
+++ b/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css	
@@ -0,0 +1,7 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid black;
+    align-items: center;
+    height: 500px;
+}
\ No newline at end of file

From 7e05f57c2e9837e4c4d812cb41f6b720a3428a8a Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Fri, 20 Dec 2024 18:09:20 +0430
Subject: [PATCH 09/39] 1

---
 .../Googe-Search/Sign up form/index.html      |  7 +++-
 .../Googe-Search/Sign up form/style.css       | 40 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html b/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html
index 24ddc12..8d4e3d3 100644
--- a/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html	
+++ b/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html	
@@ -8,7 +8,12 @@
 </head>
 <body>
     <div class="container">
-        <input type="text">
+        <div class="twocheckbox">
+            <input type="text" class="fName" placeholder="First name">
+            <input type="text" class="fName" placeholder="Last name">
+        </div>
+        <input type="text" class="fName email" placeholder="Email">
+        <button class="button">Sing Up</button>
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css b/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css
index 34643da..51ba9f5 100644
--- a/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css	
+++ b/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css	
@@ -1,7 +1,43 @@
 .container {
     display: flex;
     flex-direction: column;
-    border: 1px solid black;
     align-items: center;
+    justify-content: center;
     height: 500px;
-}
\ No newline at end of file
+    margin-top: 100px;
+}
+.twocheckbox {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 6px;
+}
+.fName {
+    padding: 10px 0;
+    padding-left: 20px;
+    border-radius: 5px;
+    border: 2px solid rgb(221, 219, 219);
+    outline-color: black;
+    font-size: 17px;
+}
+.fName::Placeholder {
+    font-size: 17px;
+    padding-left: 10px;
+}
+.email {
+    margin-top: 12px;
+    width: 460px;
+}
+button {
+    padding: 10px 203px;
+    font-size: 20px;
+    color: white;
+    background: rgb(73, 73, 230);
+    font-weight: 700;
+    border: none;
+    border-radius: 5px;
+    margin-top: 14px;
+    cursor: pointer;
+}
+button:hover {
+    opacity: 0.6;
+}

From dffd68361f050b8fc9e08240f5d1a67524b0e4c8 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Fri, 20 Dec 2024 18:50:04 +0430
Subject: [PATCH 10/39] 1

---
 .../Googe-Search/Sign up form/index.html      |  7 +++++--
 .../Googe-Search/Sign up form/style.css       | 19 +++++++++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html b/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html
index 8d4e3d3..278510b 100644
--- a/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html	
+++ b/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html	
@@ -12,8 +12,11 @@
             <input type="text" class="fName" placeholder="First name">
             <input type="text" class="fName" placeholder="Last name">
         </div>
-        <input type="text" class="fName email" placeholder="Email">
-        <button class="button">Sing Up</button>
+        <div class="grid">
+            <input type="text" class="fName email" placeholder="Email">
+            <button class="button">Sing Up</button>
+        </div>
+        
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css b/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css
index 51ba9f5..08912e1 100644
--- a/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css	
+++ b/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css	
@@ -1,10 +1,13 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 .container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 500px;
-    margin-top: 100px;
 }
 .twocheckbox {
     display: grid;
@@ -13,7 +16,7 @@
 }
 .fName {
     padding: 10px 0;
-    padding-left: 20px;
+    padding-left: 10px;
     border-radius: 5px;
     border: 2px solid rgb(221, 219, 219);
     outline-color: black;
@@ -23,12 +26,16 @@
     font-size: 17px;
     padding-left: 10px;
 }
+.grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    width: 100%;
+}
 .email {
     margin-top: 12px;
-    width: 460px;
 }
 button {
-    padding: 10px 203px;
+    padding: 10px 0;
     font-size: 20px;
     color: white;
     background: rgb(73, 73, 230);
@@ -39,5 +46,5 @@ button {
     cursor: pointer;
 }
 button:hover {
-    opacity: 0.6;
+    opacity: 0.8;
 }

From 24c83fae2673a863f5a993cccabc57b07cd617ba Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Fri, 20 Dec 2024 18:52:31 +0430
Subject: [PATCH 11/39] 1

---
 4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css b/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css
index 08912e1..8936443 100644
--- a/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css	
+++ b/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css	
@@ -8,6 +8,8 @@ body {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    height: 100vh;
+    margin: 0;
 }
 .twocheckbox {
     display: grid;

From 5ca2eacd67056532673b33420c7445e09fafa8f6 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Fri, 20 Dec 2024 21:24:26 +0430
Subject: [PATCH 12/39] 1

---
 4-Exercises/Lesson-8/Request form/index.html  | 20 +++++++
 4-Exercises/Lesson-8/Request form/style.css   | 60 +++++++++++++++++++
 .../Sign up form/index.html                   |  0
 .../{Googe-Search => }/Sign up form/style.css |  0
 4 files changed, 80 insertions(+)
 create mode 100644 4-Exercises/Lesson-8/Request form/index.html
 create mode 100644 4-Exercises/Lesson-8/Request form/style.css
 rename 4-Exercises/Lesson-8/{Googe-Search => }/Sign up form/index.html (100%)
 rename 4-Exercises/Lesson-8/{Googe-Search => }/Sign up form/style.css (100%)

diff --git a/4-Exercises/Lesson-8/Request form/index.html b/4-Exercises/Lesson-8/Request form/index.html
new file mode 100644
index 0000000..483506c
--- /dev/null
+++ b/4-Exercises/Lesson-8/Request form/index.html	
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Uber Form</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Request a ride now</h1>
+        <input type="text" class="fInput" placeholder="Enter pickup location">
+        <input type="text" class="fInput sInput" placeholder="Enter destination">
+        <div class="containertwo">
+            <button class="request hover">Request now</button>
+            <button class="request whitehover">Schedule for later</button>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-8/Request form/style.css b/4-Exercises/Lesson-8/Request form/style.css
new file mode 100644
index 0000000..5830825
--- /dev/null
+++ b/4-Exercises/Lesson-8/Request form/style.css	
@@ -0,0 +1,60 @@
+.container {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 100vh;
+    margin: 5px;
+    color: black;
+    border-radius: 5px;
+    border: 2px solid rgb(10, 8, 8);
+}
+h1 {
+    font-size: 40px;
+    font-weight: 500;
+    font-family: arial;
+    margin: 0;
+}
+.fInput {
+    padding: 12px 170px;
+    padding-left: 20px;
+    margin-top: 30px;
+    font-size: 20px;
+    border: none;
+    background: rgb(231, 229, 229);
+    outline-color: black;
+}
+.sInput {
+    margin-top: 10px;
+}
+.containertwo {
+    display: flex;
+    flex-direction: row;
+    margin-top: 50px;
+    column-gap: 30px;
+}
+.request {
+    font-size: 18px;
+    padding: 12px 25px;
+    border: none;
+    color: white;
+    background: black;
+    cursor: pointer;
+    transition: padding-right 1s, padding-left 1s, opacity 1s;
+}
+.hover:hover {
+    opacity: 0.8;
+    padding-right: 30px;
+    padding-left: 30px;
+}
+.whitehover {
+    background: rgb(231, 229, 229);
+    color: black;
+
+}
+.whitehover:hover {
+    opacity: 0.9;
+    padding-right: 30px;
+    padding-left: 30px;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html b/4-Exercises/Lesson-8/Sign up form/index.html
similarity index 100%
rename from 4-Exercises/Lesson-8/Googe-Search/Sign up form/index.html
rename to 4-Exercises/Lesson-8/Sign up form/index.html
diff --git a/4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css b/4-Exercises/Lesson-8/Sign up form/style.css
similarity index 100%
rename from 4-Exercises/Lesson-8/Googe-Search/Sign up form/style.css
rename to 4-Exercises/Lesson-8/Sign up form/style.css

From 24b603a6bdc88c77c9095426c454e5f71025bbcd Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Fri, 20 Dec 2024 21:42:08 +0430
Subject: [PATCH 13/39] 1

---
 4-Exercises/Lesson-9/Twitter/index.html | 16 ++++++++++
 4-Exercises/Lesson-9/Twitter/style.css  | 39 +++++++++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 4-Exercises/Lesson-9/Twitter/index.html
 create mode 100644 4-Exercises/Lesson-9/Twitter/style.css

diff --git a/4-Exercises/Lesson-9/Twitter/index.html b/4-Exercises/Lesson-9/Twitter/index.html
new file mode 100644
index 0000000..90c4ebf
--- /dev/null
+++ b/4-Exercises/Lesson-9/Twitter/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Twitter Text box!</title>
+</head>
+<body>
+    <div class="container">
+        <img src="https://pbs.twimg.com/profile_images/1787368256669405184/PgdH_ExX_400x400.jpg" alt="">
+        <input type="message" placeholder="What's happening?">
+        <button>Tweet</button>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-9/Twitter/style.css b/4-Exercises/Lesson-9/Twitter/style.css
new file mode 100644
index 0000000..1c6fd47
--- /dev/null
+++ b/4-Exercises/Lesson-9/Twitter/style.css
@@ -0,0 +1,39 @@
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+    box-shadow: 5px 10px 8px gray;
+    width: 35%;
+    border-radius: 5px;
+    margin-left: 10px;
+    background: rgb(255, 255, 255);
+}
+img {
+    width: 50px;
+    border-radius: 50px;
+    margin: 10px;
+}
+input {
+    border: none;
+    padding: 20px 70px;
+    padding-left: 15px;
+    font-size: 20px;
+    outline: none;
+}
+input::placeholder{
+    font-size: 20px;
+    font-family: tahoma;
+}
+button {
+    height: 40px;
+    width: 100px;
+    border-radius: 30px;
+    color: white;
+    background: blue;
+    font-weight: 700;
+    border: none;
+    cursor: pointer;
+    margin-left: 5px;
+    margin-right: 5px;
+}
\ No newline at end of file

From 436113da9404afba00213b016f1366facb6bb9e4 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Fri, 20 Dec 2024 21:44:07 +0430
Subject: [PATCH 14/39] Update style.css

---
 4-Exercises/Lesson-9/Twitter/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/4-Exercises/Lesson-9/Twitter/style.css b/4-Exercises/Lesson-9/Twitter/style.css
index 1c6fd47..e7cb466 100644
--- a/4-Exercises/Lesson-9/Twitter/style.css
+++ b/4-Exercises/Lesson-9/Twitter/style.css
@@ -3,7 +3,7 @@
     align-items: center;
     justify-content: center;
     margin-top: 20px;
-    box-shadow: 5px 10px 8px gray;
+    box-shadow: 3px 3px 10px gray;
     width: 35%;
     border-radius: 5px;
     margin-left: 10px;

From b8a4a3a96d790de81c57fcaa5ff7065092138e01 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Fri, 20 Dec 2024 22:14:33 +0430
Subject: [PATCH 15/39] Cards

---
 4-Exercises/Lesson-9/Twitter Cards/index.html | 29 +++++++++++
 4-Exercises/Lesson-9/Twitter Cards/style.css  | 49 +++++++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 4-Exercises/Lesson-9/Twitter Cards/index.html
 create mode 100644 4-Exercises/Lesson-9/Twitter Cards/style.css

diff --git a/4-Exercises/Lesson-9/Twitter Cards/index.html b/4-Exercises/Lesson-9/Twitter Cards/index.html
new file mode 100644
index 0000000..fe352f5
--- /dev/null
+++ b/4-Exercises/Lesson-9/Twitter Cards/index.html	
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Cards</title>
+</head>
+<body>
+    <div class="contianer">
+        <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-09/cat.jpg" alt="Oliver">
+        <h3>Oliver</h3>
+        <p>2 mutual friends</p>
+        <button>Add Friend</button>
+    </div>
+    <div class="contianer">
+        <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-09/cat2.jpg" alt="Mimi">
+        <h3>Mimi</h3>
+        <p>3 mutual friends</p>
+        <button>Add Friend</button>
+    </div>
+    <div class="contianer">
+        <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-09/dog.jpg" alt="Rex">
+        <h3>Rex</h3>
+        <p>4 mutual friends</p>
+        <button>Add Friend</button>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-9/Twitter Cards/style.css b/4-Exercises/Lesson-9/Twitter Cards/style.css
new file mode 100644
index 0000000..3b253ae
--- /dev/null
+++ b/4-Exercises/Lesson-9/Twitter Cards/style.css	
@@ -0,0 +1,49 @@
+.contianer {
+    display: inline-block;
+    width: 200px;
+    height: 350px;
+    margin: 10px;
+    border-radius: 10px;
+    box-shadow: 1px 1px 20px gray;
+    transition: width 1s;
+}
+.contianer:hover {
+    width: 210px;
+}
+img {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    transition: width 1s;
+}
+img:hover {
+    width: 210px;
+    cursor: pointer;
+}
+h3 {
+    font-weight: 900;
+    margin: 8px 0 0 10px;
+    font-size: 28px;
+}
+p {
+    margin: 2px 0 0 10px;
+    font-size: 20px;
+    color: rgb(53, 52, 52);
+    font-family: tahoma;
+}
+button {
+    margin: 20px 0 2px 10px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: none;
+    color: white;
+    background: rgb(31, 31, 219);
+    cursor: pointer;
+    font-size: 22px;
+    font-weight: 100;
+    transition: background 1s, padding 1s;
+}
+button:hover {
+    background: green;
+    padding: 15px 20px;
+}
\ No newline at end of file

From 7bafa313c36867a2ac6c95e6b93b6ae0a93ed774 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Fri, 20 Dec 2024 22:32:08 +0430
Subject: [PATCH 16/39] google search

---
 4-Exercises/Lesson-9/Googel Search/index.html | 19 +++++++
 4-Exercises/Lesson-9/Googel Search/style.css  | 52 +++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 4-Exercises/Lesson-9/Googel Search/index.html
 create mode 100644 4-Exercises/Lesson-9/Googel Search/style.css

diff --git a/4-Exercises/Lesson-9/Googel Search/index.html b/4-Exercises/Lesson-9/Googel Search/index.html
new file mode 100644
index 0000000..1c9206a
--- /dev/null
+++ b/4-Exercises/Lesson-9/Googel Search/index.html	
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Google Search</title>
+</head>
+<body>
+    <div class="container">
+        <img src="https://149352766.v2.pressablecdn.com/wp-content/uploads/2016/10/google-logo.png" alt="">
+        <input type="search" placeholder="Search Google or type URL">
+        <div class="button">
+            <button class="google">Google Search</button>
+            <button class="feeling">I'm Feeling Lucky</button>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-9/Googel Search/style.css b/4-Exercises/Lesson-9/Googel Search/style.css
new file mode 100644
index 0000000..8f9931b
--- /dev/null
+++ b/4-Exercises/Lesson-9/Googel Search/style.css	
@@ -0,0 +1,52 @@
+.container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 100px;
+}
+img {
+    width: 400px;
+    height: 150PX;
+    object-fit: cover;
+}
+input {
+    border-radius: 30px;
+    box-shadow: 1px 3px 5px gray;
+    height: 50px;
+    width: 700px;
+    font-size: 16px;
+    padding: 0 15px;
+    cursor: pointer;
+    outline: none;
+    transition: height 1s; 
+    border: none;
+}
+input:hover {
+    height: 100px;
+}
+input::Placeholder {
+    padding-left: 15px;
+    font-size: 16px;
+}
+input:active {
+    height: 200px;
+}
+.button {
+    display: flex;
+    flex-direction: row;
+    column-gap: 13px;
+    margin-top: 40px;
+}
+button {
+    padding: 10px 15px;
+    border: none;
+    font-size: 15px;
+    cursor: pointer;
+    font-weight: lighter;
+    height: 40px;
+    transition: height 1s;
+}
+button:hover {
+    height: 50px;
+}

From ad99242de73d1a614ab5a123463619030c466125 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Fri, 20 Dec 2024 23:45:09 +0430
Subject: [PATCH 17/39] cards

---
 .../Lesson-10/Twiiter Cards/index.html        | 39 +++++++++++
 4-Exercises/Lesson-10/Twiiter Cards/style.css | 68 +++++++++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 4-Exercises/Lesson-10/Twiiter Cards/index.html
 create mode 100644 4-Exercises/Lesson-10/Twiiter Cards/style.css

diff --git a/4-Exercises/Lesson-10/Twiiter Cards/index.html b/4-Exercises/Lesson-10/Twiiter Cards/index.html
new file mode 100644
index 0000000..c8b47a3
--- /dev/null
+++ b/4-Exercises/Lesson-10/Twiiter Cards/index.html	
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Cards</title>
+</head>
+<body>
+    <div class="contianer">
+        <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-09/cat.jpg" alt="Oliver">
+        <h3>Oliver</h3>
+        <div class="channel">
+            <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-10/dog2.jpg" class="channel-picture" alt="">
+            <p>2 mutual friends</p>
+        </div>
+        <button>Add Friend</button>
+        
+    </div>
+    <div class="contianer">
+        <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-09/cat2.jpg" alt="Mimi">
+        <h3>Mimi</h3>
+        <div class="channel">
+            <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-10/dog2.jpg" class="channel-picture" alt="">
+            <p>3 mutual friends</p>
+        </div>
+        <button>Add Friend</button>
+    </div>
+    <div class="contianer">
+        <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-09/dog.jpg" alt="Rex">
+        <h3>Rex</h3>
+        <div class="channel">
+            <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-10/dog2.jpg" class="channel-picture" alt="">
+            <p>4 mutual friends</p>
+        </div>
+        <button>Add Friend</button>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-10/Twiiter Cards/style.css b/4-Exercises/Lesson-10/Twiiter Cards/style.css
new file mode 100644
index 0000000..ab35f76
--- /dev/null
+++ b/4-Exercises/Lesson-10/Twiiter Cards/style.css	
@@ -0,0 +1,68 @@
+.contianer {
+    display: inline-block;
+    width: 200px;
+    height: 400px;
+    margin: 10px;
+    border-radius: 10px;
+    box-shadow: 1px 1px 20px gray;
+    transition: width 1s;
+}
+.contianer:hover {
+    width: 210px;
+}
+img {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    transition: width 1s;
+}
+img:hover {
+    width: 210px;
+    cursor: pointer;
+}
+
+h3 {
+    font-weight: 900;
+    margin: 8px 0 0 10px;
+    font-size: 28px;
+}
+div.channel {
+    display: flex;
+    flex-direction: row;
+    margin-top: 10px;
+    vertical-align: middle;
+    margin-left: 8px;
+
+}
+.channel-picture {
+    height: 40px;
+    width: 40px;
+    border-radius: 50px;
+    vertical-align: bottom;
+}
+.channel-picture:hover {
+    width: 40px;
+}
+p {
+    margin: 2px 0 0 10px;
+    font-size: 16px;
+    color: rgb(53, 52, 52);
+    font-family: tahoma;
+    vertical-align: bottom;
+}
+button {
+    margin: 20px 0 2px 10px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: none;
+    color: white;
+    background: rgb(31, 31, 219);
+    cursor: pointer;
+    font-size: 22px;
+    font-weight: 100;
+    transition: background 1s, padding 1s;
+}
+button:hover {
+    background: green;
+    padding: 15px 20px;
+}
\ No newline at end of file

From 3fe365667f9e9a58b9e62528a0b6e01c519b64a5 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Sat, 21 Dec 2024 00:21:57 +0430
Subject: [PATCH 18/39] Grid practice

---
 .../index.html                                |  0
 .../style.css                                 |  0
 4-Exercises/Lesson-11/Grid/1/index.html       | 15 +++++++++++++
 4-Exercises/Lesson-11/Grid/1/style.css        | 10 +++++++++
 4-Exercises/Lesson-11/Grid/2/index.html       | 16 ++++++++++++++
 4-Exercises/Lesson-11/Grid/2/style.css        | 10 +++++++++
 4-Exercises/Lesson-11/Grid/3/index.html       | 22 +++++++++++++++++++
 4-Exercises/Lesson-11/Grid/3/style.css        |  9 ++++++++
 8 files changed, 82 insertions(+)
 rename 4-Exercises/Lesson-10/{Twiiter Cards => Twitter Cards}/index.html (100%)
 rename 4-Exercises/Lesson-10/{Twiiter Cards => Twitter Cards}/style.css (100%)
 create mode 100644 4-Exercises/Lesson-11/Grid/1/index.html
 create mode 100644 4-Exercises/Lesson-11/Grid/1/style.css
 create mode 100644 4-Exercises/Lesson-11/Grid/2/index.html
 create mode 100644 4-Exercises/Lesson-11/Grid/2/style.css
 create mode 100644 4-Exercises/Lesson-11/Grid/3/index.html
 create mode 100644 4-Exercises/Lesson-11/Grid/3/style.css

diff --git a/4-Exercises/Lesson-10/Twiiter Cards/index.html b/4-Exercises/Lesson-10/Twitter Cards/index.html
similarity index 100%
rename from 4-Exercises/Lesson-10/Twiiter Cards/index.html
rename to 4-Exercises/Lesson-10/Twitter Cards/index.html
diff --git a/4-Exercises/Lesson-10/Twiiter Cards/style.css b/4-Exercises/Lesson-10/Twitter Cards/style.css
similarity index 100%
rename from 4-Exercises/Lesson-10/Twiiter Cards/style.css
rename to 4-Exercises/Lesson-10/Twitter Cards/style.css
diff --git a/4-Exercises/Lesson-11/Grid/1/index.html b/4-Exercises/Lesson-11/Grid/1/index.html
new file mode 100644
index 0000000..e7f5711
--- /dev/null
+++ b/4-Exercises/Lesson-11/Grid/1/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Grid</title>
+</head>
+<body>
+    <div class="container">
+        <span class="px">200px</span>
+        <span class="pxs">75px</span>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Grid/1/style.css b/4-Exercises/Lesson-11/Grid/1/style.css
new file mode 100644
index 0000000..86c65a2
--- /dev/null
+++ b/4-Exercises/Lesson-11/Grid/1/style.css
@@ -0,0 +1,10 @@
+.container {
+    display: grid;
+    grid-template-columns: 200px 75px;
+}
+.px {
+    background: blue;
+}
+.pxs {
+    background: pink;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Grid/2/index.html b/4-Exercises/Lesson-11/Grid/2/index.html
new file mode 100644
index 0000000..e04d56d
--- /dev/null
+++ b/4-Exercises/Lesson-11/Grid/2/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Grid</title>
+</head>
+<body>
+    <div class="container">
+        <span class="col">col1</span>
+        <span class="col cols">col2</span>
+        <span class="col">col3</span>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Grid/2/style.css b/4-Exercises/Lesson-11/Grid/2/style.css
new file mode 100644
index 0000000..51ba8d3
--- /dev/null
+++ b/4-Exercises/Lesson-11/Grid/2/style.css
@@ -0,0 +1,10 @@
+div.container {
+    display: grid;
+    grid-template-columns: 50px 1fr 75px;
+}
+.col {
+    background: blue;
+}
+.cols {
+    background: pink;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Grid/3/index.html b/4-Exercises/Lesson-11/Grid/3/index.html
new file mode 100644
index 0000000..af00ef4
--- /dev/null
+++ b/4-Exercises/Lesson-11/Grid/3/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Grid</title>
+</head>
+<body>
+    <div>
+        <span>col1</span>
+        <span>col2</span>
+        <span>col3</span>
+        <span>col4</span>
+        <span>col1</span>
+        <span>col2</span>
+        <span>col3</span>
+        <span>col4</span>
+
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Grid/3/style.css b/4-Exercises/Lesson-11/Grid/3/style.css
new file mode 100644
index 0000000..463f2d7
--- /dev/null
+++ b/4-Exercises/Lesson-11/Grid/3/style.css
@@ -0,0 +1,9 @@
+div {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    column-gap: 20px;
+    row-gap: 10px;
+}
+span {
+    background: pink
+}
\ No newline at end of file

From 443a23dd112932e83d63684fd5acec05a36b2d96 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Sat, 21 Dec 2024 18:40:47 +0430
Subject: [PATCH 19/39] Twitter Cards

---
 .../Lesson-11/Twitter Cards/index.html        | 39 +++++++++++
 4-Exercises/Lesson-11/Twitter Cards/style.css | 64 +++++++++++++++++++
 2 files changed, 103 insertions(+)
 create mode 100644 4-Exercises/Lesson-11/Twitter Cards/index.html
 create mode 100644 4-Exercises/Lesson-11/Twitter Cards/style.css

diff --git a/4-Exercises/Lesson-11/Twitter Cards/index.html b/4-Exercises/Lesson-11/Twitter Cards/index.html
new file mode 100644
index 0000000..090f763
--- /dev/null
+++ b/4-Exercises/Lesson-11/Twitter Cards/index.html	
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Cards</title>
+</head>
+<body>
+    <div class="contianer">
+        <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-09/cat.jpg" alt="Oliver">
+        <h3>Oliver</h3>
+        <div class="channel">
+            <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-10/dog2.jpg" class="channel-picture" alt="">
+            <p>2 mutual friends</p>
+        </div>
+        <button>Add Friend</button>
+        
+    </div>
+    <div class="contianer">
+        <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-09/cat2.jpg" alt="Mimi">
+        <h3>Mimi</h3>
+        <div class="channel">
+            <img src="https://www.catster.com/wp-content/uploads/2023/11/siberian-cat-on-the-grass_Pavel-Sepi_Shutterstock.jpg" class="channel-picture" alt="">
+            <p>3 mutual friends</p>
+        </div>
+        <button>Add Friend</button>
+    </div>
+    <div class="contianer">
+        <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-09/dog.jpg" alt="Rex">
+        <h3>Rex</h3>
+        <div class="channel">
+            <img src="https://img.freepik.com/free-photo/beautiful-cat-with-fluffy-background_23-2150752746.jpg" class="channel-picture" alt="">
+            <p>4 mutual friends</p>
+        </div>
+        <button>Add Friend</button>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-11/Twitter Cards/style.css b/4-Exercises/Lesson-11/Twitter Cards/style.css
new file mode 100644
index 0000000..8d05d09
--- /dev/null
+++ b/4-Exercises/Lesson-11/Twitter Cards/style.css	
@@ -0,0 +1,64 @@
+body {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+    column-gap: 20px;
+    row-gap: 20px;
+    
+}
+.contianer {
+    border-radius: 10px;
+    box-shadow: 1px 1px 20px gray;
+}
+img {
+    height: 200px;
+    width: 200px;
+    object-fit: cover;
+    transition: height 1s;
+}
+img:hover {
+    cursor: pointer;
+    border-radius: 5px;
+    height: 210px;
+}
+h3 {
+    font-weight: 900;
+    margin: 8px 0 0 10px;
+    font-size: 28px;
+}
+div.channel {
+    display: grid;
+    grid-template-columns: 40px 1fr;
+    margin-top: 10px;
+    margin-left: 8px;
+
+}
+.channel-picture {
+    height: 40px;
+    width: 40px;
+    border-radius: 50px;
+}
+.channel-picture:hover {
+    width: 40px;
+}
+p {
+    margin: 10px 0 0 10px;
+    font-size: 16px;
+    color: rgb(53, 52, 52);
+    font-family: tahoma;
+}
+button {
+    margin: 20px 0 5px 10px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: none;
+    color: white;
+    background: rgb(31, 31, 219);
+    cursor: pointer;
+    font-size: 22px;
+    font-weight: 100;
+    transition: background 1s, padding 1s;
+}
+button:hover {
+    background: green;
+    padding: 15px 20px;
+}
\ No newline at end of file

From 06a91454dd3b5f8ec28997e1d370c7d9c6017bdc Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Sun, 22 Dec 2024 13:18:08 +0430
Subject: [PATCH 20/39] Finished

---
 .../Lesson-12/Flex-Box-practice/1/Index.html      | 15 +++++++++++++++
 .../Lesson-12/Flex-Box-practice/1/style.css       | 11 +++++++++++
 .../Lesson-12/Flex-Box-practice/2/index.html      |  0
 .../Lesson-12/Flex-Box-practice/2/style.css       |  0
 .../Lesson-12/Flex-Box-practice/3/index.html      |  0
 .../Lesson-12/Flex-Box-practice/3/style.css       |  0
 .../Lesson-12/Flex-Box-practice/4/index.html      |  0
 .../Lesson-12/Flex-Box-practice/4/style.css       |  0
 .../Flex-box/Modern-search-box/index.html         |  0
 .../Flex-box/Modern-search-box/style.css          |  0
 .../Lesson-12/Flex-box/Setting/incdex.html        |  0
 4-Exercises/Lesson-12/Flex-box/Setting/style.css  |  0
 .../Flex-box/Twitter-Follow-up/index.html         |  0
 .../Flex-box/Twitter-Follow-up/style.css          |  0
 14 files changed, 26 insertions(+)
 create mode 100644 4-Exercises/Lesson-12/Flex-Box-practice/1/Index.html
 create mode 100644 4-Exercises/Lesson-12/Flex-Box-practice/1/style.css
 create mode 100644 4-Exercises/Lesson-12/Flex-Box-practice/2/index.html
 create mode 100644 4-Exercises/Lesson-12/Flex-Box-practice/2/style.css
 create mode 100644 4-Exercises/Lesson-12/Flex-Box-practice/3/index.html
 create mode 100644 4-Exercises/Lesson-12/Flex-Box-practice/3/style.css
 create mode 100644 4-Exercises/Lesson-12/Flex-Box-practice/4/index.html
 create mode 100644 4-Exercises/Lesson-12/Flex-Box-practice/4/style.css
 create mode 100644 4-Exercises/Lesson-12/Flex-box/Modern-search-box/index.html
 create mode 100644 4-Exercises/Lesson-12/Flex-box/Modern-search-box/style.css
 create mode 100644 4-Exercises/Lesson-12/Flex-box/Setting/incdex.html
 create mode 100644 4-Exercises/Lesson-12/Flex-box/Setting/style.css
 create mode 100644 4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/index.html
 create mode 100644 4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css

diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/1/Index.html b/4-Exercises/Lesson-12/Flex-Box-practice/1/Index.html
new file mode 100644
index 0000000..e461cf7
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/1/Index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Flex-Box-Exercise</title>
+</head>
+<body>
+    <div class="flex">
+        <span class="two">200px</span>
+        <span class="seven">75px</span>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/1/style.css b/4-Exercises/Lesson-12/Flex-Box-practice/1/style.css
new file mode 100644
index 0000000..934384c
--- /dev/null
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/1/style.css
@@ -0,0 +1,11 @@
+.flex{
+    display: flex;
+}
+.two {
+    background: pink;
+    flex: 200px;
+}
+.seven{
+    background: skyblue;
+    flex: 75px;
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/2/index.html b/4-Exercises/Lesson-12/Flex-Box-practice/2/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/2/style.css b/4-Exercises/Lesson-12/Flex-Box-practice/2/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/3/index.html b/4-Exercises/Lesson-12/Flex-Box-practice/3/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/3/style.css b/4-Exercises/Lesson-12/Flex-Box-practice/3/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/4/index.html b/4-Exercises/Lesson-12/Flex-Box-practice/4/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/4/style.css b/4-Exercises/Lesson-12/Flex-Box-practice/4/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/4-Exercises/Lesson-12/Flex-box/Modern-search-box/index.html b/4-Exercises/Lesson-12/Flex-box/Modern-search-box/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/4-Exercises/Lesson-12/Flex-box/Modern-search-box/style.css b/4-Exercises/Lesson-12/Flex-box/Modern-search-box/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/4-Exercises/Lesson-12/Flex-box/Setting/incdex.html b/4-Exercises/Lesson-12/Flex-box/Setting/incdex.html
new file mode 100644
index 0000000..e69de29
diff --git a/4-Exercises/Lesson-12/Flex-box/Setting/style.css b/4-Exercises/Lesson-12/Flex-box/Setting/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/index.html b/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css b/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css
new file mode 100644
index 0000000..e69de29

From cb86f85a0f71c1f9198e774ba4870ebaf0a59010 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Sun, 22 Dec 2024 13:26:35 +0430
Subject: [PATCH 21/39] finished

---
 .../Lesson-12/Flex-Box-practice/1/style.css      |  4 ++--
 .../Lesson-12/Flex-Box-practice/2/index.html     | 16 ++++++++++++++++
 .../Lesson-12/Flex-Box-practice/2/style.css      | 15 +++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/1/style.css b/4-Exercises/Lesson-12/Flex-Box-practice/1/style.css
index 934384c..99b45b5 100644
--- a/4-Exercises/Lesson-12/Flex-Box-practice/1/style.css
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/1/style.css
@@ -3,9 +3,9 @@
 }
 .two {
     background: pink;
-    flex: 200px;
+    width: 200px;
 }
 .seven{
     background: skyblue;
-    flex: 75px;
+    width: 75px;
 }
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/2/index.html b/4-Exercises/Lesson-12/Flex-Box-practice/2/index.html
index e69de29..244d551 100644
--- a/4-Exercises/Lesson-12/Flex-Box-practice/2/index.html
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/2/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Flex-Box-Exercise</title>
+</head>
+<body>
+    <div class="flex">
+        <span class="one">item1</span>
+        <span class="two">item2</span>
+        <span class="three">item3</span>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/2/style.css b/4-Exercises/Lesson-12/Flex-Box-practice/2/style.css
index e69de29..5fbd8b4 100644
--- a/4-Exercises/Lesson-12/Flex-Box-practice/2/style.css
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/2/style.css
@@ -0,0 +1,15 @@
+.flex {
+    display: flex;
+}
+.one {
+    background: skyblue;
+    width: 50px;
+}
+.two {
+    background: pink;
+    flex: 1;
+}
+.three {
+    background: skyblue;
+    width: 75px;
+}
\ No newline at end of file

From 22e23a7aa04640fc0b3f22fdd4c4f49562e68a20 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Sun, 22 Dec 2024 13:31:25 +0430
Subject: [PATCH 22/39] finished

---
 .../Lesson-12/Flex-Box-practice/3/index.html    | 17 +++++++++++++++++
 .../Lesson-12/Flex-Box-practice/3/style.css     |  9 +++++++++
 2 files changed, 26 insertions(+)

diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/3/index.html b/4-Exercises/Lesson-12/Flex-Box-practice/3/index.html
index e69de29..6f138d2 100644
--- a/4-Exercises/Lesson-12/Flex-Box-practice/3/index.html
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/3/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Flex-Box-Exercise</title>
+</head>
+<body>
+    <div class="flex">
+        <span>Item1</span>
+        <span>Item2</span>
+        <span>Item3</span>
+        <span>Item4</span>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/3/style.css b/4-Exercises/Lesson-12/Flex-Box-practice/3/style.css
index e69de29..dbca4c6 100644
--- a/4-Exercises/Lesson-12/Flex-Box-practice/3/style.css
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/3/style.css
@@ -0,0 +1,9 @@
+.flex {
+    display: flex;
+    justify-content: space-between;
+}
+span {
+    background: blue;
+    width: 50px;
+    color: white;
+}
\ No newline at end of file

From d509f89cd63a6b56d26e0d7336daff8518fdad33 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Sun, 22 Dec 2024 13:35:42 +0430
Subject: [PATCH 23/39] Finished

---
 .../Lesson-12/Flex-Box-practice/4/index.html      | 15 +++++++++++++++
 .../Lesson-12/Flex-Box-practice/4/style.css       | 11 +++++++++++
 2 files changed, 26 insertions(+)

diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/4/index.html b/4-Exercises/Lesson-12/Flex-Box-practice/4/index.html
index e69de29..6281f79 100644
--- a/4-Exercises/Lesson-12/Flex-Box-practice/4/index.html
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/4/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Flex-Box-Exercise</title>
+</head>
+<body>
+    <div class="flex">
+        <span>Item 1</span>
+        <span>Item 2</span>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-Box-practice/4/style.css b/4-Exercises/Lesson-12/Flex-Box-practice/4/style.css
index e69de29..eb8a07b 100644
--- a/4-Exercises/Lesson-12/Flex-Box-practice/4/style.css
+++ b/4-Exercises/Lesson-12/Flex-Box-practice/4/style.css
@@ -0,0 +1,11 @@
+.flex {
+    display: flex;
+    padding: 20px 0;
+    margin: 5px 5px;
+    border: 1px solid gray;
+    justify-content: space-between;
+}
+span {
+    background: pink;
+    width: 50px;
+}
\ No newline at end of file

From c4d1ef50a977a45a2bd64f99cc8aedebd9f5f90d Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Sun, 22 Dec 2024 15:26:52 +0430
Subject: [PATCH 24/39] Finished

---
 .../Lesson-12/Flex-box/Setting/incdex.html    | 25 ++++++++++
 .../Lesson-12/Flex-box/Setting/style.css      | 50 +++++++++++++++++++
 2 files changed, 75 insertions(+)

diff --git a/4-Exercises/Lesson-12/Flex-box/Setting/incdex.html b/4-Exercises/Lesson-12/Flex-box/Setting/incdex.html
index e69de29..9121cc8 100644
--- a/4-Exercises/Lesson-12/Flex-box/Setting/incdex.html
+++ b/4-Exercises/Lesson-12/Flex-box/Setting/incdex.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Twitter Design</title>
+</head>
+<body>
+    <div class="flexContainer">
+        <div class="first-row">
+            <span class="home">Home</span>
+            <span class="num">14</span>
+        </div>
+        <div class="first-row">
+            <span class="home">Notifications</span>
+            <span class="num">3</span>
+        </div>
+        <div class="first-row">
+            <span class="home">Messages</span>
+            <span class="num">5</span>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-box/Setting/style.css b/4-Exercises/Lesson-12/Flex-box/Setting/style.css
index e69de29..0d68576 100644
--- a/4-Exercises/Lesson-12/Flex-box/Setting/style.css
+++ b/4-Exercises/Lesson-12/Flex-box/Setting/style.css
@@ -0,0 +1,50 @@
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+.flexContainer {
+    height: 230px;
+    width: 380px;
+    border: 2px solid rgb(209, 205, 205);
+    Border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 0 5px;
+    font-family: helvetica;
+}
+.first-row {
+    display: flex;
+    padding: 10px;
+    padding-bottom: 10px;
+    justify-content: space-between;
+    margin: 10px;
+    vertical-align: middle;
+    border-bottom: 2px solid rgb(230, 225, 225);
+    border-bottom-right-radius: 30px;
+    border-bottom-left-radius: 30px;
+}
+.home {
+    font-size: 20px;
+    transition: font-size 1s;
+}
+.home:hover {
+    font-size: 25px;
+    cursor: pointer;
+}
+.num {
+    background: blue;
+    color: white;
+    padding: 5px 16px;
+    font-size: 20PX;
+    font-weight: 700;
+    border-radius: 30px;
+    text-align: center;
+    cursor: pointer;
+    transition: padding 1s, font-size 1s;
+}
+.num:hover {
+    padding: 5px 20px;
+    font-size: 23px;
+}

From db13712df6e4b3ff1ff228d51e316436ead43578 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Sun, 22 Dec 2024 19:33:14 +0430
Subject: [PATCH 25/39] finished

---
 .../Flex-box/Twitter-Follow-up/index.html     | 51 ++++++++++++++++
 .../Flex-box/Twitter-Follow-up/style.css      | 58 +++++++++++++++++++
 2 files changed, 109 insertions(+)

diff --git a/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/index.html b/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/index.html
index e69de29..575870c 100644
--- a/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/index.html
+++ b/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Twitter Follow up page</title>
+</head>
+<body>
+    <div class="flex">
+        <img src="https://i.pinimg.com/736x/60/ef/7a/60ef7af4e5ba3f0421aeb88522ad23b7.jpg" alt="Oliver cat">
+        <div class="secondFlex">
+            <h4>Sophie</h4>
+            <span>The Graceful Cat</span>
+        </div>
+        <button>Follow</button>
+    </div>
+    <div class="flex">
+        <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-12/cat.jpg" alt="Oliver cat">
+        <div class="secondFlex">
+            <h4>Oliver</h4>
+            <span>The cat popular</span>
+        </div>
+        <button>Follow</button>
+    </div>
+    <div class="flex">
+        <img src="https://placebear.com/51/51" alt="Oliver cat">
+        <div class="secondFlex">
+            <h4>Grizzly</h4>
+            <span>The Gentle Giant</span>
+        </div>
+        <button>Follow</button>
+    </div>
+    <div class="flex">
+        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToyX2UZ92rOSlLnx5Yp_wtUYtzR5Nk6c6__A&s" alt="Oliver cat">
+        <div class="secondFlex">
+            <h4>Bruno</h4>
+            <span>The Adventurous Bear</span>
+        </div>
+        <button>Follow</button>
+    </div>
+    <div class="flex">
+        <img src="https://minifigures.e2ecdn.com/Products/JoeBidenLargeRender.png?w=600&h=600&quality=85&scale=canvas" alt="Oliver cat">
+        <div class="secondFlex">
+            <h4>Lego Joe</h4>
+            <span>The Builder Extraordinaire</span>
+        </div>
+        <button>Follow</button>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css b/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css
index e69de29..6887de3 100644
--- a/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css
+++ b/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css
@@ -0,0 +1,58 @@
+body {
+    margin: 20px;
+    font-family: Arial;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.flex {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;    
+    border-radius: 5px;
+    width: 500px;
+    padding: 5px;
+    transition: background 0.8s;
+    margin-bottom: 20px;/*Hint*/
+}
+.flex:hover {
+    background: rgb(224, 219, 219);
+}
+button {
+    padding: 10px 20px;
+    font-size: 19px;
+    color: white;
+    font-weight: 700;
+    background: blue;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: opacity 0.5s;
+}
+button:hover {
+    opacity: 0.8;
+}
+
+img {
+    margin-right: 20px;
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+    border-radius: 35px;
+}
+.secondFlex {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+}
+h4 {
+    margin-bottom: 8px;
+    margin-top: 0;
+    font-weight: 800;
+}
+span {
+    margin: 0;
+    font-size: 15px;
+    font-style:  italic;
+    color: rgb(112, 102, 102);
+}
\ No newline at end of file

From 5994e0149dfd8a7222ddcf49f8fe21a0b3ac862e Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Sun, 22 Dec 2024 22:17:51 +0430
Subject: [PATCH 26/39] finished

---
 .../Flex-box/Modern-search-box/index.html     | 17 ++++++++++
 .../Flex-box/Modern-search-box/style.css      | 31 +++++++++++++++++++
 .../Flex-box/Twitter-Follow-up/style.css      | 15 ++++++++-
 3 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/4-Exercises/Lesson-12/Flex-box/Modern-search-box/index.html b/4-Exercises/Lesson-12/Flex-box/Modern-search-box/index.html
index e69de29..c284c8c 100644
--- a/4-Exercises/Lesson-12/Flex-box/Modern-search-box/index.html
+++ b/4-Exercises/Lesson-12/Flex-box/Modern-search-box/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Modern Search</title>
+</head>
+<body>
+    <div class="flex">
+        <span>Home</span>
+        <input type="text" placeholder="Search">
+        <button>Download</button>
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-box/Modern-search-box/style.css b/4-Exercises/Lesson-12/Flex-box/Modern-search-box/style.css
index e69de29..68f2095 100644
--- a/4-Exercises/Lesson-12/Flex-box/Modern-search-box/style.css
+++ b/4-Exercises/Lesson-12/Flex-box/Modern-search-box/style.css
@@ -0,0 +1,31 @@
+.flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 520;
+    font-size: 20px;
+    padding: 0 20px;
+    height: 60px;
+    margin: 5px 5px;
+    color: white;
+    background: rgb(120, 82, 178);
+    font-family: tahoma;
+}
+
+input {
+    height: 30px;
+    width: 500px;
+    font-size: 20px;
+    border-radius: 30px;
+    border: none;
+    padding-left: 25px;
+}
+button {
+    padding: 8px 15px;
+    font-weight: 500;
+    background: transparent;
+    border: 1px solid white;
+    font-size: 20px;
+    color: white;
+
+}
\ No newline at end of file
diff --git a/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css b/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css
index 6887de3..fcb0b77 100644
--- a/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css
+++ b/4-Exercises/Lesson-12/Flex-box/Twitter-Follow-up/style.css
@@ -55,4 +55,17 @@ span {
     font-size: 15px;
     font-style:  italic;
     color: rgb(112, 102, 102);
-}
\ No newline at end of file
+}
+/* @media (min-width: 0) and (max-width: 350px) {
+    .secondFlex {
+        width: 15%;
+    }
+    button {
+        height: 50px;
+    }
+}
+@media (min-width: 351px) and (max-widht: 500px) {
+    .secondFlex {
+        width: 20%;
+    }
+} */
\ No newline at end of file

From 34500fafbd596b0827c21de2c4d0346315df54ca Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Mon, 23 Dec 2024 15:20:15 +0430
Subject: [PATCH 27/39] Create README.md

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a5eb64e
--- /dev/null
+++ b/README.md
@@ -0,0 +1,3 @@
+####HTML and CSS Exercise Done!
+###By Elyas Sharifi
+#Powerd By HTML and CSS

From 161e0a0736fc43e7f5d013b40196c3afbbd60359 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Mon, 23 Dec 2024 15:21:21 +0430
Subject: [PATCH 28/39] Update README.md

---
 README.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index a5eb64e..7a2feb7 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
-####HTML and CSS Exercise Done!
-###By Elyas Sharifi
-#Powerd By HTML and CSS
+
+<h1>HTML and CSS Exercise Done!</h1>
+<h2>By Elyas Sharifi</h2>
+<h3>Powerd By HTML and CSS</h3>

From 72512ca565d0a8f22f3088da1bfd23f85a5ee424 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Mon, 23 Dec 2024 16:34:55 +0430
Subject: [PATCH 29/39] finished

---
 .../Lesson-13/Twitter-Inboxes/index.html      | 42 +++++++++++++++
 .../Lesson-13/Twitter-Inboxes/style.css       | 54 +++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 4-Exercises/Lesson-13/Twitter-Inboxes/index.html
 create mode 100644 4-Exercises/Lesson-13/Twitter-Inboxes/style.css

diff --git a/4-Exercises/Lesson-13/Twitter-Inboxes/index.html b/4-Exercises/Lesson-13/Twitter-Inboxes/index.html
new file mode 100644
index 0000000..1ad8ade
--- /dev/null
+++ b/4-Exercises/Lesson-13/Twitter-Inboxes/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="flex">
+        <span>ALL INBOXES</span>
+        <div class="flexItems">
+            <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-13/cat.jpg" alt="">
+            <div class="info">
+                <h2>Chewy Promotions</h2>
+                <h2>Biggest sales of the year!</h2>
+                <p>Hey there, We're writing to tell you about our...</p>
+            </div>
+        <span class="time">4:58 PM</span>    
+        </div>
+        <div class="flexItems">
+            <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-13/dog.jpg" alt="">
+            <div class="info">
+                <h2>Best Buy</h2>
+                <h2>Your Best Buy Receipt</h2>
+                <p>Thank you for shoping at Best Buy, here is...</p>
+            </div>
+        <span class="time">8:35 AM</span>    
+        </div>
+        <div class="flexItems">
+            <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-13/cat2.jpg" alt="">
+            <div class="info">
+                <h2>Netflix</h2>
+                <h2>Here's what coming soon to Netflix</h2>
+                <p>Brand new movies and shows, old favorites...</p>
+            </div>
+        <span class="time">9:00 PM</span>    
+        </div>
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-13/Twitter-Inboxes/style.css b/4-Exercises/Lesson-13/Twitter-Inboxes/style.css
new file mode 100644
index 0000000..b598cde
--- /dev/null
+++ b/4-Exercises/Lesson-13/Twitter-Inboxes/style.css
@@ -0,0 +1,54 @@
+body {
+    margin: 20px;
+    padding: 0;
+    font-family: Arial;
+    font-size: 15px;
+}
+.flex {
+    width: 490px;
+    color: rgb(136, 134, 134);
+    padding: 14px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px;
+}
+.flex span {
+    margin-top: 10px;
+    margin-left: 8px;
+}
+.flexItems {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 15px 0;
+    margin-bottom: 5px;
+    width: fit-content;
+}
+img {
+    width: 60px;
+    height: 60px;
+    border-radius: 30px;
+    object-fit: cover;
+    margin-right: 15px;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+h2 {
+    color: black;
+    margin: 0 0 2px 0;
+    font-size: 20px;
+}
+p{
+    margin: 0;
+    margin-top: 8px;
+    font-size: 17px;
+}
+.time {
+    align-self: flex-start;
+    justify-self: flex-end;
+    font-size: 15px;
+}
\ No newline at end of file

From 254d6fe243299b4e955b372b96194e0e93b3d38e Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Mon, 23 Dec 2024 20:57:29 +0430
Subject: [PATCH 30/39] Finished

---
 .../Twiiter-Message-Section/index.html        | 34 ++++++++
 .../Twiiter-Message-Section/style.css         | 79 +++++++++++++++++++
 .../Lesson-13/Twitter-Inboxes/index.html      |  2 +-
 3 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 4-Exercises/Lesson-13/Twiiter-Message-Section/index.html
 create mode 100644 4-Exercises/Lesson-13/Twiiter-Message-Section/style.css

diff --git a/4-Exercises/Lesson-13/Twiiter-Message-Section/index.html b/4-Exercises/Lesson-13/Twiiter-Message-Section/index.html
new file mode 100644
index 0000000..3d7d733
--- /dev/null
+++ b/4-Exercises/Lesson-13/Twiiter-Message-Section/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Twitter Post Section</title>
+</head>
+<body>
+    <div class="container">
+        <div class="img">
+            <img src="https://pbs.twimg.com/profile_images/1870531051371503616/YWoiy60V_400x400.jpg" alt="cat">
+        </div>
+        <div class="postInfo">
+            <div class="posterInfo">
+                <h5 class="posterName">Elyas Sharifi</h5>
+                <h6 class="posterUserName">@elyasAhsharifi</h6>
+            </div>
+            <div class="message-section">
+                <p class="message">What is backend web development? A complete overview. New video is up</p>
+            </div>
+            <div class="video-section">
+                <div class="video"></div>
+                <div class="videoInfo">
+                    <span class="video-link">youtube.com</span>
+                    <p class="video-Info">
+                        Backend web development - a complete overview (2024)
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-13/Twiiter-Message-Section/style.css b/4-Exercises/Lesson-13/Twiiter-Message-Section/style.css
new file mode 100644
index 0000000..fe34a3a
--- /dev/null
+++ b/4-Exercises/Lesson-13/Twiiter-Message-Section/style.css
@@ -0,0 +1,79 @@
+.container {
+    margin: 20px;
+    color: black;
+    display: flex;
+    font-family: Arial;
+    font-size: 20px;
+    width: fit-content;
+}
+img {
+    width: 70px;
+    height: 70px;
+    object-fit: cover;
+    border-radius: 35px;
+    align-items: center;
+    margin-right: 15px;
+    cursor: pointer;
+}
+.postInfo {
+    display: flex;
+    flex-direction: column;
+    font-weight: 100;
+}
+.posterInfo {
+    display: flex;
+    flex-direction: row;
+}
+.posterName {
+    margin: 0;
+}
+.posterUserName {
+    color: rgb(122, 117, 117);
+    margin: 0;
+    font-size: 17px;
+    margin-left: 10px;
+    cursor: pointer;
+}
+.posterUserName:hover {
+    color: blue;
+    text-decoration: underline;
+}
+.message-section {
+    margin-top: 13px;
+    font-size: 16px;
+    font-weight: 500;
+}
+.message {
+    margin: 0;
+    line-height: 20px;
+    width: 400px;
+}
+.video-section {
+    display: flex;
+    border: 1px solid rgb(214, 212, 212);
+    border-radius: 8px;
+    margin-top: 13px;
+    margin-left: 5px;
+    width: 400px;
+}
+.video-section:hover {
+    cursor: pointer;
+    opacity: 0.9;
+}
+.video {
+    border-right: 1px solid rgb(214, 212, 212);
+    width: 150px;
+    background: rgb(214, 212, 212);
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+}
+.videoInfo {
+    margin: 20px 5px 20px 10px;
+    font-size: 17px;
+}
+.video-link {
+    color: rgb(165, 162, 162);
+}
+.video-Info {
+    margin: 5px 0 0 0;
+}
diff --git a/4-Exercises/Lesson-13/Twitter-Inboxes/index.html b/4-Exercises/Lesson-13/Twitter-Inboxes/index.html
index 1ad8ade..ed15f63 100644
--- a/4-Exercises/Lesson-13/Twitter-Inboxes/index.html
+++ b/4-Exercises/Lesson-13/Twitter-Inboxes/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
-    <title>Document</title>
+    <title>TWITTER INBOXES<title>
 </head>
 <body>
     <div class="flex">

From 3ebc0384cad8c6e8a02705cdc693ee0ae2f2cd9e Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Mon, 23 Dec 2024 22:08:34 +0430
Subject: [PATCH 31/39] Finished

---
 4-Exercises/Lesson-13/Twitter-Inboxes/index.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/4-Exercises/Lesson-13/Twitter-Inboxes/index.html b/4-Exercises/Lesson-13/Twitter-Inboxes/index.html
index ed15f63..1caff3b 100644
--- a/4-Exercises/Lesson-13/Twitter-Inboxes/index.html
+++ b/4-Exercises/Lesson-13/Twitter-Inboxes/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
-    <title>TWITTER INBOXES<title>
+    <title>Twitter Inboxes</title>
 </head>
 <body>
     <div class="flex">
@@ -37,6 +37,5 @@ <h2>Here's what coming soon to Netflix</h2>
         <span class="time">9:00 PM</span>    
         </div>
     </div>
-    
 </body>
 </html>
\ No newline at end of file

From 9da457aa7dca539e5a97c4f1db17c47d9a66dd07 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Mon, 23 Dec 2024 23:14:45 +0430
Subject: [PATCH 32/39] Finished

---
 4-Exercises/Lesson-14/Header/index.html | 21 +++++++++++
 4-Exercises/Lesson-14/Header/style.css  | 48 +++++++++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 4-Exercises/Lesson-14/Header/index.html
 create mode 100644 4-Exercises/Lesson-14/Header/style.css

diff --git a/4-Exercises/Lesson-14/Header/index.html b/4-Exercises/Lesson-14/Header/index.html
new file mode 100644
index 0000000..48f1dec
--- /dev/null
+++ b/4-Exercises/Lesson-14/Header/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Header</title>
+</head>
+<body>
+    <div class="header">
+        <div class="one">
+            <img src="https://pbs.twimg.com/profile_images/1870531051371503616/YWoiy60V_400x400.jpg" alt="">
+            <h3>Elyas Sharifi</h3>
+        </div>
+        <div class="button">
+            <button>Add Friend</button>
+            <button class="message">Message</button>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-14/Header/style.css b/4-Exercises/Lesson-14/Header/style.css
new file mode 100644
index 0000000..c601972
--- /dev/null
+++ b/4-Exercises/Lesson-14/Header/style.css
@@ -0,0 +1,48 @@
+body {
+    height: 3000px;
+}
+.header {
+    margin: 0;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    font-family: Helvetica;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px 40px;
+}
+.one {
+    display: flex;
+}
+img {
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+    border-radius: 30px;
+    cursor: pointer;
+}
+h3 {
+    margin-left: 15px;
+    font-size: 15px;
+    font-weight: 600;
+}
+.button {
+    display: flex;
+}
+button {
+    padding: 8px 12px;
+    color: white;
+    background: blue;
+    border: none;
+    border-radius: 5px;
+    font-weight: 600;
+    cursor: pointer;
+    margin-right: 8px;
+}
+.message {
+    background: rgb(230, 230, 230);
+    color: black;
+}
\ No newline at end of file

From 5ddc1b22330a5695bdb638b4b302c18fdded0072 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Tue, 24 Dec 2024 14:22:01 +0430
Subject: [PATCH 33/39] Finished

---
 4-Exercises/Lesson-14/Error/index.html | 21 ++++++++++++++++
 4-Exercises/Lesson-14/Error/style.css  | 35 ++++++++++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 4-Exercises/Lesson-14/Error/index.html
 create mode 100644 4-Exercises/Lesson-14/Error/style.css

diff --git a/4-Exercises/Lesson-14/Error/index.html b/4-Exercises/Lesson-14/Error/index.html
new file mode 100644
index 0000000..542aae3
--- /dev/null
+++ b/4-Exercises/Lesson-14/Error/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">  
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Error</title>
+</head>
+<body>
+    <div class="right-sidebar">
+        Right Side bar
+    </div>
+    <div class="overlay">
+        <div class="model">
+            <h2>Modal Title</h2>
+            <p>This is a model</p>
+            <button>Close</button>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-14/Error/style.css b/4-Exercises/Lesson-14/Error/style.css
new file mode 100644
index 0000000..848d2f2
--- /dev/null
+++ b/4-Exercises/Lesson-14/Error/style.css
@@ -0,0 +1,35 @@
+body {
+    height: 3000px;
+}
+.right-sidebar {
+    background: rgb(6, 199, 6);
+    color: white;
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 200px;
+    text-align: center;
+}
+.overlay {
+    background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.model {
+    background: white;
+    width: 350px;
+    height: 150px;
+    border-radius: 8px;
+    padding: 8px 0 0 18px;
+    font-family: Arial;
+}
+p {
+    font-weight: 550;
+}

From 17695a962de07064fe96b3000446bd8bb2f56b85 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Tue, 24 Dec 2024 20:21:20 +0430
Subject: [PATCH 34/39] Finished

---
 .../Lesson-14/Discord Side bar/index.html     |  67 +++++++++++
 .../Lesson-14/Discord Side bar/style.css      | 108 ++++++++++++++++++
 2 files changed, 175 insertions(+)
 create mode 100644 4-Exercises/Lesson-14/Discord Side bar/index.html
 create mode 100644 4-Exercises/Lesson-14/Discord Side bar/style.css

diff --git a/4-Exercises/Lesson-14/Discord Side bar/index.html b/4-Exercises/Lesson-14/Discord Side bar/index.html
new file mode 100644
index 0000000..e26d3a4
--- /dev/null
+++ b/4-Exercises/Lesson-14/Discord Side bar/index.html	
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Discord</title>
+</head>
+<body>
+    <div class="first-side">
+        <div class="hoverImages">
+            <img src="https://media.licdn.com/dms/image/D5612AQHt-Y26_Im7IA/article-cover_image-shrink_720_1280/0/1714463825421?e=2147483647&v=beta&t=tziCy9eNtdHvurhoCp00iuHTdG0gUpa8zI2CHZ2ToLg" alt="">
+        </div>
+        <div class="hoverImages">
+            <img src="https://pbs.twimg.com/profile_images/1870531051371503616/YWoiy60V_400x400.jpg" alt="">
+        </div>
+        <div class="hoverImages">
+            <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/ed949a09-b742-4684-9b3d-8af1978e1ff0-profile_image-300x300.png" alt="">
+        </div>
+        <div class="hoverImages">
+            <img src="https://miro.medium.com/v2/resize:fit:1400/1*qAQ_EysVmm1xxu0glOiPQw.jpeg" alt="">
+        </div>
+        <div class="hoverImages">
+            <img src="https://cdn.icon-icons.com/icons2/2108/PNG/512/javascript_icon_130900.png" alt="">
+        </div>
+        <div class="hoverImages">
+            <img src="https://banner2.cleanpng.com/20180619/pro/aa6zbjqsw.webp" alt="">
+        </div>
+        <div class="hoverImages">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/CSS3_logo.svg/2048px-CSS3_logo.svg.png" alt="">
+        </div>
+        <div class="hoverImages">
+            <img src="https://static.vecteezy.com/system/resources/previews/021/059/827/non_2x/chatgpt-logo-chat-gpt-icon-on-white-background-free-vector.jpg" alt="">
+        </div>
+        <div class="hoverImages">
+            <img src="https://www.clipartmax.com/png/middle/89-894960_js-discord-bot-logo-node-js-and-react-js.png" alt="">
+        </div>
+        <div class="hoverImages">
+            <img src="https://cdn.iconscout.com/icon/free/png-256/free-react-logo-icon-download-in-svg-png-gif-file-formats--company-brand-world-logos-vol-4-pack-icons-282599.png?f=webp&w=256" alt="">
+        </div>
+        <div class="hoverImages">
+            <img src="https://www.citypng.com/public/uploads/preview/hd-python-logo-symbol-transparent-png-735811696257415dbkifcuokn.png" alt="">
+        </div>
+        <div class="hoverImages">
+            <img src="https://cdn-icons-png.flaticon.com/512/59/59118.png" alt="">
+        </div>
+    </div>
+    <div class="second-side">
+        <div class="title">
+            <span>INFO</span>
+            <span>+</span>
+        </div>
+        <div class="channels">
+            <span># ask-elyas</span>
+            <span># updates</span>
+            <span># faq</span>
+            <span># general</span>
+            <span># self-promo</span>
+            <span># networking</span>
+            <span># new-videos</span>
+            <span># help!</span>
+            <span># pets</span>
+            <span># jobs</span>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-14/Discord Side bar/style.css b/4-Exercises/Lesson-14/Discord Side bar/style.css
new file mode 100644
index 0000000..374fca8
--- /dev/null
+++ b/4-Exercises/Lesson-14/Discord Side bar/style.css	
@@ -0,0 +1,108 @@
+body {
+    height: 3000px;
+}
+
+.first-side {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 95px;
+    background: rgb(33, 33, 33);
+    overflow-y: scroll;
+}
+
+.hoverImages {
+    padding: 10px 15px 0 15px;
+    border-radius: 10px;
+    transition: background-color 200ms ease;
+}
+
+.hoverImages:hover{
+    background-color: rgb(54, 53, 53);
+}
+
+img {
+    width: 50px;
+    height: 50px;
+    border-radius: 30px;
+    object-fit: cover;
+    margin-bottom: 10px;
+    cursor: pointer;
+    border: none;
+    transition: border-radius 200ms ease ;
+}
+
+.hoverImages:hover img{
+    border-radius: 10px;
+}
+
+.second-side {
+    background: rgb(55, 55, 55);
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 95px;
+    width: 160px;
+    padding: 20px 20px 0 15px;
+    font-family: Arial;
+}
+
+.title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+}
+
+.title span + span {
+    font-size: 30px;
+    color: gray;
+    cursor: pointer;
+    transition: border-radius 200ms, width 200ms, text-align 200ms, background 200ms;
+}
+
+.title span + span:hover {
+    background: rgb(99, 97, 97);
+    text-align: center;
+    width: 30px;
+    border-radius: 50px;
+}
+
+div.channels {
+    display: flex;
+    flex-direction: column;
+    font-size: 18px;
+    padding: 10px 0 0 0;
+    color: gray;
+}
+
+div.channels span {
+    margin-bottom: 13px;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 8px;
+    transition: background 200ms;
+}
+
+div.channels span:hover {
+    background: rgb(99, 97, 97);
+}
+
+/*SCROOL BAR STYLE*/
+::-webkit-scrollbar {
+    width: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgb(108, 108, 109);
+    height: 10px;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    background-clip: padding-box;
+    cursor: pointer;
+
+}
+::-webkit-scrollbar-track {
+    border-radius: 5px;
+}
\ No newline at end of file

From 27fe40730a6c309546c30532ff9564b1b2ca13c6 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Tue, 24 Dec 2024 21:54:43 +0430
Subject: [PATCH 35/39] Finished

---
 .../Lesson-15/Store-Example/index.html        |  0
 4-Exercises/Lesson-15/Store-Example/style.css |  0
 .../Lesson-15/Vedio-Example/index.html        | 15 +++++++
 4-Exercises/Lesson-15/Vedio-Example/style.css | 40 +++++++++++++++++++
 4 files changed, 55 insertions(+)
 create mode 100644 4-Exercises/Lesson-15/Store-Example/index.html
 create mode 100644 4-Exercises/Lesson-15/Store-Example/style.css
 create mode 100644 4-Exercises/Lesson-15/Vedio-Example/index.html
 create mode 100644 4-Exercises/Lesson-15/Vedio-Example/style.css

diff --git a/4-Exercises/Lesson-15/Store-Example/index.html b/4-Exercises/Lesson-15/Store-Example/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/4-Exercises/Lesson-15/Store-Example/style.css b/4-Exercises/Lesson-15/Store-Example/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/4-Exercises/Lesson-15/Vedio-Example/index.html b/4-Exercises/Lesson-15/Vedio-Example/index.html
new file mode 100644
index 0000000..beac8bf
--- /dev/null
+++ b/4-Exercises/Lesson-15/Vedio-Example/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Video-Example</title>
+</head>
+<body>
+    <div class="container">
+        <div class="video-time">5:43</div>
+        <div class="close">X</div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-15/Vedio-Example/style.css b/4-Exercises/Lesson-15/Vedio-Example/style.css
new file mode 100644
index 0000000..4757dc7
--- /dev/null
+++ b/4-Exercises/Lesson-15/Vedio-Example/style.css
@@ -0,0 +1,40 @@
+body{
+    height: 3000px;
+}
+.container {
+    position: fixed;
+    height: 180px;
+    width: 300px;
+    background: rgb(160, 158, 158);
+    right: 20px;
+    bottom: 20px;
+}
+.video-time {
+    background: black;
+    color: white;
+    font-size: 20px;
+    padding: 5px;
+    font-family: Arial;
+    position: absolute;
+    right: 13px;
+    bottom: 13px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.close {
+    background: black;
+    border-radius: 30px;
+    position: absolute;
+    left: -20px;
+    top: -20px;
+    cursor: pointer;
+    color: white;
+    font-size: 20px;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

From b2b84207d4109016cbc028e3e752dd5e1bd5cf69 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Tue, 24 Dec 2024 22:11:19 +0430
Subject: [PATCH 36/39] Finished

---
 .../Lesson-15/Store-Example/index.html        | 20 +++++++++
 4-Exercises/Lesson-15/Store-Example/style.css | 45 +++++++++++++++++++
 2 files changed, 65 insertions(+)

diff --git a/4-Exercises/Lesson-15/Store-Example/index.html b/4-Exercises/Lesson-15/Store-Example/index.html
index e69de29..558da76 100644
--- a/4-Exercises/Lesson-15/Store-Example/index.html
+++ b/4-Exercises/Lesson-15/Store-Example/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>STORE</title>
+</head>
+<body>
+    <div class="container">
+        <img src="https://raw.githubusercontent.com/elyassharifi/html-css-course/main/1-exercise-solutions/lesson-15/shirt.jpg" alt="">
+        <div class="price">20% OFF</div>
+        <div class="adding">
+            <button>
+                Add to Cart
+            </button>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-15/Store-Example/style.css b/4-Exercises/Lesson-15/Store-Example/style.css
index e69de29..116dd19 100644
--- a/4-Exercises/Lesson-15/Store-Example/style.css
+++ b/4-Exercises/Lesson-15/Store-Example/style.css
@@ -0,0 +1,45 @@
+body {
+    height: 3000px;
+}
+.container {
+    position: relative;
+    left: 5px;
+    top: 5px;
+    background: rgb(202, 199, 199);
+    width: 300px;
+    height: 300px;
+    font-family: arial;
+}
+img {
+    width: 300px;
+    height: 300px;
+    object-fit: cover;;
+}
+.price {
+    position: absolute;
+    top: 20px;
+    right: 0;
+    background: black;
+    color: white;
+    padding: 10px;
+    font-size: 20px;
+    font-weight: 500;
+}
+.adding {
+    background: rgba(255, 255, 255, 0.8);
+    position: absolute;
+    top: 200px;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+button {
+    padding: 10px 15px;
+    color: black;
+    background: white;
+    border: 1px solid black;
+    cursor: pointer;
+}
\ No newline at end of file

From ca6a6eed946bf967779ec6434ed8dc8a84ef4ce0 Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Wed, 25 Dec 2024 17:57:55 +0430
Subject: [PATCH 37/39] Finished

---
 .../lesson-16/16d/youtube.html                | 242 +++++++++---------
 4-Exercises/Lesson-16/tool-tip/index.html     |  27 ++
 4-Exercises/Lesson-16/tool-tip/style.css      |  61 +++++
 3 files changed, 215 insertions(+), 115 deletions(-)
 create mode 100644 4-Exercises/Lesson-16/tool-tip/index.html
 create mode 100644 4-Exercises/Lesson-16/tool-tip/style.css

diff --git a/1-exercise-solutions/lesson-16/16d/youtube.html b/1-exercise-solutions/lesson-16/16d/youtube.html
index bf84852..36cb1bb 100644
--- a/1-exercise-solutions/lesson-16/16d/youtube.html
+++ b/1-exercise-solutions/lesson-16/16d/youtube.html
@@ -1,163 +1,175 @@
 ...
-
-      <div class="video-preview">
-        ...
-        <div class="video-info-grid">
-          <div class="channel-picture">
-            <div class="profile-picture-container">
-              <a href="https://youtube.com/c/mkbhd" target="_blank">
-                <img class="profile-picture" src="channel-pictures/channel-1.jpeg">
-              </a>
-              <div class="channel-tooltip">
-                <img class="channel-tooltip-picture" src="channel-pictures/channel-1.jpeg">
-                <div>
-                  <div class="channel-tooltip-name">
-                    Marques Brownlee
-                  </div>
-                  <div class="channel-tooltip-stats">
-                    15M subscribers
-                  </div>
-                </div>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="video.css">
+  <title>Document</title>
+</head>
+<body>
+  <div class="video-preview">
+    ...
+    <div class="video-info-grid">
+      <div class="channel-picture">
+        <div class="profile-picture-container">
+          <a href="https://youtube.com/c/mkbhd" target="_blank">
+            <img class="profile-picture" src="channel-pictures/channel-1.jpeg">
+          </a>
+          <div class="channel-tooltip">
+            <img class="channel-tooltip-picture" src="channel-pictures/channel-1.jpeg">
+            <div>
+              <div class="channel-tooltip-name">
+                Marques Brownlee
+              </div>
+              <div class="channel-tooltip-stats">
+                15M subscribers
               </div>
             </div>
           </div>
-          ...
         </div>
       </div>
+      ...
+    </div>
+  </div>
 
 ...
 
-      <div class="video-preview">
-        ...
-        <div class="video-info-grid">
-          <div class="channel-picture">
-            <div class="profile-picture-container">
-              <a href="https://youtube.com/c/markiplier" target="_blank">
-                <img class="profile-picture" src="channel-pictures/channel-2.jpeg">
-              </a>
-              <div class="channel-tooltip">
-                <img class="channel-tooltip-picture" src="channel-pictures/channel-2.jpeg">
-                <div>
-                  <div class="channel-tooltip-name">
-                    Markiplier
-                  </div>
-                  <div class="channel-tooltip-stats">
-                    30M subscribers
-                  </div>
-                </div>
+  <div class="video-preview">
+    ...
+    <div class="video-info-grid">
+      <div class="channel-picture">
+        <div class="profile-picture-container">
+          <a href="https://youtube.com/c/markiplier" target="_blank">
+            <img class="profile-picture" src="channel-pictures/channel-2.jpeg">
+          </a>
+          <div class="channel-tooltip">
+            <img class="channel-tooltip-picture" src="channel-pictures/channel-2.jpeg">
+            <div>
+              <div class="channel-tooltip-name">
+                Markiplier
+              </div>
+              <div class="channel-tooltip-stats">
+                30M subscribers
               </div>
             </div>
           </div>
-          ...
         </div>
       </div>
+      ...
+    </div>
+  </div>
 
 ...
 
-      <div class="video-preview">
-        ...
-        <div class="video-info-grid">
-          <div class="channel-picture">
-            <div class="profile-picture-container">
-              <a href="https://youtube.com/c/SSSniperWolf" target="_blank">
-                <img class="profile-picture" src="channel-pictures/channel-3.jpeg">
-              </a>
-              <div class="channel-tooltip">
-                <img class="channel-tooltip-picture" src="channel-pictures/channel-3.jpeg">
-                <div>
-                  <div class="channel-tooltip-name">
-                    SSSniperWolf
-                  </div>
-                  <div class="channel-tooltip-stats">
-                    31M subscribers
-                  </div>
-                </div>
+  <div class="video-preview">
+    ...
+    <div class="video-info-grid">
+      <div class="channel-picture">
+        <div class="profile-picture-container">
+          <a href="https://youtube.com/c/SSSniperWolf" target="_blank">
+            <img class="profile-picture" src="channel-pictures/channel-3.jpeg">
+          </a>
+          <div class="channel-tooltip">
+            <img class="channel-tooltip-picture" src="channel-pictures/channel-3.jpeg">
+            <div>
+              <div class="channel-tooltip-name">
+                SSSniperWolf
+              </div>
+              <div class="channel-tooltip-stats">
+                31M subscribers
               </div>
             </div>
           </div>
-          ...
         </div>
       </div>
+      ...
+    </div>
+  </div>
 
 ...
 
-      <div class="video-preview">
-        ...
-        <div class="video-info-grid">
-          <div class="channel-picture">
-            <div class="profile-picture-container">
-              <a href="https://youtube.com/c/veritasium" target="_blank">
-                <img class="profile-picture" src="channel-pictures/channel-4.jpeg">
-              </a>
-              <div class="channel-tooltip">
-                <img class="channel-tooltip-picture" src="channel-pictures/channel-4.jpeg">
-                <div>
-                  <div class="channel-tooltip-name">
-                    veritasium
-                  </div>
-                  <div class="channel-tooltip-stats">
-                    11.5M subscribers
-                  </div>
-                </div>
+  <div class="video-preview">
+    ...
+    <div class="video-info-grid">
+      <div class="channel-picture">
+        <div class="profile-picture-container">
+          <a href="https://youtube.com/c/veritasium" target="_blank">
+            <img class="profile-picture" src="channel-pictures/channel-4.jpeg">
+          </a>
+          <div class="channel-tooltip">
+            <img class="channel-tooltip-picture" src="channel-pictures/channel-4.jpeg">
+            <div>
+              <div class="channel-tooltip-name">
+                veritasium
+              </div>
+              <div class="channel-tooltip-stats">
+                11.5M subscribers
               </div>
             </div>
           </div>
-          ...
         </div>
       </div>
+      ...
+    </div>
+  </div>
 
 ...
 
-      <div class="video-preview">
-        ...
-        <div class="video-info-grid">
-          <div class="channel-picture">
-            <div class="profile-picture-container">
-              <a href="https://youtube.com/c/CSDojo" target="_blank">
-                <img class="profile-picture" src="channel-pictures/channel-5.jpeg">
-              </a>
-              <div class="channel-tooltip">
-                <img class="channel-tooltip-picture" src="channel-pictures/channel-5.jpeg">
-                <div>
-                  <div class="channel-tooltip-name">
-                    CS Dojo
-                  </div>
-                  <div class="channel-tooltip-stats">
-                    1.79M subscribers
-                  </div>
-                </div>
+  <div class="video-preview">
+    ...
+    <div class="video-info-grid">
+      <div class="channel-picture">
+        <div class="profile-picture-container">
+          <a href="https://youtube.com/c/CSDojo" target="_blank">
+            <img class="profile-picture" src="channel-pictures/channel-5.jpeg">
+          </a>
+          <div class="channel-tooltip">
+            <img class="channel-tooltip-picture" src="channel-pictures/channel-5.jpeg">
+            <div>
+              <div class="channel-tooltip-name">
+                CS Dojo
+              </div>
+              <div class="channel-tooltip-stats">
+                1.79M subscribers
               </div>
             </div>
           </div>
-          ...
         </div>
       </div>
+      ...
+    </div>
+  </div>
 
 ...
 
-      <div class="video-preview">
-        ...
-        <div class="video-info-grid">
-          <div class="channel-picture">
-            <div class="profile-picture-container">
-              <a href="https://youtube.com/c/MrBeast6000" target="_blank">
-                <img class="profile-picture" src="channel-pictures/channel-6.jpeg">
-              </a>
-              <div class="channel-tooltip">
-                <img class="channel-tooltip-picture" src="channel-pictures/channel-6.jpeg">
-                <div>
-                  <div class="channel-tooltip-name">
-                    MrBeast
-                  </div>
-                  <div class="channel-tooltip-stats">
-                    90.6M subscribers
-                  </div>
-                </div>
+  <div class="video-preview">
+    ...
+    <div class="video-info-grid">
+      <div class="channel-picture">
+        <div class="profile-picture-container">
+          <a href="https://youtube.com/c/MrBeast6000" target="_blank">
+            <img class="profile-picture" src="channel-pictures/channel-6.jpeg">
+          </a>
+          <div class="channel-tooltip">
+            <img class="channel-tooltip-picture" src="channel-pictures/channel-6.jpeg">
+            <div>
+              <div class="channel-tooltip-name">
+                MrBeast
+              </div>
+              <div class="channel-tooltip-stats">
+                90.6M subscribers
               </div>
             </div>
           </div>
-          ...
         </div>
       </div>
+      ...
+    </div>
+  </div>
 
 ...
+
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-16/tool-tip/index.html b/4-Exercises/Lesson-16/tool-tip/index.html
new file mode 100644
index 0000000..4c3e4aa
--- /dev/null
+++ b/4-Exercises/Lesson-16/tool-tip/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=mic" />
+    <link rel="stylesheet" href="style.css">
+    <title>ToolTip-Example</title>
+</head>
+<body>
+    <div class="container">
+        <span class="material-symbols-outlined mic">
+            mic
+        </span>
+        <p class="tooltip">Search With Voice</p>
+        
+    </div>
+        
+    <div class="rectengular">
+
+    </div>
+    <!-- <div class="container">
+        <span class="material-symbols-outlined mic">mic</span>
+        <p class="tooltip">Search With Voice</p>
+    </div> -->
+</body>
+</html>
\ No newline at end of file
diff --git a/4-Exercises/Lesson-16/tool-tip/style.css b/4-Exercises/Lesson-16/tool-tip/style.css
new file mode 100644
index 0000000..0e7a595
--- /dev/null
+++ b/4-Exercises/Lesson-16/tool-tip/style.css
@@ -0,0 +1,61 @@
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+}
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;  
+    font-size: 50px;
+}
+.material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    font-weight: 900;
+    font-style: normal;
+    font-size: 60px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+span.mic {
+    cursor: pointer;
+}
+p.tooltip {
+    position: absolute;
+    top: -70px;
+    background: black;
+    color: white;
+    font-size: 20px;
+    padding: 10px;
+    border-radius: 10px;
+    white-space: nowrap;
+    transform: translateY(20deg);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 200ms;
+}
+p::before {
+    content: '';
+    position: absolute;
+    top: 43px;
+    left: 72px;
+    height: 0;
+    width: 0;
+    border-right: 10px solid transparent;
+    border-left: 10px solid transparent;
+    border-top: 10px solid black;
+}
+div:hover p.tooltip{
+    opacity: 1;
+}
+

From afde56bc8d26f55cec332a0d44811c417469167d Mon Sep 17 00:00:00 2001
From: Elyas Sharifi <elyassharifi2548@gmail.com>
Date: Wed, 25 Dec 2024 18:09:50 +0430
Subject: [PATCH 38/39] 1

---
 4-Exercises/Lesson-17/CSS-comments/style.css   | 11 +++++++++++
 4-Exercises/Lesson-17/HTML-comments/index.html | 16 ++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 4-Exercises/Lesson-17/CSS-comments/style.css
 create mode 100644 4-Exercises/Lesson-17/HTML-comments/index.html

diff --git a/4-Exercises/Lesson-17/CSS-comments/style.css b/4-Exercises/Lesson-17/CSS-comments/style.css
new file mode 100644
index 0000000..b46edc9
--- /dev/null
+++ b/4-Exercises/Lesson-17/CSS-comments/style.css
@@ -0,0 +1,11 @@
+
+
+/* This is a CSS comment*/
+
+/*
+
+    This is a multi line CSS comment
+
+    
+*/
+
diff --git a/4-Exercises/Lesson-17/HTML-comments/index.html b/4-Exercises/Lesson-17/HTML-comments/index.html
new file mode 100644
index 0000000..fe83409
--- /dev/null
+++ b/4-Exercises/Lesson-17/HTML-comments/index.html
@@ -0,0 +1,16 @@
+
+
+<!-- This is an HTML comment -->
+
+
+<!--
+
+    This is a multi line HTML comment
+
+-->
+
+
+
+
+
+

From 8ca45ce965b08f83cfc697fdeb8e534c79ba1ef6 Mon Sep 17 00:00:00 2001
From: Leo Nexus <elyassharifi2548@gmail.com>
Date: Wed, 30 Apr 2025 12:39:23 +0430
Subject: [PATCH 39/39] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7a2feb7..f2e1832 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
 
 <h1>HTML and CSS Exercise Done!</h1>
-<h2>By Elyas Sharifi</h2>
+<h2>By Leo Nexus</h2>
 <h3>Powerd By HTML and CSS</h3>