├── Analog Clock ├── images │ └── clouds.jpg └── index.html ├── Countdown Timer ├── headset.jpg ├── index.html ├── shoe.jpg ├── style.css └── style.js ├── Drumkit ├── images │ └── drum.jpg ├── index.html ├── sounds │ ├── boom.wav │ ├── clap.wav │ ├── hihat.wav │ ├── kick.wav │ ├── openhat.wav │ ├── ride.wav │ ├── snare.wav │ ├── tink.wav │ └── tom.wav └── style.css ├── Follow Along Navigation ├── index.html ├── style.css └── wall.jpg ├── Key sequence detection ├── index.html └── style.css ├── Music-Player ├── images │ ├── dream.jpg │ ├── melody.jpg │ └── peace.jpg ├── index.html ├── music │ ├── dream.mp3 │ ├── melody.mp3 │ └── peace.mp3 ├── script.js └── style.css ├── Password_Generator ├── index.html ├── script.js └── style.css ├── README.md ├── Trending movies ├── favicon.ico ├── index.html ├── script.js └── style.css ├── Whack-a-mole ├── dirt.svg ├── index.html ├── mole.svg ├── script.js └── style.css └── hulu-clone ├── favicon.ico ├── image ├── close.svg ├── cover-1.jpg ├── cover-2.jpg ├── cover-3.jpg ├── cover-4.jpg ├── facebook.svg ├── favicon.ico.png ├── header.jpg ├── instagram.svg ├── live-sports-logo-1.png ├── live-sports-logo-2.png ├── live-sports-logo-3.svg ├── live-sports-logo-4.png ├── live-sports-small.jpg ├── live-sports.jpg ├── logo.png ├── logos.png ├── network-logo-bg.png ├── screen.png ├── twitter.svg └── youtube.svg ├── index.html ├── script.js └── style.css /Analog Clock/images/clouds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Analog Clock/images/clouds.jpg -------------------------------------------------------------------------------- /Analog Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Analog Clock 6 | 7 | 8 | 9 | 10 |

11 |

12 |

13 |

14 |

15 | 16 | 17 | 79 | 80 | 106 | 107 | -------------------------------------------------------------------------------- /Countdown Timer/headset.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Countdown Timer/headset.jpg -------------------------------------------------------------------------------- /Countdown Timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Countdown Timer 9 | 10 | 11 | 12 | 13 |

Best deals of the day

14 |

15 |

16 |

17 |

🔥30% off on all branded shoes🔥

18 |

This festive season we have multiple amazing offers on all branded shoes. 19 | Bank and payment offers, and many more deals.This sale brings hundreds of deals 20 | across all branded shoes. To help you find the best discounts, 21 | we've handpicked some of the best deals and offers available on shoes during the ongoing discount Sale. Grab the offer soon!!🤩 22 |

23 |

24 |

Offer ends in

25 |

26 |

27 | 0 28 | days 29 |

30 |

31 | 0 32 | hours 33 |

34 |

35 | 0 36 | mins 37 |

38 |

39 | 0 40 | secs 41 |

42 |

43 |

44 |

45 |

46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Countdown Timer/shoe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Countdown Timer/shoe.jpg -------------------------------------------------------------------------------- /Countdown Timer/style.css: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap'); 3 | 4 | body{ 5 | font-family: 'Oswald', sans-serif; 6 | align-content: center; 7 | text-align: center; 8 | background-color:rgb(244, 248, 250); 9 | } 10 | 11 | .product{ 12 | display: flex; 13 | background-color: rgb(237, 243, 243); 14 | gap: 7rem; 15 | } 16 | 17 | .details{ 18 | display:flex; 19 | flex-direction: column; 20 | margin-right: 150px; 21 | } 22 | 23 | .wrap{ 24 | display: flex; 25 | flex-direction: row; 26 | } 27 | .timer{ 28 | display: flex; 29 | text-align: center; 30 | flex-direction: row; 31 | margin-left: 3rem; 32 | gap: 30px; 33 | color:red; 34 | margin-top: -5px; 35 | /* padding: 15px; */ 36 | } 37 | .days{ 38 | background-color: blanchedalmond; 39 | padding: 11px; 40 | font-size: 22px; 41 | } 42 | 43 | 44 | .hours{ 45 | background-color: blanchedalmond; 46 | padding: 11px; 47 | font-size: 22px; 48 | } 49 | .mins{ 50 | background-color: blanchedalmond; 51 | padding: 11px; 52 | font-size: 22px; 53 | } 54 | 55 | .secs{ 56 | background-color: blanchedalmond; 57 | padding: 11px; 58 | font-size: 22px; 59 | } 60 | 61 | 62 | h3{ 63 | color:lightseagreen; 64 | } 65 | 66 | .offer{ 67 | flex-basis: 6rem; 68 | } 69 | 70 | p{ 71 | text-align: left; 72 | } 73 | 74 | -------------------------------------------------------------------------------- /Countdown Timer/style.js: -------------------------------------------------------------------------------- 1 | function countdown() { 2 | const today = new Date(); 3 | var offerDate = new Date('30 oct 2021'); 4 | 5 | //If offer ends reset to new value 6 | if (today.getSeconds() == offerDate.getSeconds()) { 7 | offerDate = resetOfferDate(); 8 | } 9 | 10 | //offerTime will have the total millseconds 11 | const offerTime = offerDate - today; 12 | 13 | // 1 sec= 1000 ms 14 | // 1 min = 60 sec 15 | // 1 hour = 60 mins 16 | // 1 day = 24 hours 17 | const offerDays = Math.floor(offerTime / (1000 * 60 * 60 * 24)); 18 | const offerHours = Math.floor((offerTime / (1000 * 60 * 60) % 24)); 19 | const offerMins = Math.floor((offerTime / (1000 * 60) % 60)); 20 | const offerSecs = Math.floor((offerTime / 1000) % 60); 21 | 22 | const days_el = document.getElementById("days_left"); 23 | days_el.innerHTML = offerDays; 24 | const hours_el = document.getElementById("hours_left"); 25 | hours_el.innerHTML = offerHours; 26 | const mins_el = document.getElementById("mins_left"); 27 | mins_el.innerHTML = offerMins; 28 | const secs_el = document.getElementById("secs_left"); 29 | secs_el.innerHTML = offerSecs; 30 | } 31 | 32 | function resetOfferDate() { 33 | const futureDate = new Date(); 34 | futureDate.setDate(futureDate.getDate() + 15); 35 | return futureDate; 36 | } 37 | 38 | setInterval(countdown, 1000); -------------------------------------------------------------------------------- /Drumkit/images/drum.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Drumkit/images/drum.jpg -------------------------------------------------------------------------------- /Drumkit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drum kit 8 | 9 | 10 | 11 |

12 |

13 | A 14 | clap 15 |

16 |

17 | S 18 | hihat 19 |

20 |

21 | D 22 | kick 23 |

24 |

25 | F 26 | openhat 27 |

28 |

29 | G 30 | boom 31 |

32 |

33 | H 34 | ride 35 |

36 |

37 | J 38 | snare 39 |

40 |

41 | K 42 | tom 43 |

44 |

45 | L 46 | tink 47 |

48 |

49 | 50 |

51 |

52 |

53 |

54 |

55 |

56 |

57 |

58 |

59 | 60 | 61 | 81 | 82 | -------------------------------------------------------------------------------- /Drumkit/sounds/boom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Drumkit/sounds/boom.wav -------------------------------------------------------------------------------- /Drumkit/sounds/clap.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Drumkit/sounds/clap.wav -------------------------------------------------------------------------------- /Drumkit/sounds/hihat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Drumkit/sounds/hihat.wav -------------------------------------------------------------------------------- /Drumkit/sounds/kick.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Drumkit/sounds/kick.wav -------------------------------------------------------------------------------- /Drumkit/sounds/openhat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Drumkit/sounds/openhat.wav -------------------------------------------------------------------------------- /Drumkit/sounds/ride.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Drumkit/sounds/ride.wav -------------------------------------------------------------------------------- /Drumkit/sounds/snare.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Drumkit/sounds/snare.wav -------------------------------------------------------------------------------- /Drumkit/sounds/tink.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Drumkit/sounds/tink.wav -------------------------------------------------------------------------------- /Drumkit/sounds/tom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Drumkit/sounds/tom.wav -------------------------------------------------------------------------------- /Drumkit/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 10px; 3 | background: url('images/drum.jpg') bottom center; 4 | background-size: cover; 5 | } 6 | 7 | body,html { 8 | margin: 0; 9 | padding: 0; 10 | font-family: sans-serif; 11 | } 12 | 13 | .keys { 14 | display: flex; 15 | flex: 1; 16 | min-height: 100vh; 17 | align-items: center; 18 | justify-content: center; 19 | } 20 | 21 | .key { 22 | border: .4rem solid rgba(0, 0, 0, 0.24); 23 | border-radius: .5rem; 24 | margin: 1rem; 25 | font-size: 1.5rem; 26 | padding: 1rem .5rem; 27 | transition: all .07s ease; 28 | width: 10rem; 29 | text-align: center; 30 | color: white; 31 | background: rgba(58, 53, 53, 0.4); 32 | 33 | } 34 | 35 | .playing { 36 | transform: scale(1.1); 37 | border-color: #ffc600; 38 | box-shadow: 0 0 1rem #ffc600; 39 | } 40 | 41 | kbd { 42 | display: block; 43 | font-size: 4rem; 44 | } 45 | 46 | .sound { 47 | font-size: 1.2rem; 48 | text-transform: uppercase; 49 | letter-spacing: .1rem; 50 | color: #ffc600; 51 | } -------------------------------------------------------------------------------- /Follow Along Navigation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Follow-along Navigation 8 | 9 | 10 | 11 |

Follow-along Navigation

12 | 20 | 23 | 24 | 45 | 46 | -------------------------------------------------------------------------------- /Follow Along Navigation/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: url('./wall.jpg'); 3 | background-size: cover; 4 | font-family: 'montserrat', sans-serif; 5 | color: rgba(63, 13, 13, 0.74); 6 | text-align: center; 7 | } 8 | 9 | *, *::before, *::after{ 10 | padding: 0; 11 | margin: 0; 12 | box-sizing: border-box; 13 | } 14 | 15 | h1 { 16 | padding-top: 2em; 17 | font-size: 3rem; 18 | } 19 | 20 | nav { 21 | padding-top: 10%; 22 | } 23 | 24 | nav a { 25 | text-decoration: none; 26 | color: rgba(63, 13, 13, 0.74); 27 | padding-top: 1rem; 28 | padding: .5em; 29 | text-transform: uppercase; 30 | font-size: 1.25rem; 31 | } 32 | 33 | .highlight { 34 | transition: all 0.2s; 35 | border-bottom: 2px solid whitesmoke; 36 | position: absolute; 37 | top: 0; 38 | background: rgba(192, 137, 137, 0.835); 39 | /* background: rgba(153, 75, 75, 0.979); */ 40 | left: 0; 41 | z-index: -1; 42 | border-radius: 30px; 43 | display: block; 44 | box-shadow: 0 0 10px rgba(0,0,0,0.2); 45 | } 46 | 47 | 48 | .footer{ 49 | position: absolute; 50 | bottom: 10px; 51 | width: 100%; 52 | } 53 | 54 | .heart{color: #b14240;} 55 | 56 | 57 | -------------------------------------------------------------------------------- /Follow Along Navigation/wall.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Follow Along Navigation/wall.jpg -------------------------------------------------------------------------------- /Key sequence detection/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Key Sequence Detection 8 | 9 | 10 | 11 | 12 |

Enter your code

13 | 14 | 15 | 49 | 50 | -------------------------------------------------------------------------------- /Key sequence detection/style.css: -------------------------------------------------------------------------------- 1 | html{ 2 | background-color: #6b0f1a; 3 | background-image: linear-gradient(315deg, #6b0f1a 0%, #b91372 74%); 4 | } 5 | body { 6 | text-align: center; 7 | font-family: 'Raleway', sans-serif; 8 | } 9 | 10 | h1 { 11 | cursor: pointer; 12 | margin-top: calc(50vh - 16px); 13 | font-size: 40px; 14 | color: rgb(182, 37, 196); 15 | transition: .4s 16 | } 17 | 18 | h1:hover { 19 | color: rgba(205, 211, 150, 0.9); 20 | } -------------------------------------------------------------------------------- /Music-Player/images/dream.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Music-Player/images/dream.jpg -------------------------------------------------------------------------------- /Music-Player/images/melody.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Music-Player/images/melody.jpg -------------------------------------------------------------------------------- /Music-Player/images/peace.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Music-Player/images/peace.jpg -------------------------------------------------------------------------------- /Music-Player/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Music Player 8 | 9 | 10 | 11 | 12 | 13 |

Music Player

14 |

15 |

16 |

Melody

17 |

18 |

19 |

20 |

21 |

22 |

23 |

24 |

25 | 37 | 38 | 39 |

40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Music-Player/music/dream.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Music-Player/music/dream.mp3 -------------------------------------------------------------------------------- /Music-Player/music/melody.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Music-Player/music/melody.mp3 -------------------------------------------------------------------------------- /Music-Player/music/peace.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Music-Player/music/peace.mp3 -------------------------------------------------------------------------------- /Music-Player/script.js: -------------------------------------------------------------------------------- 1 | const musicContainer = document.getElementById('audio-container'); 2 | const playBtn = document.getElementById('play'); 3 | const prevBtn = document.getElementById('prev'); 4 | const nextBtn = document.getElementById('next'); 5 | 6 | const audio = document.getElementById('audio'); 7 | const progress = document.getElementById('progress'); 8 | const progressContainer = document.getElementById('progress-container'); 9 | const title = document.getElementById('title'); 10 | const cover = document.getElementById('cover'); 11 | 12 | // Song titles 13 | const songs = ['dream','melody','peace']; 14 | 15 | // Keep track of song 16 | let songIndex = 1; 17 | 18 | // Initially load song details into DOM 19 | loadSong(songs[songIndex]); 20 | 21 | // Update song details 22 | function loadSong(song) { 23 | title.innerText = song; 24 | audio.src = `music/${song}.mp3`; 25 | cover.src = `images/${song}.jpg`; 26 | } 27 | 28 | // Play song 29 | function playSong() { 30 | musicContainer.classList.add('play'); 31 | playBtn.querySelector('i.fas').classList.remove('fa-play'); 32 | playBtn.querySelector('i.fas').classList.add('fa-pause'); 33 | 34 | audio.play(); 35 | } 36 | 37 | // Pause song 38 | function pauseSong() { 39 | musicContainer.classList.remove('play'); 40 | playBtn.querySelector('i.fas').classList.add('fa-play'); 41 | playBtn.querySelector('i.fas').classList.remove('fa-pause'); 42 | 43 | audio.pause(); 44 | } 45 | 46 | // Previous song 47 | function prevSong() { 48 | songIndex--; 49 | 50 | if (songIndex < 0) { 51 | songIndex = songs.length - 1; 52 | } 53 | 54 | loadSong(songs[songIndex]); 55 | 56 | playSong(); 57 | } 58 | 59 | // Next song 60 | function nextSong() { 61 | songIndex++; 62 | 63 | if (songIndex > songs.length - 1) { 64 | songIndex = 0; 65 | } 66 | 67 | loadSong(songs[songIndex]); 68 | 69 | playSong(); 70 | } 71 | 72 | // Update progress bar 73 | function updateProgress(e) { 74 | const { duration, currentTime } = e.srcElement; 75 | const progressPercent = (currentTime / duration) * 100; 76 | progress.style.width = `${progressPercent}%`; 77 | } 78 | 79 | // Set progress bar 80 | function setProgress(e) { 81 | const width = this.clientWidth 82 | const clickX = e.offsetX 83 | const duration = audio.duration 84 | 85 | audio.currentTime = (clickX / width) * duration; 86 | } 87 | 88 | // Event listeners 89 | playBtn.addEventListener('click', () => { 90 | const isPlaying = musicContainer.classList.contains('play'); 91 | 92 | if (isPlaying) { 93 | pauseSong(); 94 | } else { 95 | playSong(); 96 | } 97 | }); 98 | 99 | // Change song 100 | prevBtn.addEventListener('click', prevSong); 101 | nextBtn.addEventListener('click', nextSong); 102 | 103 | // Time/song update 104 | audio.addEventListener('timeupdate', updateProgress); 105 | 106 | // Click on progress bar 107 | progressContainer.addEventListener('click', setProgress); 108 | 109 | // Song ends 110 | audio.addEventListener('ended', nextSong); 111 | 112 | -------------------------------------------------------------------------------- /Music-Player/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 | height: 100vh; 9 | margin: 0; 10 | font-family: 'Lato', sans-serif; 11 | /*background-image: linear-gradient( 12 | 0deg, 13 | rgba(247, 247, 247, 1) 23.8%, 14 | rgba(252, 221, 221, 1) 92% 15 | );*/ 16 | background-image: linear-gradient(0deg, rgba(251,252,13,1) 23.8%, rgba(255,170,1,0.99) 92%); 17 | 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | justify-content: center; 22 | } 23 | 24 | .audio-container{ 25 | background-color: #000; 26 | border-radius: 15px; 27 | box-shadow: 0 20px 20px 0 rgb(247, 148, 1); 28 | display: flex; 29 | padding: 20px 30px; 30 | position: relative; 31 | margin: 100px 0; 32 | z-index: 10; 33 | } 34 | 35 | .img-container { 36 | position: relative; 37 | width: 110px; 38 | } 39 | 40 | .img-container img { 41 | border-radius: 50%; 42 | object-fit: cover; 43 | height: 110px; 44 | width: inherit; 45 | position: absolute; 46 | bottom: 0; 47 | left: 0; 48 | animation: rotate 3s linear infinite; 49 | animation-play-state: paused; 50 | 51 | } 52 | 53 | .audio-container.play .img-container img { 54 | animation-play-state: running; 55 | } 56 | 57 | @keyframes rotate { 58 | from { 59 | transform: rotate(0deg); 60 | } 61 | 62 | to { 63 | transform: rotate(360deg); 64 | } 65 | } 66 | 67 | .navigation { 68 | display: flex; 69 | align-items: center; 70 | justify-content: center; 71 | z-index: 1; 72 | } 73 | 74 | .action-btn { 75 | background-color: #000; 76 | border: 0; 77 | color: #f7be04; 78 | font-size: 20px; 79 | cursor: pointer; 80 | padding: 10px; 81 | margin: 0 20px; 82 | } 83 | 84 | 85 | .action-btn.action-btn-big { 86 | color: #fcb51b; 87 | font-size: 30px; 88 | } 89 | 90 | .action-btn:focus { 91 | outline: 0; 92 | } 93 | 94 | .audio-info { 95 | background-color: rgb(255, 166, 0); 96 | border-radius: 15px 15px 0 0; 97 | position: absolute; 98 | top: 0; 99 | left: 20px; 100 | width: calc(100% - 40px); 101 | padding: 10px 10px 10px 150px; 102 | opacity: 0; 103 | transform: translateY(0%); 104 | transition: transform 0.3s ease-in, opacity 0.3s ease-in; 105 | z-index: 0; 106 | } 107 | 108 | .audio-container.play .audio-info { 109 | opacity: 1; 110 | transform: translateY(-100%); 111 | } 112 | 113 | .audio-info h4 { 114 | margin: 0; 115 | } 116 | 117 | .progress-container { 118 | background: #fff; 119 | border-radius: 5px; 120 | cursor: pointer; 121 | margin: 10px 0; 122 | height: 4px; 123 | width: 100%; 124 | } 125 | 126 | .progress { 127 | background-color: #000; 128 | border-radius: 5px; 129 | height: 100%; 130 | width: 50%; 131 | transition: width 0.1s linear; 132 | } 133 | 134 | -------------------------------------------------------------------------------- /Password_Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Password Generator 9 | 10 | 11 | 12 | 13 | 14 |

15 | 18 |

19 | 21 | 8 22 |

23 | Include special characters 24 | 25 | 26 | 27 |

28 | 29 | 30 | 31 |

32 |

33 | 36 |

37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Password_Generator/script.js: -------------------------------------------------------------------------------- 1 | const password_ele = document.getElementById("pwd_txt"); 2 | var string = "ABCDEFGHIJKLMNOPQRSTUVWXYZacdefghijklnopqrstuvwxyz0123456789"; 3 | const special_chars = "@#$%^&*"; 4 | const generate = document.getElementById("generate"); 5 | const clipboard = document.getElementById("clipboard"); 6 | var pwd_length = document.getElementById("slider"); 7 | 8 | 9 | generate.addEventListener('click', () => { 10 | let password = ""; 11 | var checked = document.getElementById("checkbox").checked; 12 | var final_string = string; 13 | console.log(checked); 14 | if (checked) { 15 | final_string += "@#$%^&*"; 16 | } 17 | for (var i = 0; i < pwd_length.value; i++) { 18 | let pwd = final_string[Math.floor(Math.random() * final_string.length)]; 19 | password += pwd; 20 | } 21 | password_ele.innerText = password; 22 | final_string = string; 23 | }); 24 | 25 | 26 | clipboard.addEventListener('click', () => { 27 | navigator.clipboard.writeText(password_ele.innerText); 28 | alert("Password copied to clipboard"); 29 | }); 30 | -------------------------------------------------------------------------------- /Password_Generator/style.css: -------------------------------------------------------------------------------- 1 | html{ 2 | min-height: 100%; 3 | } 4 | 5 | body{ 6 | min-height: 100%; 7 | background-color: #2d3436; 8 | background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%); 9 | text-align: center; 10 | 11 | } 12 | 13 | .slider{ 14 | -webkit-appearance: none; 15 | width: 70%; 16 | height: 10px; 17 | background: #f7be04; 18 | border-radius: 15px; 19 | opacity: 1; 20 | -webkit-transition: .2s; 21 | transition: opacity .2s; 22 | margin-left: 40px; 23 | margin-top: 25px; 24 | margin-bottom: 20px; 25 | } 26 | 27 | .slider:hover{ 28 | opacity: 0.5; 29 | } 30 | 31 | .slider::-webkit-slider-thumb{ 32 | -webkit-appearance: none; 33 | width: 15px; 34 | height: 15px; 35 | background: #000000; 36 | border-radius: 50%; 37 | cursor: pointer; 38 | } 39 | 40 | .action-btn{ 41 | background-color: #000; 42 | border: 0; 43 | color: #f7be04; 44 | font-size: 20px; 45 | cursor: pointer; 46 | padding: 10px; 47 | margin: 10px 20px; 48 | border-radius: 15px; 49 | font-family: fantasy; 50 | opacity: 1; 51 | transition: opacity .2s; 52 | } 53 | 54 | .action-btn:hover{ 55 | opacity: 0.5; 56 | } 57 | 58 | .wrapper{ 59 | display: flex; 60 | background-color: rgb(253, 253, 252); 61 | flex-direction: column; 62 | width: 30%; 63 | margin-top: 10%; 64 | margin-left: 35%; 65 | border-radius: 15px; 66 | font-family: fantasy; 67 | padding-bottom: 1%; 68 | } 69 | 70 | .slider_main{ 71 | display: flex; 72 | flex-direction: row; 73 | } 74 | 75 | output{ 76 | margin-top: 20px; 77 | margin-left: 10px; 78 | } 79 | 80 | .wrapper_main 81 | { 82 | display: flex; 83 | background-color: rgb(253, 253, 252); 84 | flex-direction: row; 85 | width: 22%; 86 | margin-top: 5%; 87 | margin-left: 38%; 88 | border-radius: 15px; 89 | font-family: Georgia, serif; 90 | padding-left: 45px; 91 | 92 | } 93 | 94 | .clipboard{ 95 | margin-left: auto; 96 | cursor: pointer; 97 | border: 0; 98 | background-color: white; 99 | color:black; 100 | border-radius: 15px; 101 | font-size: 23px; 102 | opacity: 1; 103 | transition: opacity .2s; 104 | 105 | } 106 | 107 | .clipboard:hover{ 108 | opacity: 0.5; 109 | } 110 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Projects 2 | 3 | 1. Music- Player using HTML, CSS and Javascript 4 | 2. Drum Kit using HTML,CSS and Javascript 5 | 3. Analog Clock using HTML,CSS and Javascript 6 | 4. Follow-along navigation using HTML, CSS and Javascript 7 | 5. Key sequence detection using HTML,CSS and Javascript 8 | 6. Countdown Timer using HTML,CSS and Javascript 9 | 7. Password-Generator using HTML,CSS and Javascript 10 | 8. Whack-a-mole game using HTML,CSS and Javascript 11 | 9. Hulu clone website using HTML,CSS and Javascript 12 | 10.Trending movies app using HTML,CSS and Javascript 13 | -------------------------------------------------------------------------------- /Trending movies/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/Trending movies/favicon.ico -------------------------------------------------------------------------------- /Trending movies/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Movie App 7 | 8 | 9 | 10 | 11 |

12 |

Trending Movies

13 | 21 |

22 |

23 | 24 | 25 | -------------------------------------------------------------------------------- /Trending movies/script.js: -------------------------------------------------------------------------------- 1 | const APIURL = "https://api.themoviedb.org/3/discover/movie?api_key=04c35731a5ee918f014970082a0088b1"; 2 | const IMGPATH = "https://image.tmdb.org/t/p/w1280"; 3 | const SEARCHAPI = 4 | "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query="; 5 | 6 | 7 | const main = document.getElementById("content"); 8 | const form = document.getElementById("form"); 9 | const search = document.getElementById("search"); 10 | 11 | // initially get fav movies 12 | getMovies(APIURL); 13 | 14 | async function getMovies(url) { 15 | const resp = await fetch(url); 16 | const respData = await resp.json(); 17 | 18 | console.log(respData); 19 | 20 | showMovies(respData.results); 21 | } 22 | 23 | function showMovies(movies) { 24 | // clear main 25 | main.innerHTML = ""; 26 | 27 | movies.forEach((movie) => { 28 | const { poster_path, title, vote_average, overview } = movie; 29 | 30 | const movieEl = document.createElement("div"); 31 | movieEl.classList.add("movie"); 32 | 33 | movieEl.innerHTML = ` 34 |

38 |

39 |

${title}

40 | ${vote_average} 43 |

44 |

45 |

Overview:

46 | ${overview} 47 |

48 | `; 49 | 50 | main.appendChild(movieEl); 51 | }); 52 | } 53 | 54 | function getClassByRate(vote) { 55 | if (vote >= 8) { 56 | return "green"; 57 | } else if (vote >= 5) { 58 | return "orange"; 59 | } else { 60 | return "red"; 61 | } 62 | } 63 | 64 | form.addEventListener("submit", (e) => { 65 | e.preventDefault(); 66 | 67 | const searchTerm = search.value; 68 | 69 | if (searchTerm) { 70 | getMovies(SEARCHAPI + searchTerm); 71 | 72 | search.value = ""; 73 | } 74 | }); 75 | -------------------------------------------------------------------------------- /Trending movies/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | 9 | background-color: #030303; 10 | font-family: "Poppins", sans-serif; 11 | margin: 0; 12 | } 13 | 14 | header { 15 | background-color: #363636; 16 | display: flex; 17 | 18 | } 19 | 20 | h1{ 21 | color: whitesmoke; 22 | align-self: center; 23 | margin-left: 28rem; 24 | } 25 | 26 | 27 | .search { 28 | margin: 3rem; 29 | margin-left: 12rem; 30 | background-color: transparent; 31 | border: 2px solid #e9e9ec; 32 | border-radius: 50px; 33 | color: #fff; 34 | font-family: inherit; 35 | font-size: 1rem; 36 | padding: 0.5rem 1rem; 37 | } 38 | 39 | .search::placeholder { 40 | color: #7378c5; 41 | } 42 | 43 | .search:focus { 44 | background-color: #050505; 45 | outline: none; 46 | } 47 | 48 | div{ 49 | display: flex; 50 | flex-wrap: wrap; 51 | } 52 | 53 | .movie { 54 | background-color: #373b69; 55 | border-radius: 3px; 56 | box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); 57 | overflow: hidden; 58 | position: relative; 59 | margin: 1rem; 60 | justify-content: center; 61 | align-content: center; 62 | width: 265px; 63 | } 64 | 65 | .movie img { 66 | width: 100%; 67 | } 68 | 69 | .movie-info { 70 | color: #eee; 71 | display: flex; 72 | flex-direction: column; 73 | align-items: center; 74 | justify-content: center; 75 | padding: 0.5rem 1rem 1rem; 76 | letter-spacing: 0.5px; 77 | } 78 | 79 | .movie-info h3 { 80 | margin: 0; 81 | } 82 | 83 | .movie-info span { 84 | background-color: #22254b; 85 | border-radius: 3px; 86 | font-weight: bold; 87 | padding: 0.25rem 0.8rem; 88 | 89 | } 90 | .movie-info span.green { 91 | color: rgb(39, 189, 39); 92 | } 93 | 94 | .movie-info span.orange { 95 | color: orange; 96 | } 97 | 98 | .movie-info span.red { 99 | color: rgb(189, 42, 42); 100 | } 101 | 102 | .overview { 103 | background-color: #fff; 104 | padding: 2rem; 105 | position: absolute; 106 | max-height: 100%; 107 | overflow: auto; 108 | left: 0; 109 | bottom: 0; 110 | right: 0; 111 | transform: translateY(101%); 112 | transition: transform 0.3s ease-in; 113 | } 114 | 115 | .overview h3 { 116 | margin-top: 0; 117 | } 118 | 119 | .movie:hover .overview { 120 | transform: translateY(0); 121 | } 122 | -------------------------------------------------------------------------------- /Whack-a-mole/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Whack A Mole! 6 | 7 | 8 | 9 | 10 | 11 |

Whack-a-mole!

12 |

0

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 | -------------------------------------------------------------------------------- /Whack-a-mole/script.js: -------------------------------------------------------------------------------- 1 | const holes = document.querySelectorAll('.hole'); 2 | const scoreBoard = document.querySelector('.score'); 3 | const moles = document.querySelectorAll('.mole'); 4 | let lastHole; 5 | let timeUp = false; 6 | let score = 0; 7 | 8 | function randomTime(min, max) { 9 | return Math.round(Math.random() * (max - min) + min); 10 | } 11 | 12 | function randomHole(holes) { 13 | const idx = Math.floor(Math.random() * holes.length); 14 | const hole = holes[idx]; 15 | if (hole === lastHole) { 16 | return randomHole(holes); 17 | } 18 | lastHole = hole; 19 | return hole; 20 | } 21 | 22 | function peep() { 23 | const time = randomTime(200, 1000); 24 | const hole = randomHole(holes); 25 | hole.classList.add('up'); 26 | setTimeout(() => { 27 | hole.classList.remove('up'); 28 | if (!timeUp) peep(); 29 | }, time); 30 | } 31 | 32 | function startGame() { 33 | scoreBoard.textContent = 0; 34 | timeUp = false; 35 | score = 0; 36 | peep(); 37 | setTimeout(() => timeUp = true, 10000) 38 | } 39 | 40 | function whack(e) { 41 | if(!e.isTrusted) return; 42 | score++; 43 | this.parentNode.classList.remove('up'); 44 | scoreBoard.textContent = score; 45 | } 46 | 47 | moles.forEach(mole => mole.addEventListener('click', whack)); -------------------------------------------------------------------------------- /Whack-a-mole/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap'); 2 | html { 3 | box-sizing: border-box; 4 | font-size: 10px; 5 | 6 | background-color: #f3e6e8; 7 | background-image: linear-gradient(315deg, #f3e6e8 0%, #d5d0e5 74%); 8 | 9 | } 10 | 11 | *, *:before, *:after { 12 | box-sizing: inherit; 13 | } 14 | 15 | body { 16 | padding: 0; 17 | margin: 0; 18 | font-family: 'Shadows Into Light', cursive; 19 | } 20 | 21 | .start{ 22 | text-align: center; 23 | } 24 | 25 | h1 { 26 | text-align: center; 27 | font-size: 5rem; 28 | margin-bottom: 0; 29 | } 30 | 31 | .score { 32 | color: rgb(104, 94, 114); 33 | margin-top: 0%; 34 | 35 | } 36 | 37 | .game { 38 | width: 800px; 39 | height: 400px; 40 | display: flex; 41 | flex-wrap: wrap; 42 | margin: 0 auto; 43 | 44 | } 45 | 46 | .hole { 47 | flex: 1 0 33.33%; 48 | overflow: hidden; 49 | position: relative; 50 | } 51 | 52 | .hole:after { 53 | display: block; 54 | background: url(dirt.svg) bottom center no-repeat; 55 | background-size: contain; 56 | content: ''; 57 | width: 100%; 58 | height:70px; 59 | position: absolute; 60 | z-index: 2; 61 | bottom: -30px; 62 | } 63 | 64 | .mole { 65 | background: url('mole.svg') bottom center no-repeat; 66 | background-size: 50%; 67 | position: absolute; 68 | top: 100%; 69 | width: 100%; 70 | height: 100%; 71 | transition:all 0.4s ease; 72 | } 73 | 74 | .hole.up .mole { 75 | top: 0; 76 | } 77 | 78 | button{ 79 | background: rgba(190, 19, 19, 0.2); 80 | border: red; 81 | font-size: 3rem; 82 | cursor: pointer; 83 | } 84 | -------------------------------------------------------------------------------- /hulu-clone/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/favicon.ico -------------------------------------------------------------------------------- /hulu-clone/image/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /hulu-clone/image/cover-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/cover-1.jpg -------------------------------------------------------------------------------- /hulu-clone/image/cover-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/cover-2.jpg -------------------------------------------------------------------------------- /hulu-clone/image/cover-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/cover-3.jpg -------------------------------------------------------------------------------- /hulu-clone/image/cover-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/cover-4.jpg -------------------------------------------------------------------------------- /hulu-clone/image/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /hulu-clone/image/favicon.ico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/favicon.ico.png -------------------------------------------------------------------------------- /hulu-clone/image/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/header.jpg -------------------------------------------------------------------------------- /hulu-clone/image/instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /hulu-clone/image/live-sports-logo-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/live-sports-logo-1.png -------------------------------------------------------------------------------- /hulu-clone/image/live-sports-logo-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/live-sports-logo-2.png -------------------------------------------------------------------------------- /hulu-clone/image/live-sports-logo-3.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /hulu-clone/image/live-sports-logo-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/live-sports-logo-4.png -------------------------------------------------------------------------------- /hulu-clone/image/live-sports-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/live-sports-small.jpg -------------------------------------------------------------------------------- /hulu-clone/image/live-sports.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/live-sports.jpg -------------------------------------------------------------------------------- /hulu-clone/image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/logo.png -------------------------------------------------------------------------------- /hulu-clone/image/logos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/logos.png -------------------------------------------------------------------------------- /hulu-clone/image/network-logo-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/network-logo-bg.png -------------------------------------------------------------------------------- /hulu-clone/image/screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Divyamcm/Projects/2de889de280bb53c57060a44661499915ac64c3a/hulu-clone/image/screen.png -------------------------------------------------------------------------------- /hulu-clone/image/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /hulu-clone/image/youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /hulu-clone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HULU-CLONE 8 | 9 | 10 | 11 |

12 |

13 | 20 |

21 |

BUNDLE WITH ANY HULU PLAN & SAVE

22 |

23 |

Get endless entertainment, live sports, and 24 | the shows and movies you love.

25 | 26 |

See details 27 | and Bundle terms

28 |

29 |

30 | 31 | 32 |

33 |

34 |

35 |

TRY UP TO ONE MONTH FREE

36 |

Here just for Hulu? Get thousands of TV shows and movies

37 |

38 |

39 | START YOUR FREE TRIAL 40 |

41 |

42 |

43 | 44 |

45 |

INCLUDED IN ALL PLANS

46 |

All The TV You Love

47 |

48 | Stream full seasons of exclusive series, curren-season episodes, 49 | hit, 50 | movies, Hulu originals, kids shows, and more. 51 |

52 | 53 |

54 |

55 |

56 |

57 |

Past & Current Seasons

58 |

TV Shows

59 |

60 |

61 | 62 |

63 |

64 |

65 |

New & Classic

66 |

Movies

67 |

68 |

69 | 70 |

71 |

72 |

73 |

Groundbreaking

74 |

Hulu Originals

75 |

76 |

77 | 78 |

79 |

80 |

81 |

Add-on

82 |

Premiums

83 |

84 |

85 |

86 |

87 | 88 | 89 |

90 |

91 |

HULU + LIVE TV

92 |

Live TV Makes It Better

93 |

94 | Make the switch from cable. Get 75+ top channels with your favorite 95 | live sports, news, and events - plus the entire Hulu streaming 96 | library. 97 |

98 |

99 | Regional restrictions, blackouts and 100 | additional terms apply. 101 |

102 | View Channels in Your Area→ 103 |

104 |

105 | 106 | 107 |

108 |

109 |

Live Sports

110 |

111 | Catch your games at home or on the go. Stream live games from major 112 | college and pro leagues including the NCAA®, NBA, NHL, NFL, and more. 113 |

114 | 115 |

116 |

117 |

118 |

119 |

120 |

121 |

122 |

123 |

124 |

125 |

126 |

127 |

128 |

129 | 130 |

131 | Live TV plan required. Regional restrictions, blackouts and additional 132 | terms apply.See details. 133 |

134 |

135 |

136 | 137 | 187 | 188 | 211 | 212 | 213 | 214 | -------------------------------------------------------------------------------- /hulu-clone/script.js: -------------------------------------------------------------------------------- 1 | const modal = document.querySelector('.modal') 2 | const loginBtn = document.querySelector('.login') 3 | const closeBtn = document.querySelector('.close') 4 | 5 | loginBtn.addEventListener('click', openModal) 6 | closeBtn.addEventListener('click', closeModal) 7 | window.addEventListener('click', outsideClick) 8 | 9 | function openModal() { 10 | modal.style.display = 'block' 11 | } 12 | 13 | function closeModal() { 14 | modal.style.display = 'none' 15 | } 16 | 17 | function outsideClick(e) { 18 | if (e.target == modal) { 19 | closeModal() 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /hulu-clone/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;600;700&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding:0; 7 | } 8 | 9 | html,body{ 10 | font-family:'Rubik', sans-serif ; 11 | background: black; 12 | color: white; 13 | line-height: 1.7; 14 | overflow-x: hidden; 15 | } 16 | 17 | a{ 18 | color:white; 19 | text-decoration: none; 20 | } 21 | 22 | a.hover{ 23 | color:#ccc 24 | } 25 | 26 | ul{ 27 | list-style-type: none; 28 | } 29 | 30 | img{ 31 | width:100%; 32 | } 33 | 34 | .header{ 35 | background: url(./image/header.jpg) no-repeat center center / cover; 36 | } 37 | 38 | .top{ 39 | height: 510px; 40 | } 41 | 42 | .top nav{ 43 | display:flex; 44 | justify-content: flex-end; 45 | padding: 20px 40px; 46 | } 47 | 48 | .top nav .login{ 49 | cursor:pointer; 50 | background: none; 51 | border: none; 52 | color:white; 53 | font-weight: bold; 54 | letter-spacing: 1px; 55 | } 56 | 57 | .top .logo{ 58 | width: 550px; 59 | margin: 20px 0; 60 | } 61 | 62 | .top .header_main{ 63 | display:flex; 64 | flex-direction: column; 65 | justify-content: flex-start; 66 | align-items: center; 67 | margin-top: 40px; 68 | } 69 | 70 | .top .header_1{ 71 | font-size: 19px; 72 | font-weight: bold; 73 | width: 600px; 74 | text-align: center; 75 | line-height: 27px; 76 | } 77 | 78 | .btn{ 79 | display: inline-block; 80 | background: white; 81 | color: #333; 82 | min-width: 135px; 83 | padding: 18px 30px; 84 | font-size: 13px; 85 | font-weight:bold; 86 | border: none; 87 | border-radius: 5px; 88 | letter-spacing: 1px; 89 | cursor:pointer; 90 | } 91 | 92 | .btn-1{ 93 | margin-top: 25px; 94 | 95 | } 96 | .btn-1:hover{ 97 | opacity: 0.8; 98 | } 99 | 100 | .terms{ 101 | font-size: 9px; 102 | color:rgb(190, 190, 190); 103 | margin-top: 20px; 104 | letter-spacing: 0.3px; 105 | } 106 | 107 | .terms_1{ 108 | text-decoration:underline; 109 | } 110 | 111 | h4{ 112 | color:#00ed82; 113 | font-size: 12px; 114 | letter-spacing: 0.3px; 115 | font-weight:500; 116 | 117 | } 118 | 119 | 120 | /* SUB HEADER*/ 121 | 122 | .sub-header{ 123 | display: grid; 124 | grid-template-columns: 2fr 3fr 2fr; 125 | gap:40px; 126 | align-items: center; 127 | padding: 20px 40px; 128 | background: linear-gradient(179.81deg, rgba(4,4,4,0.7) .17%, rgba(4,4,4,0.45) 85.02%, rgba(4,4,4,0.3) 112.52%) !important; 129 | text-align: center; 130 | justify-items: center; 131 | } 132 | 133 | h3{ 134 | margin-top: 5px; 135 | font-size:23px; 136 | font-weight:500; 137 | width: 300px; 138 | line-height: 27px; 139 | } 140 | 141 | .logo-sub-header{ 142 | width:100px; 143 | align-items: center; 144 | justify-self: flex-end; 145 | } 146 | 147 | 148 | .btn { 149 | display: inline-block; 150 | background: #fff; 151 | color: #333; 152 | min-width: 135px; 153 | padding: 20px 32px; 154 | font-size: 15px; 155 | font-weight: 600; 156 | line-height: 14px; 157 | border: none; 158 | border-radius: 5px; 159 | letter-spacing: 1px; 160 | cursor: pointer; 161 | text-transform: uppercase; 162 | } 163 | 164 | 165 | .btn-outline{ 166 | background:none; 167 | color: #fff; 168 | border: 2px solid #fff; 169 | padding:15px 30px; 170 | } 171 | 172 | .btn-outline:hover{ 173 | color: #fff; 174 | border-color: #ccc; 175 | justify-self: flex-start; 176 | } 177 | 178 | /*Categories*/ 179 | .library-h4{ 180 | font-size: 14px; 181 | } 182 | 183 | .text-li{ 184 | font-size: 60px; 185 | font-weight: bolder; 186 | letter-spacing: 0.1px; 187 | } 188 | 189 | .sub-text{ 190 | max-width:850px; 191 | margin-bottom: 10px; 192 | font-size: 19px; 193 | width:750px; 194 | } 195 | .library{ 196 | display: flex; 197 | flex-direction: column; 198 | align-items: center; 199 | text-align: center; 200 | padding: 90px 40px; 201 | justify-content:center ; 202 | } 203 | 204 | .library .covers{ 205 | display: grid; 206 | grid-template-columns: repeat(4,1fr); 207 | margin-top: 40px; 208 | gap:20px; 209 | } 210 | 211 | .library .covers > div{ 212 | height: 400px; 213 | width: 265px; 214 | position: relative; 215 | } 216 | 217 | .library .cover-grad{ 218 | background: linear-gradient( 219 | 156.82deg, 220 | rgba(0, 0, 0, 0.6) 4.58%, 221 | rgba(0, 0, 0, 0) 69.61% 222 | ), 223 | linear-gradient(24.5deg, rgba(0, 0, 0, 0.2) 4.71%, rgba(0, 0, 0, 0) 71.49%); 224 | position: absolute; 225 | top: 0; 226 | left: 0; 227 | width: 100%; 228 | height: 100%; 229 | 230 | } 231 | 232 | .library .cover-text { 233 | position: absolute; 234 | top: 20px; 235 | left: 20px; 236 | text-align: left; 237 | } 238 | 239 | .library .cover-1 { 240 | background: url('./image/cover-1.jpg') no-repeat center center / cover; 241 | } 242 | .library .cover-2 { 243 | background: url('./image/cover-2.jpg') no-repeat center center / cover; 244 | } 245 | .library .cover-3 { 246 | background: url('./image/cover-3.jpg') no-repeat center center / cover; 247 | } 248 | .library .cover-4 { 249 | background: url('./image/cover-4.jpg') no-repeat center center / cover; 250 | } 251 | 252 | .cover-sub-text{ 253 | font-weight: bolder; 254 | line-height: 4px; 255 | } 256 | 257 | .sub-title{ 258 | font-size: 15px; 259 | } 260 | 261 | 262 | /* Live */ 263 | 264 | .live { 265 | background: #151516; 266 | padding: 40px; 267 | } 268 | 269 | .live-border { 270 | border: 4px solid #1ce783; 271 | border-radius: 16px; 272 | padding: 100px; 273 | display: flex; 274 | flex-direction: column; 275 | align-items: center; 276 | justify-content: center; 277 | text-align: center; 278 | } 279 | 280 | .live .sub-text{ 281 | font-size: 23px; 282 | width: 640px; 283 | } 284 | 285 | .live a { 286 | text-transform: uppercase; 287 | font-size: 18px; 288 | margin-top: 20px; 289 | text-decoration: underline; 290 | color:rgb(172, 172, 172); 291 | 292 | } 293 | 294 | /* live-sports */ 295 | 296 | .live-sports { 297 | background: url('image/live-sports.jpg') no-repeat center center / cover; 298 | height: 700px; 299 | position: relative; 300 | } 301 | 302 | .live-sports-content { 303 | position: absolute; 304 | top: 160px; 305 | left: 200px; 306 | max-width: 550px; 307 | } 308 | 309 | .live-sports-logos { 310 | width: 300px; 311 | margin-top: 40px; 312 | display: flex; 313 | align-items: center; 314 | justify-content: space-between; 315 | } 316 | 317 | .live-sports-logos > div { 318 | background: url('../image/network-logo-bg.png') no-repeat center center / cover; 319 | height: 60px; 320 | width: 60px; 321 | display: flex; 322 | justify-content: center; 323 | align-items: center; 324 | } 325 | 326 | .live-sports-logos img { 327 | width: 40px; 328 | } 329 | 330 | .live-sports .sub-text{ 331 | font-size: 23px; 332 | width: 450px; 333 | } 334 | 335 | /* Footer */ 336 | .footer { 337 | background: #ebedf2; 338 | color: #333; 339 | } 340 | 341 | .footer a { 342 | color: rgb(107, 107, 107); 343 | font-size: 12px; 344 | } 345 | 346 | .footer-container { 347 | max-width: 1100px; 348 | margin: auto; 349 | padding: 40px; 350 | } 351 | 352 | .footer-lists { 353 | display: flex; 354 | justify-content: space-between; 355 | 356 | } 357 | 358 | .footer-lists .list-head { 359 | text-transform: uppercase; 360 | font-weight: 600; 361 | margin-bottom: 5px; 362 | font-size: 12px; 363 | } 364 | 365 | 366 | .divider { 367 | width: 100%; 368 | height: 3px; 369 | border-top: 1px #ccc solid; 370 | margin: 30px 0; 371 | } 372 | 373 | .social-icons img { 374 | width: 25px; 375 | height: 25px; 376 | margin-right: 25px; 377 | } 378 | 379 | /* Modal */ 380 | .modal { 381 | display: none; 382 | position: fixed; 383 | top: 0; 384 | left: 0; 385 | z-index: 1; 386 | height: 100%; 387 | width: 100%; 388 | background: rgba(0, 0, 0, 0.5); 389 | } 390 | 391 | .modal-box { 392 | margin: 10% auto; 393 | width: 400px; 394 | background: #fff; 395 | color: #333; 396 | position: relative; 397 | animation: modalopen 1s; 398 | } 399 | 400 | @keyframes modalopen { 401 | from { 402 | opacity: 0; 403 | } 404 | 405 | to { 406 | opacity: 1; 407 | } 408 | } 409 | 410 | .modal-body { 411 | padding: 50px; 412 | font-size: small; 413 | } 414 | 415 | .modal-body h3 { 416 | font-weight: 600; 417 | } 418 | 419 | .modal-body .btn { 420 | width: 100%; 421 | margin-top: 30px; 422 | padding: 12px ; 423 | font-size: small; 424 | } 425 | 426 | .modal .close { 427 | cursor: pointer; 428 | height: 23px; 429 | width: 23px; 430 | position: absolute; 431 | top: 20px; 432 | right: 20px; 433 | } 434 | 435 | .modal .modal-footer { 436 | background: #f7f7f9; 437 | color: #333; 438 | padding: 20px 0; 439 | border-top: #eee 1px solid; 440 | text-align: center; 441 | font-size: small; 442 | } 443 | 444 | .modal .modal-footer a { 445 | color: steelblue; 446 | font-size: small; 447 | } 448 | 449 | form a{ 450 | color: #176EE1; 451 | font-size: small; 452 | } 453 | 454 | /* Form */ 455 | .form-control { 456 | margin: 20px 0; 457 | } 458 | 459 | .form-control label { 460 | display: block; 461 | font-size: 11px; 462 | text-transform: uppercase; 463 | color:rgb(107, 107, 107); 464 | letter-spacing: 1px; 465 | } 466 | 467 | .form-control input { 468 | width: 100%; 469 | border: 2px #ccc solid; 470 | border-radius: 5px; 471 | height: 50px; 472 | padding: 5px; 473 | } 474 | 475 | .btn-dark { 476 | background: rgb(102, 102, 102); 477 | color: #fff; 478 | } --------------------------------------------------------------------------------

Best deals of the day

🔥30% off on all branded shoes🔥

Offer ends in

Follow-along Navigation

Enter your code

Music Player

Melody

${title}

Overview:

Whack-a-mole!

0

INCLUDED IN ALL PLANS

TV Shows

Movies

Hulu Originals

Premiums

HULU + LIVE TV

Log In