diff --git a/GradientChecker/.gitattributes b/GradientChecker/.gitattributes
new file mode 100644
index 0000000..dfe0770
--- /dev/null
+++ b/GradientChecker/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/GradientChecker/css/main.css b/GradientChecker/css/main.css
new file mode 100644
index 0000000..27129ec
--- /dev/null
+++ b/GradientChecker/css/main.css
@@ -0,0 +1,47 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+body{
+ font-family: 'Poppins';
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+}
+
+.content {
+ background: rgb(22 22 22 / 30%);
+ padding: 2rem;
+ box-shadow: 5px 5px 10px 0px rgb(22 22 22 / 70%);
+ border-radius: 5px;
+ height: 80vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ font-weight: 400;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+}
+
+#change_bg {
+ cursor: pointer;
+ outline: none;
+ border: 1px solid #161616;
+ padding: 10px 20px;
+ color: #161616;
+ background: transparent;
+ font-family: 'Poppins';
+}
+button#change_bg:hover {
+ background: #161616;
+ color: #fff;
+ transition: .7s;
+}
+
diff --git a/GradientChecker/index.html b/GradientChecker/index.html
new file mode 100644
index 0000000..dcba446
--- /dev/null
+++ b/GradientChecker/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">
+ <title>BG Gradient Checker</title>
+ <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+
+ <div class="content">
+
+ <div class="title">
+ <h1>BG Gradient Checker</h1>
+ </div>
+
+ <table>
+ <tr><strong>Please Start Hexcode With "#"</strong></tr>
+ <tr>
+ <td><label for="gradient_direction">Direction : </label></td>
+ <td><input type="text" placeholder="for ex : (top, right, bottom, left)" id="gradient_direction"></td>
+ </tr>
+ <tr>
+ <td><label for="first_hex">First Hex Code : </label></td>
+ <td><input type="text" id="first_hex"></td>
+ </tr>
+ <tr>
+ <td><label for="second_hex">Second Hex Code : </label></td>
+ <td><input type="text" id="second_hex"></td>
+ </tr>
+ </table>
+ <button id="change_bg">Check Gradeint</button>
+
+ </div>
+
+
+<script src="js/script.js"></script>
+</body>
+</html>
diff --git a/GradientChecker/js/script.js b/GradientChecker/js/script.js
new file mode 100644
index 0000000..df86dae
--- /dev/null
+++ b/GradientChecker/js/script.js
@@ -0,0 +1,17 @@
+let body = document.getElementsByTagName("BODY")[0];
+let gradientDirection = document.querySelector("#gradient_direction");
+let firstHex = document.querySelector("#first_hex");
+let secondHex = document.querySelector("#second_hex");
+let changeBg = document.querySelector("#change_bg");
+let content = document.querySelector(".content");
+
+changeBg.addEventListener("click", colorChange)
+
+function colorChange(){
+ // body.style.background = 'linear-gradient(to right, '
+ // + firstHex.value + ', ' + secondHex.value + ')';
+ body.style.background = `linear-gradient(to ${gradientDirection.value} , ${firstHex.value} , ${secondHex.value})`;
+ content.style.color = "#fff";
+ changeBg.style.border = "1px solid #fff";
+ changeBg.style.color = "#fff";
+}
diff --git a/Pez-Css-Keyframes/.gitattributes b/Pez-Css-Keyframes/.gitattributes
new file mode 100644
index 0000000..dfe0770
--- /dev/null
+++ b/Pez-Css-Keyframes/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/Pez-Css-Keyframes/css/main.css b/Pez-Css-Keyframes/css/main.css
new file mode 100644
index 0000000..934f759
--- /dev/null
+++ b/Pez-Css-Keyframes/css/main.css
@@ -0,0 +1,211 @@
+@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&display=swap');
+
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body{
+ background: #000;
+ font-family: 'Anonymous Pro';
+}
+
+button {
+ font-family: 'Anonymous Pro';
+}
+
+a{
+ text-decoration: none;
+ color: #fff;
+ letter-spacing: 2px;
+}
+
+header {
+ width: 100%;
+ height: 100vh;
+ /* background: gray; */
+ position: relative;
+ z-index: 1;
+}
+
+nav {
+ /* background: red; */
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ justify-content: space-between;
+ align-items: center;
+ height: 10vh;
+ padding: 0 5%;
+}
+
+.logo-box {
+ width: 50%;
+}
+
+.nav-items {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+}
+
+.nav-items ul {
+ display: flex;
+ list-style-type: none;
+ justify-content: space-between;
+}
+
+.nav-items ul li {
+ padding-left: 5rem;
+}
+
+.burger-box{
+ justify-content: flex-end;
+}
+
+.burger-box button{
+ background: transparent;
+ border: none;
+ color: #fff;
+ letter-spacing: 2px;
+ font-size: 1rem;
+ outline: none;
+ cursor: pointer;
+
+}
+
+.burger-box {
+ display: none;
+}
+
+.hero {
+ background: url(../img/hero_bg.jpeg);
+ background-position: center;
+ background-repeat: no-repeat;
+ /* background-size: cover; */
+ width: 100%;
+ height: 100vh;
+ position: absolute;
+ top: 0;
+ z-index: -1;
+ display: flex;
+ align-items: center;
+ padding: 0 5%;
+ animation: colorchange 20s linear infinite;
+}
+
+
+@keyframes colorchange{
+ 0%{filter: hue-rotate(0deg);}
+ 10%{filter: hue-rotate(45deg);}
+ 20%{filter: hue-rotate(90deg);}
+ 30%{filter: hue-rotate(135deg);}
+ 40%{filter: hue-rotate(180deg);}
+ 50%{filter: hue-rotate(225deg);}
+ 60%{filter: hue-rotate(270deg);}
+ 70%{filter: hue-rotate(315deg);}
+ 80%{filter: hue-rotate(0deg);}
+ 90%{filter: hue-rotate(45deg);}
+ 100%{filter: hue-rotate(90deg);}
+}
+
+.hero-content h1, h2 {
+ color: #fff;
+}
+
+.hero-content h1 {
+ font-size: 5rem;
+ text-transform: lowercase;
+ letter-spacing: 2px;
+ padding-bottom: 5%;
+}
+
+.hero-content h2 {
+ font-size: 2.5rem;
+ text-transform: lowercase;
+ letter-spacing: 2px;
+ padding-bottom: 5%;
+}
+
+.hero-content a {
+ font-size: 1.2rem;
+ border-bottom: 1px solid #fff;
+}
+
+
+/* Responsive Burger Menu */
+
+.res-menu{
+ width: 100%;
+ height: 0;
+ background: url(../img/menu_bg.jpg) , fixed;
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ box-shadow: inset 3px -3px 25px -15px #71d0f9;
+ transition: 1s;
+}
+
+.nav-items-res {
+ background: rgb(52 52 51 / 70%);
+ padding: 5% 10%;
+ box-shadow: 0px 0px 10px -1px #71d0f9;
+}
+
+.nav-items-res ul {
+ list-style-type: none;
+ display: flex;
+ flex-direction: column;
+ /* background: red; */
+ width: 100%;
+ height: 30vh;
+ justify-content: space-evenly;
+}
+
+.nav-items-res ul li{
+ text-align: center;
+ padding-bottom: 1rem;
+}
+
+.close_btn_sec{
+ position: absolute;
+ bottom: 0%;
+ right: 0%;
+ padding: 5%;
+}
+
+#close_nav{
+ background: transparent;
+ border: none;
+ color: #fff;
+ letter-spacing: 2px;
+ font-size: 1rem;
+ outline: none;
+ cursor: pointer;
+}
+
+
+
+
+
+
+
+
+@media screen and (max-width:1024px){
+ .nav-items{
+ display: none;
+ }
+ .burger-box {
+ display: flex;
+ }
+}
+
+@media screen and (max-width:769px){
+ .hero{
+ background-size: cover;
+ }
+}
\ No newline at end of file
diff --git a/Pez-Css-Keyframes/img/hero_bg.jpeg b/Pez-Css-Keyframes/img/hero_bg.jpeg
new file mode 100644
index 0000000..92cad0a
Binary files /dev/null and b/Pez-Css-Keyframes/img/hero_bg.jpeg differ
diff --git a/Pez-Css-Keyframes/img/menu_bg.jpg b/Pez-Css-Keyframes/img/menu_bg.jpg
new file mode 100644
index 0000000..7589a2b
Binary files /dev/null and b/Pez-Css-Keyframes/img/menu_bg.jpg differ
diff --git a/Pez-Css-Keyframes/img/moin.jpeg b/Pez-Css-Keyframes/img/moin.jpeg
new file mode 100644
index 0000000..fd2ea99
Binary files /dev/null and b/Pez-Css-Keyframes/img/moin.jpeg differ
diff --git a/Pez-Css-Keyframes/index.html b/Pez-Css-Keyframes/index.html
new file mode 100644
index 0000000..bbf7995
--- /dev/null
+++ b/Pez-Css-Keyframes/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <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>Pez - Shizan</title>
+ <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+<!-- Body Start -->
+ <div class="res-menu">
+ <div class="nav-items-res">
+ <ul>
+ <li><a href="index.html">.home</a></li>
+ <li><a href="index.html">.gallery</a></li>
+ <li><a href="index.html">.about</a></li>
+ <li><a href="index.html">.contact</a></li>
+ </ul>
+ </div>
+ <div class="close_btn_sec">
+ <button id="close_nav">.close</button>
+ </div>
+ </div>
+
+ <header>
+ <nav>
+ <div class="logo-box">
+ <h1><a href="index.html">.pez</a></h1>
+ </div>
+ <div class="nav-items">
+ <ul>
+ <li><a href="index.html">.home</a></li>
+ <li><a href="index.html">.gallery</a></li>
+ <li><a href="index.html">.about</a></li>
+ <li><a href="index.html">.contact</a></li>
+ </ul>
+ </div>
+ <div class="burger-box">
+ <button id="open_nav">.menu</button>
+ </div>
+ </nav>
+ <div class="hero">
+ <div class="hero-content">
+ <h1>Siamese</h1>
+ <h2>Fighting Fish</h2>
+ <a href="#">.learn more</a>
+ </div>
+ </div>
+ </header>
+
+
+
+
+<script src="js/script.js"></script>
+</body>
+</html>
diff --git a/Pez-Css-Keyframes/js/script.js b/Pez-Css-Keyframes/js/script.js
new file mode 100644
index 0000000..9af07b7
--- /dev/null
+++ b/Pez-Css-Keyframes/js/script.js
@@ -0,0 +1,12 @@
+let OpenNav = document.querySelector("#open_nav")
+let CloseNav = document.querySelector("#close_nav")
+let Nav = document.querySelector(".res-menu")
+
+OpenNav.addEventListener("click", function(){
+ Nav.style.height = "50vh";
+})
+
+CloseNav.addEventListener("click", function(){
+ document.querySelector(".res-menu").style.height = "0";
+})
+
diff --git a/Search Box/index.html b/Search Box/index.html
deleted file mode 100644
index ea6df58..0000000
--- a/Search Box/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
- <meta charset="UTF-8">
- <title>CodePen - Animated Search Box</title>
- <link rel="stylesheet" href="./style.css">
-
-</head>
-<body>
-<!-- partial:index.partial.html -->
-<div class="search-wrapper">
- <div class="input-holder">
- <input type="text" class="search-input" placeholder="Type to search" />
- <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
- </div>
- <span class="close" onclick="searchToggle(this, event);"></span>
-</div>
-<!-- partial -->
- <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src="./script.js"></script>
-
-</body>
-</html>