diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..a575a81 Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..91f7ee7 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.linkedEditing": true +} \ No newline at end of file diff --git a/My projects/Button Ripple Effect/devon-beard-gusKvIhcoms-unsplash.jpg b/My projects/Button Ripple Effect/devon-beard-gusKvIhcoms-unsplash.jpg new file mode 100644 index 0000000..bde290c Binary files /dev/null and b/My projects/Button Ripple Effect/devon-beard-gusKvIhcoms-unsplash.jpg differ diff --git a/My projects/Button Ripple Effect/home.html b/My projects/Button Ripple Effect/home.html new file mode 100644 index 0000000..881585e --- /dev/null +++ b/My projects/Button Ripple Effect/home.html @@ -0,0 +1,16 @@ + + + + + + + Button Ripple Effect + + + + + Button + + + + \ No newline at end of file diff --git a/My projects/Button Ripple Effect/index.js b/My projects/Button Ripple Effect/index.js new file mode 100644 index 0000000..a8a1d14 --- /dev/null +++ b/My projects/Button Ripple Effect/index.js @@ -0,0 +1,12 @@ +// querySelector- returns the first element within the document that matches +const btnEl = document.querySelector(".btn"); +// addEventListener sets up a function to be called whenever the specified event is delivered +btnEl.addEventListener("mouseover", (event) =>{ + const x = event.pageX - btnEl.offsetLeft + const y = event.pageY - btnEl.offsetTop + + btnEl.style.setProperty("--xPos", x + "px"); + btnEl.style.setProperty("--yPos", y + "px"); + +}) +// offsetTop & offsetLeft - read-only property returns the distance of the outer border of the current element relative to the inner border of the top or left of the offsetParent, the closest positioned ancestor element. diff --git a/My projects/Button Ripple Effect/style.css b/My projects/Button Ripple Effect/style.css new file mode 100644 index 0000000..c45f395 --- /dev/null +++ b/My projects/Button Ripple Effect/style.css @@ -0,0 +1,50 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + display: flex; + justify-content: center; + height: 100vh; + align-items: center; + background-image: url(devon-beard-gusKvIhcoms-unsplash.jpg); + background-repeat: no-repeat; + background-size: cover; + font-family: Haettenschweiler, 'Arial Narrow Bold', sans-serif; +} +.btn{ + background-color: rgb(160, 56, 17); + padding: 20px 30px; + border-radius: 10px; + color: white; + text-decoration: none; + letter-spacing: 2px; + position: relative; + overflow: hidden; +} + +.btn span{ + position: relative; + z-index: 1; +} + +.btn::before{ + content: ""; + position: absolute; + background-color: rgb(64, 141, 205); + width: 0; + height: 0; + top: var(--yPos); + left: var(--xPos); + transform: translate(-50%, -50%); + border-radius: 50%; + transition: width .5s, height .5s; +} + +.btn:hover::before{ +width: 200px; +height: 200px; + +} \ No newline at end of file diff --git a/My projects/Digital Clock/home.html b/My projects/Digital Clock/home.html new file mode 100644 index 0000000..76d6b51 --- /dev/null +++ b/My projects/Digital Clock/home.html @@ -0,0 +1,37 @@ + + + + + + + + Digital Clock + + +
+

Digital Clock

+
+ +
+
+
+ 00 + Hours +
+
+ 00 + Minutes +
+
+ 00 + Seconds +
+
+ AM +
+
+ +
+ + + \ No newline at end of file diff --git a/My projects/Digital Clock/images/pawel-nolbert-4u2U8EO9OzY-unsplash.jpg b/My projects/Digital Clock/images/pawel-nolbert-4u2U8EO9OzY-unsplash.jpg new file mode 100644 index 0000000..5a64851 Binary files /dev/null and b/My projects/Digital Clock/images/pawel-nolbert-4u2U8EO9OzY-unsplash.jpg differ diff --git a/My projects/Digital Clock/images/shot-by-cerqueira-8qH4GSYBiSA-unsplash.jpg b/My projects/Digital Clock/images/shot-by-cerqueira-8qH4GSYBiSA-unsplash.jpg new file mode 100644 index 0000000..1ebf8c0 Binary files /dev/null and b/My projects/Digital Clock/images/shot-by-cerqueira-8qH4GSYBiSA-unsplash.jpg differ diff --git a/My projects/Digital Clock/index.js b/My projects/Digital Clock/index.js new file mode 100644 index 0000000..f460219 --- /dev/null +++ b/My projects/Digital Clock/index.js @@ -0,0 +1,35 @@ +// Located all the elements by the id +const hourEl = document.getElementById("hour") +const minuteEl = document.getElementById("minute") +const secondEl = document.getElementById("second") +const ampmEl = document.getElementById("ampm") + +// Create a function to get the data from our computer +function updateClock(){ + let h = new Date().getHours() + let m = new Date().getMinutes() + let s = new Date().getSeconds() + let ampm = "AM"; +//So if h is greater then 12 then ampm is change to the after hours + if (h > 12) { + h = h - 12; + ampm = "PM"; + } + // create a conditional statement to have 0 before the hours + // if h is less than 10 ? add "0" to h, if greater then 10 just remain h + h = h<10 ? "0" + h : h; + m = m<10 ? "0" + m : m; + s = s<10 ? "0" + s : s; + + hourEl.innerText = h; + minuteEl.innerText = m; + secondEl.innerText = s; + ampmEl.innerText = ampm; + setTimeout(()=>{ + updateClock() + },1000) + //setTimeout method lets you to set the timeout value afrer the timer expires... creates an infinite loop + +} +// Call function +updateClock(); \ No newline at end of file diff --git a/My projects/Digital Clock/styles.css b/My projects/Digital Clock/styles.css new file mode 100644 index 0000000..146d3a5 --- /dev/null +++ b/My projects/Digital Clock/styles.css @@ -0,0 +1,60 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + justify-content: center; + background-image: url(images/shot-by-cerqueira-8qH4GSYBiSA-unsplash.jpg); + background-repeat: no-repeat; + background-size: cover; +} +.container{ + display: flex; +} +.heading{ + text-transform: uppercase; + letter-spacing: 4px; + text-align: center; + font-size: 8px; + color: rgb(243, 235, 235); + text-shadow: 3px 2px 3px black; +} +.container div{ + margin: 5px; + position:relative; + color: aliceblue; +} +.container span{ + display: flex; + align-items: center; + justify-content: center; + width: 100px; + height: 80px; + background-color: goldenrod; + opacity: .8; + font-size: 42px; + text-shadow: 2px 2px 3px rgba(0,0,0,.6); +} + +.container .text{ + height: 30px; + font-size: 15px; + text-transform: uppercase; + letter-spacing: 2px; + background: rgb(93, 79, 184); + opacity:.8; +} +.container #ampm{ + width: 50px; + height: 30px; + font-size: 20px; + position: absolute; + bottom: 0; + background: goldenrod; +} \ No newline at end of file diff --git a/My projects/Mutliplication App/home.html b/My projects/Mutliplication App/home.html new file mode 100644 index 0000000..44fcc6e --- /dev/null +++ b/My projects/Mutliplication App/home.html @@ -0,0 +1,23 @@ + + + + + + + Multiplication App + + + + +
+
+

Score: 0

+

What is 1 multiply by 1?

+ + +
+ +
+ + + \ No newline at end of file diff --git a/My projects/Mutliplication App/index.js b/My projects/Mutliplication App/index.js new file mode 100644 index 0000000..a4689cd --- /dev/null +++ b/My projects/Mutliplication App/index.js @@ -0,0 +1,45 @@ +// to replace the current number we can use random function from the math properties +const num1 = Math.ceil(Math.random()*10) +const num2 = Math.ceil(Math.random()*10) +// converting the id from the html to a variable name +const questionEl = document.getElementById("question"); + +const inputEl = document.getElementById("input"); + +const formEl = document.getElementById("form"); + +const scoreEl = document.getElementById("score"); + +//in order to prevent the score from remaining 0 +let score = JSON.parse (localStorage.getItem("score")); +// to get no erros we just use the "if" statement.. saving in local storage +if(!score){ + score = 0; +} +// we are now returning the score from storage and updating the score +scoreEl.innerText = `score: ${score}`; + +questionEl.innerText = `What is ${num1} multiply by ${num2}?` + +const answerEl = num1 * num2; + +// add an eventListener to track when the answer is submited from the form and get the data from the input +// Everytime the answer is submitted we active a if callback function +formEl.addEventListener("submit", ()=>{ + //to convert strings into numbers just add the + sign before the element + const userAnswer = +inputEl.value; + if(userAnswer === answerEl){ + score++; //add 1 to the score + updateLocalStorage(); + + }else{ + score--; // minus 1 to the score + updateLocalStorage(); +} +}) + +//to store the score insde of the browser we can create a function for that.. ONLY stores strings so we use JSON.stringify +function updateLocalStorage(){ + localStorage.setItem("score", JSON.stringify(score)); +} + diff --git a/My projects/Mutliplication App/roman-mager-5mZ_M06Fc9g-unsplash.jpg b/My projects/Mutliplication App/roman-mager-5mZ_M06Fc9g-unsplash.jpg new file mode 100644 index 0000000..adfe346 Binary files /dev/null and b/My projects/Mutliplication App/roman-mager-5mZ_M06Fc9g-unsplash.jpg differ diff --git a/My projects/Mutliplication App/style.css b/My projects/Mutliplication App/style.css new file mode 100644 index 0000000..291de05 --- /dev/null +++ b/My projects/Mutliplication App/style.css @@ -0,0 +1,58 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + font-family: 'Roboto', sans-serif; + text-align: center; + background-image: url(roman-mager-5mZ_M06Fc9g-unsplash.jpg); + background-repeat: no-repeat; + background-size: cover; +} + +.form{ + background-color: white; + padding: 20px; + box-shadow: -2px -3px 3px 2px black; + border-radius: 25px; + margin: 20px auto; + width: 400px; +} +.score{ + margin-bottom: 20px; + text-align: right; +} +.input{ + margin-top: 15px; + height: 30px; + width: 100%; + border-color: black; +} +.input::placeholder{ + font-size: 17px; + + text-align: center; + color: grey; +} +.btn{ + margin-top: 15px; + background-color: white; + padding: 3px 5px; + border-radius: 25px; + + + +} +.btn:hover{ + cursor: pointer; + box-shadow: 2px 2px 2px black; + background: #482d07; + color: white; + transition: all 0.2s ease-in-out; +} \ No newline at end of file diff --git a/My projects/Random Color Generator/felix-dubois-robert-CuEvrPd3NYc-unsplash.jpg b/My projects/Random Color Generator/felix-dubois-robert-CuEvrPd3NYc-unsplash.jpg new file mode 100644 index 0000000..4888dfb Binary files /dev/null and b/My projects/Random Color Generator/felix-dubois-robert-CuEvrPd3NYc-unsplash.jpg differ diff --git a/My projects/Random Color Generator/home.html b/My projects/Random Color Generator/home.html new file mode 100644 index 0000000..f34fdbf --- /dev/null +++ b/My projects/Random Color Generator/home.html @@ -0,0 +1,20 @@ + + + + + + + Random Color Generator + + + +
+

Random Color Generator

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/My projects/Random Color Generator/script.js b/My projects/Random Color Generator/script.js new file mode 100644 index 0000000..bd9cf26 --- /dev/null +++ b/My projects/Random Color Generator/script.js @@ -0,0 +1,45 @@ +// Convert the id into a element +const containerEl = document.querySelector(".container") + +// Using FOR LOOP +// in for loop index start at 0 and you can replace array.length with the number of elements you want +for (let index = 0; index < 30; index++) { + // We have to create an element for the div + const colorContainerEl = document.createElement("div") + // Then, to add a class we can use the classList property and add method + colorContainerEl.classList.add("color-container") + //Next, we need to append this new element inside this container... so write container element.append + containerEl.appendChild(colorContainerEl) +} +const colorContainerEls = document.querySelectorAll(".color-container") + +generateColors(); + +function generateColors(){ + colorContainerEls.forEach((colorContainerEl) => { + const newColorCode = randomColor(); + colorContainerEl.style.backgroundColor = "#" + newColorCode; + colorContainerEl.innerText = "#" + newColorCode; + }); +} + +//Back in HTML remove the boxes we created with the "div" + +//Create a color codes using a function + +function randomColor() { + const chars = "0123456789abcdef" + const colorCodeLength = 6; + let colorCode = ""; //start with empty and then we use for loop again, replace array.length now with the colorCodeLength + for (let index = 0; index < colorCodeLength; index++) { + // want to create a variable from 0-15 from the chars + const randomNumber = Math.floor(Math.random()* + chars.length) + colorCode += chars.substring(randomNumber,randomNumber+1) + + } + return colorCode; +} + + + diff --git a/My projects/Random Color Generator/style.css b/My projects/Random Color Generator/style.css new file mode 100644 index 0000000..027868f --- /dev/null +++ b/My projects/Random Color Generator/style.css @@ -0,0 +1,38 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} +body{ + background-image: url(felix-dubois-robert-CuEvrPd3NYc-unsplash.jpg); + background-repeat: no-repeat; + background-size: cover; +} +h1 { + text-align: center; + color: white; + text-shadow: 2px 3px 4px grey; + text-decoration:underline +} + +.container { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.color-container { + background-color: orange; + width: 300px; + height: 150px; + color: white; + margin: 5px; + display: flex; + justify-content: center; + align-items: center; + font-size: 25px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); + border: solid black 2px; + border-radius: 10px; +} \ No newline at end of file diff --git a/My projects/Real-time Charater Counter/brett-jordan-JoJ5fuPQsPY-unsplash.jpg b/My projects/Real-time Charater Counter/brett-jordan-JoJ5fuPQsPY-unsplash.jpg new file mode 100644 index 0000000..6ac3c6e Binary files /dev/null and b/My projects/Real-time Charater Counter/brett-jordan-JoJ5fuPQsPY-unsplash.jpg differ diff --git a/My projects/Real-time Charater Counter/home.html b/My projects/Real-time Charater Counter/home.html new file mode 100644 index 0000000..afead6e --- /dev/null +++ b/My projects/Real-time Charater Counter/home.html @@ -0,0 +1,32 @@ + + + + + + + Real-time Character Counter + + + +
+ +

Real-time Character Counter

+ +
+

+ Total Characters: + 0 +

+

+ Remaining: + 30 +

+
+ +
+ + + \ No newline at end of file diff --git a/My projects/Real-time Charater Counter/index.js b/My projects/Real-time Charater Counter/index.js new file mode 100644 index 0000000..be24a62 --- /dev/null +++ b/My projects/Real-time Charater Counter/index.js @@ -0,0 +1,18 @@ +const textareaEl = document.getElementById("textarea"); + +const totalCounterEl = document.getElementById("total-counter"); + +const remainingCounterEl = document.getElementById("remaining-counter"); + +//add an eventListener to track the text inside the textarea +textareaEl.addEventListener("keyup", () => { + updateCounter(); +}) + +function updateCounter(){ + totalCounterEl.innerText = textareaEl.value.length; + + remainingCounterEl.innerText = + textareaEl.getAttribute("maxLength") - + textareaEl.value.length; + } \ No newline at end of file diff --git a/My projects/Real-time Charater Counter/silas-baisch-51QUGLV6En0-unsplash.jpg b/My projects/Real-time Charater Counter/silas-baisch-51QUGLV6En0-unsplash.jpg new file mode 100644 index 0000000..30a72cb Binary files /dev/null and b/My projects/Real-time Charater Counter/silas-baisch-51QUGLV6En0-unsplash.jpg differ diff --git a/My projects/Real-time Charater Counter/style.css b/My projects/Real-time Charater Counter/style.css new file mode 100644 index 0000000..4dcd846 --- /dev/null +++ b/My projects/Real-time Charater Counter/style.css @@ -0,0 +1,60 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + background-image: url(silas-baisch-51QUGLV6En0-unsplash.jpg); + background-repeat: no-repeat; + background-size:cover; + overflow: hidden; + color: white; + font-family: monospace; +} + +.container{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + width: 500px; + height:400px; +} +.container h1{ + margin-bottom: 12px; + font-size: 23px; + text-shadow: 2px 2px 5px black; +} +.textarea { + resize: none; + width: 80%; + height: 200px; + font-size: 15px; + background-color: black; + opacity: .8; + color: white; +} + +.counter-container{ + padding: 10px; + display: flex; + justify-content: space-between; + width: 80%; + background: rgb(159, 28, 28); + opacity: .8; + font-size: 17px; + font-weight: 700; +} + +.total-counter{ + color: gold; +} +.remaining-counter{ + color: green; +} \ No newline at end of file diff --git a/My projects/Real-time Charater Counter/tony-lee-i_XLLP08BOc-unsplash.jpg b/My projects/Real-time Charater Counter/tony-lee-i_XLLP08BOc-unsplash.jpg new file mode 100644 index 0000000..f313cb9 Binary files /dev/null and b/My projects/Real-time Charater Counter/tony-lee-i_XLLP08BOc-unsplash.jpg differ diff --git a/My projects/Sticky Navbar/index.html b/My projects/Sticky Navbar/index.html new file mode 100644 index 0000000..68587a1 --- /dev/null +++ b/My projects/Sticky Navbar/index.html @@ -0,0 +1,97 @@ + + + + + + + Sticky Navbar + + + +
+ OAKWOOD LEGEND + + +
+
+

Welcome to our website

+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tempore + explicabo veritatis dignissimos accusantium nostrum voluptatum qui + labore, natus mollitia voluptatem. Ipsa ducimus eos saepe expedita ex + laboriosam optio omnis amet, qui veritatis unde aut tempora. Fuga et + sint autem amet, modi, veniam dolorum placeat blanditiis rerum doloribus + aliquid voluptas. Alias voluptatum id vel minima voluptates assumenda + accusantium consectetur culpa necessitatibus sint cum perspiciatis + laboriosam sequi praesentium, eos numquam! Eum, officia fugiat + reprehenderit eligendi itaque similique! Harum, quod vitae explicabo + sint ad illum expedita quisquam earum? Necessitatibus illo tempore + sapiente commodi quae, qui quasi odit fugiat impedit mollitia eveniet + maiores? +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tempore + explicabo veritatis dignissimos accusantium nostrum voluptatum qui + labore, natus mollitia voluptatem. Ipsa ducimus eos saepe expedita ex + laboriosam optio omnis amet, qui veritatis unde aut tempora. Fuga et + sint autem amet, modi, veniam dolorum placeat blanditiis rerum doloribus + aliquid voluptas. Alias voluptatum id vel minima voluptates assumenda + accusantium consectetur culpa necessitatibus sint cum perspiciatis + laboriosam sequi praesentium, eos numquam! Eum, officia fugiat + reprehenderit eligendi itaque similique! Harum, quod vitae explicabo + sint ad illum expedita quisquam earum? Necessitatibus illo tempore + sapiente commodi quae, qui quasi odit fugiat impedit mollitia eveniet + maiores? +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tempore + explicabo veritatis dignissimos accusantium nostrum voluptatum qui + labore, natus mollitia voluptatem. Ipsa ducimus eos saepe expedita ex + laboriosam optio omnis amet, qui veritatis unde aut tempora. Fuga et + sint autem amet, modi, veniam dolorum placeat blanditiis rerum doloribus + aliquid voluptas. Alias voluptatum id vel minima voluptates assumenda + accusantium consectetur culpa necessitatibus sint cum perspiciatis + laboriosam sequi praesentium, eos numquam! Eum, officia fugiat + reprehenderit eligendi itaque similique! Harum, quod vitae explicabo + sint ad illum expedita quisquam earum? Necessitatibus illo tempore + sapiente commodi quae, qui quasi odit fugiat impedit mollitia eveniet + maiores? +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tempore + explicabo veritatis dignissimos accusantium nostrum voluptatum qui + labore, natus mollitia voluptatem. Ipsa ducimus eos saepe expedita ex + laboriosam optio omnis amet, qui veritatis unde aut tempora. Fuga et + sint autem amet, modi, veniam dolorum placeat blanditiis rerum doloribus + aliquid voluptas. Alias voluptatum id vel minima voluptates assumenda + accusantium consectetur culpa necessitatibus sint cum perspiciatis + laboriosam sequi praesentium, eos numquam! Eum, officia fugiat + reprehenderit eligendi itaque similique! Harum, quod vitae explicabo + sint ad illum expedita quisquam earum? Necessitatibus illo tempore + sapiente commodi quae, qui quasi odit fugiat impedit mollitia eveniet + maiores? +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tempore + explicabo veritatis dignissimos accusantium nostrum voluptatum qui + labore, natus mollitia voluptatem. Ipsa ducimus eos saepe expedita ex + laboriosam optio omnis amet, qui veritatis unde aut tempora. Fuga et + sint autem amet, modi, veniam dolorum placeat blanditiis rerum doloribus + aliquid voluptas. Alias voluptatum id vel minima voluptates assumenda + accusantium consectetur culpa necessitatibus sint cum perspiciatis + laboriosam sequi praesentium, eos numquam! Eum, officia fugiat + reprehenderit eligendi itaque similique! Harum, quod vitae explicabo + sint ad illum expedita quisquam earum? Necessitatibus illo tempore + sapiente commodi quae, qui quasi odit fugiat impedit mollitia eveniet + maiores? +

+
+ + + diff --git a/My projects/Sticky Navbar/logo.svg b/My projects/Sticky Navbar/logo.svg new file mode 100644 index 0000000..4d8d56f --- /dev/null +++ b/My projects/Sticky Navbar/logo.svg @@ -0,0 +1,2 @@ + + diff --git a/My projects/Sticky Navbar/luca-bravo-zAjdgNXsMeg-unsplash.jpg b/My projects/Sticky Navbar/luca-bravo-zAjdgNXsMeg-unsplash.jpg new file mode 100644 index 0000000..20b3d3b Binary files /dev/null and b/My projects/Sticky Navbar/luca-bravo-zAjdgNXsMeg-unsplash.jpg differ diff --git a/My projects/Sticky Navbar/script.js b/My projects/Sticky Navbar/script.js new file mode 100644 index 0000000..bdcd56b --- /dev/null +++ b/My projects/Sticky Navbar/script.js @@ -0,0 +1,17 @@ +const navbarEl = document.querySelector(".navbar"); + +const bottomContainerEl = document.querySelector(".bottom-container"); + +console.log(bottomContainerEl.offsetTop); +console.log(navbarEl.offsetHeight) + +window.addEventListener("scroll", () => { + if( + window.scrollY > bottomContainerEl.offsetTop - navbarEl.offsetHeight - 50 + ) { + navbarEl.classList.add("active"); + } else { + navbarEl.classList.remove("active"); } +}) + +//so use eventListener to listen for scroll and then apply an if else statement to calculate the scroll position \ No newline at end of file diff --git a/My projects/Sticky Navbar/style.css b/My projects/Sticky Navbar/style.css new file mode 100644 index 0000000..4d60556 --- /dev/null +++ b/My projects/Sticky Navbar/style.css @@ -0,0 +1,68 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + position: relative; +} + +.top-container { + background-image: url(luca-bravo-zAjdgNXsMeg-unsplash.jpg); + height: 100vh; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +.top-container h1 { + color: rgb(255, 255, 255); + font-size: 50px; + font-family: Haettenschweiler, "Arial Narrow Bold", sans-serif; + letter-spacing: 1.5px; + box-shadow: 2px 4px 6px ; +} + +.text { + margin: 50px 5%; + font-family: sans-serif; +} + +.navbar { + display: flex; + position: fixed; + background-color: white; + width: 100%; + height: 30px; + justify-content: space-between; + align-items: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); + transition: background-color 0.4s; + +} + +.navbar ul { + display: flex; + list-style-type: none; +} + +.navbar ul li a { + text-decoration: none; + margin: 0 10px; + color: black; + font-family: cursive; +} + +.navbar ul li a:hover { + color: red; +} + +.navbar.active { + background-color: black; +} + +.navbar.active ul li a { + color: white; +} \ No newline at end of file diff --git a/My projects/Sticky Navbar/tobias-roder-x60YFtdOsGU-unsplash.jpg b/My projects/Sticky Navbar/tobias-roder-x60YFtdOsGU-unsplash.jpg new file mode 100644 index 0000000..2d52ae4 Binary files /dev/null and b/My projects/Sticky Navbar/tobias-roder-x60YFtdOsGU-unsplash.jpg differ diff --git a/My projects/Weather App/home.html b/My projects/Weather App/home.html new file mode 100644 index 0000000..eaa4d7b --- /dev/null +++ b/My projects/Weather App/home.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/My projects/Weather App/script.js b/My projects/Weather App/script.js new file mode 100644 index 0000000..c5956d7 --- /dev/null +++ b/My projects/Weather App/script.js @@ -0,0 +1,11 @@ +//Baby weather app (conditionals) +// if rain then "Go grab your umbrella" +// else : " Wear your sunglass" + +let weather = 'sunny' +if (weather == 'rain'){ + console.log('Go grab your umbrella') +} +else { + console.log('Wear your sunglasses') +} \ No newline at end of file diff --git a/My projects/Weather App/style.css b/My projects/Weather App/style.css new file mode 100644 index 0000000..e69de29