diff --git a/README.md b/README.md index 17e6622..f5b2fcd 100644 --- 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 new file mode 100644 index 0000000..57f5700 Binary files /dev/null and b/Thumbnail.png differ diff --git a/css/all.min.css b/css files/all.min.css similarity index 100% rename from css/all.min.css rename to css files/all.min.css diff --git a/css/normalize.css b/css files/normalize.css similarity index 100% rename from css/normalize.css rename to css files/normalize.css diff --git a/index.html b/index.html index 52eb735..be86873 100644 --- a/index.html +++ b/index.html @@ -4,41 +4,45 @@ - Kasper | Template Two - - - - - - + + Forked Kasper Template + + + + + + +
-
+
@@ -64,6 +68,7 @@

+
@@ -119,6 +124,7 @@

Vorem amet intuitive

+
@@ -135,6 +141,7 @@

Our Design Comes With...

+
@@ -214,6 +221,7 @@

Awesome Image

More
+
+
@@ -240,6 +249,7 @@

About Us

+
@@ -266,6 +276,7 @@

About Us

+
@@ -331,6 +342,7 @@

Php

+
@@ -339,6 +351,7 @@

Php

+
@@ -416,6 +429,7 @@

Platinum

+
@@ -430,6 +444,7 @@

Platinum

+
@@ -458,6 +473,7 @@

Where We Are

+
@@ -473,5 +489,10 @@

Where We Are

+ + + + + diff --git a/css/kasper.css b/kasper.css similarity index 91% rename from css/kasper.css rename to kasper.css index 64d2c29..faa3dd9 100644 --- a/css/kasper.css +++ b/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 new file mode 100644 index 0000000..1e50469 --- /dev/null +++ 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'); + }); +}) +