 &lt;button class=&quot;theme-switch&quot; onclick=&quot;toggleTheme()&quot;&gt;
        &lt;i class=&quot;fas fa-sun&quot;&gt;&lt;/i&gt;
        &lt;i class=&quot;fas fa-moon&quot;&gt;&lt;/i&gt;
    &lt;/button&gt;
    &lt;aside id=&quot;home&quot; class=&quot;sidebar&quot;&gt;
        &lt;div class=&quot;sidebar-info&quot;&gt;
            &lt;div class=&quot;avatar-box&quot;&gt;
                &lt;img src=&quot;images/anwrk.jpg&quot; alt=&quot;Profile&quot; class=&quot;profile-image&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;info-content&quot;&gt;
                &lt;h2 class=&quot;name&quot;&gt;Azzouz Anouar khalil&lt;/h2&gt;
                &lt;div class=&quot;title&quot;&gt;Web developer&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;sidebar-info-more&quot;&gt;
            &lt;ul class=&quot;contacts-list&quot;&gt;
                &lt;li class=&quot;contact-item&quot;&gt;
                    &lt;div class=&quot;icon-box&quot;&gt;
                        &lt;i class=&quot;fa-regular fa-envelope&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;contact-info&quot;&gt;
                        &lt;p class=&quot;contact-title&quot;&gt;Email&lt;/p&gt;
                        &lt;a href=&quot;mailto:anwrk.azz@gmail.com&quot; class=&quot;contact-link&quot;&gt;anwrk.azz@gmail.com&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li class=&quot;contact-item&quot;&gt;
                    &lt;div class=&quot;icon-box&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-mobile-screen&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;contact-info&quot;&gt;
                        &lt;p class=&quot;contact-title&quot;&gt;Phone&lt;/p&gt;
                        &lt;a href=&quot;tel:+12133522795&quot; class=&quot;contact-link&quot;&gt;+213 778138909&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li class=&quot;contact-item&quot;&gt;
                    &lt;div class=&quot;icon-box&quot;&gt;
                        &lt;i class=&quot;fa-regular fa-calendar&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;contact-info&quot;&gt;
                        &lt;p class=&quot;contact-title&quot;&gt;Birthday&lt;/p&gt;
                        &lt;p href=&quot;#&quot; class=&quot;contact-link&quot;&gt;December 12, 2004&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li class=&quot;contact-item&quot;&gt;
                    &lt;div class=&quot;icon-box&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-location-dot&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;contact-info&quot;&gt;
                        &lt;p class=&quot;contact-title&quot;&gt;Location&lt;/p&gt;
                        &lt;a href=&quot;https://maps.app.goo.gl/FKkuHs4WpMLgi2LL8&quot; class=&quot;contact-link&quot;&gt;5015, Batna,
                            Algeria&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class=&quot;social-list&quot;&gt;
                &lt;li class=&quot;social-item&quot;&gt;
                    &lt;a href=&quot;#&quot; class=&quot;social-link&quot;&gt;
                        &lt;i class=&quot;fa-brands fa-facebook&quot;&gt;&lt;/i&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;social-item&quot;&gt;
                    &lt;a href=&quot;#&quot; class=&quot;social-link&quot;&gt;
                        &lt;i class=&quot;fa-brands fa-linkedin-in&quot;&gt;&lt;/i&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;social-item&quot;&gt;
                    &lt;a href=&quot;#&quot; class=&quot;social-link&quot;&gt;
                        &lt;i class=&quot;fa-brands fa-github&quot;&gt;&lt;/i&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;social-item&quot;&gt;
                    &lt;a href=&quot;#&quot; class=&quot;social-link&quot;&gt;
                        &lt;i class=&quot;fa-brands fa-instagram&quot;&gt;&lt;/i&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/aside&gt;

    &lt;main class=&quot;main-content&quot;&gt;
        &lt;nav class=&quot;vertical-nav&quot;&gt;
            &lt;a href=&quot;#home&quot; class=&quot;nav-item active&quot; data-tooltip=&quot;Home&quot;&gt;
                &lt;i class=&quot;fas fa-home&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;nav-text&quot;&gt;Home&lt;/span&gt;
            &lt;/a&gt;
            &lt;a href=&quot;#cv&quot; class=&quot;nav-item&quot; data-tooltip=&quot;Resume&quot;&gt;
                &lt;i class=&quot;fa-regular fa-address-card&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;nav-text&quot;&gt;Resume&lt;/span&gt;
            &lt;/a&gt;
            &lt;a href=&quot;#projects&quot; class=&quot;nav-item&quot; data-tooltip=&quot;Portfolio&quot;&gt;
                &lt;i class=&quot;fa-solid fa-briefcase&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;nav-text&quot;&gt;Portfolio&lt;/span&gt;
            &lt;/a&gt;
            &lt;a href=&quot;#certifications&quot; class=&quot;nav-item&quot; data-tooltip=&quot;certifications&quot;&gt;
                &lt;i class=&quot;fa-solid fa-medal&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;nav-text&quot;&gt;Certifications&lt;/span&gt;
            &lt;/a&gt;
            &lt;a href=&quot;#contact&quot; class=&quot;nav-item&quot; data-tooltip=&quot;Contact&quot;&gt;
                &lt;i class=&quot;fa-solid fa-envelope&quot;&gt;&lt;/i&gt;
                &lt;span class=&quot;nav-text&quot;&gt;Contact&lt;/span&gt;
            &lt;/a&gt;
        &lt;/nav&gt;
        &lt;section id=&quot;about&quot;&gt;
            &lt;div class=&quot;about-container&quot;&gt;
                &lt;h1 class=&quot;small-width&quot;&gt;Who Am I?&lt;/h1&gt;
                &lt;div class=&quot;top-about&quot;&gt;
                    &lt;div class=&quot;about-p&quot;&gt;
                        &lt;p class=&quot;about-text&quot;&gt;My name is &lt;span&gt;Azzouz Anouar Khalil&lt;/span&gt;, and I am a dedicated
                            front-end
                            web
                            developer from Batna, Algeria. I have a passion for learning and creating new applications
                            with
                            fast,
                            secure, and
                            clean code. I specialize in programming and maintaining responsive websites that provide
                            seamless
                            user
                            experiences. I take pride in crafting dynamic and engaging interfaces by writing optimized
                            and
                            clean
                            code. I stay up-to-date with the latest development tools and techniques to ensure that I
                            deliver
                            cutting-edge web applications.
                        &lt;/p&gt;
                        &lt;div class=&quot;about-stats&quot;&gt;
                            &lt;div class=&quot;stat-box&quot;&gt;
                                &lt;div class=&quot;number&quot;&gt;2+&lt;/div&gt;
                                &lt;div class=&quot;label&quot;&gt;Years of Experience&lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;stat-box&quot;&gt;
                                &lt;div class=&quot;number&quot;&gt;10+&lt;/div&gt;
                                &lt;div class=&quot;label&quot;&gt;Projects&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;editor&quot;&gt;
                        &lt;div class=&quot;window-controls&quot;&gt;
                            &lt;div class=&quot;control red&quot;&gt;&lt;/div&gt;
                            &lt;div class=&quot;control yellow&quot;&gt;&lt;/div&gt;
                            &lt;div class=&quot;control green&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;code-area&quot;&gt;
                            &lt;pre&gt;&lt;span class=&quot;const&quot;&gt;const&lt;/span&gt; coder = {
            name: &lt;span class=&quot;string&quot;&gt;&apos;AZZOUZ ANOUAR KHALIL&apos;&lt;/span&gt;,
            skills: [&lt;span class=&quot;string&quot;&gt;&apos;wDev&apos;&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;&apos;wDsgn&apos;&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;&apos;cybSec&apos;&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;&apos;net&apos;&lt;/span&gt;],
            hardWorker: &lt;span class=&quot;boolean&quot;&gt;true&lt;/span&gt;,
            problemSolver: &lt;span class=&quot;boolean&quot;&gt;true&lt;/span&gt;,
            fastLearner: &lt;span class=&quot;boolean&quot;&gt;true&lt;/span&gt;,
            &lt;span class=&quot;function&quot;&gt;hireable&lt;/span&gt;: function() {
                    return (
                            &lt;span class=&quot;property&quot;&gt;this&lt;/span&gt;.hardWorker &amp;&amp;
                            &lt;span class=&quot;property&quot;&gt;this&lt;/span&gt;.problemSolver &amp;&amp;
                            &lt;span class=&quot;property&quot;&gt;this&lt;/span&gt;.fastLearner &amp;&amp;
                            &lt;span class=&quot;property&quot;&gt;this&lt;/span&gt;.skills.length &gt;= 4
                    );
            }
}&lt;/pre&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;h1&gt;My Focus &lt;span class=&quot;highlight&quot;&gt;Areas&lt;/span&gt;&lt;/h1&gt;
                &lt;div class=&quot;skills-grid&quot;&gt;
                    &lt;div class=&quot;skill-card&quot;&gt;
                        &lt;div class=&quot;skill-icon&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-palette&quot;&gt;&lt;/i&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;skill-text&quot;&gt;
                            &lt;h3&gt;Web Design&lt;/h3&gt;
                            &lt;p&gt;The most modern and high-quality design made at a professional level.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;skill-card&quot;&gt;
                        &lt;div class=&quot;skill-icon&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-globe&quot;&gt;&lt;/i&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;skill-text&quot;&gt;
                            &lt;h3&gt;Web Development&lt;/h3&gt;
                            &lt;p&gt;High-quality development of sites at the professional level.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;skill-card&quot;&gt;
                        &lt;div class=&quot;skill-icon&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-screwdriver-wrench&quot;&gt;&lt;/i&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;skill-text&quot;&gt;
                            &lt;h3&gt;Debugging And Problem Solving&lt;/h3&gt;
                            &lt;p&gt;Strong ability to identify and resolve software issues and optimize performance.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;skill-card&quot;&gt;
                        &lt;div class=&quot;skill-icon&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-graduation-cap&quot;&gt;&lt;/i&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;skill-text&quot;&gt;
                            &lt;h3&gt;Continuous Learning&lt;/h3&gt;
                            &lt;p&gt;Dedicated to learning and applying new technologies and tools in real-world projects.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/section&gt;
        &lt;section id=&quot;cv&quot;&gt;
            &lt;h1&gt; Education &amp; &lt;span class=&quot;highlight&quot;&gt;Experience&lt;/span&gt;&lt;/h1&gt;
            &lt;div class=&quot;timeline&quot;&gt;
                &lt;div class=&quot;timeline-item&quot;&gt;
                    &lt;div class=&quot;timeline-date&quot;&gt;2022 - present&lt;/div&gt;
                    &lt;div class=&quot;timeline-role&quot;&gt;Bachelor Degree of Computer Science&lt;/div&gt;
                    &lt;div class=&quot;timeline-company&quot;&gt;Faculity Of Science, CU Of Barika&lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;timeline-item&quot;&gt;
                    &lt;div class=&quot;timeline-date&quot;&gt;2022 - present&lt;/div&gt;
                    &lt;div class=&quot;timeline-role&quot;&gt;Junior Front End Developer&lt;/div&gt;
                    &lt;div class=&quot;timeline-company&quot;&gt;Self-Initiated Projects / Academic Work&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;buttons&quot;&gt;
                &lt;button class=&quot;cv-btn&quot;&gt;Download Cv&lt;/button&gt;
                &lt;button class=&quot;contact-btn&quot;&gt;Contact Me&lt;/button&gt;
            &lt;/div&gt;
        &lt;/section&gt;

        &lt;section id=&quot;projects&quot;&gt;
            &lt;h1 class=&quot;small-width&quot;&gt;My &lt;span class=&quot;highlight&quot;&gt;Projects&lt;/span&gt;&lt;/h1&gt;
            &lt;div class=&quot;filter-buttons&quot;&gt;
                &lt;button class=&quot;filter-btn active&quot; data-filter=&quot;all&quot;&gt;All Projects&lt;/button&gt;
                &lt;button class=&quot;filter-btn&quot; data-filter=&quot;web-dev&quot;&gt;Web Dev&lt;/button&gt;
                &lt;button class=&quot;filter-btn&quot; data-filter=&quot;uni&quot;&gt;Uni Projects&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;projects-grid&quot;&gt;
                &lt;!-- Project Card --&gt;
                &lt;div class=&quot;project-card&quot;&gt;
                    &lt;img src=&quot;images/project-1.jpg&quot; alt=&quot;Project&quot; class=&quot;project-image&quot;&gt;
                    &lt;div class=&quot;project-links&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;project-link&quot; title=&quot;Live Demo&quot;&gt;
                            &lt;i class=&quot;fas fa-external-link-alt&quot;&gt;&lt;/i&gt;
                        &lt;/a&gt;
                        &lt;a href=&quot;#&quot; class=&quot;project-link&quot; title=&quot;Source Code&quot;&gt;
                            &lt;i class=&quot;fab fa-github&quot;&gt;&lt;/i&gt;
                        &lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;project-overlay&quot;&gt;
                        &lt;h3 class=&quot;project-title&quot;&gt;Project Name&lt;/h3&gt;
                        &lt;p class=&quot;project-description&quot;&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Consectetur quam &lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;project-card&quot; data-category=&quot;web-dev&quot;&gt;
                    &lt;img src=&quot;images/project-3.jpg&quot; alt=&quot;Project&quot; class=&quot;project-image&quot;&gt;
                    &lt;div class=&quot;project-links&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;project-link&quot; title=&quot;Live Demo&quot;&gt;
                            &lt;i class=&quot;fas fa-external-link-alt&quot;&gt;&lt;/i&gt;
                        &lt;/a&gt;
                        &lt;a href=&quot;#&quot; class=&quot;project-link&quot; title=&quot;Source Code&quot;&gt;
                            &lt;i class=&quot;fab fa-github&quot;&gt;&lt;/i&gt;
                        &lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;project-overlay&quot;&gt;
                        &lt;h3 class=&quot;project-title&quot;&gt;Project Name&lt;/h3&gt;
                        &lt;p class=&quot;project-description&quot;&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Consectetur quam &lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;project-card&quot; data-category=&quot;web-dev&quot;&gt;
                    &lt;img src=&quot;images/project-4.png&quot; alt=&quot;Project&quot; class=&quot;project-image&quot;&gt;
                    &lt;div class=&quot;project-links&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;project-link&quot; title=&quot;Live Demo&quot;&gt;
                            &lt;i class=&quot;fas fa-external-link-alt&quot;&gt;&lt;/i&gt;
                        &lt;/a&gt;
                        &lt;a href=&quot;#&quot; class=&quot;project-link&quot; title=&quot;Source Code&quot;&gt;
                            &lt;i class=&quot;fab fa-github&quot;&gt;&lt;/i&gt;
                        &lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;project-overlay&quot;&gt;
                        &lt;h3 class=&quot;project-title&quot;&gt;Project Name&lt;/h3&gt;
                        &lt;p class=&quot;project-description&quot;&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Consectetur quam &lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;project-card&quot;&gt;
                    &lt;img src=&quot;images/project-6.png&quot; alt=&quot;Project&quot; class=&quot;project-image&quot;&gt;
                    &lt;div class=&quot;project-links&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;project-link&quot; title=&quot;Live Demo&quot;&gt;
                            &lt;i class=&quot;fas fa-external-link-alt&quot;&gt;&lt;/i&gt;
                        &lt;/a&gt;
                        &lt;a href=&quot;#&quot; class=&quot;project-link&quot; title=&quot;Source Code&quot;&gt;
                            &lt;i class=&quot;fab fa-github&quot;&gt;&lt;/i&gt;
                        &lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;project-overlay&quot;&gt;
                        &lt;h3 class=&quot;project-title&quot;&gt;Project Name&lt;/h3&gt;
                        &lt;p class=&quot;project-description&quot;&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Consectetur quam &lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;project-card&quot;&gt;
                    &lt;img src=&quot;images/project-7.png&quot; alt=&quot;Project&quot; class=&quot;project-image&quot;&gt;
                    &lt;div class=&quot;project-links&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;project-link&quot; title=&quot;Live Demo&quot;&gt;
                            &lt;i class=&quot;fas fa-external-link-alt&quot;&gt;&lt;/i&gt;
                        &lt;/a&gt;
                        &lt;a href=&quot;#&quot; class=&quot;project-link&quot; title=&quot;Source Code&quot;&gt;
                            &lt;i class=&quot;fab fa-github&quot;&gt;&lt;/i&gt;
                        &lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;project-overlay&quot;&gt;
                        &lt;h3 class=&quot;project-title&quot;&gt;Project Name&lt;/h3&gt;
                        &lt;p class=&quot;project-description&quot;&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Consectetur quam &lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;button class=&quot;load-btn&quot;&gt;
                &lt;span&gt;See More&lt;/span&gt;
                &lt;i class=&quot;fa-solid fa-arrow-right&quot;&gt;&lt;/i&gt;
            &lt;/button&gt;
        &lt;/section&gt;
        &lt;!-- Certifications Section --&gt;
        &lt;section id=&quot;certifications&quot;&gt;
            &lt;h1&gt;Achievements &amp; &lt;span class=&quot;highlight&quot;&gt;Certifications&lt;/span&gt;&lt;/h1&gt;
            &lt;div class=&quot;certification-list&quot;&gt;
                &lt;div class=&quot;certification-item&quot;&gt;
                    &lt;img src=&quot;images/CS50x-logo.png&quot; alt=&quot;Responsive Web Design&quot;&gt;
                    &lt;h3&gt;Computer Science&lt;/h3&gt;
                    &lt;p class=&quot;issuer&quot;&gt;Issued by: Harvard University&lt;/p&gt;
                    &lt;p class=&quot;date&quot;&gt;Date Earned: December 2024&lt;/p&gt;
                    &lt;div class=&quot;certificate-image&quot;&gt;
                        &lt;img src=&quot;images/CS50x.png&quot; alt=&quot;Computer Science Certificate&quot;&gt;
                        &lt;a href=&quot;https://cs50.harvard.edu/certificates/7ab3f102-c7ec-43e4-b24b-d0acfd9ff2e7&quot;
                            class=&quot;view&quot; target=&quot;_blank&quot;&gt;View&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;certification-item&quot;&gt;
                    &lt;img src=&quot;images/FCC Logo.png&quot; alt=&quot;Responsive Web Design&quot;&gt;
                    &lt;h3&gt;Responsive Web Design&lt;/h3&gt;
                    &lt;p class=&quot;issuer&quot;&gt;Issued by: freeCodeCamp&lt;/p&gt;
                    &lt;p class=&quot;date&quot;&gt;Date Earned: November 2023&lt;/p&gt;
                    &lt;div class=&quot;certificate-image&quot;&gt;
                        &lt;img src=&quot;images/FCC Responsive Web Design-1.png&quot; alt=&quot;Responsive Web Design Certificate&quot;&gt;
                        &lt;a href=&quot;https://www.freecodecamp.org/certification/fcc881428be-3ca1-408e-a62d-bead6a5fadbb/responsive-web-design&quot;
                            class=&quot;view&quot; target=&quot;_blank&quot;&gt;View&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;certification-item&quot;&gt;
                    &lt;img src=&quot;images/Sololearn.png&quot; alt=&quot;JavaScript Algorithms&quot;&gt;
                    &lt;h3&gt;JavaScript Algorithms&lt;/h3&gt;
                    &lt;p class=&quot;issuer&quot;&gt;Issued by: soloLearn&lt;/p&gt;
                    &lt;p class=&quot;date&quot;&gt;Date Earned: March 2024&lt;/p&gt;
                    &lt;div class=&quot;certificate-image&quot;&gt;
                        &lt;img src=&quot;images/JavaScript.png&quot; alt=&quot;JavaScript Algorithms Certificate&quot;&gt;
                        &lt;a href=&quot;images/JavaScript.png&quot; class=&quot;view&quot; target=&quot;_blank&quot;&gt;View&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;certification-item&quot;&gt;
                    &lt;img src=&quot;images/efsetlogo.png&quot; alt=&quot;Front-End Development&quot;&gt;
                    &lt;h3&gt;English&lt;/h3&gt;
                    &lt;p class=&quot;issuer&quot;&gt;Issued by: EF SET&lt;/p&gt;
                    &lt;p class=&quot;date&quot;&gt;Date Earned: June 2024&lt;/p&gt;
                    &lt;div class=&quot;certificate-image&quot;&gt;
                        &lt;img src=&quot;images/EF SET Certificate-1.png&quot; alt=&quot;Front-End Development Certificate&quot;&gt;
                        &lt;a href=&quot;https://cert.efset.org/jy7YjX&quot; class=&quot;view&quot; target=&quot;_blank&quot;&gt;View&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;certification-item&quot;&gt;
                    &lt;img src=&quot;images/Cisco-logo.png&quot; alt=&quot;Artificial Intelligence Certificate&quot;&gt;
                    &lt;h3&gt;English&lt;/h3&gt;
                    &lt;p class=&quot;issuer&quot;&gt;Issued by: Cisco&lt;/p&gt;
                    &lt;p class=&quot;date&quot;&gt;Soon&lt;/p&gt;
                    &lt;div class=&quot;certificate-image&quot;&gt;
                        &lt;img src=&quot;&quot; alt=&quot;Artificial Intelligence Certificate&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;view&quot;&gt;View&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;button class=&quot;load-btn&quot;&gt;
                &lt;span&gt;See More&lt;/span&gt;
                &lt;i class=&quot;fa-solid fa-arrow-right&quot;&gt;&lt;/i&gt;
            &lt;/button&gt;
        &lt;/section&gt;
        &lt;section id=&quot;contact&quot;&gt;
            &lt;h1 class=&quot;small-width&quot;&gt;Get In &lt;span class=&quot;highlight&quot;&gt;Touch&lt;/span&gt;&lt;/h1&gt;

            &lt;div class=&quot;map-container&quot;&gt;
                &lt;iframe
                    src=&quot;https://www.google.com/maps/embed/v1/place?q=elmadher&amp;key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8&quot;
                    width=&quot;100%&quot; height=&quot;100%&quot; style=&quot;border:0;&quot; allowfullscreen=&quot;&quot; loading=&quot;lazy&quot;
                    referrerpolicy=&quot;no-referrer-when-downgrade&quot;&gt;
                &lt;/iframe&gt;
            &lt;/div&gt;

            &lt;div class=&quot;contact-form&quot;&gt;
                &lt;form&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                        &lt;input type=&quot;text&quot; placeholder=&quot;Full name&quot; required&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                        &lt;input type=&quot;email&quot; placeholder=&quot;Email address&quot; required&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                        &lt;textarea placeholder=&quot;Your Message&quot; required&gt;&lt;/textarea&gt;
                    &lt;/div&gt;
                    &lt;button type=&quot;submit&quot; class=&quot;send-btn&quot;&gt;
                        &lt;span&gt;Send Message&lt;/span&gt;
                        &lt;i class=&quot;fa-regular fa-paper-plane&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        &lt;/section&gt;
    &lt;/main&gt;
    &lt;script src=&quot;js/script.js&quot;&gt;&lt;/script&gt;