Merge pull request #3 from vinoaryo/dev

Major UI changes
vinoaryo · Apr 28, 2024 · 81c5d9c · 81c5d9c
2 parents 6ea91c7 + ab3613f
commit 81c5d9c
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 108 deletions.
diff --git a/index.html b/index.html
@@ -3,41 +3,26 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
-    />
     <script
       src="https://kit.fontawesome.com/ca9fd2e9fb.js"
       crossorigin="anonymous"
-      defer
     ></script>
-    <script src="src/javascript/script.js" defer></script>
     <link rel="stylesheet" href="src/style/style.css" />
-    <link rel="shortcut icon" href="src/image/favicon.ico" type="image/x-icon">
-    <title>VSpace</title>
+    <script src="src/javascript/script.js"></script>
+    <title>V</title>
   </head>
-  <body data-theme>
-    <nav>
-      <ul>
-        <li>
-          <a href="#">Home</a>
-          <a href="#">About</a>
-          <a href="#">Contact</a>
-        </li>
-      </ul>
-    </nav>
+  <body>
     <header>
-      <section id="home">
-        <h1 class="animate__animated animate__fadeInLeftBig">Hello, World!</h1>
-      </section>
-      <section id="about"></section>
-      <section id="contact"></section>
+      <h1>Hello, I am <span>Vino</span></h1>
+      <h2>“I failed my way to success”</h2>
+      <p>Thomas Edison</p>
     </header>
-    <div class="theme">
-      <button id="themeBtn" onclick="changeTheme()">
-        <i class="fas fa-sun"></i>
-      </button>
-    </div>
+    <footer>
+      <div class="icon-group">
+        <a href="https://instagram.com/galhadars"><i class="fa-brands fa-instagram"></i></a>
+        <a href="mailto:[email protected]"><i class="fa-regular fa-envelope"></i></a>
+        <a href="https://twitter.com/arthuriacs"><i class="fa-brands fa-twitter"></i></a>
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/src/javascript/script.js b/src/javascript/script.js
@@ -1,24 +0,0 @@
-const body = document.body;
-
-const themeBtn = document.getElementById("themeBtn");
-const themeBtnIcon = document.querySelector("#themeBtn i");
-
-function changeTheme() {
-  if (themeBtnIcon.classList.contains("fa-sun")) {
-    body.dataset.theme = "dark";
-    localStorage.setItem("theme", "dark");
-    themeBtnIcon.classList.replace("fa-sun", "fa-moon");
-  } else {
-    body.dataset.theme = "";
-    localStorage.setItem("theme", "light");
-    themeBtnIcon.classList.replace("fa-moon", "fa-sun");
-  }
-}
-
-if (localStorage.getItem("theme") === "dark") {
-  body.dataset.theme = "dark";
-  themeBtnIcon.classList.replace("fa-sun", "fa-moon");
-} else {
-  body.dataset.theme = "";
-  themeBtnIcon.classList.replace("fa-moon", "fa-sun");
-}

diff --git a/src/style/style.css b/src/style/style.css
@@ -1,81 +1,82 @@
-@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
-
-:root {
-  --text: #191815;
-  --background: #fefffe;
-  --primary: #34353d;
-  --secondary: #d6d0d7;
-  --accent: #656776;
-  --text-rgb: rgb(25, 24, 21);
-  --background-rgb: rgb(254, 255, 254);
-  --primary-rgb: rgb(52, 53, 61);
-  --secondary-rgb: rgb(214, 208, 215);
-  --accent-rgb: rgb(101, 103, 118);
-}
-
-[data-theme="dark"] {
-  --text: #fafafa;
-  --background: #1d1d1d;
-  --primary: #34353d;
-  --secondary: #1b171c;
-  --accent: #adaeb8;
-  --text-rgb: rgb(250, 250, 250);
-  --background-rgb: rgb(29, 29, 29);
-  --primary-rgb: rgb(52, 53, 61);
-  --secondary-rgb: rgb(27, 23, 28);
-  --accent-rgb: rgb(173, 174, 184);
-}
-
 *,
 html {
   margin: 0;
   padding: 0;
-  font-family: "Lato", sans-serif;
-  color: var(--text);
+}
+
+:root {
+  --bg-color: #f4f1e8;
+  --text-color: #291e12;
+  --footer-bg-color: #e4dfd3;
 }
 
 body {
-  background-color: var(--background);
-  transition: all 0.2s ease-in-out;
+  background: var(--bg-color);
+  color: var(--text-color);
 }
 
 header {
-  padding: 10px;
+  text-align: center;
+  position: absolute;
+  top: 35%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
-a {
-  text-decoration: none;
+header h1 {
+  font-size: 75px;
 }
 
-a:hover {
-  border-bottom: 1px solid var(--primary);
+header h1 span {
+  position: relative;
 }
 
-nav {
-  display: flex;
-  padding: 10px;
-  justify-content: end;
-  /* box-shadow: 0px 1px 5px var(--primary-rgb, 0.1); */
+header h1 span::before {
+  content: "";
+  position: absolute;
+  width: var(--bg-width);
+  height: 100%;
+  background: #fff300;
+  z-index: -1;
+  width: 100%;
+  animation: highlight 0.8s ease-in-out;
 }
 
-nav li {
-  list-style-type: none;
-}
+@keyframes highlight {
+  from {
+    width: 0%;
+  }
 
-nav li a {
-  margin-right: 15px;
+  to {
+    width: 100%;
+  }
 }
 
-.theme {
-  position: absolute;
+footer {
+  background-color: var(--footer-bg-color);
+  position: fixed;
+  left: 0;
   bottom: 0;
-  right: 0;
+  width: 100%;
+  height: 190px;
+}
+
+footer .icon-group {
+  text-align: center;
+  font-size: 30px;
+  margin-top: 77px;
+}
+
+footer .icon-group a {
+  color: var(--text-color);
+  margin-left: 200px;
+  margin-right: 200px;
+}
+
+footer .icon-group a i {
+  transition: transform 0.2s ease-in-out;
 }
 
-.theme button {
-  background: none;
-  border: none;
-  font-size: xx-large;
-  padding: 10px 15px;
-  cursor: pointer;
+footer .icon-group a i:hover {
+  transform: rotate(-5deg) scale(1.4);
 }