diff --git a/.codesandbox/workspace.json b/.codesandbox/workspace.json new file mode 100644 index 000000000..7b46a7eda --- /dev/null +++ b/.codesandbox/workspace.json @@ -0,0 +1,20 @@ +{ + "responsive-preview": { + "Mobile": [ + 320, + 675 + ], + "Tablet": [ + 1024, + 765 + ], + "Desktop": [ + 1400, + 800 + ], + "Desktop HD": [ + 1920, + 1080 + ] + } +} \ No newline at end of file diff --git a/images/Screenshot 2023-11-02 095011.png b/images/Screenshot 2023-11-02 095011.png new file mode 100644 index 000000000..9871cd55c Binary files /dev/null and b/images/Screenshot 2023-11-02 095011.png differ diff --git a/images/Screenshot 2023-11-02 095503.png b/images/Screenshot 2023-11-02 095503.png new file mode 100644 index 000000000..cf01a1b06 Binary files /dev/null and b/images/Screenshot 2023-11-02 095503.png differ diff --git a/images/Software Developer.jpg b/images/Software Developer.jpg new file mode 100644 index 000000000..2cf97688a Binary files /dev/null and b/images/Software Developer.jpg differ diff --git a/images/code_g1019737194.jpg b/images/code_g1019737194.jpg new file mode 100644 index 000000000..4979ce92a Binary files /dev/null and b/images/code_g1019737194.jpg differ diff --git a/images/tab screenshot.png b/images/tab screenshot.png new file mode 100644 index 000000000..97586b54e Binary files /dev/null and b/images/tab screenshot.png differ diff --git a/index.html b/index.html index 4ad4ffff6..ab7546a27 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,98 @@ - - - - Static Template + + + Document + + + -

This is a static template, there is no bundler or bundling involved!

+
+
+ +
+
+

Home

+     +

Projects

+     +

Contact Me

+
+ +
+
+

Omadi Jewel Naomi

+

Front-End Developer

+

HTML

+

CSS

+

Java-Script

+
+
+ +
+

I am front-end developer experienced in HTML, CSS and Java-Script

+ + + +
+
+ +
+

My Projects

+ +
+
+ + +

+ This is a website promoting MICE tourism. +

+ +

+
+ +
+ + +

+ A calculator web-app made using HTML, CSS and Java-Script. +

+
+ +
+ + +

+ A to do list app that has an input form and the data is displayed in + a table. +

+
+
+
+ +
+ +
+ + - \ No newline at end of file + diff --git a/index.js b/index.js new file mode 100644 index 000000000..1bfc5baed --- /dev/null +++ b/index.js @@ -0,0 +1,71 @@ +var item1 = document.getElementById("item1"); + +var item2 = document.getElementById("item2"); + +var item3 = document.getElementById("item3"); + +var project = document.getElementById("projects"); + +var image1 = document.getElementById("image1") + +/*changing background color on mouse over*/ +function changeItem1OnHover() { + item1.style.backgroundColor ="rgba(0, 161, 161, 1)"; +} + +function changeItem2OnHover() { + item2.style.backgroundColor ="rgba(0, 161, 161, 1)"; +} + +function changeItem3OnHover() { + item3.style.backgroundColor ="rgba(0, 161, 161, 1)"; +} + +/*Changing color to black on mouse out*/ + +function changeItem1OnOut() { + item1.style.backgroundColor ="#1f2e2e"; +} + +function changeItem2OnOut() { + item2.style.backgroundColor ="#1f2e2e"; +} +function changeItem3OnOut() { + item3.style.backgroundColor ="#1f2e2e"; +} + +/*changing text color on mouseover*/ +function changeColor(){ + project.style.color= "rgba(0, 161, 161, 1)" +} + +function restoreColor(){ + project.style.color="white"; +} + +/*changing image on mouseover */ +function changeImage(){ + image1.src = "/images/code_g1019737194.jpg"; +} + +/*Adding event listeners for mouse-over*/ +item1.addEventListener("mouseover", changeItem1OnHover); + +item2.addEventListener("mouseover", changeItem2OnHover); + +item3.addEventListener("mouseover", changeItem3OnHover); + +/*Adding event listeners for mouse-out*/ +item1.addEventListener("mouseout", changeItem1OnOut); + +item2.addEventListener("mouseout", changeItem2OnOut); + +item3.addEventListener("mouseout", changeItem3OnOut); + +/*event listener for title*/ +project.addEventListener("mouseover", changeColor); +project.addEventListener("mouseout", restoreColor); + +/*adding event listener for the image */ +image1.addEventListener("mouseover", changeImage); + diff --git a/package.json b/package.json index 229967170..0d9b1ae66 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "static", + "name": "week-1-assignment", "version": "1.0.0", - "description": "This is a static template with no bundling", + "description": "", "main": "index.html", "scripts": { "start": "serve", @@ -11,11 +11,7 @@ "type": "git", "url": "git+https://github.com/codesandbox-app/static-template.git" }, - "keywords": [ - "static", - "template", - "codesandbox" - ], + "keywords": [], "author": "Ives van Hoorne", "license": "MIT", "bugs": { @@ -25,4 +21,4 @@ "devDependencies": { "serve": "^11.2.0" } -} +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..a4ef120e4 --- /dev/null +++ b/style.css @@ -0,0 +1,156 @@ +body { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + margin: 0; + background-color: rgb(21, 30, 30); + color: white; +} + +/*First div at the top of the page*/ +.top { + margin: 0; + max-width: 100%; + max-height: 150vh; + min-height: 50vh; + border-bottom: solid 2pt rgba(0, 161, 161, 1); +} + +/*Image at the top of the page*/ +.firstImage { + margin: 0; + height: 100%; + width: 100%; + min-height: 50vh; + opacity: 0.7; + filter: blur(1.8px) brightness(0.45); +} + +/*The navigation bar and its contents*/ +.nav { + display: flex; + justify-content: flex-end; + flex-direction: row; + align-content: flex-end; + flex-wrap: nowrap; + position: absolute; + top: 8px; + right: 16px; + font-size: 15px; + color: white; +} + +.active { + border-bottom: solid 2pt rgba(0, 161, 161, 1); + padding-bottom: 4px; +} + +/*styling for the text on the left side of the image at the top of the page*/ +.name { + position: absolute; + top: 8%; + left: 5%; + width: 50%; +} + +.title { + color: white; + font-size: 25px; + margin-bottom: 0; + font-weight: normal; +} + +.name h4 { + color: white; + font-size: 20px; + font-weight: lighter; + margin-top: 5px; +} + +.name p { + color: white; +} + +/*Icons on the image at the top of the page*/ +i { + color: rgba(0, 161, 161, 1); + margin-left: 20px; +} + +/*Text on the right side of the image at the top of the page*/ +.about { + position: absolute; + top: 20%; + left: 55%; + right: 8px; + color: white; + font-size: 17px; +} + +.about span { + padding-left: 25%; +} + +/*Content in the black div apart from the title*/ +.content { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: flex-start; + align-content: start; +} + +#projects { + color: white; + font-size: 30px; + margin-bottom: 30px; + margin-top: 0; + font-weight: lighter; + margin-left: 50%; + margin-right: 50%; + text-wrap: nowrap; +} + +.content .item { + width: 30%; + border-radius: 10px; + height: 400px; + width: 28%; + align-items: center; + margin-bottom: 30px; + background-color: #1f2e2e; +} + +/*Images in the black div*/ +.webImage { + width: 90%; + height: 70%; + border-radius: 20px; + padding: 10px; +} + +/*Styling for the footer*/ +.footer { + background-color: rgba(0, 161, 161, 1); + color: black; + margin-bottom: 0; + padding-bottom: 0; + width: 100%; + height: 100px; +} + +.footer i { + color: black; + left: 40; + margin-top: 30px; + margin-bottom: 0px; +} + +.footer p { + color: black; + left: 40; + margin-top: 0px; +} + +.footer span { + margin-left: 40%; + padding-top: 20px; +}