Merge pull request #431 from JiyaGupta-cs/dupli

Contact Page
Counselllor · Feb 1, 2024 · 8d91af8 · 8d91af8
2 parents c7dc994 + 4913f82
commit 8d91af8
Show file tree

Hide file tree

Showing 6 changed files with 342 additions and 3 deletions.
diff --git a/src/components/Contact/Contact.css b/src/components/Contact/Contact.css
@@ -0,0 +1,219 @@
+@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=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
+
+/* * {
+  margin: 0; 
+  box-sizing: border-box;
+} */
+
+.contact-page {
+  background-color: #CAE7FE;
+}
+.contact-page * {
+    margin: 0; 
+    box-sizing: border-box;
+  }
+
+#contact {
+  background-color: #CAE7FE;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.contact-box {
+  width: clamp(100px, 90%, 1000px);
+  margin: 80px 50px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.contact-clinks, .contact-form-wrapper {
+  width: 50%;
+  padding: 8% 5% 10% 5%;
+}
+
+
+.contact-clinks {
+  background-color: #1f2e43;
+  background:
+    radial-gradient(
+      circle at 55% 92%, #426691 0 12%, transparent 12.2%
+    ), 
+    radial-gradient(
+      circle at 94% 72%, #426691 0 10%, transparent 10.2%
+    ), 
+    radial-gradient(
+      circle at 20% max(78%, 350px), #263a53 0 7%, transparent 7.2%
+    ), 
+    radial-gradient(
+      circle at 0% 0%, #263a53 0 40%, transparent 40.2%
+    ), 
+    #1f2e43;
+  border-radius: 10px 0 0 10px;
+}
+
+.contact-form-wrapper {
+  background-color: #ffffff8f;
+  border-radius: 0 10px 10px 0;
+}
+
+@media only screen and (max-width: 800px) {
+  .contact-clinks, .contact-form-wrapper {
+    width: 100%;
+  }
+
+  .contact-clinks {
+    border-radius: 10px 10px 0 0;
+  }
+
+  .contact-form-wrapper {
+    border-radius: 0 0 10px 10px;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .contact-box {
+    width: 95%;
+    margin: 8% 5%;
+  }
+}
+
+.ch2 {
+  font-family: 'Arimo', sans-serif;
+  color: #fff;
+  font-size: clamp(30px, 6vw, 60px);
+  letter-spacing: 2px;
+  text-align: center;
+  transform: scale(.95, 1);
+}
+
+.clinks {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding-top: 50px;
+}
+
+.clink {
+  margin: 10px;
+  cursor: pointer;
+}
+
+.cimg {
+  width: 45px;
+  height: 45px;
+  filter: 
+    hue-rotate(220deg)
+    drop-shadow(2px 4px 4px #0006);
+  transition: 0.2s;
+  user-select: none;
+}
+
+.cimg:hover {
+  transform: scale(1.1, 1.1);
+}
+
+.cimg:active {
+  transform: scale(1.1, 1.1);
+  filter: 
+    hue-rotate(220deg)
+    drop-shadow(2px 4px 4px #222)
+    sepia(0.3);
+}
+
+.cform-item {
+  position: relative;
+}
+
+.clabel, .cinput, .ctextarea {
+  font-family: 'Poppins', sans-serif;
+}
+
+.clabel {
+  position: absolute;
+  top: 10px;
+  left: 2%;
+  color: #999;
+  font-size: clamp(14px, 1.5vw, 18px);
+  pointer-events: none;
+  user-select: none;
+}
+
+.cinput, .ctextarea {
+  width: 100%;
+  outline: 0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  padding: 12px;
+  font-size: clamp(15px, 1.5vw, 18px);
+}
+#m-textarea {
+    width: 100%;
+    outline: 0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-bottom: 20px;
+    padding: 12px;
+    font-size: clamp(15px, 1.5vw, 18px);
+  }
+
+
+
+.cinput:focus+.clabel, 
+.cinput:valid+.clabel, 
+.ctextarea:focus+.clabel, 
+.ctextarea:valid+.clabel {
+  font-size: clamp(13px, 1.3vw, 16px);
+  color: #777;
+  top: -20px;
+  transition: all .225s ease;
+}
+
+.csubmit-btn {
+  background-color: #fd917e;
+  filter: drop-shadow(2px 2px 3px #0003);
+  color: #fff;
+  font-family: "Poppins",sans-serif;
+  font-size: clamp(16px, 1.6vw, 18px);
+  display: block;
+  padding: 12px 20px;
+  margin: 2px auto;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  transition: 0.2s;
+}
+
+.csubmit-btn:hover {
+  transform: scale(1.1, 1.1);
+}
+
+.csubmit-btn:active {
+  transform: scale(1.1, 1.1);
+  filter: sepia(0.5);
+}
+
+@media only screen and (max-width: 800px) {
+  .ch2 {
+    font-size: clamp(40px, 10vw, 60px);
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .ch2 {
+    font-size: clamp(30px, 12vw, 60px);
+  }
+
+  .clinks {
+    padding-top: 30px;
+  }
+
+  .cimg {
+    width: 38px;
+    height: 38px;
+  }
+}
diff --git a/src/components/Contact/Contact.jsx b/src/components/Contact/Contact.jsx
@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import { signOut, onAuthStateChanged } from "firebase/auth";
+import { auth } from "../../firebase/auth";
+import { useNavigate } from "react-router-dom";
+import Footer from "../Footer/Footer";
+import './Contact.css'
+import Logo from '../../assets/logo.webp'
+
+const Contact = () => {
+    const navigate = useNavigate();
+
+    useEffect(() => {
+      auth.onAuthStateChanged((user) => {
+        if (user) {
+          // read
+          console.log("");
+        } else if (!user) {
+          navigate("/");
+        }
+      });
+    }, []);
+
+    const handleSignOut = () => {
+      signOut(auth)
+        .then(() => {
+          navigate("/");
+        })
+        .catch((err) => {
+          alert(err.message);
+        });
+    };
+
+    const [menuOpen, setMenuOpen] = useState(false);
+
+    const toggleMenu = () => {
+      setMenuOpen(!menuOpen);
+    };
+  return (
+    <main>
+        <nav className="navbar">
+          <div className="logo">
+            <img src={Logo} alt="Logo" />
+          </div>
+          <div className={`menu ${menuOpen ? 'show' : ''}`}>
+            <ul>
+
+              <li><a href="#">Top Universities</a></li>
+              <li><a href="#">Jobs</a></li>
+              <li><a href="#">Courses</a></li>
+              <li><a href="#">Carrier Support</a></li>
+              <li className='dot'><a href="#">•</a></li>
+              <li><a href="#" onClick={handleSignOut}>Log Out</a></li>
+              <li><a href="#"><button className='profile_btn'>Profile</button></a></li>
+            </ul>
+          </div>
+          <div className="hamburger" onClick={toggleMenu}>
+            <div className={`bar ${menuOpen ? 'open' : ''}`}></div>
+            <div className={`bar ${menuOpen ? 'open' : ''}`}></div>
+            <div className={`bar ${menuOpen ? 'open' : ''}`}></div>
+          </div>
+        </nav>
+    <div className='contact-page'>
+
+      <section id="contact">
+  <div class="contact-box">
+    <div class="contact-clinks">
+      <h2 className='ch2'>CONTACT</h2>
+      <div class="clinks">
+        <div class="clink">
+          <a><img className='cimg' src="https://i.postimg.cc/m2mg2Hjm/clinkedin.png" alt="clinkedin"/></a>
+        </div>
+        <div class="clink">
+          <a><img className='cimg' src="https://i.postimg.cc/YCV2QBJg/github.png" alt="github"/></a>
+        </div>
+        <div class="clink">
+          <a><img className='cimg' src="https://i.postimg.cc/NjLfyjPB/email.png" alt="email"/></a>
+        </div>
+      </div>
+    </div>
+    <div class="contact-form-wrapper">
+      <form>
+        <div class="cform-item">
+          <input className='cinput' type="text" name="sender" required/>
+          <label className='clabel'>Name:</label>
+        </div>
+        <div class="cform-item">
+          <input className='cinput' type="text" name="email" required/>
+          <label className='clabel'>Email:</label>
+        </div>
+        <div class="cform-item">
+          <textarea id='m-textarea' className='ctextarea' class="" name="message" required></textarea>
+          <label className='clabel'>Message:</label>
+        </div>
+        <button class="csubmit-btn">Send</button>  
+      </form>
+    </div>
+  </div>
+</section>
+
+
+    </div>
+    <Footer/>
+    </main>
+  )
+}
+
+export default Contact
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -18,7 +18,14 @@ function Footer() {
           <li>Help</li>
           <li>Privacy</li>
           <li>Terms</li>
-          <li>Contact</li>
+          <li>
+            <a
+              style={{ textDecoration: "none", color: "inherit" }}
+              href="./contact"
+            >
+              Contact
+            </a>
+          </li>
           <li>Our Countributors</li>
           <li>Join Us</li>
         </ul>

diff --git a/src/components/ForgotPassword/ForgotPassword.css b/src/components/ForgotPassword/ForgotPassword.css
@@ -3,7 +3,7 @@
   width: 100vw;
 }
 
-form {
+.fp-form {
   display: flex;
   flex-direction: column;
   justify-content: center;

diff --git a/src/components/ForgotPassword/ForgotPassword.jsx b/src/components/ForgotPassword/ForgotPassword.jsx
@@ -53,7 +53,7 @@ function ForgotPassword() {
                     <div className="sign-in">Log in to your account</div>
 
                     {/* forgot password form */}
-                    <form onSubmit={handleSubmit}>
+                    <form className='fp-form' onSubmit={handleSubmit}>
                         <label className="forgot_text" htmlFor="Email">Please enter your email address and and we'll send you a link to get back into your account.</label>
                         <input type="email" value={email}
                             onChange={(event) => 

diff --git a/src/index.jsx b/src/index.jsx
@@ -12,6 +12,7 @@ import {
 import Loading from "./components/Loading/Loading";
 import Login from "./components/Login/Login";
 import "./index.css";
+import Contact from "./components/Contact/Contact";
 
 const router = createBrowserRouter([
   {
@@ -38,6 +39,11 @@ const router = createBrowserRouter([
         errorElement: <ErrorPage />,
         element: <About />,
       },
+      {
+        path: '/contact',
+        errorElement: <ErrorPage/>,
+        element: <Contact/>
+      },
       // {
       //   path: '/login',
       //   errorElement: <ErrorPage/>,