ElzeroWebSchool · mohammadzali2005 · Mar 8, 2026 · Mar 8, 2026 · Mar 8, 2026 · Mar 8, 2026
diff --git a/README.md b/README.md
@@ -1,3 +1,20 @@
-### Demo 
+# Forked Kasper Template
+This is a **forked version of the Kasper template** with major improvements to the header design and functionality.
 
-https://elzerowebschool.github.io/HTML_And_CSS_Template_Two/
+## 🚀 Features & Improvements
+- **Responsive Header**  
+  The header now adapts perfectly to all screen sizes (mobile, tablet, desktop).
+
+- **Modern Header Design**  
+  Redesigned with cleaner styling, improved spacing, and a more professional look.
+
+- **Search Functionality**  
+  Added a search bar to improve navigation and user experience.
+
+- **Optimized Code**  
+  Simplified and structured CSS/HTML for easier customization and maintenance.
+
+## Preview
+[Live Demo](https://mohammadzali2005.github.io/forked-kasper-template/)
+
+![Preview](https://github.com/mohammadzali2005/forked-kasper-template/blob/main/Thumbnail.png)
diff --git a/Thumbnail.png b/Thumbnail.png
diff --git a/css/all.min.css → css files/all.min.css b/css/all.min.css → css files/all.min.css
diff --git a/css/normalize.css → css files/normalize.css b/css/normalize.css → css files/normalize.css
diff --git a/index.html b/index.html
@@ -4,41 +4,45 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Kasper | Template Two</title>
-    <!-- Render All Elements Normally -->
-    <link rel="stylesheet" href="css/normalize.css" />
-    <!-- Font Awesome Library -->
-    <link rel="stylesheet" href="css/all.min.css" />
-    <!-- Main Template CSS File -->
-    <link rel="stylesheet" href="css/kasper.css" />
+    <meta name="description" content="a forked kasper template to improve the interactivity and design of the page">
+    <title>Forked Kasper Template</title>
+
+    <!-- CSS files -->
+    <link rel="stylesheet" href="css files/normalize.css" />
+    <link rel="stylesheet" href="css files/all.min.css" />
+    <link rel="stylesheet" href="kasper.css" />
+
     <!-- Google Fonts -->
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet" />
+
   </head>
   <body>
     <!-- Start Header -->
     <header>
       <div class="container">
-        <a href="#" class="logo">
+        <a href="./index.html" class="logo">
           <img src="images/logo.png" alt="Logo" />
         </a>
         <nav>
           <i class="fas fa-bars toggle-menu"></i>
           <ul>
-            <li><a class="active" href="#">Home</a></li>
-            <li><a href="#">Services</a></li>
-            <li><a href="#">Portfolio</a></li>
-            <li><a href="#">About</a></li>
-            <li><a href="#">Pricing</a></li>
-            <li><a href="#">Contact</a></li>
+            <li><a class="active header-link" href="./index.html">Home</a></li>
+            <li><a href="#" class="header-link">Services</a></li>
+            <li><a href="#" class="header-link">Portfolio</a></li>
+            <li><a href="#" class="header-link">About</a></li>
+            <li><a href="#" class="header-link">Pricing</a></li>
+            <li><a href="#" class="header-link">Contact</a></li>
           </ul>
           <div class="form">
-            <i class="fas fa-search"></i>
+            <input type="text" placeholder="Search..." class="search-input">
+            <i class="fas fa-search search-icon"></i>
           </div>
         </nav>
       </div>
     </header>
     <!-- End Header -->
+
     <!-- Start Landing -->
     <div class="landing">
       <div class="overlay"></div>
@@ -64,6 +68,7 @@ <h2>
       </ul>
     </div>
     <!-- End Landing -->
+
     <!-- Start Services -->
     <div class="services">
       <div class="container">
@@ -119,6 +124,7 @@ <h3>Vorem amet intuitive</h3>
       </div>
     </div>
     <!-- End Services -->
+
     <!-- Start Design -->
     <div class="design">
       <div class="image">
@@ -135,6 +141,7 @@ <h2>Our Design Comes With...</h2>
       </div>
     </div>
     <!-- End Design -->
+
     <!-- Start Portfolio -->
     <div class="portfolio">
       <div class="container">
@@ -214,6 +221,7 @@ <h4>Awesome Image</h4>
       <a href="#" class="more">More</a>
     </div>
     <!-- End Portfolio -->
+
     <!-- Start Video -->
     <div class="video">
       <video autoplay muted loop>
@@ -226,6 +234,7 @@ <h2>Super Awesome Video Here</h2>
       </div>
     </div>
     <!-- End Video -->
+
     <!-- Start About -->
     <div class="about">
       <div class="container">
@@ -240,6 +249,7 @@ <h2>About Us</h2>
       </div>
     </div>
     <!-- End About -->
+
     <!-- Start Stats -->
     <div class="stats">
       <div class="container">
@@ -266,6 +276,7 @@ <h2>About Us</h2>
       </div>
     </div>
     <!-- End Stats -->
+
     <!-- Start Skills -->
     <div class="our-skills">
       <div class="container">
@@ -331,6 +342,7 @@ <h4>Php</h4>
       </div>
     </div>
     <!-- End Skills -->
+
     <!-- Start Quote -->
     <div class="quote">
       <div class="container">
@@ -339,6 +351,7 @@ <h4>Php</h4>
       </div>
     </div>
     <!-- End Quote -->
+
     <!-- Start Pricing -->
     <div class="pricing">
       <div class="container">
@@ -416,6 +429,7 @@ <h3>Platinum</h3>
       </div>
     </div>
     <!-- End Pricing -->
+
     <!-- Start Subscribe -->
     <div class="subscribe">
       <div class="container">
@@ -430,6 +444,7 @@ <h3>Platinum</h3>
       </div>
     </div>
     <!-- End Subscribe -->
+
     <!-- Start Contact -->
     <div class="contact">
       <div class="container">
@@ -458,6 +473,7 @@ <h4>Where We Are</h4>
       </div>
     </div>
     <!-- End Contact -->
+
     <!-- Start Footer -->
     <div class="footer">
       <div class="container">
@@ -473,5 +489,10 @@ <h4>Where We Are</h4>
       </div>
     </div>
     <!-- End Footer -->
+
+    <!-- JavaScript file -->
+     <script src="./script.js"></script>
+
   </body>
 </html>
+
diff --git a/css/kasper.css → kasper.css b/css/kasper.css → kasper.css
@@ -5,6 +5,7 @@
   --section-padding: 100px;
 }
 /* End Variables */
+
 /* Start Global Rules */
 * {
   -webkit-box-sizing: border-box;
@@ -28,6 +29,7 @@ ul {
   margin-left: auto;
   margin-right: auto;
 }
+
 /* Small */
 @media (min-width: 768px) {
   .container {
@@ -36,8 +38,8 @@ ul {
 }
 /* Medium */
 @media (min-width: 992px) {
-  .container {
-    width: 970px;
+  .container{
+    width: 992px;
   }
 }
 /* Large */
@@ -47,6 +49,7 @@ ul {
   }
 }
 /* End Global Rules */
+
 /* Start Components */
 .main-heading {
   text-align: center;
@@ -88,6 +91,7 @@ ul {
   color: #777;
 }
 /* End Components */
+
 /* Start Header */
 header {
   position: absolute;
@@ -100,7 +104,7 @@ header .container {
   justify-content: space-between;
   align-items: center;
   position: relative;
-  min-height: 97px;
+  min-height: 100px;
 }
 header .container::after {
   content: "";
@@ -112,7 +116,7 @@ header .container::after {
   left: 15px;
 }
 header .logo img {
-  height: 40px;
+  height: 100%;;
 }
 header nav {
   flex: 1;
@@ -133,6 +137,9 @@ header nav ul {
   display: flex;
 }
 @media (max-width: 767px) {
+  header .container{
+    padding: 0 30px;
+  }
   header nav ul {
     display: none;
   }
@@ -150,25 +157,28 @@ header nav ul {
   }
 }
 header nav ul li a {
-  padding: 40px 10px;
+  padding: 15px 10px;
   display: block;
   color: white;
   text-decoration: none;
-  font-size: 14px;
-  transition: 0.3s;
+  font-size: 16px;
+  transition: color 0.3s;
   position: relative;
   z-index: 2;
 }
-header nav ul li a.active,
+header nav ul li a.active{
+  color: var(--main-color);
+}
 header nav ul li a:hover {
   color: var(--main-color);
-  border-bottom: 1px solid var(--main-color);
+  border-bottom: 2px solid var(--main-color);
 }
 header nav .form {
-  width: 40px;
-  height: 30px;
+  width: 260px;
+  height: 40px;
+  padding-left: 20px;
   position: relative;
-  margin-left: 30px;
+  margin-left: 10px;
   border-left: 1px solid white;
 }
 header nav .form i {
@@ -178,13 +188,34 @@ header nav .form i {
   top: 50%;
   transform: translateY(-50%);
   right: 0;
+  padding: 10px;
+}
+header nav .form i:hover{
+  cursor: pointer;
+}
+header nav .form input{
+  height: 100%;
+  width: 0px;
+  border: none;
+  border-radius: 20px;
+  padding-left: 10px;
+  font-size: 16px;
+  transition: width 0.5s; 
+}
+@media (max-width: 992px){
+  header nav .form{
+    display: none;
+  }
+  .search-input{
+    display: none;
+  }
 }
 /* End Header */
 /* Start Landing */
 .landing {
   min-height: 100vh;
   background-color: #1f2021;
-  background-image: url("../images/landing.jpg");
+  background-image: url("./images/landing.jpg");
   background-size: cover;
   position: relative;
 }
@@ -310,7 +341,7 @@ header nav .form i {
   padding-bottom: var(--section-padding);
   height: 600px;
   position: relative;
-  background-image: url("../images/design-features.jpg");
+  background-image: url("./images/design-features.jpg");
   background-size: cover;
   display: flex;
   align-items: center;
@@ -979,3 +1010,5 @@ header nav .form i {
   color: var(--main-color);
 }
 /* End Footer */
+
+
diff --git a/script.js b/script.js
@@ -0,0 +1,19 @@
+// Search bar for large screen sizes
+const searchIcon = document.querySelector('.search-icon');
+const searchInput = document.querySelector('.search-input');
+searchIcon.addEventListener('click', () => {
+    searchInput.style.width = searchInput.style.width === '0px' ? '200px' : '0px';
+});
+
+// interactivity for header link 
+const header_links = document.querySelectorAll('.header-link');
+
+header_links.forEach(haeder_link => {
+    haeder_link.addEventListener('click', () => {
+        header_links.forEach(l => {
+            l.classList.remove('active');
+        })
+        haeder_link.classList.add('active');
+    });
+})
+