├── 1 ├── index.html ├── index.js └── style.css ├── 2 ├── index.html ├── index.js └── style.css ├── 3 ├── index.html ├── index.js └── style.css ├── 4 ├── index.html ├── index.js └── style.css ├── 5 ├── bg.png ├── index.html ├── index.js └── style.css ├── 6 ├── index.html ├── index.js └── style.css └── 7 ├── bg.png ├── index.html ├── index.js └── style.css /1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Para Generator 8 | 9 | 10 | 11 |
12 |

PARA GENERATOR

13 | 14 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /1/index.js: -------------------------------------------------------------------------------- 1 | const input = document.getElementById("numOfwords"); 2 | const container = document.querySelector(".container"); 3 | 4 | const generateWord = (n) => { 5 | let text = ""; 6 | const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 7 | 8 | for (let i = 0; i < n; ++i) { 9 | const random = (Math.random() * 25).toFixed(0); 10 | text += letters[random]; 11 | } 12 | 13 | return text; 14 | }; 15 | 16 | const generatePara = () => { 17 | const numOfWords = Number(input.value); 18 | 19 | const para = document.createElement("p"); 20 | 21 | let data = ""; 22 | 23 | for (let i = 0; i < numOfWords; ++i) { 24 | const randomNumber = (Math.random() * 15).toFixed(0); 25 | data += generateWord(randomNumber); 26 | data += " "; 27 | } 28 | 29 | para.innerText = data; 30 | 31 | para.setAttribute("class", "paras"); 32 | 33 | container.append(para); 34 | }; 35 | -------------------------------------------------------------------------------- /1/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0%; 3 | padding: 0%; 4 | background-color: rgb(45, 45, 45); 5 | } 6 | 7 | .container { 8 | width: 80%; 9 | min-height: 100vh; 10 | background-color: white; 11 | margin: auto; 12 | padding: 100px 50px; 13 | box-sizing: border-box; 14 | } 15 | 16 | .container h1 { 17 | background-color: white; 18 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 19 | } 20 | 21 | #numOfwords { 22 | background-color: white; 23 | padding: 20px; 24 | width: 50%; 25 | margin-top: 20px; 26 | border: 1px solid rgb(234, 234, 234); 27 | outline: none; 28 | font: 100 1.3rem sans-serif; 29 | } 30 | 31 | button { 32 | color: white; 33 | padding: 20px; 34 | font: 100 1.3rem sans-serif; 35 | border: none; 36 | cursor: pointer; 37 | transition: background-color 0.5s; 38 | } 39 | button:hover { 40 | background-color: rgb(44, 29, 176); 41 | } 42 | 43 | .paras { 44 | background-color: rgb(238, 238, 238); 45 | color: rgb(21, 21, 21); 46 | font-family: Georgia, "Times New Roman", Times, serif; 47 | letter-spacing: 2px; 48 | word-spacing: 5px; 49 | padding: 20px; 50 | border-radius: 5px; 51 | margin-top: 20px; 52 | } 53 | -------------------------------------------------------------------------------- /2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Lucky Color 8 | 9 | 10 | 11 |

Your Lucky Color

12 | 13 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /2/index.js: -------------------------------------------------------------------------------- 1 | const zodiac = document.getElementById("zodiac"); 2 | 3 | const body = document.body; 4 | 5 | const changeBackground = () => { 6 | switch (zodiac.value) { 7 | case "aries": 8 | body.style.backgroundColor = "#fc0303"; 9 | break; 10 | 11 | case "tarus": 12 | body.style.backgroundColor = "#03fc6f"; 13 | break; 14 | 15 | case "gemini": 16 | body.style.backgroundColor = "#fce514"; 17 | break; 18 | case "cancer": 19 | body.style.backgroundColor = "#ffeceb"; 20 | break; 21 | case "leo": 22 | body.style.backgroundColor = "#fcba03"; 23 | break; 24 | case "virgo": 25 | body.style.backgroundColor = "#40231b"; 26 | break; 27 | case "libra": 28 | body.style.backgroundColor = "#9fd9fc"; 29 | break; 30 | case "scorpio": 31 | body.style.backgroundColor = "#1f1f1f"; 32 | break; 33 | case "sagittarius": 34 | body.style.backgroundColor = "#994ead"; 35 | break; 36 | case "capricorn": 37 | body.style.backgroundColor = "#eb8d57"; 38 | break; 39 | case "aquarius": 40 | body.style.backgroundColor = "#579eeb"; 41 | break; 42 | case "pisces": 43 | body.style.backgroundColor = "#fc88d8"; 44 | break; 45 | 46 | default: 47 | body.style.backgroundColor = "#fff"; 48 | break; 49 | } 50 | }; 51 | -------------------------------------------------------------------------------- /2/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0%; 3 | padding: 0; 4 | } 5 | 6 | h1 { 7 | text-align: center; 8 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 9 | margin: 30px 0; 10 | color: white; 11 | padding: 10px; 12 | background-color: rgb(50, 50, 50); 13 | } 14 | 15 | select, 16 | button { 17 | cursor: pointer; 18 | border: none; 19 | outline: none; 20 | margin: 30px 0; 21 | color: white; 22 | padding: 10px; 23 | font: 100 1.2rem sans-serif; 24 | background-color: rgb(50, 50, 50); 25 | } 26 | 27 | button { 28 | background-color: rgb(53, 34, 201); 29 | } 30 | -------------------------------------------------------------------------------- /3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Name Tag 9 | 10 | 11 |
12 | 13 | 14 | 15 |
16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /3/index.js: -------------------------------------------------------------------------------- 1 | const name = document.getElementById("name"); 2 | const tagsContainer = document.querySelector(".tags"); 3 | const addName = () => { 4 | if (name.value === "") { 5 | return null; 6 | } 7 | 8 | const tag = document.createElement("div"); 9 | tag.setAttribute("class", "tag"); 10 | 11 | tag.innerText = `Hey, I am ${name.value}`; 12 | 13 | tagsContainer.append(tag); 14 | }; 15 | -------------------------------------------------------------------------------- /3/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0%; 3 | padding: 0%; 4 | } 5 | 6 | body { 7 | background-color: rgb(255, 236, 236); 8 | } 9 | .container { 10 | width: 80%; 11 | min-height: 100vh; 12 | margin: auto; 13 | 14 | background-color: white; 15 | } 16 | 17 | input { 18 | padding: 25px; 19 | border: 1px solid rgb(230, 230, 230); 20 | width: 80%; 21 | box-sizing: border-box; 22 | outline: none; 23 | font: 100 1.2rem "Lucida Sans"; 24 | } 25 | button { 26 | font: 100 1.2rem "Lucida Sans"; 27 | padding: 25px; 28 | width: 19%; 29 | outline: none; 30 | background-color: rgb(37, 37, 37); 31 | color: #fff; 32 | border: 1px solid rgb(230, 230, 230); 33 | cursor: pointer; 34 | transition: background-color 0.3s; 35 | } 36 | button:hover { 37 | background-color: rgb(4, 4, 4); 38 | } 39 | 40 | .tags { 41 | display: flex; 42 | flex-wrap: wrap; 43 | justify-content: center; 44 | } 45 | .tag { 46 | padding: 25px; 47 | box-sizing: border-box; 48 | background-color: darkred; 49 | width: 30%; 50 | color: white; 51 | font-family: "Lucida Sans"; 52 | margin: 10px; 53 | border-radius: 5px; 54 | transition: all 0.5s; 55 | } 56 | 57 | .tag:hover { 58 | transform: translateY(-10px); 59 | } 60 | -------------------------------------------------------------------------------- /4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Daily Goals 8 | 9 | 10 | 11 |
12 |

DAILY GOALS

13 |
14 | 15 | 16 | 21 | 22 | 23 |
24 | 25 | 32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /4/index.js: -------------------------------------------------------------------------------- 1 | const title = document.getElementById("title"); 2 | const description = document.getElementById("description"); 3 | const form = document.querySelector("form"); 4 | const container = document.querySelector(".container"); 5 | 6 | const tasks = localStorage.getItem("tasks") 7 | ? JSON.parse(localStorage.getItem("tasks")) 8 | : []; 9 | 10 | showAllTasks(); 11 | 12 | function showAllTasks() { 13 | tasks.forEach((value, index) => { 14 | const div = document.createElement("div"); 15 | div.setAttribute("class", "task"); 16 | 17 | const innerDiv = document.createElement("div"); 18 | div.append(innerDiv); 19 | 20 | const p = document.createElement("p"); 21 | p.innerText = value.title; 22 | innerDiv.append(p); 23 | 24 | const span = document.createElement("span"); 25 | span.innerText = value.description; 26 | innerDiv.append(span); 27 | 28 | const btn = document.createElement("button"); 29 | btn.setAttribute("class", "deleteBtn"); 30 | 31 | btn.innerText = "-"; 32 | 33 | btn.addEventListener("click", () => { 34 | removeTasks(); 35 | tasks.splice(index, 1); 36 | localStorage.setItem("tasks", JSON.stringify(tasks)); 37 | showAllTasks(); 38 | }); 39 | 40 | div.append(btn); 41 | container.append(div); 42 | }); 43 | } 44 | 45 | function removeTasks() { 46 | tasks.forEach(() => { 47 | const div = document.querySelector(".task"); 48 | div.remove(); 49 | }); 50 | } 51 | 52 | form.addEventListener("submit", (e) => { 53 | e.preventDefault(); 54 | removeTasks(); 55 | 56 | tasks.push({ 57 | title: title.value, 58 | description: description.value, 59 | }); 60 | 61 | localStorage.setItem("tasks", JSON.stringify(tasks)); 62 | showAllTasks(); 63 | }); 64 | -------------------------------------------------------------------------------- /4/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0%; 3 | padding: 0%; 4 | } 5 | 6 | body { 7 | background-color: antiquewhite; 8 | } 9 | 10 | .container { 11 | background-color: white; 12 | width: 70%; 13 | margin: auto; 14 | min-height: 100vh; 15 | padding: 30px; 16 | box-sizing: border-box; 17 | } 18 | 19 | h1 { 20 | font-family: sans-serif; 21 | text-align: center; 22 | margin: 30px; 23 | } 24 | 25 | form { 26 | display: flex; 27 | flex-direction: column; 28 | } 29 | 30 | input, 31 | textarea, 32 | button { 33 | padding: 10px; 34 | border: 1px solid rgba(0, 0, 0, 0.2); 35 | font: 100 1.1rem sans-serif; 36 | border-radius: 5px; 37 | outline: none; 38 | margin: 10px; 39 | } 40 | button { 41 | background-color: rgb(50, 50, 50); 42 | color: white; 43 | cursor: pointer; 44 | } 45 | 46 | button:hover { 47 | background-color: rgb(61, 9, 156); 48 | } 49 | 50 | .task { 51 | background-color: rgb(247, 247, 247); 52 | font: 100 1.1rem sans-serif; 53 | padding: 30px; 54 | margin: 2vmax; 55 | color: rgba(0, 0, 0, 0.868); 56 | display: flex; 57 | align-items: center; 58 | } 59 | 60 | .task > div { 61 | width: 100%; 62 | } 63 | 64 | .task span { 65 | color: rgba(0, 0, 0, 0.632); 66 | } 67 | 68 | .deleteBtn { 69 | border-radius: 100%; 70 | width: 30px; 71 | height: 30px; 72 | font-size: 1.6rem; 73 | display: flex; 74 | justify-content: center; 75 | align-items: center; 76 | background-color: crimson; 77 | } 78 | -------------------------------------------------------------------------------- /5/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meabhisingh/jsBeginnerProjects/4716281d77202de0b97e0c916eadaee60cfe0151/5/bg.png -------------------------------------------------------------------------------- /5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 |

Remaing Time

14 | 15 |
16 |

12 Days

17 |

2 Hours

18 |

33 Minutes

19 |

44 Seconds

20 |
21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /5/index.js: -------------------------------------------------------------------------------- 1 | const daysElement = document.querySelector(".days"); 2 | const hoursElement = document.querySelector(".hours"); 3 | const minutesElement = document.querySelector(".minutes"); 4 | const secondsElement = document.querySelector(".seconds"); 5 | const heading = document.querySelector("h1"); 6 | const counterTimer = document.querySelector(".counterTimer"); 7 | 8 | // Converting second,minute,hour,day in miliseconds 9 | const second = 1000, 10 | minute = 60 * second, 11 | hour = 60 * minute, 12 | day = 24 * hour; 13 | 14 | const timerFunction = () => { 15 | // Generating current Date in mm/dd/yyyy 16 | let now = new Date(), 17 | dd = String(now.getDate()).padStart(2, "0"), 18 | mm = String(now.getMonth() + 1).padStart(2, "0"), 19 | yyyy = now.getFullYear(); 20 | now = `${mm}/${dd}/${yyyy}`; 21 | 22 | // Taking Target Date from User 23 | const enteredDay = prompt("Enter Day").padStart(2, "0"); 24 | const enteredMonth = prompt("Enter Month").padStart(2, "0"); 25 | let targetDate = `${enteredMonth}/${enteredDay}/${yyyy}`; 26 | 27 | // Checking if Target date is for next year 28 | if (now > targetDate) 29 | targetDate = `${enteredMonth}/${enteredDay}/${yyyy + 1}`; 30 | 31 | const intervalId = setInterval(() => { 32 | // coverting targetDate in Miliseconds 33 | const timer = new Date(targetDate).getTime(); 34 | // Taking current Date in Miliseconds 35 | const today = new Date().getTime(); 36 | 37 | // Finding Difference target Date and today's date 38 | const difference = timer - today; 39 | 40 | // finding left days,hours,minutes,seconds 41 | const leftDay = Math.floor(difference / day); 42 | const leftHour = Math.floor((difference % day) / hour); 43 | const leftMinute = Math.floor((difference % hour) / minute); 44 | const leftSecond = Math.floor((difference % minute) / second); 45 | 46 | // Showing Timer in DOM 47 | daysElement.innerText = leftDay; 48 | hoursElement.innerText = leftHour; 49 | minutesElement.innerText = leftMinute; 50 | secondsElement.innerText = leftSecond; 51 | 52 | // Stop Set Interval after reaching the target time 53 | if (difference < 0) { 54 | counterTimer.style.display = "none"; 55 | heading.innerText = "Time's Up"; 56 | clearInterval(intervalId); 57 | } 58 | }, 0); 59 | }; 60 | 61 | timerFunction(); 62 | -------------------------------------------------------------------------------- /5/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0%; 3 | padding: 0%; 4 | color: white; 5 | font-family: sans-serif; 6 | } 7 | 8 | .container { 9 | width: 100%; 10 | height: 100vh; 11 | background-image: url("./bg.png"); 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | flex-direction: column; 16 | } 17 | 18 | h1 { 19 | text-transform: uppercase; 20 | 21 | letter-spacing: 5px; 22 | } 23 | 24 | .counterTimer { 25 | display: flex; 26 | } 27 | .counterTimer > p { 28 | font-size: 1.2rem; 29 | padding: 1rem; 30 | text-align: center; 31 | text-transform: uppercase; 32 | } 33 | .counterTimer > p > span { 34 | display: block; 35 | font-size: 4rem; 36 | } 37 | -------------------------------------------------------------------------------- /6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Stop Watch 8 | 9 | 10 | 11 |
12 |
00:00:00
13 |
14 | 15 | 16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /6/index.js: -------------------------------------------------------------------------------- 1 | const clock = document.querySelector(".clock"); 2 | 3 | let sec = 0, 4 | min = 0, 5 | hr = 0, 6 | intervalId; 7 | 8 | const startStopwatch = () => { 9 | intervalId = setInterval(() => { 10 | if (sec < 59) sec++; 11 | else if (min >= 59) { 12 | hr++; 13 | min = 0; 14 | } else { 15 | sec = 0; 16 | min++; 17 | } 18 | 19 | const seconds = sec.toString().padStart(2, "0"); 20 | const minutes = min.toString().padStart(2, "0"); 21 | const hours = hr.toString().padStart(2, "0"); 22 | 23 | clock.innerText = `${hours}:${minutes}:${seconds}`; 24 | }, 1000); 25 | }; 26 | 27 | const stopStopwatch = () => { 28 | clearInterval(intervalId); 29 | }; 30 | -------------------------------------------------------------------------------- /6/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0%; 3 | padding: 0%; 4 | } 5 | 6 | .container { 7 | height: 100vh; 8 | background-color: rgb(30, 30, 30); 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .clock { 16 | color: #fff; 17 | font-size: 4rem; 18 | padding: 3rem; 19 | } 20 | 21 | button { 22 | padding: 1.25rem; 23 | width: 200px; 24 | border: none; 25 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 26 | background-color: white; 27 | margin: 30px; 28 | cursor: pointer; 29 | font: 100 1.5rem sans-serif; 30 | border-radius: 50px; 31 | } 32 | 33 | button:hover { 34 | background-color: rgb(50, 50, 50); 35 | color: #fff; 36 | } 37 | -------------------------------------------------------------------------------- /7/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meabhisingh/jsBeginnerProjects/4716281d77202de0b97e0c916eadaee60cfe0151/7/bg.png -------------------------------------------------------------------------------- /7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Weather App 8 | 9 | 10 | 11 | 12 |
13 |
14 |
17°
15 |
16 |

Loca

17 | 11:01 - Monday 2022-06-22 18 |
19 | 20 |
21 |

condition

22 | Condition 23 |
24 |
25 |
26 | 27 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /7/index.js: -------------------------------------------------------------------------------- 1 | // Initializing all elements constants 2 | const temperateField = document.querySelector(".weather1"); 3 | const cityField = document.querySelector(".weather2 p"); 4 | const dateField = document.querySelector(".weather2 span"); 5 | const emojiField = document.querySelector(".weather3 img"); 6 | const weatherField = document.querySelector(".weather3 span"); 7 | const searchField = document.querySelector(".searchField"); 8 | const form = document.querySelector("form"); 9 | 10 | // Adding event listen to the form 11 | form.addEventListener("submit", search); 12 | 13 | // Default Location 14 | let target = "delhi"; 15 | 16 | // Function to fetch Data from Weather API 17 | const fetchData = async (target) => { 18 | try { 19 | const url = `https://api.weatherapi.com/v1/current.json?key=5b27a6ef3547402582e62007222306&q=${target}`; 20 | 21 | const response = await fetch(url); 22 | const data = await response.json(); 23 | 24 | // Destructuring 25 | const { 26 | current: { 27 | temp_c, 28 | condition: { text, icon }, 29 | }, 30 | location: { name, localtime }, 31 | } = data; 32 | 33 | // Calling update Dom Function 34 | updateDom(temp_c, name, localtime, icon, text); 35 | } catch (error) { 36 | alert("Location not found"); 37 | } 38 | }; 39 | 40 | // Function to update Dom 41 | function updateDom(temperate, city, time, emoji, text) { 42 | const exactTime = time.split(" ")[1]; 43 | const exactDate = time.split(" ")[0]; 44 | const exactDay = getDayFullName(new Date(exactDate).getDay()); 45 | 46 | temperateField.innerText = temperate; 47 | cityField.innerText = city; 48 | dateField.innerText = `${exactTime} - ${exactDay} ${exactDate}`; 49 | emojiField.src = emoji; 50 | weatherField.innerText = text; 51 | } 52 | 53 | fetchData(target); 54 | 55 | // Function to search the location 56 | function search(e) { 57 | e.preventDefault(); 58 | 59 | target = searchField.value; 60 | 61 | fetchData(target); 62 | } 63 | 64 | // Function to get the name of day 65 | function getDayFullName(num) { 66 | switch (num) { 67 | case 0: 68 | return "Sunday"; 69 | 70 | case 1: 71 | return "Monday"; 72 | 73 | case 2: 74 | return "Tuesday"; 75 | 76 | case 3: 77 | return "Wednesday"; 78 | 79 | case 4: 80 | return "Thursday"; 81 | 82 | case 5: 83 | return "Friday"; 84 | 85 | case 6: 86 | return "Saturdat"; 87 | 88 | default: 89 | return "Don't Know"; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /7/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Economica&family=Grape+Nuts&family=Roboto:wght@100;300;400;700;900&display=swap"); 2 | 3 | * { 4 | margin: 0%; 5 | padding: 0; 6 | font-family: "Roboto", sans-serif; 7 | } 8 | 9 | .container { 10 | width: 100%; 11 | height: 100vh; 12 | background-color: black; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | .container::before { 19 | content: ""; 20 | width: 100%; 21 | height: 100%; 22 | background-image: url("./bg.png"); 23 | background-repeat: no-repeat; 24 | background-size: cover; 25 | background-position: center; 26 | position: absolute; 27 | opacity: 0.4; 28 | } 29 | 30 | .weather { 31 | z-index: 2; 32 | display: flex; 33 | align-items: center; 34 | color: white; 35 | } 36 | 37 | .weather > div { 38 | margin: 0.625rem; 39 | } 40 | 41 | .weather1 { 42 | font-size: 4rem; 43 | } 44 | 45 | .weather p { 46 | font-size: 2rem; 47 | } 48 | .weather span { 49 | font-size: 0.75rem; 50 | } 51 | 52 | .weather3 span { 53 | margin: 0.3rem; 54 | } 55 | 56 | .weather3 img { 57 | width: 2rem; 58 | } 59 | nav { 60 | height: 100px; 61 | border-radius: 100px 100px 0 0; 62 | padding: 1rem 0; 63 | box-shadow: 0 0 25px rgba(0, 0, 0, 0.18); 64 | position: absolute; 65 | bottom: 0%; 66 | width: 100%; 67 | background-color: rgba(180, 177, 177, 0.075); 68 | display: flex; 69 | justify-content: center; 70 | align-items: center; 71 | } 72 | 73 | nav form { 74 | width: 70%; 75 | grid-template-columns: 5fr 1fr; 76 | display: grid; 77 | } 78 | 79 | .searchField { 80 | font-size: 1.1rem; 81 | outline: none; 82 | color: white; 83 | background-color: transparent; 84 | padding: 1rem 0; 85 | border: none; 86 | border-bottom: 2px solid white; 87 | width: 98%; 88 | } 89 | 90 | nav form button { 91 | background-color: rgb(255, 195, 100); 92 | border-radius: 0 25px 25px 0; 93 | font-size: 1.1rem; 94 | color: white; 95 | outline: none; 96 | border: none; 97 | cursor: pointer; 98 | } 99 | --------------------------------------------------------------------------------