Merge pull request #18 from newcodergit/master

Added about page
Aksgo · Oct 4, 2024 · b548faf · b548faf
2 parents 4b1d8ab + ee70d63
commit b548faf
Show file tree

Hide file tree

Showing 3 changed files with 210 additions and 17 deletions.
diff --git a/public/about.html b/public/about.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Learn more about UniAlgo, your trusted platform for mastering competitive programming algorithms.">
+    <meta name="keywords" content="UniAlgo, about, competitive programming, algorithms, coding, CP">
+    <meta name="author" content="UniAlgo Team">
+    <title>About UniAlgo</title>
+    <link rel="icon" href="asset/logo.png" type="image/png">
+    <link id="dark-theme" type="text/css" rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik">
+</head>
+<body>
+    <header>
+        <div class="centered">
+            <div class="name">UniAlgo</div>
+            <nav class="header-nav">
+                <a href="index.html" class="nav-link">Home</a>
+                <a href="about.html" class="nav-link">About Us</a>
+                <button id="signin-btn" aria-label="Sign In" class="nav-link-icon">👤</button>
+            </nav>
+        </div>
+        <div class="logo">
+            <img src="asset/logo.png" alt="UniAlgo Logo">
+        </div>
+    </header>
+
+    <main class="content about-page">
+        <section class="section">
+            <h1>About UniAlgo</h1>
+            <img src="asset/logo.png" class="about-logo" alt="UniAlgo Logo" style="width:150px; height:auto;">
+            <p>
+                UniAlgo is your go-to platform for mastering competitive programming algorithms. Our mission is to provide deep, intuitive explanations of complex concepts, complete with real-world examples and coding challenges. Whether you're just starting out or you're an experienced coder, UniAlgo offers a step-by-step guide to boost your problem-solving skills.
+            </p>
+            <p>
+                With a focus on clarity and simplicity, UniAlgo ensures that you grasp the underlying intuition behind each algorithm, helping you apply them confidently in coding competitions and real-world scenarios. Join us and take the next step in your coding journey.
+            </p>
+        </section>
+    </main>
+
+    <footer>
+        <p>By signing up, you will get access to extra content and email notifications. UniAlgo©️2024</p>
+    </footer>
+
+    <script src="authenticator.js" type="module"></script>
+</body>
+</html>
+
diff --git a/public/index.html b/public/index.html
@@ -20,17 +20,21 @@
     <header>
         <div class="centered">
             <div class="name">UniAlgo</div>
-            <div class="signin" id="signin">
-                <button id="signin-btn">👤</button>
-            </div>
+            <nav class="header-nav">
+                <a href="index.html" class="nav-link">Home</a>
+                <a href="about.html" class="nav-link">About Us</a>
+                <button id="signin-btn" aria-label="Sign In" class="nav-link-icon">👤</button>
+            </nav>
         </div>
         <div class="logo"><img src="asset/logo.png"></div>
         <!-- <button id="toggle-theme">☀️</button> -->
+
     </header>
     <div class="content">
         <div class="about"><h1 class="grad-text">"Read to Improve"</h1>
             <p id="des">Know the intuition behind CP Algorithms</p>
             <button id="start-btn" onclick="location.href='article.html'">Get Started</button>
+
         </div>
         <div class="image-main"><img src="asset/file.png"></div>
     </div>

diff --git a/public/style.css b/public/style.css
@@ -1,6 +1,9 @@
 html, body {
     height: 100%;
     margin: 0;
+    font-family: "Rubik", Arial, sans-serif;
+    background: linear-gradient(45deg, #010027, #000000, #010027);
+    color: white;
 }
 
 body {
@@ -12,16 +15,20 @@ body {
     color: white;
     background-size: cover;
     background-attachment: fixed;
+    margin: 0;
+    padding:0;
+
 }
 
 header {
     background-color: transparent;
     color: #fff;
-    padding: 20px 30px 0px 30px;
+    padding: 10px 0;
     display: flex;
     align-items: center;
     position: relative;
     justify-content: space-between;
+    text-align: center;
 }
 
 .centered {
@@ -31,16 +38,16 @@ header {
 }
 
 .name {
-    font-size: 1.5rem;
+    font-size: 1.8rem;
     font-weight: bold;
     margin-right: 20px;
     padding-right: 20px;
     border-right: 2px solid rgba(255, 255, 255, 0.3);
 }
 
 .logo img {
-    width: 60px;
-    height: 60px;
+    width: 100px;
+    height: auto;
 }
 
 .signin {
@@ -72,7 +79,7 @@ header {
     margin: 30px auto;
     border-radius: 30px;
     justify-content: center;
-    padding: 70px;
+    padding: 20px;
     align-items: center;
     background-color: rgba(83, 83, 83, 0.4);
     animation: fadeIn 0.25s ease-in forwards;
@@ -90,12 +97,9 @@ header {
 }
 
 .about {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    border-radius: 40px;
-    padding: 30px;
-    color: #d7d7d7;
+    flex-grow: 1;
+    text-align: center;
+    flex-grow:1;
 }
 
 h1 {
@@ -189,12 +193,148 @@ footer {
     color: rgb(152, 152, 152);
     padding: 0px;
     text-align: center;
+    padding: 10px 0;
+    position: relative;
+    bottom:0;
+    width: 100%;
+    font-size: 0.9rem;
 }
 footer p{
     font-size: 13px;
+    margin: 0;
 }
-@media (max-width:700px) {
-    footer p{
-        font-size: 9px;
+@media (max-width: 900px) {
+    .content {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .nav-link {
+        font-size: 1rem;
     }
+
+    .name {
+        font-size: 1.5rem;
+    }
+}
+.content {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 40px;
+    max-width: 1200px;
+    margin: 50px auto;
+    padding: 50px;
+    background-color: rgba(83, 83, 83, 0.4);
+    border-radius: 30px;
+    animation: fadeIn 0.25s ease-in forwards;
+    justify-content: space-around;
+}
+
+.section {
+    flex: 2;
+    color: #d7d7d7;
+    padding: 20px;
+    border-radius: 20px;
+}
+
+.section h1 {
+    font-size: 2.5rem;
+    color: #ffb6dd;
+    text-align: center;
+}
+
+.section h2 {
+    font-size: 1.8rem;
+    color: #ffffff;
+}
+
+.section p, ul {
+    font-size: 1.1rem;
+    color: #d7d7d7;
+    line-height: 1.6;
+}
+
+@media (max-width: 900px) {
+    .content {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .section h1 {
+        font-size: 2rem;
+    }
+}
+
+.about-page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 40px;
+}
+
+.about-page img.about-logo {
+    width: 150px;
+    margin-bottom: 20px;
+    margin-left: 40%;
+}
+
+.section h1 {
+    font-size: 2.5rem;
+    color: #ffb6dd;
+    text-align: center;
+}
+
+.section p {
+    font-size: 1.2rem;
+    color: #d7d7d7;
+    line-height: 1.6;
+    max-width: 600px;
+    text-align: center;
+}
+.header-nav {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.nav-link {
+    color: white;
+    text-decoration: none;
+    font-size: 1.2rem;
+    padding: 10px;
+    transition: color 0.3s ease, background-color 0.3s ease;
+    border-radius: 10px;
+}
+
+.nav-link:hover {
+    color: #00c3ff;
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.nav-link-icon {
+    font-size: 1.5rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: white;
+    transition: color 0.3s ease;
+    font-size: 15px;
+    padding: 8px 15px;
+    background: linear-gradient(45deg, #00c3ff, #951cff, #ff0080);
+    color: white;
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.nav-link-icon:hover {
+    color: #00c3ff;
+}
+
+.image-main img {
+    border-radius: 10%;
+    width: 300px;
+    height: 300px;
 }