├── Dicee Game ├── dicee.html ├── images │ ├── di.png │ ├── dice1.png │ ├── dice2.png │ ├── dice3.png │ ├── dice4.png │ ├── dice5.png │ └── dice6.png ├── main.js └── styles.css ├── Drum_Kit ├── images │ ├── crash.png │ ├── kick.png │ ├── snare.png │ ├── tom1.png │ ├── tom2.png │ ├── tom3.png │ └── tom4.png ├── index.html ├── index.js ├── sounds │ ├── crash.mp3 │ ├── kick-bass.mp3 │ ├── snare.mp3 │ ├── tom-1.mp3 │ ├── tom-2.mp3 │ ├── tom-3.mp3 │ └── tom-4.mp3 └── styles.css ├── JS calculater ├── bg.jpg ├── css │ ├── style.css │ ├── style.css.map │ └── style.scss ├── index.html └── js │ └── main.js ├── clock ├── index.html ├── main.js ├── style1.css └── tytol2.svg ├── color genreter ├── css │ ├── style.css │ ├── style.css.map │ └── style.scss ├── index.html └── js │ └── app.js ├── css grid practice project ├── index.html └── style.css ├── project time management ├── app.js ├── index.html ├── main2.svg ├── style.css └── tytol.svg └── video_bg ├── bg.mp4 ├── iconfinder_16769_blackhole_eclipse_star_sun_icon_128px.png ├── index.htm ├── main.js └── style.css /Dicee Game/dicee.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dicee 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Refresh Me

13 | 14 |
15 |

Player 1

16 | 17 |
18 | 19 |
20 |

Player 2

21 | 22 |
23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 33 | 34 | -------------------------------------------------------------------------------- /Dicee Game/images/di.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Dicee Game/images/di.png -------------------------------------------------------------------------------- /Dicee Game/images/dice1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Dicee Game/images/dice1.png -------------------------------------------------------------------------------- /Dicee Game/images/dice2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Dicee Game/images/dice2.png -------------------------------------------------------------------------------- /Dicee Game/images/dice3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Dicee Game/images/dice3.png -------------------------------------------------------------------------------- /Dicee Game/images/dice4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Dicee Game/images/dice4.png -------------------------------------------------------------------------------- /Dicee Game/images/dice5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Dicee Game/images/dice5.png -------------------------------------------------------------------------------- /Dicee Game/images/dice6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Dicee Game/images/dice6.png -------------------------------------------------------------------------------- /Dicee Game/main.js: -------------------------------------------------------------------------------- 1 | var rendom1 = Math.floor(Math.random() * 6)+1; 2 | var rendom2 = Math.floor(Math.random() * 6)+1; 3 | var rendomImg1 = "images/dice"+rendom1+".png" 4 | var rendomImg2 = "images/dice"+rendom2+".png" 5 | 6 | function winer(){ 7 | image(); 8 | if(rendom1 < rendom2){ 9 | document.querySelector("h1").innerHTML="Player 2 wins"; 10 | }else if(rendom1 === rendom2){ 11 | document.querySelector("h1").innerHTML="Drow" 12 | }else { 13 | document.querySelector("h1").innerHTML="Player 1 wins" 14 | } 15 | } 16 | 17 | function image(){ 18 | document.querySelector(".img1").setAttribute("src", rendomImg1); 19 | document.querySelector(".img2").setAttribute("src", rendomImg2); 20 | } 21 | winer(); 22 | 23 | function refreshPage(){ 24 | window.location.reload(); 25 | 26 | } 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /Dicee Game/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Viaoda+Libre&display=swap"); 2 | body { 3 | background-color: #99154e; 4 | font-family: "Viaoda Libre", cursive; 5 | overflow: hidden; 6 | } 7 | 8 | .container { 9 | width: 70%; 10 | margin: auto; 11 | text-align: center; 12 | } 13 | 14 | .dice { 15 | text-align: center; 16 | display: inline-block; 17 | } 18 | 19 | h1 { 20 | margin: 30px; 21 | text-shadow: 5px 0 #191c20; 22 | font-size: 8rem; 23 | color: #ebde29; 24 | } 25 | 26 | p { 27 | font-size: 2rem; 28 | color: #ebde29; 29 | } 30 | 31 | img { 32 | width: 80%; 33 | } 34 | 35 | button { 36 | width: 10%; 37 | height: 3rem; 38 | margin-left: 45%; 39 | margin-right: 45%; 40 | margin-top: 1rem; 41 | margin-bottom: 1rem; 42 | outline: none; 43 | border-radius: 20rem; 44 | background-color: #ebde29; 45 | text-transform: uppercase; 46 | } 47 | footer { 48 | color: #eeeeee; 49 | text-align: center; 50 | } 51 | 52 | .image360 { 53 | -webkit-animation-name: spin; 54 | -webkit-animation-duration: 0.6s; 55 | -webkit-animation-iteration-count: 1; 56 | -webkit-animation-timing-function: linear; 57 | 58 | -moz-animation-name: spin; 59 | -moz-animation-duration: 0.6s; 60 | -moz-animation-iteration-count: 1; 61 | -moz-animation-timing-function: linear; 62 | 63 | -ms-animation-name: spin; 64 | -ms-animation-duration: 0.6s; 65 | -ms-animation-iteration-count: 1; 66 | -ms-animation-timing-function: linear; 67 | 68 | animation-name: spin; 69 | animation-duration: 0.6s; 70 | animation-iteration-count: 1; 71 | animation-timing-function: linear; 72 | } 73 | 74 | @-moz-keyframes spin { 75 | from { 76 | -moz-transform: rotate(0deg); 77 | } 78 | to { 79 | -moz-transform: rotate(360deg); 80 | } 81 | } 82 | 83 | @-webkit-keyframes spin { 84 | from { 85 | -webkit-transform: rotate(0deg); 86 | } 87 | to { 88 | -webkit-transform: rotate(360deg); 89 | } 90 | } 91 | @keyframes spin { 92 | from { 93 | transform: rotate(0deg); 94 | } 95 | to { 96 | transform: rotate(360deg); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /Drum_Kit/images/crash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/images/crash.png -------------------------------------------------------------------------------- /Drum_Kit/images/kick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/images/kick.png -------------------------------------------------------------------------------- /Drum_Kit/images/snare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/images/snare.png -------------------------------------------------------------------------------- /Drum_Kit/images/tom1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/images/tom1.png -------------------------------------------------------------------------------- /Drum_Kit/images/tom2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/images/tom2.png -------------------------------------------------------------------------------- /Drum_Kit/images/tom3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/images/tom3.png -------------------------------------------------------------------------------- /Drum_Kit/images/tom4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/images/tom4.png -------------------------------------------------------------------------------- /Drum_Kit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Drum Kit 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Drum 🥁 Kit

14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Drum_Kit/index.js: -------------------------------------------------------------------------------- 1 | var btn = document.querySelectorAll(".drum").length 2 | 3 | for(var i = 0; i < btn; i++){ 4 | document.querySelectorAll(".drum")[i].addEventListener("click", click) 5 | 6 | } 7 | function click() { 8 | var ChangSound = this.innerHTML; 9 | keyClick(ChangSound) 10 | 11 | } 12 | document.addEventListener("keypress", test); 13 | 14 | function test(e) { 15 | keyClick(e.key) 16 | } 17 | function keyClick(key) { 18 | switch (key) { 19 | case "w": 20 | var audio = new Audio("sounds/tom-1.mp3") 21 | audio.play(); 22 | break; 23 | case "a": 24 | var audio = new Audio("sounds/tom-2.mp3") 25 | audio.play(); 26 | break; 27 | case "s": 28 | var audio = new Audio("sounds/tom-3.mp3") 29 | audio.play(); 30 | break; 31 | case "d": 32 | var audio = new Audio("sounds/tom-4.mp3") 33 | audio.play(); 34 | break; 35 | case "j": 36 | var audio = new Audio("sounds/crash.mp3") 37 | audio.play(); 38 | break; 39 | case "k": 40 | var audio = new Audio("sounds/kick-bass.mp3") 41 | audio.play(); 42 | case "l": 43 | var audio = new Audio("sounds/snare.mp3") 44 | audio.play(); 45 | break; 46 | 47 | default: console.log("sound is not defind") 48 | 49 | } 50 | 51 | } -------------------------------------------------------------------------------- /Drum_Kit/sounds/crash.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/sounds/crash.mp3 -------------------------------------------------------------------------------- /Drum_Kit/sounds/kick-bass.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/sounds/kick-bass.mp3 -------------------------------------------------------------------------------- /Drum_Kit/sounds/snare.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/sounds/snare.mp3 -------------------------------------------------------------------------------- /Drum_Kit/sounds/tom-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/sounds/tom-1.mp3 -------------------------------------------------------------------------------- /Drum_Kit/sounds/tom-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/sounds/tom-2.mp3 -------------------------------------------------------------------------------- /Drum_Kit/sounds/tom-3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/sounds/tom-3.mp3 -------------------------------------------------------------------------------- /Drum_Kit/sounds/tom-4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/Drum_Kit/sounds/tom-4.mp3 -------------------------------------------------------------------------------- /Drum_Kit/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | background-color: #283149; 4 | } 5 | 6 | h1 { 7 | font-size: 5rem; 8 | color: #dbedf3; 9 | font-family: "Arvo", cursive; 10 | text-shadow: 3px 0 #da0463; 11 | } 12 | 13 | footer { 14 | color: #dbedf3; 15 | font-family: sans-serif; 16 | } 17 | 18 | .w { 19 | background-image: url("images/tom1.png"); 20 | } 21 | 22 | .a { 23 | background-image: url("images/tom2.png"); 24 | } 25 | 26 | .s { 27 | background-image: url("images/tom3.png"); 28 | } 29 | 30 | .d { 31 | background-image: url("images/tom4.png"); 32 | } 33 | 34 | .j { 35 | background-image: url("images/crash.png"); 36 | } 37 | 38 | .k { 39 | background-image: url("images/kick.png"); 40 | } 41 | 42 | .l { 43 | background-image: url("images/snare.png"); 44 | } 45 | 46 | .set { 47 | margin: 10% auto; 48 | } 49 | 50 | .game-over { 51 | background-color: red; 52 | opacity: 0.8; 53 | } 54 | 55 | .pressed { 56 | box-shadow: 0 3px 4px 0 #dbedf3; 57 | opacity: 0.5; 58 | } 59 | 60 | .red { 61 | color: red; 62 | } 63 | 64 | .drum { 65 | outline: none; 66 | border: 10px solid #404b69; 67 | font-size: 5rem; 68 | font-family: "Arvo", cursive; 69 | line-height: 2; 70 | font-weight: 900; 71 | color: #da0463; 72 | text-shadow: 3px 0 #dbedf3; 73 | border-radius: 15px; 74 | display: inline-block; 75 | width: 150px; 76 | height: 150px; 77 | text-align: center; 78 | margin: 10px; 79 | background-color: white; 80 | } 81 | 82 | -------------------------------------------------------------------------------- /JS calculater/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/JS calculater/bg.jpg -------------------------------------------------------------------------------- /JS calculater/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-image: url("/bg.jpg"); 3 | background-repeat: no-repeat; 4 | background-position: center; 5 | background-color: pink; 6 | } 7 | 8 | section { 9 | height: 100vh; 10 | display: -webkit-box; 11 | display: -ms-flexbox; 12 | display: flex; 13 | -webkit-box-align: center; 14 | -ms-flex-align: center; 15 | align-items: center; 16 | -webkit-box-pack: center; 17 | -ms-flex-pack: center; 18 | justify-content: center; 19 | -webkit-box-orient: vertical; 20 | -webkit-box-direction: normal; 21 | -ms-flex-direction: column; 22 | flex-direction: column; 23 | } 24 | 25 | section input { 26 | font-size: 2rem; 27 | height: 50px; 28 | width: 200px; 29 | color: #152d35; 30 | } 31 | 32 | section table tr { 33 | display: -webkit-box; 34 | display: -ms-flexbox; 35 | display: flex; 36 | -webkit-box-align: center; 37 | -ms-flex-align: center; 38 | align-items: center; 39 | -webkit-box-pack: center; 40 | -ms-flex-pack: center; 41 | justify-content: center; 42 | } 43 | 44 | section table tr td { 45 | height: 50px; 46 | width: 50px; 47 | } 48 | 49 | section table tr td button { 50 | font-size: 1.5rem; 51 | color: #d4ecdd; 52 | background-color: #345b63; 53 | height: 100%; 54 | width: 100%; 55 | -webkit-transition: 0.3s; 56 | transition: 0.3s; 57 | } 58 | 59 | section table tr td button:hover { 60 | color: #345b63; 61 | background-color: #d4ecdd; 62 | } 63 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /JS calculater/css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,IAAI,CAAC;EACH,gBAAgB,EAAE,cAAc;EAChC,iBAAiB,EAAE,SAAS;EAC5B,mBAAmB,EAAE,MAAM;EAC3B,gBAAgB,EAAE,IAAI;CACvB;;AACD,AAAA,OAAO,CAAC;EACN,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,cAAc,EAAE,MAAM;CA8BvB;;AAnCD,AAME,OANK,CAML,KAAK,CAAC;EACJ,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,OAAO;CACf;;AAXH,AAaI,OAbG,CAYL,KAAK,CACH,EAAE,CAAC;EACD,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;CAiBxB;;AAjCL,AAiBM,OAjBC,CAYL,KAAK,CACH,EAAE,CAIA,EAAE,CAAC;EACD,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;CAaZ;;AAhCP,AAoBQ,OApBD,CAYL,KAAK,CACH,EAAE,CAIA,EAAE,CAGA,MAAM,CAAC;EACL,SAAS,EAAE,MAAM;EACjB,KAAK,EAAE,OAAO;EACd,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,IAAI;CAKjB;;AA/BT,AA2BU,OA3BH,CAYL,KAAK,CACH,EAAE,CAIA,EAAE,CAGA,MAAM,AAOH,MAAM,CAAC;EACN,KAAK,EAAE,OAAO;EACd,gBAAgB,EAAE,OAAO;CAC1B", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /JS calculater/css/style.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background-image: url("/bg.jpg"); 3 | background-repeat: no-repeat; 4 | background-position: center; 5 | background-color: pink; 6 | } 7 | section { 8 | height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | flex-direction: column; 13 | input { 14 | font-size: 2rem; 15 | height: 50px; 16 | width: 200px; 17 | color: #152d35; 18 | } 19 | table { 20 | tr { 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | td { 25 | height: 50px; 26 | width: 50px; 27 | button { 28 | font-size: 1.5rem; 29 | color: #d4ecdd; 30 | background-color: #345b63; 31 | height: 100%; 32 | width: 100%; 33 | transition: 0.3s; 34 | &:hover { 35 | color: #345b63; 36 | background-color: #d4ecdd; 37 | } 38 | } 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /JS calculater/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Calculator by ninja_webtech 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 |
47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /JS calculater/js/main.js: -------------------------------------------------------------------------------- 1 | let screen = document.getElementById("screen") 2 | buttons = document.querySelectorAll("button") 3 | let screenValue = ""; 4 | 5 | for(item of buttons){ 6 | item.addEventListener("click", (e)=>{ 7 | buttonText =e.target.innerText; 8 | if(buttonText == "*"){ 9 | screenValue += buttonText; 10 | screen.value = screenValue; 11 | } 12 | else if(buttonText == "c"){ 13 | screenValue = ""; 14 | screen.value = screenValue; 15 | } 16 | else if(buttonText == "="){ 17 | screen.value = eval(screenValue); 18 | }else{ 19 | screenValue += buttonText; 20 | screen.value = screenValue; 21 | } 22 | }) 23 | } 24 | -------------------------------------------------------------------------------- /clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Clock 10 | 11 | 12 |
13 |
14 |
15 |
16 |
1
17 |
2
18 |
3
19 |
4
20 |
5
21 |
6
22 |
7
23 |
8
24 |
9
25 |
10
26 |
11
27 |
12
28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /clock/main.js: -------------------------------------------------------------------------------- 1 | setInterval(setClock, 1000) 2 | 3 | const hourHand = document.querySelector('[data-hour-hand]') 4 | const minuteHand = document.querySelector('[data-minute-hand]') 5 | const secondHand = document.querySelector('[data-second-hand]') 6 | 7 | function setClock() { 8 | const currentDate = new Date() 9 | const secondsRatio = currentDate.getSeconds() / 60 10 | const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60 11 | const hoursRatio = (minutesRatio + currentDate.getHours()) / 12 12 | setRotation(secondHand, secondsRatio) 13 | setRotation(minuteHand, minutesRatio) 14 | setRotation(hourHand, hoursRatio) 15 | } 16 | 17 | function setRotation(element, rotationRatio) { 18 | element.style.setProperty('--rotation', rotationRatio * 360) 19 | } 20 | 21 | setClock() -------------------------------------------------------------------------------- /clock/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #ffffff; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | min-height: 100vh; 7 | overflow: hidden; 8 | } 9 | 10 | .clock { 11 | width: 300px; 12 | height: 300px; 13 | background: transparent; 14 | border-radius: 50%; 15 | border: 5px solid black; 16 | position: relative; 17 | } 18 | 19 | .clock .number { 20 | --rotation: 0; 21 | position: absolute; 22 | width: 100%; 23 | height: 100%; 24 | text-align: center; 25 | transform: rotate(var(--rotation)); 26 | font-size: 1.8rem; 27 | } 28 | 29 | .clock .number1 { 30 | --rotation: 30deg; 31 | } 32 | .clock .number2 { 33 | --rotation: 60deg; 34 | } 35 | .clock .number3 { 36 | --rotation: 90deg; 37 | } 38 | .clock .number4 { 39 | --rotation: 120deg; 40 | } 41 | .clock .number5 { 42 | --rotation: 150deg; 43 | } 44 | .clock .number6 { 45 | --rotation: 180deg; 46 | } 47 | .clock .number7 { 48 | --rotation: 210deg; 49 | } 50 | .clock .number8 { 51 | --rotation: 240deg; 52 | } 53 | .clock .number9 { 54 | --rotation: 270deg; 55 | } 56 | .clock .number10 { 57 | --rotation: 300deg; 58 | } 59 | .clock .number11 { 60 | --rotation: 330deg; 61 | } 62 | 63 | .clock .hand { 64 | --rotation: 0; 65 | position: absolute; 66 | bottom: 50%; 67 | left: 50%; 68 | border: 1px solid rgb(0, 0, 0); 69 | border-top-left-radius: 10px; 70 | border-top-right-radius: 10px; 71 | transform-origin: bottom; 72 | z-index: 10; 73 | transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg)); 74 | } 75 | 76 | .clock::after { 77 | content: ""; 78 | position: absolute; 79 | background-color: black; 80 | z-index: 11; 81 | width: 15px; 82 | height: 15px; 83 | top: 50%; 84 | left: 50%; 85 | transform: translate(-50%, -50%); 86 | border-radius: 50%; 87 | } 88 | 89 | .clock .hand.second { 90 | width: 3px; 91 | height: 45%; 92 | background-color: red; 93 | } 94 | 95 | .clock .hand.minute { 96 | width: 7px; 97 | height: 40%; 98 | background-color: black; 99 | } 100 | 101 | .clock .hand.hour { 102 | width: 10px; 103 | height: 30%; 104 | background-color: black; 105 | } 106 | -------------------------------------------------------------------------------- /clock/tytol2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /color genreter/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | -webkit-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | background-color: white; 10 | display: -webkit-box; 11 | display: -ms-flexbox; 12 | display: flex; 13 | -webkit-box-align: center; 14 | -ms-flex-align: center; 15 | align-items: center; 16 | -webkit-box-pack: center; 17 | -ms-flex-pack: center; 18 | justify-content: center; 19 | -webkit-box-orient: vertical; 20 | -webkit-box-direction: normal; 21 | -ms-flex-direction: column; 22 | flex-direction: column; 23 | } 24 | 25 | h1 { 26 | margin-top: 3rem; 27 | font-size: 2.2rem; 28 | font-weight: 900; 29 | color: #7fc9fa; 30 | } 31 | 32 | #colordiv { 33 | margin-top: 1rem; 34 | height: 45vh; 35 | width: 45%; 36 | background: rgba(255, 255, 255, 0.25); 37 | -webkit-box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 38 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 39 | backdrop-filter: blur(4px); 40 | -webkit-backdrop-filter: blur(4px); 41 | border-radius: 10px; 42 | border: 1px solid rgba(255, 255, 255, 0.18); 43 | } 44 | 45 | button { 46 | cursor: pointer; 47 | margin-top: 2rem; 48 | background: rgba(127, 201, 250, 0.25); 49 | -webkit-box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 50 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 51 | backdrop-filter: blur(5px); 52 | -webkit-backdrop-filter: blur(5px); 53 | border-radius: 10px; 54 | border: 1px solid rgba(255, 255, 255, 0.18); 55 | width: 7rem; 56 | height: 2rem; 57 | } 58 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /color genreter/css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,CAAC,CAAC;EACA,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,UAAU,EAAE,UAAU;CACvB;;AACD,AAAA,IAAI,CAAC;EACH,gBAAgB,EAAE,KAAkB;EACpC,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,cAAc,EAAE,MAAM;CACvB;;AAED,AAAA,EAAE,CAAC;EACD,UAAU,EAAE,IAAI;EAChB,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,OAAkB;CAC1B;;AACD,AAAA,SAAS,CAAC;EACR,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,UAAU,EAAE,yBAAyB;EACrC,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAuB;EAChD,eAAe,EAAE,SAAS;EAC1B,uBAAuB,EAAE,SAAS;EAClC,aAAa,EAAE,IAAI;EACnB,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,yBAAyB;CAC5C;;AACD,AAAA,MAAM,CAAC;EACL,MAAM,EAAE,OAAO;EACf,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,yBAAyB;EACrC,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAuB;EAChD,eAAe,EAAE,SAAS;EAC1B,uBAAuB,EAAE,SAAS;EAClC,aAAa,EAAE,IAAI;EACnB,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,yBAAyB;EAC3C,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CACb", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /color genreter/css/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | background-color: rgb(255, 255, 255); 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | flex-direction: column; 12 | } 13 | 14 | h1 { 15 | margin-top: 3rem; 16 | font-size: 2.2rem; 17 | font-weight: 900; 18 | color: rgb(127, 201, 250); 19 | } 20 | #colordiv { 21 | margin-top: 1rem; 22 | height: 45vh; 23 | width: 45%; 24 | background: rgba(255, 255, 255, 0.25); 25 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 26 | backdrop-filter: blur(4px); 27 | -webkit-backdrop-filter: blur(4px); 28 | border-radius: 10px; 29 | border: 1px solid rgba(255, 255, 255, 0.18); 30 | } 31 | button { 32 | cursor: pointer; 33 | margin-top: 2rem; 34 | background: rgba(127, 201, 250, 0.25); 35 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 36 | backdrop-filter: blur(5px); 37 | -webkit-backdrop-filter: blur(5px); 38 | border-radius: 10px; 39 | border: 1px solid rgba(255, 255, 255, 0.18); 40 | width: 7rem; 41 | height: 2rem; 42 | } 43 | -------------------------------------------------------------------------------- /color genreter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | colours generator 10 | 11 | 12 |

Colour Generator By @ninja_webtech

13 |
14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /color genreter/js/app.js: -------------------------------------------------------------------------------- 1 | const main_div = document.getElementById("colordiv"); 2 | const btn = document.getElementById('btn'); 3 | 4 | btn.addEventListener('click', function (event) { 5 | let colorCode = () => Math.floor(Math.random()*16).toString(16) 6 | let makeColorCode = () => "#"+ Array.from({length: 6}).map(colorCode).join("") 7 | 8 | main_div.style.backgroundColor = makeColorCode() 9 | }); 10 | -------------------------------------------------------------------------------- /css grid practice project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | css grid practice project 9 | 10 | 11 |
12 |
1
13 |
2
14 |
3
15 |
4
16 |
5
17 |
6
18 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /css grid practice project/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | .grid { 7 | display: grid; 8 | grid-template-columns: repeat(5, 1fr); 9 | grid-template-rows: repeat(3, 1fr); 10 | height: 100vh; 11 | grid-gap: 1rem; 12 | padding: 2rem; 13 | } 14 | .item { 15 | background-color: aquamarine; 16 | border-radius: 1rem; 17 | } 18 | .item1 { 19 | grid-row-start: 1; 20 | grid-row-end: 3; 21 | grid-column-start: 1; 22 | grid-column-end: 3; 23 | background-color: blue; 24 | } 25 | .item2 { 26 | grid-row-start: 1; 27 | grid-row-end: 2; 28 | grid-column-start: 3; 29 | grid-column-end: 6; 30 | background-color: rgb(27, 27, 68); 31 | } 32 | .item3 { 33 | grid-row: 3/4; 34 | grid-column: 1/3; 35 | background-color: rgb(181, 181, 255); 36 | } 37 | .item4 { 38 | grid-row: 2/4; 39 | grid-column: 3/5; 40 | background-color: rgb(181, 255, 193); 41 | } 42 | .item5 { 43 | grid-row: 2/3; 44 | grid-column: 5/6; 45 | background-color: rgb(181, 255, 193); 46 | } 47 | .item6 { 48 | grid-row: 3/4; 49 | grid-column: 5/6; 50 | background-color: rgb(243, 78, 120); 51 | } 52 | 53 | @media only screen and (max-width: 992px) { 54 | .grid { 55 | height: 200vh; 56 | display: grid; 57 | grid-template-columns: repeat(5, 1fr); 58 | grid-template-rows: repeat(4, 1fr); 59 | } 60 | 61 | .item4 { 62 | grid-row: 2/4; 63 | grid-column: 3/6; 64 | background-color: rgb(181, 255, 193); 65 | } 66 | .item5 { 67 | grid-row: 4/5; 68 | grid-column: 1/3; 69 | background-color: rgb(181, 255, 193); 70 | } 71 | .item6 { 72 | grid-row: 4/5; 73 | grid-column: 3/6; 74 | background-color: rgb(243, 78, 120); 75 | } 76 | } 77 | 78 | @media only screen and (max-width: 768px) { 79 | .grid { 80 | display: grid; 81 | height: 200vh; 82 | grid-template-columns: repeat(2, 1fr); 83 | grid-template-rows: repeat(6, 1fr); 84 | } 85 | .item3 { 86 | grid-row: 3/4; 87 | grid-column: 1/3; 88 | background-color: rgb(181, 181, 255); 89 | } 90 | .item1 { 91 | grid-row: 1/2; 92 | grid-column: 1/3; 93 | background-color: rgb(33, 240, 222); 94 | } 95 | .item2 { 96 | grid-row: 2/3; 97 | grid-column: 1/3; 98 | background-color: rgb(28, 28, 51); 99 | } 100 | .item4 { 101 | grid-row: 4/5; 102 | grid-column: 1/3; 103 | background-color: rgb(181, 255, 193); 104 | } 105 | .item5 { 106 | grid-row: 5/6; 107 | grid-column: 1/3; 108 | background-color: rgb(181, 255, 193); 109 | } 110 | .item6 { 111 | grid-row: 6/7; 112 | grid-column: 1/3; 113 | background-color: rgb(243, 78, 120); 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /project time management/app.js: -------------------------------------------------------------------------------- 1 | const countdown = () => { 2 | const countDate = new Date("December 1, 2022 00:00:00").getTime(); 3 | const now = new Date().getTime(); 4 | const gap = countDate - now; 5 | 6 | const second = 1000; 7 | const minute = second * 60; 8 | const hour = minute * 60; 9 | const day = hour * 24; 10 | 11 | const textDay = Math.floor(gap / day); 12 | const texthour = Math.floor((gap % day) / hour); 13 | const textminute = Math.floor((gap % hour) / minute); 14 | const textsecond = Math.floor((gap % minute) / second); 15 | 16 | document.querySelector(".day").innerText = textDay; 17 | document.querySelector(".hours").innerText = texthour; 18 | document.querySelector(".minets").innerText = textminute; 19 | document.querySelector(".second").innerText = textsecond; 20 | }; 21 | 22 | setInterval(countdown, 1000); 23 | -------------------------------------------------------------------------------- /project time management/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dead line 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Time left for Next Project

15 |
16 |
17 |
18 |

day

19 |

DAY

20 | 21 |
22 |
23 |

hours

24 |

HOUR

25 | 26 |
27 |
28 |

minets

29 |

MINUTE

30 | 31 |
32 |
33 |

second

34 |

SECOND

35 | 36 |
37 |
38 |
39 | main image 40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /project time management/main2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project time management/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | body{ 7 | background-color: #c7ac98; 8 | } 9 | section{ 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | flex-direction: column; 14 | } 15 | h1{ 16 | font-size: 3rem; 17 | color: #ffffff; 18 | text-transform: capitalize; 19 | } 20 | figure img{ 21 | width: 60vw; 22 | height: 60vh; 23 | } 24 | .main-time { 25 | display: flex; 26 | text-align: center; 27 | flex-direction: row; 28 | } 29 | .main-time h3 { 30 | color: #181c22; 31 | font-size: 2rem; 32 | margin:0 2rem 0 2rem ; 33 | } -------------------------------------------------------------------------------- /project time management/tytol.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /video_bg/bg.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/video_bg/bg.mp4 -------------------------------------------------------------------------------- /video_bg/iconfinder_16769_blackhole_eclipse_star_sun_icon_128px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevVikramChoudhary/small_projects_for_beginners_using_Html-Css-Js/24a9b0f7aa4dab02dff769cd11881817168706a8/video_bg/iconfinder_16769_blackhole_eclipse_star_sun_icon_128px.png -------------------------------------------------------------------------------- /video_bg/index.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | SpaceX 2.o 10 | 11 | 12 |
13 | 14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 |

Never Stop

22 |

Exploring The World

23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 24 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 25 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 26 | consequat.

27 | Explore 28 |
29 | 34 |
35 |
36 | 43 |
44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /video_bg/main.js: -------------------------------------------------------------------------------- 1 | const menuToggle = document.querySelector('.toggle'); 2 | const showcase = document.querySelector('.showcase'); 3 | 4 | menuToggle.addEventListener('click', () => { 5 | menuToggle.classList.toggle('active'); 6 | showcase.classList.toggle('active'); 7 | }) -------------------------------------------------------------------------------- /video_bg/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); 2 | * 3 | { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | body{ 10 | background-color: #1e4152; 11 | } 12 | header 13 | { 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | width: 100%; 18 | padding: 40px 100px; 19 | z-index: 1000; 20 | display: flex; 21 | justify-content: space-between; 22 | align-items: center; 23 | } 24 | header .logo 25 | { 26 | color: #fff; 27 | text-transform: uppercase; 28 | cursor: pointer; 29 | } 30 | .toggle 31 | { 32 | position: relative; 33 | width: 60px; 34 | height: 60px; 35 | background: url(https://i.ibb.co/HrfVRcx/menu.png); 36 | background-repeat: no-repeat; 37 | background-size: 30px; 38 | background-position: center; 39 | cursor: pointer; 40 | } 41 | .toggle.active 42 | { 43 | background: url(https://i.ibb.co/rt3HybH/close.png); 44 | background-repeat: no-repeat; 45 | background-size: 25px; 46 | background-position: center; 47 | cursor: pointer; 48 | } 49 | .showcase 50 | { 51 | height: 100vh; 52 | position: absolute; 53 | right: 0; 54 | width: 100%; 55 | min-height: 100vh; 56 | padding: 100px; 57 | display: flex; 58 | justify-content: space-between; 59 | align-items: center; 60 | background: #111; 61 | transition: 0.5s; 62 | z-index: 2; 63 | } 64 | .showcase.active 65 | { 66 | right: 300px; 67 | } 68 | 69 | .showcase video 70 | { 71 | position: absolute; 72 | top: 0; 73 | left: 0; 74 | width: 100%; 75 | height: 100%; 76 | object-fit: cover; 77 | opacity: 0.8; 78 | } 79 | .overlay 80 | { 81 | position: absolute; 82 | top: 0; 83 | left: 0; 84 | width: 100%; 85 | height: 100%; 86 | background: #03a9f4; 87 | mix-blend-mode: overlay; 88 | } 89 | .text 90 | { 91 | position: relative; 92 | z-index: 10; 93 | } 94 | 95 | .text h2 96 | { 97 | font-size: 5em; 98 | font-weight: 800; 99 | color: #fff; 100 | line-height: 1em; 101 | text-transform: uppercase; 102 | } 103 | .text h3 104 | { 105 | font-size: 4em; 106 | font-weight: 700; 107 | color: #fff; 108 | line-height: 1em; 109 | text-transform: uppercase; 110 | } 111 | .text p 112 | { 113 | font-size: 1.1em; 114 | color: rgba(240, 236, 236, 0.747); 115 | margin: 20px 0; 116 | font-weight: 400; 117 | max-width: 700px; 118 | } 119 | .text a 120 | { 121 | display: inline-block; 122 | font-size: 1em; 123 | background: #fff; 124 | padding: 10px 30px; 125 | text-transform: uppercase; 126 | text-decoration: none; 127 | font-weight: 500; 128 | margin-top: 10px; 129 | color: #111; 130 | letter-spacing: 2px; 131 | transition: 0.3s; 132 | } 133 | .text a:hover 134 | { 135 | letter-spacing: 6px; 136 | color: #03a9f4; 137 | background-color: #1e4152; 138 | } 139 | .social 140 | { 141 | position: absolute; 142 | z-index: 10; 143 | bottom: 20px; 144 | display: flex; 145 | justify-content: center; 146 | align-items: center; 147 | } 148 | .social li 149 | { 150 | list-style: none; 151 | } 152 | .social li a 153 | { 154 | display: inline-block; 155 | margin-right: 20px; 156 | filter: invert(1); 157 | transform: scale(0.5); 158 | transition: 0.5s; 159 | } 160 | .social li a:hover 161 | { 162 | transform: scale(0.5) translateY(-15px); 163 | } 164 | .menu 165 | { 166 | position: absolute; 167 | top: 0; 168 | right: 0; 169 | width: 300px; 170 | height: 100%; 171 | display: flex; 172 | justify-content: center; 173 | align-items: center; 174 | } 175 | .menu ul 176 | { 177 | position: relative; 178 | } 179 | .menu ul li 180 | { 181 | list-style: none; 182 | } 183 | .menu ul li a 184 | { 185 | text-decoration: none; 186 | font-size: 24px; 187 | color: #111; 188 | } 189 | .menu ul li a:hover 190 | { 191 | color: #03a9f4; 192 | } 193 | 194 | @media (max-width: 991px) 195 | { 196 | .showcase, 197 | .showcase header 198 | { 199 | padding: 40px; 200 | } 201 | .text h2 202 | { 203 | font-size: 3em; 204 | } 205 | .text h3 206 | { 207 | font-size: 2em; 208 | } 209 | } --------------------------------------------------------------------------------