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 @@ + + + + + + BG Gradient Checker + + + + +
+ +
+

BG Gradient Checker

+
+ + + Please Start Hexcode With "#" + + + + + + + + + + + + +
+ + +
+ + + + + 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 @@ + + + + + + + Pez - Shizan + + + + +
+
+ +
+
+ +
+
+ +
+ +
+
+

Siamese

+

Fighting Fish

+ .learn more +
+
+
+ + + + + + + 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 @@ - - - - - CodePen - Animated Search Box - - - - - -
-
- - -
- -
- - - - -