Simpleshaikh1 · Simpleshaikh1 · Apr 21, 2023 · Apr 21, 2023 · Apr 22, 2023 · Apr 22, 2023
diff --git a/assets/Group.png b/assets/Group.png
diff --git a/assets/Icon (1).png b/assets/Icon (1).png
diff --git a/assets/Icon2.png b/assets/Icon2.png
diff --git a/assets/Illustration-header@2x.png b/assets/Illustration-header@2x.png
diff --git a/assets/Illustration.png b/assets/Illustration.png
diff --git a/assets/Rectangle55.png b/assets/Rectangle55.png
diff --git a/assets/Rectangle56.png b/assets/Rectangle56.png
diff --git a/assets/Rectangle57.png b/assets/Rectangle57.png
diff --git a/assets/Snapshoot-Portfolio.png b/assets/Snapshoot-Portfolio.png
diff --git a/assets/Snapshoot-Portfolio1.png b/assets/Snapshoot-Portfolio1.png
diff --git a/assets/bg2.png b/assets/bg2.png
diff --git a/assets/bg3.png b/assets/bg3.png
diff --git a/assets/bg4.png b/assets/bg4.png
diff --git a/assets/bg5.png b/assets/bg5.png
diff --git a/assets/bg6.png b/assets/bg6.png
diff --git a/assets/gymnast.png b/assets/gymnast.png
diff --git a/assets/illustration-about-me-mobile.png b/assets/illustration-about-me-mobile.png
diff --git a/assets/pic.png b/assets/pic.png
diff --git a/assets/projects-background.png b/assets/projects-background.png
diff --git a/assets/whitebg (1).png b/assets/whitebg (1).png
diff --git a/assets/whitebg.png b/assets/whitebg.png
diff --git a/index.css b/index.css
diff --git a/index.html b/index.html
diff --git a/index.js b/index.js
diff --git a/index.txt b/index.txt
@@ -0,0 +1,270 @@
+<!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" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+    <link rel="stylesheet" href="./index.css" />
+
+    <title>Toyyib</title>
+  </head>
+
+  <body>
+
+    <div class="wrapper">
+
+        <div class="top-container">
+
+
+            <div class="header">
+
+                <a href="#" class="left-text">My Logo</a>
+
+                <nav class="right-hamburger" id="hamburger">
+
+                    <img src="./assets/Union.png" alt="" >
+
+                </nav>
+
+                <nav class="nav-li">
+                    <div class="x-men"><span>X</span></div>
+
+                    <a href="#portfolio" class="lis active">Portfolio</a>
+                    <a href="#about" class="lis">About</a>
+                    <a href="#contact" class="lis">Contact</a>
+
+                </nav>
+
+            </div>
+
+            <section class="top-body-background">
+                <div class="top-body">
+
+                    <h1>I'm Toyyib. Glad to see you!</h1>
+
+                    <p>
+                    I’m a software developer! I can help you build a product , feature or
+                    website Look through some of my work and <br> experience! If you like what
+                    you see and have a project you need coded, don’t hestiate to contact
+                    me.
+                    </p>
+
+                    <div class="footer-connect">
+
+                        <a href="#">LET'S CONNECT</a>
+
+                    </div>
+
+                    <ul class="top-footer">
+
+                        <li><a href="#"><img src="./assets/twitter.svg" alt="twitter icon"></a></li> 
+                        <li><a href="#"><img src="./assets/linkdn.svg" alt=""></a></li> 
+                        <li><a href="#"><img src="./assets/medium.svg" alt=""></a></li> 
+                        <li><a href="#"> <img src="./assets/github.svg" alt=""></a></li> 
+                        <li><a href="#"><img src="./assets/rabbit.svg" alt=""></a></li> 
+
+                     </ul>
+
+
+
+                </div>
+
+
+            </section>
+
+        </div>
+        <!-- returning other part after pr -->
+
+        <section class="second-container" id="portfolio"></section>
+
+        <div class="pop" id="modal">
+
+        </div>
+
+        <div class="overlay"></div>
+
+        <div class="third-container" id="about">
+
+                <div class="lower-body">
+
+                    <h2>About Myself</h2>
+
+                    <p>
+                      I’m a software developer! I can help you build a product , feature or <br>
+                      website Look through some of my work and experience! If you like what
+                      you see and have a project you need coded, don’t hestiate to contact
+                      me.
+                    </p>
+
+                    <div class="footer-third-container">
+
+                        <p><a href="#">LET'S CONNECT</a> </p>
+
+                    </div>
+
+                    <ul class="lower-footer">
+
+                        <li><a href="#"><img src="./assets/twitter.svg" alt="twitter icon"></a></li>
+                        <li><a href="#"><img src="./assets/linkdn.svg" alt=""></a></li>
+                        <li><a href="#"><img src="./assets/medium.svg" alt=""></a></li>
+                        <li><a href="#"><img src="./assets/github.svg" alt=""></a></li>
+                        <li><a href="#"><img src="./assets/rabbit.svg" alt=""></a></li>
+
+                    </ul>
+
+                    <div class=" top-footer-btn">
+                        <button id="third-container-button" class="all-button">Get my resume</button>
+                    </div>
+
+                </div>
+
+
+
+                <ul class="languages-container">
+
+                    <li class="language-container-top">
+
+                        <p class="bold-text">Languages</p>
+
+                        <img src="./assets/dropdown.png" alt="" id="dropdown-img">
+
+                    </li>
+
+                    <ul class="language-tools ">
+
+                        <img src="./assets/js.png" alt="" class="lang-img">
+                        <img src="./assets/html.png" alt="" class="lang-img">
+                        <img src="./assets/css.png" alt="" class="lang-img">
+
+                        <li class="language-java-script language-li">
+
+                            <img src="./assets/jsLogo.png" alt="">
+
+                            <div id="javascript">
+
+                                <span> JavaScript</span>
+
+                            </div>
+
+                        </li>
+
+                        <li class="language-html language-li">
+
+                            <img src="./assets/h5Logo.png" alt="">
+
+                            <div id="html">
+                                <span> HTML</span>
+                            </div>
+                        </li>
+
+                        <li class="language-css language-li">
+
+                            <img src="./assets/css3Logo.png" alt="">
+
+                            <div id="css"> 
+
+                                <span> CSS </span>
+
+                            </div>
+
+                        </li>
+
+                    </ul>
+
+                    <ul class="language-footer">
+
+                        <li class="language-framwork">
+
+                            <p class="bold-text">Frameworks</p>
+
+                            <img src="./assets/dropdown.png" alt="" class="dropside-img">
+
+                        </li>
+
+                        <hr id="hr">
+
+                        <li class="language-skill">
+
+                            <p  class="bold-text">Skills</p>
+
+                            <img src="./assets/dropdown.png" alt="" class=" dropside-img">
+
+                        </li>
+
+                        <hr>
+
+
+
+                    </ul>
+
+
+                </ul>
+
+        </div>
+
+        <div class="section-background" id="contact ">
+
+            <div class="section">
+
+                    <div class="contact-me-section">
+
+                        <div id="contact-me">
+                            <p >Contact me</p>
+                        </div>
+
+
+                        <div id="contact-msg">
+                            <p > 
+                                If you have an application you <br> are 
+                                interested in developing, a feature 
+                                that you need built or a project that
+                                needs coding. <br> I’d love to help with it 
+                            </p>
+                        </div>
+
+                    </div>
+
+
+                    <div class="form-section">
+
+                        <form action="https://formspree.io/f/mayzpyer" method="post">
+
+                            <input type="text" name="name" placeholder="Name" class="name-input text" maxlength="30" onchange="changeEvent()" required> 
+                            <input type="email" name="email" placeholder="Email" class="email-input text" id="text2" onchange="changeEvent()" required> 
+                            <textarea name="textareaName" cols="30" rows="2" maxlength="500" id="type-msg" class="text" placeholder="Write your message here" onchange="changeEvent()" required></textarea>
+
+
+                            <div class="btn-sec">
+
+                                <button type="submit" class="sec-btn">   
+                                    <span>Get in touch</span>
+                                </button>
+                                <div class="error hidden">Email must be in lowercase</div>
+                                <span class="dot"></span>
+
+                            </div>
+                        </form>   
+                    </div>
+                </div>
+
+
+
+                <div class="black-linen">
+                    <img src="./assets/Home Indicator/Shape.png" alt="">
+                </div>
+
+            </div>
+
+        </div>
+
+
+
+    </div>
+    <script defer src="./index.js"></script>
+  </body>
+
+</html>