From f62737b86e001618b47475109160b329227d3235 Mon Sep 17 00:00:00 2001
From: Abhay Keshari <instantboostbyabhaykeshari>
Date: Mon, 25 Mar 2024 23:11:39 +0530
Subject: [PATCH] Creation of Home Page using HTML , CSS , JS

---
 Unit Converter/index.html | 113 +++++++++++++++++---
 Unit Converter/script.js  |  76 +++++++++++++-
 Unit Converter/styles.css | 211 ++++++++++++++++++++++++++++++++++++--
 3 files changed, 371 insertions(+), 29 deletions(-)
diff --git a/Unit Converter/index.html b/Unit Converter/index.html
index eeea81e..7334e1c 100644
--- a/Unit Converter/index.html	
+++ b/Unit Converter/index.html	
@@ -1,27 +1,106 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Home</title>
-    <link rel="stylesheet" href="styles.css">
-    
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Home</title>
+  <link rel="stylesheet" href="styles.css">
+
 </head>
+
 <body>
-    
-<div class="navbar">
-    <span class="unit">Unit Convertor</span>
+
+  <div class="navbar">
+    <span class="unit">unit-convertor</span>
     <div>
-        <a href="">Length</a>
-        <a href="">Weight</a>
-        <a href="">Volume</a>
-        <a href="">Currency</a>
-        <a href="">Temperature</a>
+      <a href="index.html" class="link">Home</a>
+      <a href="HTML/length.html" class="link">Length</a>
+      <a href="HTML/weight.html" class="link">Weight</a>
+      <a href="HTML/volume.html" class="link">Volume</a>
+      <a href="HTML/currency.html" class="link">Currency</a>
+      <a href="HTML/temperature.html" class="link">Temperature</a>
     </div>
-   
+    <span><i class="fa-solid fa-moon fa-2x"></i></span>
   </div>
-  <h2>
-    This is the Home Page
-  </h2>
+  <div class="main-content">
+    <div id="online">
+      <h1>Online conversion of physical units</h1>
+    </div>
+
+    <div class="msg">
+      <h2>Hi, What do you want to convert !</h2>
+    </div>
+
+    <div class="info">
+      <!-- <i class="fa-solid fa-3x fa-circle-chevron-left"></i> -->
+      <div class="container">
+        <div id="length" class="inside">
+          <div class="layer"></div>
+          <div class="converterInfo">
+            <h3><a href="HTML/length.html">Length Converter</a></h3>
+            <p>A length converter converts measurements from one unit of length to another. It allows you to easily convert measurements such as inches to centimeters, feet to meters, or miles to kilometers, among others. It simplifies calculations and helps in comparing measurements across different units.</p>
+            <!-- <button class="btn">Read more</button> -->
+          </div>
+        </div>
+
+        <div id="weight" class="inside">
+          <div class="layer"></div>
+          <div class="converterInfo">
+            <h3><a href="HTML/weight.html">Weight Converter</a></h3>
+            <p>A weight converter is a tool used to convert measurements of weight or mass from one unit to another. It simplifies tasks such as converting kilograms to pounds, grams to ounces, or metric tons to short tons.</p>
+            <!-- <button class="btn">Read more</button> -->
+          </div>
+        </div>
+
+        <div id="volume" class="inside">
+          <div class="layer"></div>
+          <div class="converterInfo">
+            <h3><a href="HTML/volume.html">Volume Converter</a></h3>
+            <p>A litre converter is a tool designed to convert volume measurements between litres and other units such as millilitres, cubic meters, and cubic centimeters. It simplifies tasks by allowing users to input a volume in litres and instantly obtain the equivalent measurement in their desired unit, or vice versa.</p>
+            <!-- <button class="btn">Read more</button> -->
+          </div>
+        </div>
+
+        <div id="currency" class="inside">
+          <div class="layer"></div>
+          <div class="converterInfo">
+            <h3><a href="HTML/currency.html">Currency Converter</a></h3>
+            <p>
+              A currency converter is a tool or application used to convert the value of one currency into another currency based on the current exchange rates. It allows users to quickly assess the equivalent value of a certain amount of money in different currencies.</p>
+            <!-- <button class="btn">Read more</button> -->
+          </div>
+        </div>
+
+        <div id="temp" class="inside">
+          <div class="layer"></div>
+          <div class="converterInfo">
+            <h3><a href="HTML/temperature.html">Temperature Converter</a></h3>
+            <p>
+              A temperature converter is a tool used to convert temperatures between different units of measurement, such as Celsius, Fahrenheit, and Kelvin. It allows users to easily convert temperatures from one scale to another, facilitating tasks like converting Celsius to Fahrenheit or vice versa.</p>
+            <!-- <button class="btn">Read more</button> -->
+          </div>
+        </div>
+      </div>
+      <!-- <i class="fa-solid fa-3x fa-circle-chevron-right"></i> -->
+    </div>
+  </div>
+
+  <div class="preFooter">
+    <p>OP Code</p>
+    <p>HTML</p>
+    <p id="javaScript">JavaScript</p>
+    <p>CSS</p>
+  </div>
+
+  <footer>
+    <h1>Do so much more</h1>
+    <p>Copyright
+      IIIT © Bhagalpur 2024</p>
+  </footer>
+
+  <script src="https://kit.fontawesome.com/df53f4a996.js" crossorigin="anonymous"></script>
+  <script src="script.js"></script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/Unit Converter/script.js b/Unit Converter/script.js
index a2cac34..8949847 100644
--- a/Unit Converter/script.js	
+++ b/Unit Converter/script.js	
@@ -1 +1,75 @@
-//Javascript for index.html will be written here
\ No newline at end of file
+//Javascript for index.html will be written here
+
+let unit = document.querySelector(".unit");
+let links = document.getElementsByClassName("link");
+let moon = document.querySelector(".fa-moon");
+let navBar = document.querySelector(".navbar");
+let footer = document.querySelector("footer");
+console.log(links[0]);
+
+function hoverInWhiteMode() {
+  links[0].style.backgroundColor = "gray";
+  links[0].style.color = "black";
+  for (let i = 1; i < links.length; i++) {
+    links[i].addEventListener("mouseenter", (e) => {
+      links[0].style.backgroundColor = "#E5DBCC";
+      e.target.style.backgroundColor = "gray";
+    });
+
+    links[i].addEventListener("mouseleave", (e) => {
+      links[0].style.backgroundColor = "gray";
+      e.target.style.backgroundColor = "#E5DBCC";
+    });
+  }
+}
+
+function hoverInDarkMode() {
+  links[0].style.backgroundColor = "#ffffff";
+  links[0].style.color = "black";
+  for (let i = 1; i < links.length; i++) {
+    links[i].addEventListener("mouseenter", (e) => {
+      links[0].style.backgroundColor = "black";
+      links[0].style.color = "#ffffff";
+      e.target.style.backgroundColor = "#ffffff";
+      e.target.style.color = "black";
+    });
+
+    links[i].addEventListener("mouseleave", (e) => {
+      links[0].style.backgroundColor = "#ffffff";
+      links[0].style.color = "black";
+      e.target.style.backgroundColor = "black";
+      e.target.style.color = "#ffffff";
+    });
+  }
+}
+
+hoverInWhiteMode();
+
+let click = 1;
+moon.addEventListener("click", (e) => {
+  console.log("Abhay");
+
+  if (click === 1) {
+    click = 0;
+    navBar.style.backgroundColor = "black";
+    unit.style.color = "#ffffff";
+    for (let i = 0; i < links.length; i++) {
+      links[i].style.color = "#ffffff";
+    }
+    hoverInDarkMode();
+    moon.style.color = "#ffffff";
+    footer.style.color = "#ffffff";
+    footer.style.backgroundColor = "black";
+  } else {
+    click = 1;
+    navBar.style.backgroundColor = "#E5DBCC";
+    unit.style.color = "black";
+    hoverInWhiteMode();
+    for (let i = 0; i < links.length; i++) {
+      links[i].style.color = "black";
+    }
+    moon.style.color = "black";
+    footer.style.color = "gray";
+    footer.style.backgroundColor = "#ffffff";
+  }
+});
diff --git a/Unit Converter/styles.css b/Unit Converter/styles.css
index 1ed88cb..c7a915d 100644
--- a/Unit Converter/styles.css	
+++ b/Unit Converter/styles.css	
@@ -1,27 +1,216 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+@import url('https://fonts.googleapis.com/css2?family=Style+Script&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Style+Script&display=swap');
+
+* {
+  padding: 0;
+  margin: 0;
+}
 
 .navbar {
-    color: white;
+  color: black;
   overflow: hidden;
-  background-color: #333;
+  background-color: #E5DBCC;
   display: flex;
-  justify-content:space-around;
+  justify-content: space-between;
+  height: 64px;
+  font-family: "Poppins";
 }
 
-.unit{
-    display: flex;
-    align-items: center;
+.unit {
+  display: flex;
+  align-items: center;
+  font-size: 2.5rem;
+  margin-left: 10vw;
+  font-family: "Style Script";
+}
+
+.navbar {
+  display: flex;
+  justify-items: center;
+  align-items: center;
 }
+
 .navbar a {
   float: left;
   display: block;
-  color: white;
+  color: black;
   text-align: center;
-  padding: 14px 20px;
+  padding: 20px 15px;
   text-decoration: none;
 }
 
-
 .navbar a:hover {
-  background-color: #ddd;
+  background-color: gray;
+  left: 0;
+  transition: all 0.5s ease-in-out;
+}
+
+.fa-moon {
+  margin-right: 3vw;
+  cursor: pointer;
+}
+
+.main-content {
+  height: 65vh;
+  background-color: #867285;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+
+#online {
+  width: 30vw;
+  text-align: center;
+  color: #F4F2F3;
+  font-family: "Bad Script";
+  line-height: 1.1;
+}
+
+.msg {
+  font-family: "Bad Script";
+  line-height: 1.1;
+  color: #F4F2F3;
+}
+
+/* .info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.info i {
+  color: #5f575e;
+} */
+
+
+.container {
+  height: 40vh;
+  width: 80vw;
+  border: 2px solid black;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: #5f575e;
+  border: none;
+}
+
+.container .inside {
+  background-color: #F4F2F3;
+  height: 37vh;
+  width: 15vw;
+  border-radius: 5px;
+  position: relative;
+}
+
+#length {
+  background-image: url(android-chrome-512x512.png);
+  background-size: 70%;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.layer {
+  position: absolute;
+  inset: 0;
+  background-color: gray;
+  opacity: 0.7;
+}
+
+.converterInfo {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  justify-content: center;
+  align-items: center;
   color: black;
-}
\ No newline at end of file
+  font-weight: 900;
+  z-index: 5;
+}
+
+.converterInfo p, h3 {
+  text-align: center;
+}
+
+.converterInfo h3 a {
+  text-decoration: none;
+  border-bottom: 3px solid #867285;
+}
+
+.btn {
+  /* position: fixed;
+  bottom: 35vh;
+  left: auto;
+  right: auto; */
+  cursor: pointer;
+}
+
+#weight {
+  background-image: url(wietght.png);
+  background-size: 70%;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+#volume {
+  background-image: url(volume.png);
+  background-size: 70%;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+#currency {
+  background-image: url(curr.png);
+  background-size: 70%;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+#temp {
+  background-image: url(temp.png);
+  background-size: 70%;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.preFooter {
+  height: 64px;
+  background-color: #F4F2F3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 80px;
+  color: rgb(168, 166, 166);
+  font-weight: 700;
+}
+
+#javaScript {
+  font-family: "Style Script";
+  font-size: 1.3rem;
+}
+
+footer {
+  background-color: #ffffff;
+  height: calc(35vh - 128px);
+  color: gray;
+  position: relative;
+}
+
+footer h1 {
+  text-align: center;
+}
+
+footer p {
+  position: absolute;
+  font-size: 1.3rem;
+  bottom: 4%;
+  left: 50%;
+  transform: translate(-50%);
+  text-align: center;
+}
