22.16 °C
17 |Min 22.16 °C
19 |Max 22.16 °C
20 |Humidity
22 |X
23 |Enter your url or Text to create code
16 | Delete 17 |A floral, solar and voluptous interpretation composed by Oliver Polge,Perfumer-Creator for the House 22 | of CHANEL
23 |$149.99$169.99
24 |
Add to Cart
25 | you : 0
23 |bot : 0
24 |Time left: 10s
49 | 50 |Score: 0
51 | 52 | 53 |${user.bio}
42 | 43 |
20 | Generator for Instagram
24 | 27 |
29 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, iste!
32 |
36 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, iste!
39 |
43 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, iste!
46 |
50 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, iste!
53 |
57 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, iste!
60 |
38 | 
Your final score is ${score}
96 | 97 | `; 98 | 99 | endgameEl.style.display = 'flex'; 100 | } 101 | 102 | addWordToDOM(); 103 | 104 | // Event listeners 105 | 106 | // Typing 107 | text.addEventListener('input', e => { 108 | const insertedText = e.target.value; 109 | 110 | if (insertedText === randomWord) { 111 | addWordToDOM(); 112 | updateScore(); 113 | 114 | // Clear 115 | e.target.value = ''; 116 | 117 | if (difficulty === 'hard') { 118 | time += 2; 119 | } else if (difficulty === 'medium') { 120 | time += 3; 121 | } else { 122 | time += 5; 123 | } 124 | 125 | updateTime(); 126 | } 127 | }); 128 | 129 | // Settings btn click 130 | settingsBtn.addEventListener('click', () => settings.classList.toggle('hide')); 131 | 132 | // Settings select 133 | settingsForm.addEventListener('change', e => { 134 | difficulty = e.target.value; 135 | localStorage.setItem('difficulty', difficulty); 136 | }); -------------------------------------------------------------------------------- /9- Civo clone/image/circular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 59 | -------------------------------------------------------------------------------- /14-Spanish-Translator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap'); 2 | 3 | :root { 4 | --primary-color: #F19882; 5 | --light-green: #B0C185; 6 | --beige: #EBE4DC; 7 | } 8 | 9 | body { 10 | font-family: 'Ubuntu', sans-serif; 11 | margin: 0px; 12 | background-color: #fbf9f8; 13 | opacity: 0.8; 14 | background-image: linear-gradient(135deg, #fbfbf9 25%, transparent 25%), linear-gradient(225deg, #fbfbf9 25%, transparent 25%), linear-gradient(45deg, #fbfbf9 25%, transparent 25%), linear-gradient(315deg, #fbfbf9 25%, #fbf9f8 25%); 15 | background-position: 40px 0, 40px 0, 0 0, 0 0; 16 | background-size: 40px 40px; 17 | background-repeat: repeat; 18 | 19 | } 20 | 21 | #input-field { 22 | width: 80%; 23 | height: 10vh; 24 | display: block; 25 | margin-top: 1rem; 26 | margin-left: auto; 27 | margin-right: auto; 28 | padding: 1rem; 29 | background-color: var(--beige); 30 | border: solid 2px var(--light-green); 31 | font-family: 'Ubuntu', sans-serif; 32 | font-size: medium; 33 | border-top-right-radius: 0.5rem; 34 | border-bottom-left-radius: 0.5rem; 35 | } 36 | 37 | #btn-div { 38 | margin: 1rem 1rem; 39 | text-align: center; 40 | } 41 | 42 | #btn-translate { 43 | background-color: var(--beige); 44 | border: solid 2px var(--light-green); 45 | border-radius: 0.4rem; 46 | color: var(--light-green); 47 | text-shadow: var(--primary-color) 0.7px 0 0.2px; 48 | letter-spacing: 0.04rem; 49 | padding: 0.5rem 1rem; 50 | font-family: 'Ubuntu', sans-serif; 51 | } 52 | 53 | #heading-text { 54 | font-size: x-large; 55 | text-align: center; 56 | margin-top: 1rem; 57 | margin-bottom: 1rem; 58 | color: var(--light-green); 59 | } 60 | 61 | #output { 62 | border: 2px solid var(--light-green); 63 | height: 20vh; 64 | width: 80%; 65 | margin-left: auto; 66 | margin-right: auto; 67 | margin-bottom: 1.5rem; 68 | padding: 1rem; 69 | background-color: var(--beige); 70 | border-top-left-radius: 0.5rem; 71 | border-bottom-right-radius: 0.5rem; 72 | } 73 | 74 | 75 | .navigation { 76 | background-color: var(--primary-color); 77 | color: white; 78 | padding: 1rem; 79 | border-bottom-right-radius: 2rem; 80 | } 81 | 82 | .navigation .nav-brand { 83 | font-weight: bold; 84 | font-size: larger; 85 | word-spacing: 0.rem; 86 | letter-spacing: 0.1rem; 87 | text-shadow: var(--light-green) 1px 0 2px; 88 | } 89 | 90 | 91 | /* footer */ 92 | 93 | .footer { 94 | background-color: var(--primary-color); 95 | padding: 1.5rem 1rem; 96 | color: white; 97 | text-align: center; 98 | border-top-left-radius: 2rem; 99 | } 100 | 101 | .footer .link { 102 | color: white; 103 | } 104 | 105 | .footer .footer-header { 106 | font-weight: bold; 107 | font-size: large; 108 | text-shadow: var(--light-green) 1px 0 2px; 109 | padding-top: 0.5rem; 110 | } 111 | 112 | .footer ul { 113 | padding-inline-start: 0px; 114 | } 115 | 116 | /* lists */ 117 | 118 | .list-non-bullet { 119 | list-style: none; 120 | } 121 | 122 | .list-item-inline { 123 | display: inline; 124 | padding: 0rem 0.5rem; 125 | } 126 | 127 | /* links */ 128 | 129 | .link { 130 | text-decoration: none; 131 | padding: 0.5rem 1rem; 132 | text-shadow: var(--light-green) 1px 0 2px; 133 | } 134 | 135 | /* header */ 136 | 137 | .hero { 138 | padding: 2rem; 139 | } 140 | 141 | .hero .hero-img { 142 | max-width: 290px; 143 | display: block; 144 | margin: auto; 145 | } 146 | 147 | .hero .hero-heading { 148 | color: var(--light-green); 149 | padding-top: 0rem; 150 | text-align: center; 151 | } 152 | 153 | .hero .hero-heading .heading-inverted { 154 | color: var(--primary-color); 155 | text-shadow: var(--light-green) 0.2px 0 0.3px; 156 | } -------------------------------------------------------------------------------- /9- Civo clone/image/walmartlabs.svg: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /25-Blog Page/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | /* PAGE SECTIONS */ 7 | body { 8 | color: #444; 9 | font-family: sans-serif; 10 | 11 | border-top: 10px solid #1098ad; 12 | position: relative; 13 | } 14 | 15 | .container { 16 | width: 1200px; 17 | margin: 0 auto; 18 | } 19 | 20 | .main-header { 21 | background-color: #f7f7f7; 22 | padding: 20px 40px; 23 | } 24 | 25 | nav { 26 | font-size: 18px; 27 | } 28 | 29 | article { 30 | } 31 | 32 | .post-header { 33 | margin-bottom: 40px; 34 | } 35 | 36 | aside { 37 | background-color: #f7f7f7; 38 | border-top: 5px solid #1098ad; 39 | border-bottom: 5px solid #1098ad; 40 | padding: 40px 10px; 41 | box-sizing: border-box; 42 | } 43 | 44 | /* SMALLER ELEMENTS */ 45 | h1, 46 | h2, 47 | h3 { 48 | color: #1098ad; 49 | } 50 | 51 | h1 { 52 | font-size: 26px; 53 | text-transform: uppercase; 54 | font-style: italic; 55 | } 56 | 57 | h2 { 58 | font-size: 40px; 59 | margin-bottom: 30px; 60 | } 61 | 62 | h3 { 63 | font-size: 30px; 64 | margin-bottom: 20px; 65 | margin-top: 40px; 66 | } 67 | 68 | h4 { 69 | font-size: 20px; 70 | text-transform: uppercase; 71 | text-align: center; 72 | } 73 | 74 | p { 75 | font-size: 22px; 76 | line-height: 1.5; 77 | margin-bottom: 15px; 78 | } 79 | 80 | ul, 81 | ol { 82 | margin-left: 50px; 83 | margin-bottom: 20px; 84 | } 85 | 86 | li { 87 | font-size: 20px; 88 | margin-bottom: 10px; 89 | } 90 | 91 | li:last-child { 92 | margin-bottom: 0; 93 | } 94 | 95 | #author { 96 | font-style: italic; 97 | font-size: 18px; 98 | } 99 | 100 | #copyright { 101 | font-size: 16px; 102 | } 103 | 104 | .related-author { 105 | font-size: 18px; 106 | font-weight: bold; 107 | } 108 | 109 | .related { 110 | list-style: none; 111 | } 112 | 113 | body { 114 | } 115 | 116 | li:first-child { 117 | font-weight: bold; 118 | } 119 | 120 | li:last-child { 121 | font-style: italic; 122 | } 123 | 124 | li:nth-child(even) { 125 | } 126 | 127 | article p:first-child { 128 | color: red; 129 | } 130 | 131 | /* Styling links */ 132 | a:link { 133 | color: #1098ad; 134 | text-decoration: none; 135 | } 136 | 137 | a:visited { 138 | color: #1098ad; 139 | } 140 | 141 | a:hover { 142 | color: orangered; 143 | font-weight: bold; 144 | text-decoration: underline orangered; 145 | } 146 | 147 | a:active { 148 | background-color: black; 149 | font-style: italic; 150 | } 151 | /* LVHA */ 152 | 153 | .post-img { 154 | width: 100%; 155 | height: auto; 156 | } 157 | 158 | nav a:link { 159 | margin-right: 30px; 160 | display: inline-block; 161 | } 162 | 163 | nav a:link:last-child { 164 | margin-right: 0; 165 | } 166 | 167 | button { 168 | font-size: 22px; 169 | padding: 20px; 170 | cursor: pointer; 171 | 172 | position: absolute; 173 | bottom: 50px; 174 | right: 50px; 175 | } 176 | 177 | h1::first-letter { 178 | font-style: normal; 179 | margin-right: 5px; 180 | } 181 | 182 | h2 { 183 | position: relative; 184 | } 185 | 186 | h2::before { 187 | content: "TOP"; 188 | background-color: #ffe70e; 189 | color: #444; 190 | font-size: 16px; 191 | font-weight: bold; 192 | display: inline-block; 193 | padding: 5px 10px; 194 | position: absolute; 195 | top: -10px; 196 | right: -25px; 197 | } 198 | 199 | /* FLEXBOX */ 200 | .main-header { 201 | display: flex; 202 | align-items: center; 203 | justify-content: space-between; 204 | } 205 | .author-box { 206 | display: flex; 207 | align-items: center; 208 | margin-bottom: 15px; 209 | } 210 | #author { 211 | margin-bottom: 0px; 212 | margin-left: 15px; 213 | } 214 | .related-post { 215 | display: flex; 216 | align-items: center; 217 | margin-bottom: 15px; 218 | gap: 20px; 219 | } 220 | 221 | .related-link:link { 222 | font-weight: bold; 223 | font-size: 17px; 224 | margin-bottom: 5px; 225 | display: block; 226 | font-style: normal; 227 | } 228 | 229 | .related-author { 230 | margin-bottom: 0; 231 | font-weight: normal; 232 | font-style: italic; 233 | font-size: 14px; 234 | } 235 | 236 | /* CSS GRID */ 237 | .container { 238 | display: grid; 239 | grid-template-columns: 1fr 300px; 240 | column-gap: 75px; 241 | row-gap: 60px; 242 | align-items: start; 243 | } 244 | .main-header { 245 | grid-column: 1/-1; 246 | } 247 | 248 | article { 249 | } 250 | aside { 251 | } 252 | footer { 253 | grid-column: 1/-1; 254 | } 255 | -------------------------------------------------------------------------------- /Rock-Paper-scissors-Game-main/script.js: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | Rock Paper Scissors SOLUTION 🚀🔥 4 | Concepts covered in this project 5 | 👉 For loops 6 | 👉 Dom Manipulation 7 | 👉 Variables 8 | 👉 Conditionals (if else if) 9 | 👉 Template Literals 10 | 👉 Event Listeners 11 | 👉 Higher order Function (Math.random()) 12 | */ 13 | 14 | // ** getComputerChoice randomly selects between `rock` `paper` `scissors` and returns that string ** 15 | // getComputerChoice() 👉 'Rock' 16 | // getComputerChoice() 👉 'Scissors' 17 | function getComputerChoice() { 18 | let rpsChoices = ['Rock', 'Paper', 'Scissors'] 19 | let computerChoice = rpsChoices[Math.floor(Math.random() * 3)] 20 | return computerChoice 21 | } 22 | 23 | // ** getResult compares playerChoice & computerChoice and returns the score accordingly ** 24 | // human wins - getResult('Rock', 'Scissors') 👉 1 25 | // human loses - getResult('Scissors', 'Rock') 👉 -1 26 | // human draws - getResult('Rock', 'Rock') 👉 0 27 | function getResult(playerChoice, computerChoice) { 28 | // return the result of score based on if you won, drew, or lost 29 | 30 | let score; 31 | 32 | // All situations where human draws, set `score` to 0 33 | if (playerChoice === computerChoice) { 34 | score = 0 35 | 36 | // All situations where human wins, set `score` to 1 37 | // make sure to use else ifs here 38 | } else if (playerChoice === 'Rock' && computerChoice === 'Scissors') { 39 | score = 1 40 | 41 | } else if (playerChoice === "Paper" && computerChoice === "Rock") { 42 | score = 1 43 | 44 | } else if (playerChoice === "Scissors" && computerChoice === "Paper") { 45 | score = 1 46 | 47 | // Otherwise human loses (aka set score to -1) 48 | } else { 49 | score = -1 50 | } 51 | 52 | // return score 53 | return score 54 | } 55 | 56 | // ** showResult updates the DOM to `You Win!` or `You Lose!` or `It's a Draw!` based on the score. Also shows Player Choice vs. Computer Choice** 57 | function showResult(score, playerChoice, computerChoice) { 58 | // Hint: on a score of -1 59 | // You should do result.innerText = 'You Lose!' 60 | // Don't forget to grab the div with the 'result' id! 61 | 62 | let result = document.getElementById('result') 63 | switch (score) { 64 | case -1: 65 | result.innerText = `You Lose!` 66 | break; 67 | case 0: 68 | result.innerText = `It's a Draw!` 69 | break; 70 | case 1: 71 | result.innerText = `You Win!` 72 | break; 73 | } 74 | 75 | let playerScore = document.getElementById('player-score') 76 | let hands = document.getElementById('hands') 77 | playerScore.innerText = `${Number(playerScore.innerText) + score}` 78 | hands.innerText = `👱 ${playerChoice} vs 🤖 ${computerChoice}` 79 | } 80 | 81 | // ** Calculate who won and show it on the screen ** 82 | function onClickRPS(playerChoice) { 83 | const computerChoice = getComputerChoice() 84 | const score = getResult(playerChoice.value, computerChoice) 85 | showResult(score, playerChoice.value, computerChoice) 86 | } 87 | 88 | // ** Make the RPS buttons actively listen for a click and do something once a click is detected ** 89 | function playGame() { 90 | // use querySelector to select all RPS Buttons 91 | let rpsButtons = document.querySelectorAll('.rpsButton') 92 | 93 | // * Adds an on click event listener to each RPS button and every time you click it, it calls the onClickRPS function with the RPS button that was last clicked * 94 | 95 | // 1. loop through the buttons using a forEach loop 96 | // 2. Add a 'click' event listener to each button 97 | // 3. Call the onClickRPS function every time someone clicks 98 | // 4. Make sure to pass the currently selected rps button as an argument 99 | 100 | rpsButtons.forEach(rpsButton => { 101 | rpsButton.onclick = () => onClickRPS(rpsButton) 102 | }) 103 | 104 | // Add a click listener to the end game button that runs the endGame() function on click 105 | let endGameButton = document.getElementById('endGameButton') 106 | endGameButton.onclick = () => endGame() 107 | } 108 | 109 | // ** endGame function clears all the text on the DOM ** 110 | function endGame() { 111 | let playerScore = document.getElementById('player-score') 112 | let hands = document.getElementById('hands') 113 | let result = document.getElementById('result') 114 | playerScore.innerText = '' 115 | hands.innerText = '' 116 | result.innerText = '' 117 | } 118 | 119 | playGame() -------------------------------------------------------------------------------- /Live-here.md: -------------------------------------------------------------------------------- 1 | # Important Links 2 | 3 | | S.No. | Project Name | Demo Here | 4 | |:-:|:-:|:-:| 5 | |1 | Background Changer | Live Here | 6 | |2 | Netflix Homepage | Live Here | 7 | |3 | All About Forms | Live Here | 8 | |4 | Simply Clock | Live Here | 9 | |5 | Todo App | Live Here | 10 | |7 | Google Clone | Live Here | 11 | |8 | Rock Paper Scissor | Live Here | 12 | |9 | Civo clone | Live Here | 13 | |10 | Sunny summer | Live Here | 14 | |11 | ShoppingCard | Live Here | 15 | |13 | Stopwatch | Live Here | 16 | |14 | Spanish Translator | Live Here | 17 | |15 | Animated Tab Bar | Live Here | 18 | |16 | Drum | Live Here | 19 | |17 | GitHub Profile | Live Here | 20 | |18 | Events Page in Reactjs | Live Here | 21 | -------------------------------------------------------------------------------- /21-JokeMe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
29 | We are a full-service creative agency specializing in helping brands grow fast. Engage your clients through compelling visuals that do most of the marketing for you.
36 | LEARN MORE 37 |Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters, we’ll build and extend your brand in digital places.
49 | LEARN MORE 50 |Great design makes you memorable. We deliver artwork that underscores your brand message and captures potential clients’ attention.
58 |Increase your credibility by getting the most stunning, high-quality photos that improve your business image.
62 |
70 | We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always hit.
71 |
76 | Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and enjoyable experience.
77 |
82 | Incredible end result! Our sales increased over 400% when we worked with Sunnyside. Highly recommended!
83 |
91 | 
94 | 
97 | 
100 | 