CodeYourFuture · Abubakar-Meigag · Feb 13, 2023 · Feb 14, 2023 · Feb 14, 2023 · Feb 14, 2023
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,7 @@
 
 .DS_Store
+*.json
+*.json
+*.json
+*.json
+*.json
diff --git a/about.html b/about.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
+    <link rel="stylesheet" href="./css/about.css">
+    <link rel="stylesheet" href="./css/menu.css">
+
+    <!-- Add a link to your custom CSS here -->
+
+    <title>Responsive grid project</title>
+</head>
+
+<body>
+    <header class="head grid">  
+
+        <h1> Maya Nelson</h1>
+        <h3>Project Manager</h3>
+
+        <div class="menu-wrap">
+            <input type="checkbox" class="toggler">
+            <div class="humburger">
+                <div></div>
+            </div>
+            <div class="menu">
+                <div>
+                    <div>
+                        <ul>
+                            <li><a href="./about.html">About me</a></li>
+                            <li><a href="./resume.html">resume</a></li>
+                            <li><a href="./project.html">Project</a></li>
+                            <li><a href="./contact.html">Contact</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+
+    <main class="content grid">
+        <div class="box1"></div>
+
+        <div class="box2">
+            <h2>Hello</h2>
+            <h3>Here's who I am & what I do</h3>
+
+            <div class="but-out">
+                <button class="btn btn1" href="./resume.html">resume</button>
+                <button class="btn btn2" href="./project.html">project</button>
+            </div>
+
+            <p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double
+                click me to add your own content and make changes to the font.
+            <p>
+
+            <p class="p2">I’m a great place for you to tell a story and let your users know a little more about you</p>
+        </div>
+
+        <div class="box3">
+            <section>
+                <img src="./img/AdobeStock_230407429.webp" alt="maya imge">
+                <h2>Maya Nelson</h2>
+            </section>
+            <div class="but">
+                <button class="btn btn1" href="./resume.html">resume</button>
+                <button class="btn btn2" href="./project.html">project</button>
+            </div>
+            <div class="pro">
+                <div class="line"></div>
+                <h4>Project manager</h4>
+            </div>
+            <div class="social-icon">
+                <div class="icon">
+                    <a href=""><i class="fa-brands fa-facebook-f"></i></a>
+                    <a href=""><i class="fa-brands fa-twitter"></i></a>
+                    <a href=""><i class="fa-brands fa-linkedin-in"></i></a>
+                    <a href=""><i class="fa-brands fa-instagram"></i></a>
+                </div>
+            </div>
+        </div>
+    </main>
+
+        <footer class="foot">
+            <section class="se1">
+                <div class="foot1">
+                    <h4>Call</h4>
+                    <p>123-456-7890</p>
+                </div>
+
+                <div class="foot2">
+                    <h4>Writee</h4>
+                    <p>info@mysite.com</p>
+                </div>
+            </section>
+
+            <div class="foot3">
+                <h3>Follow</h3>
+                <a href=""><i class="fa-brands fa-facebook-f"></i></a>
+                <a href=""><i class="fa-brands fa-twitter"></i></a>
+                <a href=""><i class="fa-brands fa-linkedin-in"></i></a>
+                <a href=""><i class="fa-brands fa-instagram"></i></a>
+            </div>
+
+            <div class="foot4">
+                <p>&copy;2035 by Maya Nelson.
+                    <br>Powered and secured by <strong class="w1">Wix</strong>
+                </p>
+            </div>
+
+        </footer>
+
+
+</body>
+
+</html>
diff --git a/contact.html b/contact.html
@@ -0,0 +1,122 @@
+<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">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
+    <link rel="stylesheet" href="./css/about.css">
+    <link rel="stylesheet" href="./css/menu.css">
+    <link rel="stylesheet" href="./css/contact.css">
+    <title>Document</title>
+</head>
+
+<body>
+    <header class="head grid">
+        <h1> Maya Nelson</h1>
+        <h3>Project Manager</h3>
+
+        <div class="menu-wrap">
+            <input type="checkbox" class="toggler">
+            <div class="humburger">
+                <div></div>
+            </div>
+            <div class="menu">
+                <div>
+                    <div>
+                        <ul>
+                            <li><a href="./about.html">About me</a></li>
+                            <li><a href="./resume.html">resume</a></li>
+                            <li><a href="./project.html">Project</a></li>
+                            <li><a href="./contact.html">Contact</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <main>
+        <h1> Let's talk</h1>
+    </main>
+
+    <section class="cont">
+
+        <div class="box12">
+            <form action="/action_page.php">
+                <label for="first-name">First Name<em>*</em></label>
+
+                <div>
+                    <input type="text" id="name" placeholder-r="Enter Your Name">
+                </div>
+
+                <label for="last-name">Last Name<em>*</em></label>
+
+                <div>
+                    <input type="text" id="name" placeholder-r="Enter Your Last Name">
+                </div>
+
+                <label for="email">Email<em>*</em></label>
+
+                <div>
+                    <input type="email" id="name" placeholder-r="Enter Your Email">
+                </div>
+
+                <label for="first-name">Subject</label>
+
+                <div>
+                    <input type="text" id="name" placeholder-r="Enter Your Name">
+                </div>
+
+                <label for="first-name">Message</label>
+
+                <div>
+                    <input type="text" id="name" placeholder-r="Enter Your Name">
+                </div>
+
+            </form>
+        </div>
+    </section>
+
+    <div class="send-wrapper">
+        <button class="send">SEND</button>
+    </div>
+
+    <footer class="foot">
+        <section class="se1">
+            <div class="foot1">
+                <h4>Call</h4>
+                <p>123-456-7890</p>
+            </div>
+
+            <div class="foot2">
+                <h4>Writee</h4>
+                <p>info@mysite.com</p>
+            </div>
+        </section>
+
+        <div class="foot3">
+            <h3>Follow</h3>
+            <a href=""><i class="fa-brands fa-facebook-f"></i></a>
+            <a href=""><i class="fa-brands fa-twitter"></i></a>
+            <a href=""><i class="fa-brands fa-linkedin-in"></i></a>
+            <a href=""><i class="fa-brands fa-instagram"></i></a>
+        </div>
+
+        <div class="foot4">
+            <p>&copy;2035 by Maya Nelson.
+                <br>Powered and secured by <strong class="w1">Wix</strong>
+            </p>
+        </div>
+
+    </footer>
+
+</body>
+
+</html>