Mobile responsive for home page 75%

aaronteamAAR · Nov 27, 2022 · 3e25910 · 3e25910
1 parent 1d52543
commit 3e25910
Show file tree

Hide file tree

Showing 17 changed files with 1,537 additions and 101 deletions.
diff --git a/pages/components/About.js → components/About.js b/pages/components/About.js → components/About.js
@@ -1,14 +1,14 @@
-import styles from "./about.module.css";
-import profilePic from "../../public/images.png";
+import styles from "../styles/about.module.css";
+import profilePic from "../public/images.png";
 import Image from "next/image";
-// pages\components\About.js
+
 
 export default function About(){
     return(
         <div className={styles.CTA}>
 
         <footer className={styles.main}>
-        <div className={styles.footer1}>
+        <div className={styles.footer1} data-aos="top-top">
             <div className={styles.wrapper1_footer1}>
             <span className={styles.intro_header}>
             We will write you a letter!
@@ -20,7 +20,7 @@ export default function About(){
         </div>
         <div className={styles.footer2}>
             <form className={styles.form}>
-                <input className={styles.name_form} type="name" maxlength="16" />
+                <input className={styles.name_form} type="name" maxLength="32" />
                 <br />
                 <input className={styles.email_form} type="email" />
                 <br />
@@ -52,7 +52,7 @@ export default function About(){
         <h2>Sponsor</h2>
         <ul>
             <li>Become a sponsor</li>
-            <li>Become a writer<small>coming soon</small></li>
+            <li>Become a writer<small className={styles.comingsoon}>coming soon</small></li>
         </ul>
       </div>
       <div className={styles.CTA_section}>
@@ -66,4 +66,4 @@ export default function About(){
       </div>
 
     )
-}
+}
diff --git a/components/Header.js b/components/Header.js
@@ -0,0 +1,43 @@
+import styles from "../styles/Home.module.css"
+import profilePic from "../public/images.png";
+import Image from "next/image"
+import Link from  "next/link"
+
+
+
+export default function Header(){
+    return(
+        <div>
+            <header className={styles.header}>
+        AroundYou
+        <svg className={styles.logoline} width="115px" height="25px" viewBox="0 0 115 25" version="1.1" xmlnsXlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+                            <path class="line" d="M0 0.150499C232.087 1.40864 39.6955 -4.56122 29.1709 10.5093C17.6264 27.0401 176.418 10.5361 65.2644 24" transform="translate(0.5 0.5)" id="Path-25" fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="1"></path>
+                        </svg>
+        <Image
+          src={profilePic}
+          alt="Logo"
+          width={60}
+          height={60}
+          className={styles.logo}
+        />
+      </header>
+
+      <nav className={styles.navigation}>
+        <ul className={styles.navbar}>
+          <Link className={styles.link} href="/">
+            <li className={styles.navbar_compo}>Home</li>
+          </Link>
+          <Link className={styles.link} href="Blog">
+            <li className={styles.navbar_compo}>Blog</li>
+          </Link>
+          <Link className={styles.link} href="AboutMission">
+            <li className={styles.navbar_compo}>About Us/Our Mission</li>
+          </Link>
+          <Link className={styles.link} href="/">
+            <li className={styles.navbar_compo}>Talk to Us</li>
+          </Link>
+        </ul>
+      </nav>
+        </div>
+    )
+}