first commit

devsujay19 · devsujay19 · commit 38c6a214f7d5 · 2023-05-06T16:33:49.000Z
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- CSS Link -->
+    <link rel="stylesheet" href="style.css" />
+    <!-- Font-Awesome CDN Link -->
+    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'>
+    <title>Document</title>
+  </head>
+  <!-- The Loading Function(reload to see) -->
+  <body onload="myFunction()">
+<div id="loading"></div>
+<!-- The Navigation Bar -->
+    <nav>
+        <!-- The Logo inside The Navigation Bar -->
+      <label class="logo">ProgrammingX</label>
+      <ul>
+        <!-- Links/Buttons -->
+        <li>
+          <a href="/">Home</a>
+        </li>
+        <li>
+          <a href="/">Pricing</a>
+        </li>
+        <li>
+          <a href="/">About</a>
+        </li>
+        <li>
+          <a href="/">Settings</a>
+        </li>
+      </ul>
+    </nav>
+    <!-- The JavaScript for The Loading Function -->
+    <script>
+    var preloader = document.getElementById('loading');
+        function myFunction(){
+          preloader.style.display = 'none';
+        }
+    </script>
+  </body>
+</html>
diff --git a/script.js b/script.js
diff --git a/style.css b/style.css
@@ -0,0 +1,86 @@
+* {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+  }
+  body {
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    background-image: url('https://wallpaperaccess.com/full/1092587.jpg');
+    background-repeat: no-repeat;
+  }
+  #loading {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: black
+      url('https://i.pinimg.com/originals/70/eb/0b/70eb0b53eb57c91db403928c5d02a19a.gif')
+      no-repeat center;
+    z-index: 1;
+  }
+  nav {
+    height: 70px;
+    background: linear-gradient(rgb(46, 13, 233), rgb(29, 247, 255));
+    user-select: none;
+    cursor: none;
+  }
+  .logo {
+    font-family: 'Times New Roman', Times, serif;
+    padding: 55px;
+    font-size: 41px;
+    font-weight: bold;
+    line-height: 70px;
+    color: gold;
+    user-select: none;
+  }
+  nav ul {
+    float: right;
+    margin-right: 30px;
+  }
+  nav ul li {
+    display: inline-block;
+  }
+  nav ul li a {
+    color: white;
+    display: block;
+    padding: 0 15px;
+    line-height: 70px;
+    font-size: 20px;
+    background: linear-gradient(rgb(46, 13, 233), rgb(29, 247, 255));
+    transition: 1s;
+  }
+  nav ul li a:active,
+  nav ul li a:hover {
+    color: rgb(8, 253, 0);
+  }
+  nav ul ul {
+    position: absolute;
+    top: 85px;
+    border-top: 1px solid rgb(0, 247, 255);
+    opacity: 0;
+    visibility: hidden;
+  }
+  nav ul li:hover > ul {
+    top: 70px;
+    opacity: 1;
+    visibility: visible;
+    transition: 0.2s linear;
+  }
+  nav ul ul li {
+    width: 150px;
+    display: list-item;
+    position: relative;
+    border: 1px solid rgb(0, 247, 255);
+    border-top: none;
+  }
+  nav ul ul li a {
+    line-height: 50px;
+  }
+  nav ul ul ul {
+    border-top: none;
+  }
+  nav ul ul ul li {
+    position: relative;
+    top: -70px;
+    left: 150px;
+  }
