Ridwanullahi-code · Ridwanullahi-code · Aug 19, 2022 · Aug 19, 2022 · Aug 20, 2022 · Aug 20, 2022
diff --git a/README.md b/README.md
@@ -1,6 +1,12 @@
 # **Professional Portfolio** 
 ## Professional portfolio that is a collection of examples and evidence to showcase your experience, capability and potential for employment opportunities and professional development.
 
+## **Project Section:**
+
+* Header section
+* Work section
+* About section
+
 ## **Build with:**
 
 * HTML 

diff --git a/images/Ellipse1.png b/images/Ellipse1.png
diff --git a/images/Ellipse2.png b/images/Ellipse2.png
diff --git a/images/Ellipse3.png b/images/Ellipse3.png
diff --git a/images/Frame.png b/images/Frame.png
diff --git a/images/Header_bg.svg b/images/Header_bg.svg
diff --git a/images/Snapshoot Portfolio (1).png b/images/Snapshoot Portfolio (1).png
diff --git a/images/bar.png b/images/bar.png
diff --git a/images/contact-form shapes-mobile.png b/images/contact-form shapes-mobile.png
diff --git a/images/project1.png b/images/project1.png
diff --git a/images/project2.png b/images/project2.png
diff --git a/images/project3.png b/images/project3.png
diff --git a/images/project4.png b/images/project4.png
diff --git a/images/shapes.png b/images/shapes.png
diff --git a/index.html b/index.html
@@ -12,44 +12,162 @@
 <body>
     <!-- home page header -->
     <main>
-        <header>
-            <!-- Navigation  bar containr-->
-            <nav class="navigation_container">
-                <a class="logo" href="">My Logo</a>
-                <!-- static menu button -->
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2 menu-button"
-                    width="44" height="25" viewBox="0 0 24 24" stroke-width="1.5" stroke="#6070ff" 
-                    fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-                    <line x1="4" y1="6" x2="20" y2="6" />
-                    <line x1="4" y1="12" x2="20" y2="12" />
-                    <line x1="4" y1="18" x2="20" y2="18" />
-                </svg>        
-            </nav>  
-        </header>
-        <!-- headline section -->
-        <section class="headline">
-            <!-- briefly summary section -->
+        <div class="header-container">
+            <header>
+                <!-- Navigation  bar containr-->
+                <nav class="navigation_container">
+                    <a class="logo" href="">My Logo</a>
+                    <!-- static menu button -->
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2 menu-button"
+                        width="44" height="25" viewBox="0 0 24 24" stroke-width="1.5" stroke="#6070ff" 
+                        fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                        <line x1="4" y1="6" x2="20" y2="6" />
+                        <line x1="4" y1="12" x2="20" y2="12" />
+                        <line x1="4" y1="18" x2="20" y2="18" />
+                    </svg>        
+                </nav>  
+            </header>
+            <!-- headline section -->
+            <section class="headline">
+                <!-- briefly summary section -->
+                <div class="intro">
+                    <h1>I’m Alexandra <br>Glad to see you!</h1>
+                    <p>I can help you build a product , feature or 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>
+                <!-- social medials lins -->
+                <div class="social-medials">
+                    <p>LET’S CONNECT</p>
+                    <ul class="social-icons">
+                        <li><a href="https://twitter.com/Ridwanullahi22"><img src="images/twitter.png" alt=""></a></li>
+                        <li><a href="https://github.com/Ridwanullahi-code"><img src="images/github.png" alt=""></a></li>
+                        <li><a href="https://www.linkedin.com/in/ajayi-ridwan-2a1515199/"><img src="images/Linkedin.png" alt=""></a></li>
+                        <li><a href="https://github.com/Ridwanullahi-code"><img src="images/medium.png" alt=""></a></li>
+                        <li><a href="https://www.linkedin.com/in/ajayi-ridwan-2a1515199/"><img src="images/Vector.png" alt=""></a></li>
+                    </ul>      
+                </div>
+            </section>
+        </div>
+
+        <section class="work-section">
+            <div class="projects project1">
+                <img class ='project-image' src="images/project1.png" alt="">
+
+                <div class="projects-describe">
+                    <h1 class="project-title">Tonic</h1>
+                    <img class="frame" src="images/Frame.png" alt="">
+                    <p class="description">A daily selection of privately personalized reads;
+                        no accounts or sign-ups required.
+                    </p>
+                    <ul class="tools">
+                        <li>html</li>
+                        <li>css</li>
+                        <li>javascript</li>
+                    </ul>
+                    <a class="button" href="">See Project</a>
+                </div>
+            </div>
+
+            <div class="projects project2">
+                <img class ='project-image' src="images/project2.png" alt="">
+
+                <div class="projects-describe">
+                    <h1 class="project-title">Multi-Post<br>Stories</h1>
+                    <img class="frame" src="images/Frame.png" alt="">
+                    <p class="description">A daily selection of privately personalized reads;
+                        no accounts or sign-ups required.
+                    </p>
+                    <ul class="tools">
+                        <li>html</li>
+                        <li>css</li>
+                        <li>javascript</li>
+                    </ul>
+                    <a class="button" href="">See Project</a>
+                </div>
+            </div>
+
+            <div class="projects project3">
+                <img class ='project-image' src="images/project3.png" alt="">
+
+                <div class="projects-describe">
+                    <h1 class="project-title">Tonic</h1>
+                    <img class="frame" src="images/Frame.png" alt="">
+                    <p class="description">A daily selection of privately personalized reads;
+                        no accounts or sign-ups required.
+                    </p>
+                    <ul class="tools">
+                        <li>html</li>
+                        <li>css</li>
+                        <li>javascript</li>
+                    </ul>
+                    <a class="button" href="">See Project</a>
+                </div>
+            </div>
+
+            <div class="projects project4">
+                <img class ='project-image' src="images/project4.png" alt="">
+
+                <div class="projects-describe">
+                    <h1 class="project-title">Multi-Post<br>Stories</h1>
+                    <img class="frame" src="images/Frame.png" alt="">
+                    <p class="description">A daily selection of privately personalized reads;
+                        no accounts or sign-ups required.
+                    </p>
+                    <ul class="tools">
+                        <li>html</li>
+                        <li>css</li>
+                        <li>javascript</li>
+                    </ul>
+                    <a class="button" href="">See Project</a>
+                </div>
+            </div> 
+         </section> 
+
+         <section class="about">
             <div class="intro">
-                <h1>I’m Alexandra <br>Glad to see you!</h1>
+                <h1>About<br>Myself</h1>
                 <p>I can help you build a product , feature or 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>
+                    don’t hestiate to contact me.
+                </p>
             </div>
-            <!-- social medials lins -->
+                <!-- social medials lins -->
             <div class="social-medials">
                 <p>LET’S CONNECT</p>
                 <ul class="social-icons">
-                    <li><a href="https://twitter.com/Ridwanullahi22"><img src="images/twitter.png" alt=""></a></li>
                     <li><a href="https://github.com/Ridwanullahi-code"><img src="images/github.png" alt=""></a></li>
+                    <li><a href="https://www.linkedin.com/in/ajayi-ridwan-2a1515199/"><img src="images/Vector.png" alt=""></a></li>
                     <li><a href="https://www.linkedin.com/in/ajayi-ridwan-2a1515199/"><img src="images/Linkedin.png" alt=""></a></li>
+                    <li><a href="https://twitter.com/Ridwanullahi22"><img src="images/twitter.png" alt=""></a></li>
                     <li><a href="https://github.com/Ridwanullahi-code"><img src="images/medium.png" alt=""></a></li>
-                    <li><a href="https://www.linkedin.com/in/ajayi-ridwan-2a1515199/"><img src="images/Vector.png" alt=""></a></li>
+
                 </ul>      
             </div>
+            <div>
+                <!-- button to download resume -->
+                <a class="button btn" href="">Get my resume</a>
+            </div>
+            <!-- area-->
+            <div id="skills">
+                <ul>
+                    <li class="language h2">Language</li>
+                    <li class="skill"><img src="images/Ellipse1.png" alt="">Javascript</li>
+                    <li class="skill"><img src="images/Ellipse2.png" alt="">HTML</li>
+                    <li class="skill"><img src="images/Ellipse3.png" alt="">CSS</li>
+
+                </ul>
+                <ul>
+                    <li class="framework h2">Framework</li>
+                </ul>
+                <hr>
+                <ul>
+                    <li class="Skill h2">Skills</li>
+                </ul>
+                <hr>
+            </div>    
         </section>
-    </main>
-
+    </main>   
 </body>
-
 </html>
diff --git a/project-result/about-section.png b/project-result/about-section.png
diff --git a/project-result/header-section.png b/project-result/header-section.png
diff --git a/project-result/languages.png b/project-result/languages.png
diff --git a/project-result/project.png b/project-result/project.png
diff --git a/project-result/project2.png b/project-result/project2.png
diff --git a/project-result/project3.png b/project-result/project3.png
diff --git a/project-result/project4.png b/project-result/project4.png