├── 7)SplitLandingPage ├── img │ ├── ps.jpg │ └── xbox.jpg ├── script.js ├── index.html ├── style.css.map ├── style.scss └── style.css ├── 9)SoundBoard ├── sounds │ ├── sound-board_sounds_boo.mp3 │ ├── sound-board_sounds_gasp.mp3 │ ├── sound-board_sounds_tada.mp3 │ ├── sound-board_sounds_wrong.mp3 │ ├── sound-board_sounds_victory.mp3 │ └── sound-board_sounds_applause.mp3 ├── script.js ├── style.css.map ├── index.html ├── style.scss └── style.css ├── 3)RotatingNavigation ├── script.js ├── style.css └── index.html ├── 10)DadJokes ├── script.js ├── index.html ├── style.css.map ├── style.scss └── style.css ├── 5)BlurryLoading ├── index.html ├── style.css.map ├── script.js ├── style.scss └── style.css ├── 6)ScrollAnimation ├── script.js ├── index.html ├── style.css.map ├── style.scss └── style.css ├── 1)ExpandingCards ├── script.js ├── style.css └── index.html ├── 4)HiddenSearchWidget ├── script.js ├── index.html └── style.css ├── 2)ProgressSteps ├── index.html ├── script.js └── style.css ├── 8)FormWaweAnimation ├── script.js ├── index.html ├── style.css.map ├── style.scss └── style.css └── README.md /7)SplitLandingPage/img/ps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lutfullahcelenk/50JavascriptProjects/HEAD/7)SplitLandingPage/img/ps.jpg -------------------------------------------------------------------------------- /7)SplitLandingPage/img/xbox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lutfullahcelenk/50JavascriptProjects/HEAD/7)SplitLandingPage/img/xbox.jpg -------------------------------------------------------------------------------- /9)SoundBoard/sounds/sound-board_sounds_boo.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lutfullahcelenk/50JavascriptProjects/HEAD/9)SoundBoard/sounds/sound-board_sounds_boo.mp3 -------------------------------------------------------------------------------- /9)SoundBoard/sounds/sound-board_sounds_gasp.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lutfullahcelenk/50JavascriptProjects/HEAD/9)SoundBoard/sounds/sound-board_sounds_gasp.mp3 -------------------------------------------------------------------------------- /9)SoundBoard/sounds/sound-board_sounds_tada.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lutfullahcelenk/50JavascriptProjects/HEAD/9)SoundBoard/sounds/sound-board_sounds_tada.mp3 -------------------------------------------------------------------------------- /9)SoundBoard/sounds/sound-board_sounds_wrong.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lutfullahcelenk/50JavascriptProjects/HEAD/9)SoundBoard/sounds/sound-board_sounds_wrong.mp3 -------------------------------------------------------------------------------- /9)SoundBoard/sounds/sound-board_sounds_victory.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lutfullahcelenk/50JavascriptProjects/HEAD/9)SoundBoard/sounds/sound-board_sounds_victory.mp3 -------------------------------------------------------------------------------- /9)SoundBoard/sounds/sound-board_sounds_applause.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lutfullahcelenk/50JavascriptProjects/HEAD/9)SoundBoard/sounds/sound-board_sounds_applause.mp3 -------------------------------------------------------------------------------- /3)RotatingNavigation/script.js: -------------------------------------------------------------------------------- 1 | 2 | const open = document.getElementById('open') 3 | const close = document.getElementById('close') 4 | const container = document.querySelector('.container') 5 | 6 | open.addEventListener('click', () => container.classList.add('show-nav')) 7 | 8 | close.addEventListener('click', () => container.classList.remove('show-nav')) -------------------------------------------------------------------------------- /10)DadJokes/script.js: -------------------------------------------------------------------------------- 1 | const jokeElement = document.getElementById("joke"); 2 | const jokeBtn = document.getElementById("jokeBtn"); 3 | 4 | jokeBtn.addEventListener("click",generateJoke) 5 | 6 | generateJoke(); 7 | 8 | async function generateJoke() { 9 | const config = { 10 | headers: { 11 | Accept: "application/json" 12 | } 13 | }; 14 | 15 | const res = await fetch("https://icanhazdadjoke.com", config); 16 | const data = await res.json(); 17 | 18 | jokeElement.innerHTML = data.joke; 19 | 20 | } -------------------------------------------------------------------------------- /5)BlurryLoading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /6)ScrollAnimation/script.js: -------------------------------------------------------------------------------- 1 | const body = document.querySelector("body"); 2 | const contents = document.querySelectorAll(".content"); 3 | 4 | window.addEventListener("scroll", () => { 5 | 6 | for (i = 0; i < contents.length; i++) { 7 | let contenttop = contents[i].getBoundingClientRect().top; 8 | let triggerBottom = window.innerHeight/5 *4; 9 | 10 | if (contenttop { 4 | element.addEventListener("click", () => { 5 | remove(); 6 | element.setAttribute("class", "active") 7 | }) 8 | }); 9 | 10 | function remove() { 11 | pictures.forEach(element => { 12 | element.setAttribute("class", "panel") 13 | }); 14 | } 15 | 16 | // it is important to use different fucntions in javaScript. By this way we use one 17 | // function in another function. it gives our codes flexibility.orders of lines 18 | // are crucial for working of the script -------------------------------------------------------------------------------- /10)DadJokes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Dad Jokes 9 | 10 | 11 | 12 | 13 |
14 |

Don't Laugh Challange

15 |
16 | 17 |
18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /9)SoundBoard/script.js: -------------------------------------------------------------------------------- 1 | const sounds = ["Applause", "Boo", "Gasp", "Tada", "Victory", "Wrong"]; 2 | 3 | sounds.forEach(sound =>{ 4 | const btn = document.createElement("button"); 5 | btn.classList.add("btn"); 6 | 7 | btn.innerText = sound; 8 | 9 | btn.addEventListener("click" , () => { 10 | stopSongs(); 11 | 12 | document.getElementById(sound).play(); 13 | }); 14 | 15 | document.getElementById("buttons").appendChild(btn); 16 | }); 17 | 18 | function stopSongs() { 19 | sounds.forEach(sound =>{ 20 | const song = document.getElementById(sound); 21 | 22 | song.pause(); 23 | song.currentTime = 0; 24 | }) 25 | }; -------------------------------------------------------------------------------- /4)HiddenSearchWidget/script.js: -------------------------------------------------------------------------------- 1 | const input = document.querySelector(".Search"); 2 | const button = document.querySelector(".btn"); 3 | 4 | button.addEventListener("click", () => { 5 | if (input.className == "Search") { 6 | opening(); 7 | } else { 8 | closing(); 9 | } 10 | 11 | }) 12 | 13 | function opening() { 14 | input.className = "Search-open"; 15 | 16 | } 17 | 18 | function closing() { 19 | 20 | if(input.value !== ""){ 21 | window.open(`https://www.google.com/search?q=${input.value}`); 22 | input.className= "Search-open"; 23 | input.value = ""; 24 | }else{ 25 | input.className = "Search"; 26 | } 27 | } -------------------------------------------------------------------------------- /7)SplitLandingPage/script.js: -------------------------------------------------------------------------------- 1 | const left = document.querySelector(".left"); 2 | const right = document.querySelector(".right"); 3 | 4 | left.addEventListener("mouseenter",()=>{ 5 | left.classList.add("active"); 6 | right.classList.add("passive"); 7 | }); 8 | 9 | left.addEventListener("mouseleave",()=>{ 10 | left.classList.remove("active"); 11 | right.classList.remove("passive"); 12 | }); 13 | 14 | right.addEventListener("mouseenter",()=>{ 15 | right.classList.add("active"); 16 | left.classList.add("passive"); 17 | }); 18 | 19 | right.addEventListener("mouseleave",()=>{ 20 | right.classList.remove("active"); 21 | left.classList.remove("passive"); 22 | }); -------------------------------------------------------------------------------- /7)SplitLandingPage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Split Landing Page 8 | 9 | 10 | 11 |
12 |

Playstation 5

13 | 14 |
15 | 16 |
17 |

XBox Series X

18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /6)ScrollAnimation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Scroll Animation 8 | 9 | 10 | 11 | 12 |

Scroll to see the animation

13 |
HTML5
14 |
CSS3
15 |
JAVASCRIPT
16 |
Bootstrap4
17 |
React JS
18 |
NodeJS
19 |
SASS
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /2)ProgressSteps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Progress Steps 8 | 9 | 10 | 11 |
12 |
13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /9)SoundBoard/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,CAAC,CAAA;EACG,UAAU,EAAE,UAAU;CACzB;;AAgBD,AAAA,IAAI,CAAA;EAVA,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,CAAC;EACT,QAAQ,EAAE,MAAM;EAChB,MAAM,EAAE,KAAK;EAKb,gBAAgB,EAhBF,OAAO;EAiBrB,WAAW,EAAE,wFAAyF;EACtG,SAAS,EAAE,OAAO;CACrB;;AAED,AAAA,QAAQ,CAAA;EACJ,OAAO,EAAE,IAAI;EAEb,eAAe,EAAE,YAAY;EAC7B,KAAK,EAAE,GAAG;CAmBb;;AAvBD,AAKI,QALI,CAKF,MAAM,CAAA;EACJ,KAAK,EAAE,KAAK;EACZ,gBAAgB,EA3BV,OAAO;EA4Bb,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,GAAG;EAClB,cAAc,EAAE,MAAM;EACtB,MAAM,EAAE,OAAO;EACf,OAAO,EAAE,IAAI;CAQhB;;AArBL,AAcQ,QAdA,CAKF,MAAM,AASH,MAAM,CAAA;EACH,OAAO,EAAE,GAAG;CACf;;AAhBT,AAiBQ,QAjBA,CAKF,MAAM,AAYH,MAAM,CAAA;EACH,SAAS,EAAE,UAAW;EACtB,gBAAgB,EAAE,SAAS;CAC9B", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /6)ScrollAnimation/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,OAAO,CAAC,kFAAI;AAEZ,AAAA,CAAC,CAAC;EACE,UAAU,EAAE,UAAU;CACzB;;AAeD,AAAA,IAAI,CAAC;EARD,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,UAAU;EAC3B,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,KAAK;EACjB,UAAU,EAAE,MAAM;EAKlB,MAAM,EAAE,QAAQ;EAChB,WAAW,EAAE,qBAAqB;EAClC,gBAAgB,EAjBD,KAAK;CAkBvB;;AAED,AAAA,QAAQ,CAAC;EACL,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,GAAG;EACX,gBAAgB,EA1BD,cAAc;EA2B7B,aAAa,EAAE,GAAG;EAClB,KAAK,EA3BI,KAAK;EA4Bd,SAAS,EAAE,QAAQ;EACnB,MAAM,EAAE,OAAO;EACf,SAAS,EAAE,iBAAiB;EAC5B,UAAU,EAAE,wBAAwB;CAQvC;;AArBD,AAeI,QAfI,AAeH,MAAM,CAAC;EACJ,SAAS,EAAE,GAAG;EACd,eAAe,EAAE,SAAS;EAC1B,gBAAgB,EAAE,WAAW;EAC7B,UAAU,EAAE,eAAe;CAC9B;;AAGL,AAAA,OAAO,CAAA;EACH,SAAS,EAAE,aAAa;CAC3B", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /8)FormWaweAnimation/script.js: -------------------------------------------------------------------------------- 1 | const divs = document.querySelectorAll("div"); 2 | const emailLabel = document.querySelector(".email"); 3 | const emailInput = document.querySelector(".e-mail"); 4 | const passwordLabel = document.querySelector(".password"); 5 | const passwordInput = document.querySelector(".pass-word"); 6 | 7 | emailInput.addEventListener("click", () => { 8 | emailLabel.classList.add("focuss") 9 | }); 10 | 11 | emailLabel.addEventListener("click", () => { 12 | emailLabel.classList.add("focuss") 13 | passwordInput.value.length == 0 ? passwordLabel.classList.remove("focuss") : null; 14 | }); 15 | 16 | passwordLabel.addEventListener("click", () => { 17 | passwordLabel.classList.add("focuss") 18 | emailInput.value.length == 0 ? emailLabel.classList.remove("focuss") : null; 19 | }); 20 | 21 | passwordInput.addEventListener("click", () => { 22 | passwordLabel.classList.add("focuss") 23 | }); -------------------------------------------------------------------------------- /5)BlurryLoading/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": ";AAIA,AAAA,CAAC,CAAC;EACE,UAAU,EAAE,UAAU;CACzB;;AAkBD,AAAA,IAAI,CAAC;EAfD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,MAAM,EAAE,KAAK;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,QAAQ,EAAE,MAAM;EAWhB,WAAW,EA1BR,cAAc,EACrB,UAAU;EA0BN,KAAK,EAzBD,IAAI;CA0BX;;AAED,AAAA,IAAI,CAAC;EACD,QAAQ,EAAE,QAAQ;EAtBlB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,MAAM,EAAE,KAAK;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,QAAQ,EAAE,MAAM;EAkBhB,KAAK,EAAE,IAAI;EACX,gBAAgB,EAAE,4JAA4J;EAf9K,mBAAmB,EAAE,MAAM;EAC3B,iBAAiB,EAAE,SAAS;EAC5B,eAAe,EAAE,KAAK;EAetB,MAAM,EAAE,UAAU;CACrB;;AAED,AAAA,GAAG,CAAC;EACA,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,EAAE;EACX,SAAS,EAAE,OAAO;EAClB,MAAM,EAAE,GAAG,CAAC,KAAK,CAzCb,IAAI;EA0CR,aAAa,EAAE,GAAG;CACrB;;AAGD;;;;EAIE", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /4)HiddenSearchWidget/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hidden Search Widget 9 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /4)HiddenSearchWidget/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body{ 6 | margin: 0; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | height: 100vh; 11 | background-color: cornflowerblue; 12 | overflow: hidden; 13 | font-family: Arial, Helvetica, sans-serif; 14 | } 15 | 16 | #container{ 17 | position: relative; 18 | display: flex; 19 | min-height: 5vh; 20 | } 21 | 22 | .btn{ 23 | position: absolute; 24 | padding: 6%; 25 | border: none; 26 | width: 5vh; 27 | height: 5vh; 28 | right: 0; 29 | z-index: 1; 30 | background-color: white; 31 | cursor: pointer; 32 | } 33 | 34 | .Search{ 35 | width: 25vh; 36 | outline: none; 37 | border: none; 38 | display: none; 39 | width: 5vh; 40 | height: 5vh; 41 | } 42 | 43 | 44 | .Search-open{ 45 | width: 25vh; 46 | outline: none; 47 | border: none; 48 | display: inline-block; 49 | } -------------------------------------------------------------------------------- /9)SoundBoard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sound Board 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /10)DadJokes/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,CAAC,CAAA;EACG,UAAU,EAAE,UAAU;CACzB;;AAED,AAAA,IAAI,CAAA;EACA,gBAAgB,EAAE,OAAO;EACzB,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,KAAK;EACb,QAAQ,EAAE,MAAM;EAChB,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,4BAA4B;EACzC,OAAO,EAAE,GAAG;CACf;;AAED,AAAA,IAAI,CAAA;EACA,gBAAgB,EAAE,IAAI;EACtB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,QAAQ;EACjB,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,KAAM;CAChB;;AAED,AAAA,EAAE,CAAA;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,GAAG;EACZ,cAAc,EAAE,KAAK;CACxB;;AAED,AAAA,KAAK,CAAA;EACD,SAAS,EAAE,GAAG;EACd,cAAc,EAAE,KAAK;EACrB,WAAW,EAAE,GAAG;EAChB,MAAM,EAAE,SAAS;EACjB,SAAS,EAAE,KAAK;CACnB;;AAED,AAAA,IAAI,CAAA;EACA,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,OAAO;EAChB,MAAM,EAAE,OAAO;EACf,SAAS,EAAE,KAAK;CAOnB;;AAdD,AAQI,IARA,AAQC,MAAM,CAAA;EACH,OAAO,EAAE,IAAI;CAChB;;AAVL,AAWI,IAXA,AAWC,OAAO,CAAA;EACJ,SAAS,EAAE,WAAW;CACzB", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /8)FormWaweAnimation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Form Wave Animation 9 | 10 | 11 |
12 |

Please Login

13 |
14 |
15 |
16 | 17 |
18 |
19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 |

Don't have an account? Register

27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /10)DadJokes/style.scss: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | }; 4 | 5 | body{ 6 | background-color: #686de0; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | overflow: hidden; 13 | margin: 0; 14 | font-family: Arial, Helvetica, sans-serif; 15 | padding: 4vh; 16 | } 17 | 18 | main{ 19 | background-color: #fff; 20 | border-radius: 10px; 21 | padding: 10vh 4vh; 22 | text-align: center; 23 | max-width: 100%; 24 | width: 160vh ; 25 | } 26 | 27 | h3{ 28 | margin: 0; 29 | opacity: 0.5; 30 | letter-spacing: 0.2vh; 31 | } 32 | 33 | .joke{ 34 | font-size: 6vh; 35 | letter-spacing: 0.1vh; 36 | line-height: 8vh; 37 | margin: 10vh auto; 38 | max-width: 120vh; 39 | } 40 | 41 | .btn{ 42 | background-color: #9F68E0; 43 | border: none; 44 | color: white; 45 | border-radius: 2vh; 46 | padding: 2vh 8vh; 47 | cursor: pointer; 48 | font-size: large; 49 | &:focus{ 50 | outline: none; 51 | } 52 | &:active{ 53 | transform: scale(0.98); 54 | } 55 | } -------------------------------------------------------------------------------- /5)BlurryLoading/script.js: -------------------------------------------------------------------------------- 1 | const backGround = document.querySelector("main"); 2 | const percentage = document.querySelector("div"); 3 | 4 | let loading = 0; 5 | let blurring = 10; 6 | 7 | page(); 8 | 9 | function page() { 10 | let interval = setInterval(exceed, 20); 11 | 12 | function exceed() { 13 | loading++; 14 | blurring--; 15 | if (loading == 100) { 16 | clearInterval(interval); 17 | } 18 | 19 | percentage.innerText = `${loading}%`; 20 | percentage.style.opacity = scale(loading,0,100,1,0.1) 21 | backGround.style.filter = `blur(${scale(loading,0,100,10,0)}px)` 22 | } 23 | } 24 | 25 | //we get this function from stackoverflow.com 26 | 27 | const scale = (num, in_min, in_max, out_min, out_max) => { 28 | return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min 29 | } 30 | 31 | /* WHAT WE LEARN IN THIS PROJECT ARE LISTED BELOW... 32 | 1) filter and blur arrange the blur of an element 33 | 2) setinterval-clearinterval must used together 34 | 3) `` using is important while we want to effect innertext 35 | 4) counter using 36 | 5) clearinterval must depend on a condition 37 | 6) setinterval should assign to a variable 38 | */ -------------------------------------------------------------------------------- /9)SoundBoard/style.scss: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | }; 4 | 5 | $backGroundColor: #9b67da; 6 | $buttonColor: #5e378f; 7 | 8 | @mixin perfectcentering { 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | text-align: center; 14 | margin: 0; 15 | overflow: hidden; 16 | height: 100vh; 17 | }; 18 | 19 | body{ 20 | @include perfectcentering; 21 | background-color: $backGroundColor; 22 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ; 23 | font-size: x-large; 24 | }; 25 | 26 | #buttons{ 27 | display: flex; 28 | // flex-wrap: wrap; 29 | justify-content: space-evenly; 30 | width: 50%; 31 | & button{ 32 | color: white; 33 | background-color: $buttonColor; 34 | padding: 2% 4%; 35 | border: none; 36 | border-radius: 5px; 37 | letter-spacing: 0.1rem; 38 | cursor: pointer; 39 | outline: none; 40 | &:hover{ 41 | opacity: 0.9; 42 | }; 43 | &:focus{ 44 | transform: scale(0.90); 45 | background-color: orangered; 46 | }; 47 | }; 48 | 49 | }; 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 50JavascriptProjects 2 | We have 50 projects which include HTML5, CSS3 ve Javascript extensions.
3 | You can copy the whole link for any project and paste search bar due to make the project displayed.
4 | Enjoy coding...
5 | 6 | 1)Expanding Cards -- https://lutfullahcelenk.github.io/50JavascriptProjects/1)ExpandingCards 7 | 8 | 2)ProgressingSteps -- https://lutfullahcelenk.github.io/50JavascriptProjects/2)ProgressSteps 9 | 10 | 3)RotatingNavigation -- https://lutfullahcelenk.github.io/50JavascriptProjects/3)RotatingNavigation 11 | 12 | 4)HiddenSearchWidget -- https://lutfullahcelenk.github.io/50JavascriptProjects/4)HiddenSearchWidget 13 | 14 | 5)BlurryLoading -- https://lutfullahcelenk.github.io/50JavascriptProjects/5)BlurryLoading 15 | 16 | 6)ScrollAnimation -- https://lutfullahcelenk.github.io/50JavascriptProjects/6)ScrollAnimation 17 | 18 | 7)SplitLandingPage -- https://lutfullahcelenk.github.io/50JavascriptProjects/7)SplitLandingPage 19 | 20 | 8)FormWaweAnimation -- https://lutfullahcelenk.github.io/50JavascriptProjects/8)FormWaweAnimation 21 | 22 | 9)SoundBoard -- https://lutfullahcelenk.github.io/50JavascriptProjects/9)SoundBoard 23 | 24 | 10)DadJokes -- https://lutfullahcelenk.github.io/50JavascriptProjects/10)DadJokes 25 | 26 | -------------------------------------------------------------------------------- /1)ExpandingCards/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | /* using vh helps us for using body with full height and it is also useful for 8 | responsive pages 9 | we also use visible hidden for texts in same classes. by this way only one 10 | class text became visible default */ 11 | 12 | body{ 13 | margin: 0; 14 | height: 100vh; 15 | font-family: 'Oswald', sans-serif 16 | } 17 | 18 | #container{ 19 | height: 100vh; 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | } 24 | 25 | .panel{ 26 | margin: 0.5%; 27 | height: 90vh; 28 | border-radius: 5vh; 29 | min-width: 12vh; 30 | opacity: 0.7; 31 | } 32 | 33 | .panel:hover{ 34 | opacity: 1; 35 | cursor: pointer; 36 | } 37 | 38 | h3{ 39 | visibility: hidden; 40 | } 41 | 42 | .active{ 43 | min-width: 110vh; 44 | height: 90vh; 45 | border-radius: 5vh; 46 | margin: 0.5%; 47 | display: flex; 48 | align-items: flex-end; 49 | color: white; 50 | padding: 2vh; 51 | letter-spacing: 0.3vh; 52 | font-size: x-large; 53 | opacity: 1; 54 | } 55 | 56 | .active h3{ 57 | visibility: visible; 58 | } -------------------------------------------------------------------------------- /6)ScrollAnimation/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | $backgroundColor : wheat; 8 | $contentBackColor: cornflowerblue; 9 | $fontColor : white; 10 | 11 | @mixin perfectcentering { 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: flex-start; 15 | align-items: center; 16 | min-height: 300vh; 17 | overflow-x: hidden; 18 | } 19 | 20 | body { 21 | @include perfectcentering; 22 | margin: 10vh 0 0; 23 | font-family: 'Gowun Batang', serif; 24 | background-color: $backgroundColor; 25 | } 26 | 27 | .content { 28 | display: flex; 29 | justify-content: center; 30 | align-items: center; 31 | width: 40vh; 32 | height: 20vh; 33 | margin: 2vh; 34 | background-color: $contentBackColor; 35 | border-radius: 3vh; 36 | color: $fontColor; 37 | font-size: xx-large; 38 | cursor: pointer; 39 | transform: translateX(-400%); 40 | transition: transform 1s ease-in-out; 41 | 42 | &:hover { 43 | font-size: 5vh; 44 | text-decoration: underline; 45 | background-color: yellowgreen; 46 | box-shadow: 1vh 2vh #888888; 47 | } 48 | } 49 | 50 | .active{ 51 | transform: translateX(0); 52 | } -------------------------------------------------------------------------------- /2)ProgressSteps/script.js: -------------------------------------------------------------------------------- 1 | const progress = document.querySelector(".progress"); 2 | const circles = document.querySelectorAll(".circle"); 3 | const prev = document.querySelector("#prev"); 4 | const next = document.querySelector("#next"); 5 | let numberOfActive = 1 6 | 7 | next.addEventListener("click",()=>{ 8 | numberOfActive++; 9 | if(numberOfActive>circles.length){ 10 | numberOfActive = circles.length 11 | } 12 | 13 | progressBar(); 14 | }) 15 | 16 | prev.addEventListener("click",()=>{ 17 | numberOfActive--; 18 | 19 | if(numberOfActive<1){ 20 | numberOfActive = 1 21 | } 22 | 23 | progressBar(); 24 | }) 25 | 26 | function progressBar(){ 27 | for(i=0; i 2 | 3 | 4 | 5 | 6 | 7 | 8 | Expanding Cards 9 | 10 | 11 | 12 | 14 | 15 | 16 |
17 |
19 |

Explore The World

20 |
21 | 22 |
24 |

Wild Forrest

25 |
26 | 27 |
29 |

Sunny Beach

30 |
31 | 32 |
34 |

City On Winter

35 |
36 | 37 |
39 |

Mountains - Clouds

40 |
41 | 42 | 43 |
44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /2)ProgressSteps/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | 4 | } 5 | 6 | :root{ 7 | --line-border-fill: #3498db; 8 | --line-border-empty: #e0e0e0 9 | } 10 | 11 | body{ 12 | background-color: #f6f7fb; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | margin: 0; 18 | height: 100vh; 19 | overflow: hidden; 20 | font-family: Arial, Helvetica, sans-serif; 21 | } 22 | 23 | main{ 24 | text-align: center; 25 | } 26 | 27 | #progress-container{ 28 | display: flex; 29 | justify-content: space-between; 30 | position: relative; 31 | margin-bottom: 5vh; 32 | max-width: 100%; 33 | width: 80vh; 34 | } 35 | 36 | #progress-container::before{ 37 | content: ""; 38 | background-color: var(--line-border-empty); 39 | position: absolute; 40 | top: 50%; 41 | left: 0; 42 | width: 100%; 43 | height: 0.5vh; 44 | transform: translateY(-50%); 45 | z-index: -1; 46 | } 47 | 48 | .progress{ 49 | background-color: var(--line-border-fill); 50 | position: absolute; 51 | top: 50%; 52 | left: 0; 53 | width: 0%; 54 | height: 0.5vh; 55 | transform: translateY(-50%); 56 | z-index: -1; 57 | transition: 0.4s ease ; 58 | 59 | } 60 | 61 | .circle{ 62 | background-color: #fff; 63 | color: #999; 64 | border-radius: 50%; 65 | height: 4vh; 66 | width: 4vh; 67 | display: flex; 68 | align-items: center; 69 | justify-content: center; 70 | border: 3px solid var(--line-border-empty); 71 | transition: 0.4s ease; 72 | } 73 | 74 | .circle.active{ 75 | border-color: var(--line-border-fill); 76 | } 77 | 78 | .btn{ 79 | background-color: var(--line-border-fill); 80 | color: #fff; 81 | border: none; 82 | border-radius: 1vh; 83 | padding: 1vh 4vh; 84 | cursor: pointer; 85 | margin: 1vh; 86 | font-size: 3vh; 87 | } 88 | 89 | .btn:active{ 90 | transform: scale(0.98); 91 | } 92 | 93 | .btn:focus{ 94 | outline: none; 95 | } 96 | 97 | .btn:disabled{ 98 | background-color: var(--line-border-empty); 99 | } -------------------------------------------------------------------------------- /8)FormWaweAnimation/style.scss: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | font-family: Arial, Helvetica, sans-serif; 4 | } 5 | $background-color : #3874AB; 6 | $main-background-color: #224567; 7 | $text-color: #e8f6ff; 8 | $text-focus-color : lightblue; 9 | $button-color : #264554; 10 | 11 | @mixin perfect-centering { 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | flex-direction: column; 16 | overflow: hidden; 17 | height: 100vh; 18 | margin: 0; 19 | } 20 | body{ 21 | @include perfect-centering(); 22 | line-height: 1.8rem; 23 | background-color: $background-color; 24 | } 25 | main{ 26 | background-color: $main-background-color; 27 | padding: 5vh; 28 | color: $text-color; 29 | min-width: 40vh; 30 | opacity: 0.8; 31 | font-size: 1.2rem; 32 | border-radius: 10px; 33 | & h3{ 34 | text-align: center; 35 | font-size: 2rem; 36 | margin-bottom: 3rem; 37 | } 38 | .form--label{ 39 | position: relative; 40 | padding: 2vh 0; 41 | & input{ 42 | background-color: transparent; 43 | border: none; 44 | outline: none; 45 | color: $text-color; 46 | font-size: 1rem; 47 | min-width: 100%; 48 | } 49 | & label{ 50 | position: absolute; 51 | top: 5vh; 52 | z-index: 100; 53 | } 54 | } 55 | } 56 | button{ 57 | padding: 1.5vh 13vh; 58 | font-size: 1.5rem; 59 | width: 100%; 60 | cursor: pointer; 61 | opacity: 0.8; 62 | border: none; 63 | outline: none; 64 | border-radius: 5px; 65 | color: $button-color; 66 | &:hover{ 67 | opacity: 1; 68 | background-color: darkorange; 69 | color: $text-color; 70 | } 71 | &:active{ 72 | transform: scale(0.98); 73 | } 74 | } 75 | p{ 76 | font-size: 1rem; 77 | margin-top: 3vh; 78 | & a{ 79 | text-decoration: none; 80 | color: lightblue; 81 | } 82 | } 83 | .focuss{ 84 | position: inherit; 85 | transform: translateY(-100%); 86 | transition: transform 1s ease-in-out; 87 | } 88 | .focussdiv{ 89 | color: $text-focus-color; 90 | } 91 | -------------------------------------------------------------------------------- /8)FormWaweAnimation/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | box-sizing: border-box; 4 | font-family: Arial, Helvetica, sans-serif; 5 | } 6 | 7 | body { 8 | display: -webkit-box; 9 | display: -ms-flexbox; 10 | display: flex; 11 | -webkit-box-align: center; 12 | -ms-flex-align: center; 13 | align-items: center; 14 | -webkit-box-pack: center; 15 | -ms-flex-pack: center; 16 | justify-content: center; 17 | -webkit-box-orient: vertical; 18 | -webkit-box-direction: normal; 19 | -ms-flex-direction: column; 20 | flex-direction: column; 21 | overflow: hidden; 22 | height: 100vh; 23 | margin: 0; 24 | line-height: 1.8rem; 25 | background-color: #3874AB; 26 | } 27 | 28 | main { 29 | background-color: #224567; 30 | padding: 5vh; 31 | color: #e8f6ff; 32 | min-width: 40vh; 33 | opacity: 0.8; 34 | font-size: 1.2rem; 35 | border-radius: 10px; 36 | } 37 | 38 | main h3 { 39 | text-align: center; 40 | font-size: 2rem; 41 | margin-bottom: 3rem; 42 | } 43 | 44 | main .form--label { 45 | position: relative; 46 | padding: 2vh 0; 47 | } 48 | 49 | main .form--label input { 50 | background-color: transparent; 51 | border: none; 52 | outline: none; 53 | color: #e8f6ff; 54 | font-size: 1rem; 55 | min-width: 100%; 56 | } 57 | 58 | main .form--label label { 59 | position: absolute; 60 | top: 5vh; 61 | z-index: 100; 62 | } 63 | 64 | button { 65 | padding: 1.5vh 13vh; 66 | font-size: 1.5rem; 67 | width: 100%; 68 | cursor: pointer; 69 | opacity: 0.8; 70 | border: none; 71 | outline: none; 72 | border-radius: 5px; 73 | color: #264554; 74 | } 75 | 76 | button:hover { 77 | opacity: 1; 78 | background-color: darkorange; 79 | color: #e8f6ff; 80 | } 81 | 82 | button:active { 83 | -webkit-transform: scale(0.98); 84 | transform: scale(0.98); 85 | } 86 | 87 | p { 88 | font-size: 1rem; 89 | margin-top: 3vh; 90 | } 91 | 92 | p a { 93 | text-decoration: none; 94 | color: lightblue; 95 | } 96 | 97 | .focuss { 98 | position: inherit; 99 | -webkit-transform: translateY(-100%); 100 | transform: translateY(-100%); 101 | -webkit-transition: -webkit-transform 1s ease-in-out; 102 | transition: -webkit-transform 1s ease-in-out; 103 | transition: transform 1s ease-in-out; 104 | transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out; 105 | } 106 | 107 | .focussdiv { 108 | color: lightblue; 109 | } 110 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /7)SplitLandingPage/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@200&display=swap'); 2 | 3 | $color : #fff; 4 | $left-backGroundColor: rgba(87, 84, 236, 0.7); 5 | $right-backGroundColor: rgba(43, 43, 43, 0.8); 6 | 7 | * { 8 | box-sizing: border-box; 9 | font-family: 'Prompt', sans-serif; 10 | } 11 | 12 | @mixin perfectcentering($flexDirection, $justifyContent) { 13 | margin: 0; 14 | display: flex; 15 | flex-direction: $flexDirection; 16 | justify-content: $justifyContent; 17 | align-items: center; 18 | height: 100vh; 19 | line-height: 1.8rem; 20 | overflow: hidden; 21 | } 22 | 23 | @mixin parallax { 24 | background-repeat: no-repeat; 25 | background-size: cover; 26 | } 27 | 28 | body { 29 | @include perfectcentering(row, center); 30 | } 31 | 32 | .content { 33 | @include perfectcentering(column, flex-start); 34 | width: 50%; 35 | font-size: 4vh; 36 | color: $color; 37 | transition: all 1s ease-in-out; 38 | transition-delay: 0.3s; 39 | } 40 | 41 | .left { 42 | position: relative; 43 | background-image: url(img/ps.jpg); 44 | @include parallax; 45 | } 46 | 47 | .left::before { 48 | position: absolute; 49 | content: ""; 50 | height: 100%; 51 | width: 100%; 52 | background-color: $left-backGroundColor; 53 | } 54 | 55 | .right { 56 | position: relative; 57 | background-image: url(img/xbox.jpg); 58 | @include parallax; 59 | } 60 | 61 | .right::before { 62 | position: absolute; 63 | content: ""; 64 | display: block; 65 | height: 100%; 66 | width: 100%; 67 | background-color: $right-backGroundColor; 68 | } 69 | 70 | h2 { 71 | position: absolute; 72 | margin-top: 30vh; 73 | color: $color; 74 | } 75 | 76 | button{ 77 | position: absolute; 78 | margin-top: 44vh; 79 | background-color: transparent; 80 | color: $color; 81 | border: 2px solid $color; 82 | padding: 2vh 9vh; 83 | font-weight: bolder; 84 | text-transform: uppercase; 85 | font-size: 1.5vh; 86 | cursor: pointer; 87 | &:hover{ 88 | font-size: 2vh; 89 | } 90 | } 91 | 92 | #ps-button:hover{ 93 | background-color: rgba(87, 84, 236, 1); 94 | border: none; 95 | } 96 | 97 | #xbox-button:hover{ 98 | background-color: rgba(28, 122, 28, 1); 99 | border: none; 100 | } 101 | 102 | .active{ 103 | @include parallax; 104 | width: 150%; 105 | } 106 | 107 | .passive{ 108 | @include parallax; 109 | width: 50%; 110 | } -------------------------------------------------------------------------------- /3)RotatingNavigation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Lato', sans-serif; 9 | background-color: #333; 10 | color: #222; 11 | overflow-x: hidden; 12 | margin: 0; 13 | } 14 | 15 | .container { 16 | background-color: #fafafa; 17 | transform-origin: top left; 18 | transition: transform 0.5s linear; 19 | width: 100vw; 20 | min-height: 100vh; 21 | padding: 50px; 22 | } 23 | 24 | .container.show-nav { 25 | transform: rotate(-20deg); 26 | } 27 | 28 | .circle-container { 29 | position: fixed; 30 | top: -100px; 31 | left: -100px; 32 | } 33 | 34 | .circle { 35 | background-color: #ff7979; 36 | height: 200px; 37 | width: 200px; 38 | border-radius: 50%; 39 | position: relative; 40 | transition: transform 0.5s linear; 41 | } 42 | 43 | .container.show-nav .circle { 44 | transform: rotate(-70deg); 45 | } 46 | 47 | .circle button { 48 | cursor: pointer; 49 | position: absolute; 50 | top: 50%; 51 | left: 50%; 52 | height: 100px; 53 | background: transparent; 54 | border: 0; 55 | font-size: 26px; 56 | color: #fff; 57 | } 58 | 59 | .circle button:focus { 60 | outline: none; 61 | } 62 | 63 | .circle button#open { 64 | left: 60%; 65 | } 66 | 67 | .circle button#close { 68 | top: 60%; 69 | transform: rotate(90deg); 70 | transform-origin: top left; 71 | } 72 | 73 | .container.show-nav + nav li { 74 | transform: translateX(0); 75 | transition-delay: 0.3s; 76 | } 77 | 78 | nav { 79 | position: fixed; 80 | bottom: 40px; 81 | left: 0; 82 | z-index: 100; 83 | } 84 | 85 | nav ul { 86 | list-style-type: none; 87 | padding-left: 30px; 88 | } 89 | 90 | nav ul li { 91 | text-transform: uppercase; 92 | color: #fff; 93 | margin: 40px 0; 94 | transform: translateX(-100%); 95 | transition: transform 0.4s ease-in; 96 | } 97 | 98 | nav ul li i { 99 | font-size: 20px; 100 | margin-right: 10px; 101 | } 102 | 103 | nav ul li + li { 104 | margin-left: 15px; 105 | transform: translateX(-150%); 106 | } 107 | 108 | nav ul li + li + li { 109 | margin-left: 30px; 110 | transform: translateX(-200%); 111 | } 112 | 113 | .content img { 114 | max-width: 100%; 115 | } 116 | 117 | .content { 118 | max-width: 1000px; 119 | margin: 50px auto; 120 | } 121 | 122 | .content h1 { 123 | margin: 0; 124 | } 125 | 126 | .content small { 127 | color: #555; 128 | font-style: italic; 129 | } 130 | 131 | .content p { 132 | color: #333; 133 | line-height: 1.5; 134 | } -------------------------------------------------------------------------------- /3)RotatingNavigation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Rotating Navigation 9 | 10 | 11 |
12 |
13 |
14 | 17 | 20 |
21 |
22 | 23 |
24 |

Amazing Article

25 | Florin Pop 26 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.

27 | 28 |

My Dog

29 | doggy 30 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?

31 |
32 |
33 | 34 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /7)SplitLandingPage/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Prompt:wght@200&display=swap"); 2 | * { 3 | -webkit-box-sizing: border-box; 4 | box-sizing: border-box; 5 | font-family: 'Prompt', sans-serif; 6 | } 7 | 8 | body { 9 | margin: 0; 10 | display: -webkit-box; 11 | display: -ms-flexbox; 12 | display: flex; 13 | -webkit-box-orient: horizontal; 14 | -webkit-box-direction: normal; 15 | -ms-flex-direction: row; 16 | flex-direction: row; 17 | -webkit-box-pack: center; 18 | -ms-flex-pack: center; 19 | justify-content: center; 20 | -webkit-box-align: center; 21 | -ms-flex-align: center; 22 | align-items: center; 23 | height: 100vh; 24 | line-height: 1.8rem; 25 | overflow: hidden; 26 | } 27 | 28 | .content { 29 | margin: 0; 30 | display: -webkit-box; 31 | display: -ms-flexbox; 32 | display: flex; 33 | -webkit-box-orient: vertical; 34 | -webkit-box-direction: normal; 35 | -ms-flex-direction: column; 36 | flex-direction: column; 37 | -webkit-box-pack: start; 38 | -ms-flex-pack: start; 39 | justify-content: flex-start; 40 | -webkit-box-align: center; 41 | -ms-flex-align: center; 42 | align-items: center; 43 | height: 100vh; 44 | line-height: 1.8rem; 45 | overflow: hidden; 46 | width: 50%; 47 | font-size: 4vh; 48 | color: #fff; 49 | -webkit-transition: all 1s ease-in-out; 50 | transition: all 1s ease-in-out; 51 | -webkit-transition-delay: 0.3s; 52 | transition-delay: 0.3s; 53 | } 54 | 55 | .left { 56 | position: relative; 57 | background-image: url(img/ps.jpg); 58 | background-repeat: no-repeat; 59 | background-size: cover; 60 | } 61 | 62 | .left::before { 63 | position: absolute; 64 | content: ""; 65 | height: 100%; 66 | width: 100%; 67 | background-color: rgba(87, 84, 236, 0.7); 68 | } 69 | 70 | .right { 71 | position: relative; 72 | background-image: url(img/xbox.jpg); 73 | background-repeat: no-repeat; 74 | background-size: cover; 75 | } 76 | 77 | .right::before { 78 | position: absolute; 79 | content: ""; 80 | display: block; 81 | height: 100%; 82 | width: 100%; 83 | background-color: rgba(43, 43, 43, 0.8); 84 | } 85 | 86 | h2 { 87 | position: absolute; 88 | margin-top: 30vh; 89 | color: #fff; 90 | } 91 | 92 | button { 93 | position: absolute; 94 | margin-top: 44vh; 95 | background-color: transparent; 96 | color: #fff; 97 | border: 2px solid #fff; 98 | padding: 2vh 9vh; 99 | font-weight: bolder; 100 | text-transform: uppercase; 101 | font-size: 1.5vh; 102 | cursor: pointer; 103 | } 104 | 105 | button:hover { 106 | font-size: 2vh; 107 | } 108 | 109 | #ps-button:hover { 110 | background-color: #5754ec; 111 | border: none; 112 | } 113 | 114 | #xbox-button:hover { 115 | background-color: #1c7a1c; 116 | border: none; 117 | } 118 | 119 | .active { 120 | background-repeat: no-repeat; 121 | background-size: cover; 122 | width: 150%; 123 | } 124 | 125 | .passive { 126 | background-repeat: no-repeat; 127 | background-size: cover; 128 | width: 50%; 129 | } 130 | /*# sourceMappingURL=style.css.map */ --------------------------------------------------------------------------------