codesandbox · Jewel-Naomi · Nov 8, 2023
diff --git a/.codesandbox/workspace.json b/.codesandbox/workspace.json
@@ -0,0 +1,20 @@
+{
+  "responsive-preview": {
+    "Mobile": [
+      320,
+      675
+    ],
+    "Tablet": [
+      1024,
+      765
+    ],
+    "Desktop": [
+      1400,
+      800
+    ],
+    "Desktop HD": [
+      1920,
+      1080
+    ]
+  }
+}
diff --git a/images/Screenshot 2023-11-02 095011.png b/images/Screenshot 2023-11-02 095011.png
diff --git a/images/Screenshot 2023-11-02 095503.png b/images/Screenshot 2023-11-02 095503.png
diff --git a/images/Software Developer.jpg b/images/Software Developer.jpg
diff --git a/images/code_g1019737194.jpg b/images/code_g1019737194.jpg
diff --git a/images/tab screenshot.png b/images/tab screenshot.png
diff --git a/index.html b/index.html
@@ -1,12 +1,98 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Static Template</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+    <script
+      src="https://kit.fontawesome.com/9ef9781ca0.js"
+      crossorigin="anonymous"
+    ></script>
   </head>
+
   <body>
-    <h1>This is a static template, there is no bundler or bundling involved!</h1>
+    <div class="top">
+      <div class="picture">
+        <img
+          src="/images/Software Developer.jpg"
+          id="image1"
+          class="firstImage"
+        />
+      </div>
+      <div class="nav">
+        <div><p class="active">Home</p></div>
+        &nbsp; &nbsp;
+        <div><p>Projects</p></div>
+        &nbsp; &nbsp;
+        <div><p>Contact Me</p></div>
+      </div>
+
+      <div class="name">
+        <div>
+          <h3 class="title">Omadi Jewel Naomi</h3>
+          <h4>Front-End Developer</h4>
+          <p><i class="fa-brands fa-html5"></i> HTML</p>
+          <p><i class="fa-brands fa-css3"></i> CSS</p>
+          <p><i class="fa-brands fa-square-js"></i> Java-Script</p>
+        </div>
+      </div>
+
+      <div class="about">
+        <p>I am front-end developer experienced in HTML, CSS and Java-Script</p>
+        <span
+          ><i class="fa-brands fa-github"></i>
+          <i class="fa-brands fa-linkedin"></i>
+          <i class="fa-brands fa-square-instagram"></i
+        ></span>
+      </div>
+    </div>
+
+    <div>
+      <h4 id="projects">My Projects</h4>
+
+      <div class="content">
+        <div class="item" id="item1">
+          <img src="images/tab screenshot.png" class="webImage" />
+
+          <p>
+            This is a website promoting MICE tourism.
+          </p>
+
+          <p></p>
+        </div>
+
+        <div class="item" id="item2">
+          <img src="images/Screenshot 2023-11-02 095011.png" class="webImage" />
+
+          <p>
+            A calculator web-app made using HTML, CSS and Java-Script.
+          </p>
+        </div>
+
+        <div class="item" id="item3">
+          <img src="images/Screenshot 2023-11-02 095503.png" class="webImage" />
+
+          <p>
+            A to do list app that has an input form and the data is displayed in
+            a table.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="end">
+      <footer class="footer">
+        <span id="contactSpan"
+          ><i class="fa-brands fa-github"></i>
+          <i class="fa-brands fa-linkedin"></i>
+          <i class="fa-solid fa-envelope"></i>
+          <i class="fa-brands fa-square-instagram"></i
+        ></span>
+        <p><i class="fa-regular fa-copyright"></i>2023</p>
+      </footer>
+    </div>
+
+    <script src="index.js"></script>
   </body>
-</html>
+</html>
diff --git a/index.js 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
@@ -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"
   }
-}
+}
diff --git a/style.css 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;
+}