Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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">
        <meta name="description" content="Jewel Keith's Front-end Web Development Portfolio where her projects, character, skills, education are showcased.">
        <title>Jewel Keith - Portfolio</title>
        <link rel="icon" type="image/x-icon" href="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/favicon.svg">
        <link rel="stylesheet" type="text/css" href="assets/css/main.css">
        <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=Montserrat:wght@400;600;800&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/7862d50d51.js" crossorigin="anonymous"></script>
    </head>  
    <body> 
        <div id="wrapper" class="wrapper">
        <!-- HEADER > NAVIGATION -->
            <header id="header" class="header">
                <div class="small-medium-nav">
                <!-- OPEN MAIN MENU -->
                    <div class="row">
                        <a href="#main-menu" id="main-menu-toggle" class="menu-toggle" aria-label="Open main menu">
                            <span class="sr-only">Open main menu</span>
                            <span class="fa fa-bars" aria-hidden="true"></span>
                        </a>
                    </div>
                <!-- NAV BAR FOR SMALL & MEDIUM SCREENS (320px-849px) -->
                    <nav id="main-menu" class="main-menu" aria-label="main menu">
                    <a href="#main-menu-toggle" class="menu-close">
                        <span class="sr-only">Close main menu</span>
                        <span class="fa fa-close" aria-hidden="true"></span>
                    </a>
                        <ul>
                            <li><a href="index.html" class="first-link nav-link">
                                    <i class="fas fa-home"></i>
                                    <img 
                                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Jewel_Keith_Logo_Picture.svg" 
                                        alt="Jewel Keith Logo. Click for Home.">
                                </a>
                            </li>
                            <li>
                                <a href="#projects" class="projects-link nav-link">
                                    <i class="fas fa-code"></i> 
                                    <p>Projects</p>
                                </a>
                            </li>
                            <li>
                                <a href="#about" class="nav-link">
                                    <i class="fas fa-user"></i>
                                    <p>About</p>
                                </a>
                            </li>
                            <li>
                                <a href="#skills" class="nav-link">
                                    <i class="fas fa-cog"></i>
                                    <p>Skills</p>
                                </a>
                            </li>
                            <li>
                                <a href="#education" class="nav-link">
                                    <i class="fas fa-book"></i>
                                    <p>Education</p>
                                </a>
                            </li>
                            <li>
                                <a href="#contact" class="nav-link">
                                    <i class="fas fa-envelope"></i>
                                    <p>Contact</p>
                                </a>
                            </li>
                            <li>
                                <a href="#resume" class="nav-link">
                                    <i class="fas fa-file"></i>
                                    <p>Resume</p>
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <a href="#main-menu-toggle" class="backdrop" hidden tabindex="-1"></a>
                </div>
            <!--  NAV BAR FOR LARGE SCREENS (850px-1920px) -->
                <nav id="nav-bar" class="nav-bar" aria-label="navigation bar">
                    <ul class="main-ul-list">
                        <li class="first-main-li nav-grp1"><a href="#home" class="home-link nav-link">
                                <img 
                                        id="header-img"
                                        class="nav-link-img"
                                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Jewel_Keith_Logo_Picture.svg" 
                                        alt="Jewel Keith Logo. Click for Home.">
                                <p>Home</p>
                            </a>
                        </li>
                        <li class="second-main-li ">
                            <ul class="nav-grp2">
                                <li>
                                    <a href="#" class="nav-link">
                                        <i class="fas fa-home"></i>
                                        <p>Home</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#projects" class="nav-link">
                                        <i class="fas fa-code"></i> 
                                        <p>Projects</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#about" class="nav-link">
                                        <i class="fas fa-user"></i>
                                        <p>About</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#skills" class="nav-link">
                                        <i class="fas fa-cog"></i> 
                                        <p>Skills</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#education" class="nav-link">
                                        <i class="fas fa-book"></i>
                                        <p>Education</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#contact" class="nav-link">
                                        <i class="fas fa-envelope"></i>
                                        <p>Contact</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#resume" class="nav-link">
                                        <i class="fas fa-file"></i>
                                        <p>Resume</p>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </header> 
    
        <!-- HOME -->
            <section id="home" class="home">
                <section class="jewel-keith-intro-home">
                    <div class="empty-div-home"></div>
                    <h2 class="p-intro-heading">Hi, nice to meet you. I'm</h2>
                    <h1 class="slide-in-left">JEWEL KEITH</h1>
                    <div class="home-bio">
                        <p>a Junior Web Developer based in the Philippines currently learning Front-end technologies such as JavaScript, User Experience, and User Interface. Mostly interested in projects offering solutions to real-world problems. </p>
                    </div>
                </section>
                <img 
                    class="jewel-keith-dp"
                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Jk_Profile_Picture_Light.svg" 
                    alt="Jewel Keith's profile picture.">
            </section>
    
        <!-- PROJECTS -->
            <section id="projects" class="projects">
            <!-- YELLOW WAVES BACKGROUND -->
                <div class="new-yellow-waves">
                    <img 
                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Waves_Yellow_Picture.svg"
                        alt="yellow waves design as background">
                    <div class="waves-section-intro">
                        <h2 class="p-intro-heading">I proudly present to you my</h2>
                        <h1>PROJECTS</h1>
                    </div>
                </div>
                <article class="first-project">
                <!-- TRIBUTE TITLE -->
                    <h3 class="project-title-left project-title">TRIBUTE PAGE</h3>
                    <div class="empty-div-1-right"></div>
                <!-- TRIBUTE FLIP CARD -->
                    <a href="#flip-card-back3" class="flip-yeah">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                            <!-- FRONT -->
                                <div class="flip-card-front">
                                    <img 
                                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Projects)_Small_Pp/Tribute_Window_W_pointer_Light_Front.svg"
                                        alt="A preview of Jewel Keith's Tribute Page Project"
                                        style="width:280px;height:280px;">
                                </div>
                            <!-- BACK -->
                                <div class="flip-card-back3" id="flip-card-back3">
                                    <p>My first project at freeCodeCamp is a tribute page dedicated for Kesh, an amazing artist who inspired me to be a better artist. Though I made a complicated code, I still managed to make the page responsive.</p>
                                    <p class="languages">Languages:</p>
                                    <ul>
                                        <li>HTML
                                            <img
                                                src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Html_Picture.svg"
                                                alt="HTML5 logo"></li>
                                        <li>CSS
                                            <img
                                                src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Css_Picture.svg"
                                                alt="CSS3 logo"></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </a>
                <!-- FOR MEDIUM & LARGE SCREENS -->
                    <img class="project-preview-left"
                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Projects)_Medium_&_Large_Pp/Tribute_Window_Light.svg"
                        alt="A preview of Jewel Keith's Tribute Page Project">
                    
                    <div class="project-info-right">
                        <p>My first project at freeCodeCamp is a tribute page dedicated for Kesh, an amazing artist who inspired me to be a better artist. Though I made a complicated code, I still managed to make the page responsive.</p>
                        <p class="languages">Languages:</p>
                        <ul>
                            <li>HTML
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Html_Picture.svg"
                                    alt="HTML5 logo"></li>
                            <li>CSS
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Css_Picture.svg"
                                    alt="CSS3 logo"></li>
                        </ul>
                    </div>
    
                <!-- CODEPEN BUTTON -->
                    <a class="codepen-link-button codepen-link-button-left" href="https://codepen.io/jkal_eunkyung/full/porNyGL" target="_blank">
                        <div class="codepen-button">
                            <div class="link-icon">
                                <i class="fas fa-link"></i>
                            </div>
                            <div class="view-on-codepen">
                                <p>View on CodePen</p>
                            </div>
                        </div>
                    </a>
    
                    <div class="empty-div-2-right"></div>
                </article>
    
                <article class="second-project">
                <!-- SURVEY TITLE -->
                    <h2 class="project-title-right project-title">SURVEY FORM</h2>
                    <div class="empty-div-1-left"></div>
                <!-- SURVEY FLIP CARD -->
                    <a href="#flip-card-back4" class="flip-yeah">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                            <!-- FRONT -->
                                <div class="flip-card-front">
                                    <img 
                                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Projects)_Small_Pp/Survey_Window_W_pointer_Light_Front.svg"
                                        alt="A preview of Jewel Keith's Survey Form Project"
                                        style="width:280px;height:280px;">
                                </div>
                            <!-- BACK -->
                                <div class="flip-card-back4" id="flip-card-back4">
                                    <p>I made a product feedback kind for a digital product I named "OnFocus", a life planner application I target to make in the future. The survey's main goal is to gain other insights from users that could help improve the app better.</p>
                                    <p class="languages">Languages:</p>
                                    <ul>
                                        <li>HTML
                                            <img 
                                                src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Html_Picture.svg"
                                                alt="HTML5 logo"></li>
                                        <li>CSS
                                            <img 
                                                src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Css_Picture.svg"
                                                alt="CSS3 logo"></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </a>
                <!-- FOR MEDIUM & LARGE SCREENS -->
                    <img class="project-preview-right"
                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Projects)_Medium_&_Large_Pp/Survey_Window_Light.svg"
                        alt="A preview of Jewel Keith's Survey Form Project">
                    <div class="project-info-left">
                        <p>I made a product feedback kind for a digital product I named "OnFocus", an application I target to make in the future. The survey's main goal is to gain other insights from users that could help improve the app better.</p>
                        <p class="languages">Languages:</p>
                        <ul>
                            <li>HTML
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Html_Picture.svg"
                                    alt="HTML5 logo"></li>
                            <li>CSS
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Css_Picture.svg"
                                    alt="CSS3 logo"></li>
                        </ul>
                    </div>
                <!-- CODEPEN BUTTON -->
                    <a class="codepen-link-button codepen-link-button-right" href="https://codepen.io/jkal_eunkyung/full/oNGRxGr" target="_blank">
                        <div class="codepen-button">
                            <div class="link-icon">
                                <i class="fas fa-link"></i>
                            </div>
                            <div class="view-on-codepen">
                                <p>View on CodePen</p>
                            </div>
                        </div>
                    </a>
                    <div class="empty-div-2-left"></div>
                </article>
    
                <article class="third-project">
                <!-- TECH DOC TITLE -->
                    <h2 class="project-title-left project-title">TECHNICAL <br> DOCUMENTATION</h2>
                    <div class="empty-div-1-right"></div>
                <!-- TECH DOC FLIP CARD -->
                    <a href="#flip-card-back5" class="flip-yeah">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                            <!-- FRONT -->
                                <div class="flip-card-front">
                                    <img 
                                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Projects)_Small_Pp/Technical_Window_W_pointer_Light_Front.svg"
                                        alt="A preview of Jewel Keith's Technical Documentation Page Project"
                                        style="width:280px;height:280px;">
                                </div>
                            <!-- BACK -->
                                <div class="flip-card-back5" id="flip-card-back5">
                                    <p>The topic for the page is JavaScript. To make it look a bit different, I tried to add a little spice by installing an off-canvas menu. I learned doing it from Jen Kramer, an amazing teacher from Frontend Masters.</p>
                                    <p class="languages">Languages:</p>
                                    <ul>
                                        <li>HTML
                                            <img 
                                                src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Html_Picture.svg"
                                                alt="HTML5 logo"></li>
                                        <li>CSS
                                            <img 
                                                src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Css_Picture.svg"
                                                alt="CSS3 logo"></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </a>
                <!-- FOR MEDIUM & LARGE SCREENS -->
                    <img class="project-preview-left"
                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Projects)_Medium_&_Large_Pp/Technical_Window_Light.svg"
                        alt="A preview of Jewel Keith's Technical Documentation Page Project">
                    <div class="project-info-right">
                        <p>The topic for the page is JavaScript. To make it look a bit different, I tried to add a little spice by installing an off-canvas menu. I learned doing it from Jen Kramer, an amazing teacher from Frontend Masters.</p>
                        <p class="languages">Languages:</p>
                        <ul>
                            <li>HTML
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Html_Picture.svg"
                                    alt="HTML5 logo"></li>
                            <li>CSS
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Css_Picture.svg"
                                    alt="CSS3 logo"></li>
                        </ul>
                    </div>
                <!-- CODEPEN BUTTON -->
                    <a class="codepen-link-button-left codepen-link-button" href="https://codepen.io/jkal_eunkyung/full/jOGgpQx" target="_blank">
                        <div class="codepen-button">
                            <div class="link-icon">
                                <i class="fas fa-link"></i>
                            </div>
                            <div class="view-on-codepen">
                                <p>View on CodePen</p>
                            </div>
                        </div>
                    </a>
                    <div class="empty-div-2-right">
                    </div>                       
                </article>
    
                <article class="fourth-project">
                <!-- PRODUCT LANDING PAGE TITLE -->
                    <h2 class=".project-title-right project-title">PRODUCT <br> LANDING PAGE</h2>
                    <div class="empty-div-1-left"></div>
                <!-- PRODUCT LANDING PAGE FLIP CARD -->
                    <a href="#flip-card-back6" class="flip-yeah">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                            <!-- FRONT -->
                                <div class="flip-card-front">
                                    <img 
                                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Projects)_Small_Pp/Product_Window_W_pointer_Light_Front.svg"
                                        alt="A preview of Jewel Keith's Product Landing Page Project"
                                        style="width:280px;height:280px;">
                                </div>
                            <!-- BACK -->
                                <div class="flip-card-back6" id="flip-card-back6">
                                    <p>A great introduction of my future application, "OnFocus", is shown here. I used Canva to design the logo and the overall web layout. I tried my best to make the page responsive as possible.</p>
                                    <p class="languages">Languages:</p>
                                    <ul>
                                        <li>HTML
                                            <img 
                                                src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Html_Picture.svg"
                                                alt="HTML5 logo"></li>
                                        <li>CSS
                                            <img 
                                                src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Css_Picture.svg"
                                                alt="CSS3 logo"></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </a>
                <!-- FOR MEDIUM & LARGE SCREENS -->
                    <img class="project-preview-right"
                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Projects)_Medium_&_Large_Pp/Product_Window_Light.svg"
                        alt="A preview of Jewel Keith's Product Landing Page Project">
                    <div class="project-info-left">
                        <p>A great introduction of my future application, "OnFocus", is shown here. I used Canva to design the logo and the overall web layout. I tried my best to make the page responsive as possible.</p>
                        <p class="languages">Languages:</p>
                        <ul>
                            <li>HTML
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Html_Picture.svg"
                                    alt="HTML5 logo"></li>
                            <li>CSS
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Css_Picture.svg"
                                    alt="CSS3 logo"></li>
                        </ul>
                    </div>
                <!-- CODEPEN BUTTON -->
                    <a class="codepen-link-button codepen-link-button-right" href="https://codepen.io/jkal_eunkyung/full/BamLqRX" target="_blank">
                        <div class="codepen-button">
                            <div class="link-icon">
                                <i class="fas fa-link"></i>
                            </div>
                            <div class="view-on-codepen">
                                <p>View on CodePen</p>
                            </div>
                        </div>
                    </a>
                    <div class="empty-div-2-left"></div>
                </article>
    
                <article class="feedback">
                <!-- FEEDBACK -->
                    <h3 class="h3-feedback-intro">Feedbacks are so much appreciated!</h3>
                    <img
                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Feedback_Icon_Light.svg" 
                        alt="Feedback icon">
                    <div class="feedback-info-button">
                        <p class="feedback-info-margin">Any comments on my projects? Please let me know so I can learn from any mistakes. I'd be really grateful.</p>
                    <!-- FEEDBACK BUTTON -->
                        <a class="fb-link-button" href="#contact">
                            <div class="feedback-button">
                                <div class="link-icon">
                                    <i class="fas fa-envelope"></i>
                                </div>
                                <div class="leave-a-message">
                                    <p>Leave a message</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </article>
            </section>
    
        <!-- ABOUT -->
            <section id="about" class="about">
            <!-- YELLOW WAVES BACKGROUND -->
                <div class="new-yellow-waves">
                    <img 
                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Waves_Yellow_Picture.svg"
                        alt="yellow waves design as background">
                    <div class="waves-section-intro">
                        <h2 class="p-intro-heading">A little bit about</h2>
                        <h1>MYSELF</h1>
                    </div>
                </div>
    
                <article>
                    <section class="code-design-solutions-problems-sub-section">
                        <ul class="code-design-pics-list">
                            <li>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Code_Design_Icon_Light.svg" 
                                    alt="A browser window with a code icon on it and on its right side, there's a color palette with a paint brush.">
                            </li>
                            <li>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Solutions_World_Problems_Icon_Light.svg" 
                                    alt="A half bulb and half gear in one icon with a world icon as its background.">
                            </li>
                        </ul>
                        <p>I'm passionate about learning to design and code. Through these skills, I'd love to work with people with the goal of solving real-world problems.</p>
                    </section>
    
                    <section class="one-step-sub-section">
                        <ul class="one-step-goal-flag-pics-list">
                            <li>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/One_Step_At_A_Time_Icon_Light.svg" 
                                    alt="A stick human climbing up the stairs.">
                            </li>
                            <li>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Goal_Flag_Icon_Light.svg" 
                                    alt="A flag pole represented as a goal.">
                            </li>
                        </ul>
                        <p>I believe in the idea that any goal can be achieved if we will take it one step at a time with consistency, persistence, and faith in ourselves, everyone, and everything else that matters.</p>
                    </section>
    
                    <section class="con-per-fai-sub-section">
                        <ul class="con-per-fai-pics-list">
                            <li>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Consistency_Icon_Light.svg" 
                                    alt="A calendar that has been checked every day with a pen.">
                            </li>
                            <li>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Peristence_Icon_Light.svg" 
                                    alt="A stick human running and sweating under the sun.">
                            </li>
                            <li>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Faith_Icon_Light.svg" 
                                    alt="Hands praying">
                            </li>
                        </ul>
                        <h3>Do you think so too?</h3>
                    </section>
                </article>
            </section>
    
        <!-- SKILLS -->
            <section id="skills" class="skills">
            <!-- YELLOW WAVES BACKGROUND -->
                <div class="new-yellow-waves">
                    <img 
                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Waves_Yellow_Picture.svg"
                        alt="yellow waves design as background">
                    <div class="waves-section-intro">
                        <h2 class="p-intro-heading">My learned and applied</h2>
                        <h1>SKILLS</h1>
                    </div>
                </div>
                <article>
                    <section class="gained-skills-sub-section">
                        <ul class="html-css-des-pics-list">
                            <li>
                                <p class="skill-label">DESIGN</p>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Design_Icon_Light.svg" 
                                    alt="Paint brush applying on a desktop screen">
                            </li>
                            <li>
                                <p class="skill-label">HTML</p>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Html_Picture.svg" 
                                    alt="HTML5 logo">
                            </li>
                            <li>
                                <p class="skill-label">CSS</p>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Css_Picture.svg" 
                                    alt="CSS3 logo">
                            </li>
                        </ul>
                        <h3 class="skills-label-p">Skills under my belt so far...</h3>
                        <p class="gained-skills-intro-p">
                            These are my gained skills and knowledge after absorbing free quality learning resources.
    
                            As of the moment, Canva is my main design tool. I use it to apply my current knowledge of customizing layout, colors, and typography of logos, icons, illustrations and webpages. Then through HTML5 (Hypertext Markup Language), I build up the content of the page. Finally, to make my webpages look pretty, I make use of CSS3 (Cascading Style Sheets) enabling me to integrate my designs.
                        </p>
                    </section>
    
                    <section class="currently-learning-sub-section">
                        <ul class="js-uxui-pics-list">
                            <li>
                                <p class="skill-label">JAVASCRIPT</p>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Javascript_Picture.svg" 
                                    alt="JavaScript logo">
                            </li>
                            <li>
                                <p class="skill-label">UX/UI</p>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Ux_Ui_Icon_Light.svg" 
                                    alt="User experience and user interface icon.">
                            </li>
                        </ul>
                        <h3 class="learning-skills-label-p">One step at a time...</h3>
                        <p class="currently-learning-intro-p">Currently, I'm taking on JavaScript, and learning more about User Experience and User Interface (UX/UI). Thrill or excitement is the emotion I feel when I think of the moment I'm applying them in my future projects. I can't wait to make more aesthetic, interactive and functional websites!</p>
                    </section>
                </article>
            </section> 
        
        <!-- EDUCATION -->
            <section id="education" class="education">
                <!-- YELLOW WAVES BACKGROUND -->
                <div class="new-yellow-waves">
                    <img 
                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Waves_Yellow_Picture.svg"
                        alt="yellow waves design as background">
                    <div class="waves-section-intro">
                        <h2 class="p-intro-heading">My never-ending experience,</h2>
                        <h1>EDUCATION</h1>
                    </div>
                </div>
                <article>
                    <section class="class-central-list-sub-section">
                        <ul class="list-brain-strengthening-pics-list">
                            <li>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Thank_You_Sparkle.svg" 
                                    alt="Thank you phrase with sparkles in the background.">
                            </li>
                            <li>                            
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Strengthening_Brain_Through_Studying.svg" 
                                    alt="Brain is lifting a barbell with an open book behind it.">
                            </li>
                        </ul>
                        <h3 class="grateful-label-p">Forever grateful...</h3>
                        <p class="class-central-list-intro-p">I have a list called "Web Development Resources" composed of high-quality learning materials resulting in the skills I have right now. The list is in the "Lists" section in my Class Central Profile. I accessed most of them through a simple internet connection, an account in their platform, financial aid, or the Github Student Developer Pack.</p>
                    <!-- LIST AT CLASS CENTRAL BUTTON -->
                        <a class="cc-link-button" href="https://www.classcentral.com/@EunkyungJKAL" target="_blank">
                            <div class="list-class-central-button">
                                <div class="link-icon">
                                    <i class="fas fa-list"></i>
                                </div>
                                <div class="view-on-class-central">
                                    <p>View on Class Central</p>
                                </div>
                            </div>
                        </a>
                    </section>
                    
                    <section class="blog-twitter-linkedin-sub-section">
                        <ul class="happy-sharing-writings-money-pics-list">
                            <li>
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Happy_To_Share.svg" 
                                    alt="A person happy with the idea of sharing.">
                            </li>
                            <li>                            
                                <img 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Writings_Money_Sharing.svg" 
                                    alt="A hand giving out writings and money.">
                            </li>
                        </ul>
                        <h3 class="actions-thank-you-label-p">Actions of my "Thank you!"...</h3>
                        <p class="blog-twitter-linkedin-intro-p">I continuously try to give back from the blessings of knowledge I received. Therefore, I'm always happy to share the resources I used and my explanations of the lessons I learned. I created a blog page wherein I publish my journal entries or articles for topics like web development, user interface, user experience, and productivity. Additionally, I use my social accounts like Twitter and LinkedIn to let the precious knowledge reach as many people as possible. Finally, I'd be so happy to pay or donate a part of my earnings in the future as support to the learning platforms and resources that have been super beneficial to my learning progress.</p>              
                    <!-- BLOG, TWITTER, LINKEDIN BUTTON -->
                        <a class="bg-link-button" href="#">
                            <div class="blog-button">
                                <div class="link-icon">
                                    <i class="fas fa-blog"></i>
                                </div>
                                <div class="view-on-blog">
                                    <p>View on Blog</p>
                                </div>
                            </div>
                        </a>
                        <a class="tr-link-button" href="https://twitter.com/jewelkeith_jk" target="_blank">
                            <div class="twitter-button">
                                <div class="link-icon">
                                    <i class="fab fa-twitter"></i>
                                </div>
                                <div class="view-on-twitter">
                                    <p>View on Twitter</p>
                                </div>
                            </div>
                        </a>
                        <a class="ln-link-button" href="https://www.classcentral.com/@EunkyungJKAL" target="_blank">
                            <div class="linkedin-button">
                                <div class="link-icon">
                                    <i class="fab fa-linkedin-in"></i>
                                </div>
                                <div class="view-on-linkedin">
                                    <p>View on LinkedIn</p>
                                </div>
                            </div>
                        </a>
                    </section>
                </article>
            </section>
    
        <!-- CONTACT -->
            <section id="contact" class="contact">
            <!-- YELLOW WAVES BACKGROUND -->
                <div class="new-yellow-waves">
                    <img 
                        src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Colorful-Others)_Icons_&_Pictures_Pp/Waves_Yellow_Picture.svg"
                        alt="yellow waves design as background">
                    <div class="waves-section-intro">
                        <h2 class="p-intro-heading">Let's build a meaningful</h2>
                        <h1>CONNECTION</h1>
                    </div>
                </div>
            <!-- CONTACT FORM -->
                <div class="intro-and-contact-form">
                    <h3>Care to share your great ideas? <br> I'd be glad to work with you!</h3>
                
                    <form id="contact-form" class="contact-form">
                    <!-- PERSONAL IDENTIFICATION -->
                        <fieldset>
                            <label id="name-label" for="name">Name: <input type="text" id="name" name="name" placeholder="Enter your name" required/></label>
                            <label id="email-label" for="email">Email: <input type="email" id="email" name="email" placeholder="Enter your email" required /></label>
                        </fieldset>
                    <!-- MESSAGE -->
                        <fieldset>
                            <label>Message:
                            <textarea name="useful-features" rows="4" cols="30" placeholder="Enter your message" required></textarea>
                            </label>
                        </fieldset>
                    <!-- SUBMIT BUTTON -->
                        <input id="submit" type="submit" value="SUBMIT" />
                    </form>
                </div>
            <!-- LINKS TO MY ACCOUNTS -->
                <div class="links-my-accounts">
                    <h3>You can find me at...</h3>
                    <ul class="contact-links-pics">
                        <li>
                            <a href="jewelkeith-jk.github.io/jewelkeith-jk/" target="_blank">
                                <img 
                                    class="contact-link-hover" 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Github_Icon_Light.svg" 
                                    alt="Github logo">
                                <p class="link-label">Github</p>
                            </a>
                        </li>
                        <li>
                            <a href="https://twitter.com/jewelkeith_jk" target="_blank">
                                <img 
                                    class="contact-link-hover" 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Twitter_Icon_Light.svg" 
                                    alt="Twitter logo">
                                <p class="link-label">Twitter</p>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.linkedin.com/in/jewel-keith-lobedica/" target="_blank">
                                <img 
                                    class="contact-link-hover" 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Linkedin_Icon_Light.svg" 
                                    alt="LinkedIn logo">
                                <p class="link-label">LinkedIn</p>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.freecodecamp.org/jkal_eunkyung" target="_blank">
                                <img 
                                    class="contact-link-hover" 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Freecodecamp_Icon_Light.svg" 
                                    alt="freeCodeCamp logo">
                                <p class="link-label">freeCodeCamp</p>
                            </a>
                        </li>
                        <li>
                            <a href="https://codepen.io/jkal_eunkyung/" target="_blank">               
                                <img
                                    class="contact-link-hover" 
                                    src="https://jewelkeith-jk.github.io/codepen-assets/Personal_Portfolio_Webpage/(Light-Others)_Icons_&_Pictures_Pp/Codepen_Icon_Light.svg" 
                                    alt="CodePen logo">
                                <p class="link-label">CodePen</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </section>
    
        <!-- FOOTER -->
            <footer class="footer">
                <div class="footer-info">
                    <h3>Thank you for visiting!</h3>
                    <p>Made with &#128151; by &copy; Jewel Keith <br> All rights reserved</p>
                </div>
            </footer>
        </div>
    <!-- TOP BUTTON -->
        <a href="#" class="top-button">
            <i class="fas fa-angle-double-up"></i>
        </a>
    </body>
    </html>
              
            
!

CSS

              
                /* 
  ========================================
            TABLE OF CONTENTS:
   I. VARIABLES
        A) COLORS
  II. GENERIC SITE STYLES 
  III. SHARED STYLES
        A) TYPOGRAPHY
            ALL SCREEN SIZES (320-1920+)
            SMALL SCREENS (320-499)
            SMALL & MEDIUM SCREENS (320-849)
            MEDIUM SCREENS (500-849)
            LARGE SCREENS (850-1359)
            LARGER SCREENS (1360-1920+)
        B) PORTFOLIO NAVIGATION
            SMALL & MEDIUM SCREENS (320-849)
            LARGE & LARGER SCREENS (850-1920+)
        C) BUTTONS
            CODEPEN, FEEDBACK, CLASS CENTRAL LIST, BLOG, TWITTER, LINKEDIN BUTTONS
            SUBMIT BUTTON
            BACK TO TOP BUTTON
            TYPOGRAPHY BUTTON
        D) ANIMATIONS
        E) YELLOW WAVES AS BG
            SMALL SCREENS (320-499)
            MEDIUM SCREENS (500-849)
            LARGE SCREENS (850-1359)
            LARGER SCREENS (1360-1920+)
        F) IMAGES SIZING
            HOME
            PROJECTS > FEEDBACK
            ABOUT
            SKILLS
            EDUCATION
            CONTACT
        G) SECTIONS' POSITIONING & SPACING (EXCEPT FOR HOME)
            FLEXBOX FOR MAIN AND SUB SECTIONS
            CHILDREN 100% FLEXBASIS SO ALL BE CENTERED UP TO 1200PX
            MAX WIDTH & HEIGHT, MARGIN FOR SECTIONS / SUBSECTIONS
  IV. CUSTOM STYLES
        A) HOME SECTION
            MEDIUM SCREENS (500-849)
            LARGE & LARGER SCREENS (850-1920+)
        B) PROJECTS SECTION
            SMALL SCREENS (320-499)
                FLIP CARD
                FEEDBACK
                DISPLAY OFF THE MEDIUM, LARGE & LARGER LAYOUT
            MEDIUM - LARGE SCREENS (620-1359)
                DISPLAY ON THE MEDIUM & LARGE LAYOUT
                FLEXBASIS FOR CONSUMED SPACE
                FILLING SPACE IN EMPTY DIVS
                STYLING LANGUAGES LIST & LOGOS, PROJECTS' PREVIEW 
                GRID FOR ARRANGING THE CELLS UNDER PROJECT ARTICLES 
                TEXT ALIGN LEFT FOR PROJ INFO LEFT & RIGHT 
                ADDING PADDING AT ONE SIDE TO PROJ INFOS 
                CENTERING THE PROJ PREVIEW & BUTTON 
            LARGER SCREENS LAYOUT (1360-1920) 
                EVEN PROJECTS MOVE TO LEFT SIDE 
                MARGIN BETWEEN SECTIONS 
        C) ABOUT SECTION
            CODE DESIGN SOLUTION SUB SEC 
            ONE STEP SUB SEC 
            CON-PER-FAI-SUB-SEC 
            LARGER SCREENS LAYOUT (1360-1920) 
        D) SKILLS SECTION
            GAINED SKILLS SUB SEC
            CURRENTLY LEARNING SUB SECTION 
            LARGE SCREEN LAYOUT (1360-1920) 
        E) EDUCATION SECTION
            CLASS CENTRAL LIST SUB SECTION, BLOG TWITTER LINKEDIN SUB SECTION
            LARGE SCREEN LAYOUT (1360-1920) 
        F) CONTACT SECTION
            FORM
            LINKS
        G) FOOTER
            MEDIUM SCREENS (500-849)
            LARGER SCREENS (1360-1920+)
   V. CREDITS FOR RESOURCES USED
	    A) FLIP CARD IN SMALL SCREENS: 
            @w3schools
        B) ANIMATION: 
                @animista
        C) YELLOW WAVES AS BACKGROUND FOR MAIN HEADINGS: 
                @haikei
        D) ICONS / PICTURES / LOGOS: 
                @font awesome
                @canva 
                @github
                @freecodecamp
        E) OFF CANVAS MENU (CSS ONLY):
                @frontend masters
        F) BACK TO TOP BUTTON (CSS ONLY):
                @freeCodeCamp News/Articles
        G) FONT FAMILY:
                @google
        H) BORDER BOX:
                @brumm
        I) DESIGN TOOLS:
                @canva
                @open color
  ========================================
*/ 

/*
  ========================================
  I. VARIABLES:
    COLORS
  ========================================
*/ 
:root {
    --color-white: #FFFFFF;
    --color-different-white: #EDF2F7;
    --color-black: #343A40;
    --color-grey: #737373;
    --color-yellow: #FFF3BF;
    --color-yellow-opacity: rgba(255, 243, 191, 0.8);
    --color-yellow-brighter: #FFE066;
    --color-nav-ul-bg: #1a1a1a;
    --color-nav-li-border: #383838;
    --color-menu-backdrop: rgba(0,0,0,.85);
}

/*
  ========================================
  II. GENERIC SITE STYLES
  ========================================
*/
/* border box to always account border and padding when sizing*/
    html {
        box-sizing: border-box;
        height: 100%;
    }

    *, *::before, *::after {
        box-sizing: inherit;
    }
/* avoiding instant jump to diff sections */
    html {
            scroll-behavior: smooth;
    }

body {
    height: 100%;
    padding: 0;
    margin: 1rem auto;
    background-color: var(--color-white);
    /* to remove horizontal scrolling */
        overflow-x: hidden;
    /*to position top button*/
        text-align: right; 
}

/* since a pure css top button is used I have to adjust the whole content's margin */
.wrapper {
        margin: 0 1rem -2rem 1rem;
}
@media (min-width:1360px) {
    body {
        background-color: var(--color-different-white);
    }
    /* to center the content & to add a shadow on the whole content when viewed in a large screen - cool */
        .wrapper {
            margin: 0 auto;
            box-shadow:
                1.6px 1.6px 1.2px rgba(0, 0, 0, 0.015),
                3.4px 3.4px 2.7px rgba(0, 0, 0, 0.022),
                5.8px 5.8px 4.6px rgba(0, 0, 0, 0.027),
                8.7px 8.7px 6.9px rgba(0, 0, 0, 0.031),
                12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
                17.7px 17.7px 14.2px rgba(0, 0, 0, 0.039),
                25.1px 25.1px 20.1px rgba(0, 0, 0, 0.043),
                36.5px 36.5px 29.2px rgba(0, 0, 0, 0.048),
                56.3px 56.3px 45px rgba(0, 0, 0, 0.055),
                100px 100px 80px rgba(0, 0, 0, 0.07)
                ;
        }
}

/*
  ========================================
  III. SHARED:
    A) TYPOGRAPHY
  ========================================
*/
/* ALL SCREEN SIZES (320-1920+) */
    /* setting font family & color for all text */
        body {
            font-family: 'Montserrat', Arial, Verdana, "Trebuchet MS", sans-serif;
            color: var(--color-black);
            margin: 0 auto;
        }
    /* centering all text */
        .wrapper {
            text-align: center;
            max-width: 1374px;
            background-color: var(--color-white);
        }
    /* align some text */
        .home,
        .about .code-design-solutions-problems-sub-section p,
        .about .one-step-sub-section p,
        .skills .gained-skills-intro-p,
        .skills .currently-learning-intro-p,
        .education .class-central-list-intro-p,
        .education .blog-twitter-linkedin-intro-p {
            text-align: left;
        }
    /* adding left border on some text for easier reading */
        .about .code-design-solutions-problems-sub-section p,
        .about .one-step-sub-section p,
        .skills .gained-skills-intro-p,
        .skills .currently-learning-intro-p,
        .education .class-central-list-intro-p,
        .education .blog-twitter-linkedin-intro-p {
            border-left: 5px solid var(--color-grey);
            padding-left: 1rem;
        }
    /* removing all possible deafult margin and padding */
        h1, 
        h2,
        h3,
        p,
        label,
        input,
        button,
        textarea {
            margin: 0;
            padding: 0;
        }
    /* color for all links */
        a {
            text-decoration: none;
            color: var(--color-black);
        }
    /* background color for links in text */
        .link-in-text {
            background-color: var(--color-yellow-opacity);
        }
    /* contact form text */
        label,
        input,
        button,
        textarea {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
        }
        ::placeholder {
            color: var(--color-white);
            opacity: 1;
        }

/* SMALL SCREENS (320-499) */
    /* font sizes, style, weight  */
        h1 {
            font-size: 2.3rem;
            font-weight: 800;
            font-style: italic;
        }
        h2,
        h3 {
            font-size: 1.15rem;
            font-weight: 600;
        }
        .project-title {
            font-size: 1.4rem;
        }
        p,
        .skill-label,
        label {
            font-size: 1rem; /* just making sure lol */
            font-weight: 400;
        }
        .skills .skill-label {
            font-weight: bold;
        }
        .contact label {
            font-weight: 600;
        }
        .contact .link-label {
            font-size: 0.8rem;
        }

/* SMALL & MEDIUM SCREENS (320-849) */
    /* off canvas menu - toggle of on icons */
        .fa-bars,
        .fa-close {
            font-size: 2rem;
        }
        @media (min-width: 500px) {
            .fa-bars,
            .fa-close {
                font-size: 2.5rem;
            }
            .contact .link-label {
                font-size: 1rem;
            }
        }
        
        @media (min-width: 850px) {
            .fa-bars {
                font-size: 3rem;
            }
            .header .nav-link {
                font-size: 1.3rem;
                font-weight: 600;
            }
        }

/* MEDIUM SCREENS (500-849) */
    @media (min-width: 580px) {
        /* yellow waves intro */
            .waves-section-intro h2 {
                font-size: 1.4rem;
            }
            .waves-section-intro h1 {
                font-size: 2.8rem;
            }
    }
    @media (min-width: 630px) {
        /* yellow waves intro */
            .waves-section-intro h2 {
                font-size: 1.8rem;
            }
            .waves-section-intro h1 {
                font-size: 3.5rem;
            }
    }
    @media (min-width: 700px) {
        /* headings, sub-headings, project title */
            h1 {
                font-size: 2.8rem;
            }
            h2,
            h3,
            .skill-label {
                font-size: 1.4rem;
            }
            .project-title {
                font-size: 1.6rem;
            } 
    }
    @media (min-width: 737px) {
        /* paragraphs */
            p {
                font-size: 1.05rem;
            }
    }
    @media (min-width: 769px) {
        /* paragraphs */
            p {
                font-size: 1.1rem;
            }
    }
    @media (min-width: 801px) {
        /* headings, sub-headings, project title */
            h1 {
                font-size: 3.5rem;
            }
            h2,
            h3 {
                font-size: 1.6rem;
            }
            .project-title {
                font-size: 1.8rem;
            }
    }

/* LARGE SCREENS (850-1359) */
    @media (min-width: 850px) {
        /* paragraphs */
            p {
                font-size: 1.15rem;
            }
            .home p {
                padding-bottom: 1rem;
            }
        /* yellow waves intro */
            .waves-section-intro h2 {
                font-size: 2rem;
            }
            .waves-section-intro h1 {
                font-size: 4.5rem;
            }
    }
    @media (min-width: 1100px) {
        /* yellow waves intro */
            .waves-section-intro h2 {
                font-size: 3rem;
            }
            .waves-section-intro h1 {
                font-size: 5.5rem;
            }
    }

/* LARGER SCREENS (1360-1920+) */
    @media (min-width: 1360px) {
        /* yellow waves intro */
            .waves-section-intro h2 {
                font-size: 3rem;
            }
            .waves-section-intro h1 {
                font-size: 5.5rem;
            }
    }

/*
  ========================================
  III. SHARED:
    B) PORTFOLIO NAVIGATION
  ========================================
*/
/* SMALL & MEDIUM SCREENS (320-849) */
    /* display off the second nav bar */
        .nav-bar {
            display: none;
        }
    /* for the toggle meanu to be rightly positioned */
        header .row {
            display: flex;
            flex-flow: row nowrap;
        }
        .header {
            margin: 1rem 1rem 0 1rem;
        }
    /* For screen reader only https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html for more info */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            border: 0;
        }
    /* logo sizing to fit in the nav menu */
        .header nav li:first-child img {
            width: 70px;
            height: auto;
        }
    /* to rightly position the menu toggle - hamburger button, 
    & adding color to it */
        .menu-toggle {
            color: var(--color-black);
            margin-left: -1rem;
            position: fixed;
            z-index: 998;
        }
    /* menu toggle changes color when hovered */
        .menu-toggle:hover,
        .menu-toggle:focus {
            color: var(--color-grey);
        }
    /*  > menu set to fixed and 100% in height so users can't scroll away from it and it'll occupy 100% of the screen height.
        > display, left - to have scrollbars appear when needed
        > overflow to have possible long nav names to be fully visible
        > z-index is for layering the main-menu, close icon button and ul (CSS line 524), and the backdrop (CSS line 537) */
        .main-menu {
            position: fixed;
            height: 100%;
            display: none;
            left: -200px;
            overflow-x: visible;
            overflow-y: auto;
            transition: left 0.3s ease;
            top: 0;
            z-index: 999;
        }
    /*  > turn off bullets
        > set bg color of flyout menu
        > "width" here and the "left" property in .main-menu should be the same absolute manner */
        .main-menu ul {
            list-style: none;
            background-color: var(--color-nav-ul-bg);
            width: 200px;
            margin: 0;
            padding-top: 2.5em;
            padding-left: 0;
            min-height: 100%;
        }
    /*  removes underline in links */
        .main-menu a {
            text-decoration: none;
        }
    /*  > setting the "a" in li (< ul < nav) to grid so i can arrange the icons and labels within it
        > set some padding and marge to rightly position the links
        > set some color on link text
        > added border on top of each link for easier reading */
        .main-menu .nav-link {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: 25% 75%;
            padding: 0.75rem;
            padding-left: 1.25rem;
            margin: 0;
            color: #fff;
            border-bottom: 1px solid var(--color-nav-li-border);
        }
    /* added border top on "projects" link for easier reading */
        /* .header nav .projects-link {
            border-top: 1px solid var(--color-nav-li-border);
        } */
     /*positioning of icons in first column */
        .main-menu .nav-link i {
            grid-column: 1/ span 1;
        }
    /*positioning of p and logo img in second column */
        .main-menu .nav-link p,
        .main-menu .nav-link img {
            grid-column: 2/ span 2;
        } 
    /* flex for home icon to rightly position it with the logo img */
        .main-menu .nav-link .fa-home {
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
            align-content: center;
        }
    /* setting styles for the close X icon */
        .main-menu .fa-close {
            padding: 1rem;
            text-decoration: none;
            color: var(--color-white);
        }
    /* setting a small margin on top of the logo img to have space betweeen it and the close icon */
        .main-menu .first-link {
            margin-top: 2rem;
        }
    /* size and alignment of the text in links for easier reading */
        .main-menu a {
            font-size: 1.2rem;
            text-align: left;
        }
    /* to slowly zoom in on logo img when hovered */
        .header nav li:first-child img:hover {
            transform: scale(1.1);
            transition: 0.5s;
        }
    /* to slowly zoom in on links when hovered */
        .main-menu a:hover,
        .main-menu a:focus {
            background: var(--color-black);
            transform: scale(1.1);
            transition: 0.5s;
        }
    /*  > to position the close icon button in the upper right corner */
        .main-menu .menu-close {
            position: absolute;
            right: 0;
            top: 0;
        }
    /*  
    Q1: How is the menu showed when clicked?
        > when users target (or click) the main-menu (hamburger icon button), the navigation menu shows because we set the left property to 0 from -200px (CSS line 431)
    Q2: But how does the main-menu (hamburger icon link button) target the off-canvas menu or the hidden nav bar?
        >   follow HTML line 23: 
                <a href="#main-menu" id="main-menu-toggle" class="menu-toggle" aria-label="Open main menu">
        >   if it's targeted (or clicked), the href targets the main-menu, both class and ID. follow HTML line 29:
                <nav id="main-menu" class="main-menu" aria-label="main menu">       */
        .main-menu:target {
            display: block;
            left: 0;
            outline: none;
        }
    
    /* this brings the close X button icon to the top of ul so it can be clicked */
        .main-menu:target .menu-close {
            z-index: 1001;
        }
    /* this brings ul to the top of main menu so it can be clicked */
        .main-menu:target ul {
            position: relative;
            z-index: 1000;
        }
    /* 
    > "+ .backdrop" is used instead of ".main-menu:target:after" to make it clickable letting users easly go back to the main content without clicking the close X button 
    > the backdrop is the link on HTML line 80: 
        <a href="#main-menu-toggle" class="backdrop" hidden tabindex="-1"></a>
    > here it's set as block & fixed
    > it's moved below of the main menu (notice the z-index values)
    > set height and width to 100% so that it occupies the remaining space of the screen after main menu is displayed
    > gave it a light grey color to distinguish it from the main menu and and to make the main content slightly be seen for easier navigation */
        .main-menu:target + .backdrop {
            position: fixed;
            display: block;
            left: 0;
            top: 0;
            z-index: 998;
            width: 100%;
            height: 100%;
            background: var(--color-menu-backdrop);
            cursor: default;
        }

/* LARGE & LARGER SCREENS (850-1920+) */
    @media (min-width: 850px) {
        /* display off for the nav menu in small screen */
            .small-medium-nav,
            .header .home-link p {
                display: none;
        }
        /* header styling */
            .header {
                display: flex;
                flex-flow: row wrap;
                justify-content: center;
                align-items: center;
                align-content: center;
            }
        /* navigation bar */
            .header nav {
                flex-basis: 100%;
                width: 100%;
                height: 70px;
                background-color: var(--color-black);
                position: fixed;
                top: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 999;
            }
        /* removing refault styles for ul's */
            .header nav ul {
                list-style-type: none;
                padding: 0;
                margin: 0;
                background-color: var(--color-black);
            }
        /* flex for main ul list */
            .header nav .main-ul-list {
                flex-basis: 100%;
                display: flex;
                flex-flow: row wrap;
                justify-content: center;
            }
        /* first main li */
            .header nav .first-main-li {
                flex-basis: 15%;
            } 
            /* first nav grp */
                .header nav .nav-grp1 {
                    display: flex;
                    flex-flow: row wrap;
                    justify-content: center;
                    align-items: center;
                    align-content: center;
                }
        /* second main li */
            .header nav .second-main-li {
                flex-basis: 85%;
            }
            /* second nav grp */
                .header nav .nav-grp2 {
                    display: flex;
                    flex-flow: row wrap;
                    justify-content: flex-end;
                    align-items: center;
                    gap: 2rem;
                }
                .header nav .nav-grp2 li:last-child {
                    margin-right: 2rem;
                }
        /* styles for links */
            .header .nav-link {
                margin: 0;
                padding: 0;
                margin-bottom: -0.2rem;
                text-decoration: none;
                display: block;
                color: var(--color-white);
            }
            .header .nav-link p {
                font-size: 1.1rem;
            }
            .header nav .nav-grp1 img {
                width: 90px;
                height: auto;
            }
            .header .nav-link:hover {
                transform: scale(1.1);
                transition: 0.5s;
            }
        /* logo sizing */
            .header nav li:first-child img {
                width: 90px;
            }
    }

    @media (min-width: 1300px) {
        /* nav links */
            .header .nav-link p {
                font-size: 1.5rem;
            }
        /* bigger size for logo */
            .header nav li:first-child img {
                width: 106px;
                height: auto;
            }
        /* bigger nav bar */
            .header nav {
                height: 70px;
            }
    }

/*
  ========================================
  III. SHARED: 
    C) BUTTONS
  ========================================
*/
/* CODEPEN, FEEDBACK, CLASS CENTRAL LIST, BLOG, TWITTER, LINKEDIN BUTTONS */
    .codepen-link-button,
    .fb-link-button,
    .cc-link-button,
    .bg-link-button,
    .tr-link-button,
    .ln-link-button {
        width: 280px;
        height: 50px;
    }
    .codepen-button,
    .feedback-button,
    .list-class-central-button,
    .blog-button,
    .twitter-button,
    .linkedin-button {
        /* looks */
        width: 100%;
        height: 100%;
        border-radius: 10px;
        background-color: var(--color-black);
        color: var(--color-white);
        /* positioning */
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 20% 80%;
    }
    .codepen-button i,
    .feedback-button i,
    .list-class-central-button i,
    .blog-button i,
    .twitter-button i,
    .linkedin-button i,
    .codepen-button p,
    .feedback-button p,
    .list-class-central-button p,
    .blog-button p,
    .twitter-button p,
    .linkedin-button p  {
        grid-row: 1/ span 1;
    }
    .codepen-button i,
    .feedback-button i,
    .list-class-central-button i,
    .blog-button i,
    .twitter-button i,
    .linkedin-button i {
        grid-column: 1/ span 1;
    }
    .codepen-button p,
    .feedback-button p,
    .list-class-central-button p,
    .blog-button p,
    .twitter-button p,
    .linkedin-button p  {
        grid-column: 2/ span 1;
    }
    .codepen-button .link-icon,
    .feedback-button .link-icon,
    .list-class-central-button .link-icon,
    .blog-button .link-icon,
    .twitter-button .link-icon,
    .linkedin-button .link-icon,
    .codepen-button .view-on-codepen,
    .feedback-button .leave-a-message,
    .list-class-central-button .view-on-class-central,
    .blog-button .view-on-blog,
    .twitter-button .view-on-twitter,
    .linkedin-button .view-on-linkedin {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        align-content: center;
    }
    .codepen-button .link-icon,
    .feedback-button .link-icon,
    .list-class-central-button .link-icon,
    .blog-button .link-icon,
    .twitter-button .link-icon,
    .linkedin-button .link-icon {
        justify-content: flex-end;
    }
    .codepen-button .view-on-codepen,
    .feedback-button .leave-a-message,
    .list-class-central-button .view-on-class-central,
    .blog-button .view-on-blog,
    .twitter-button .view-on-twitter,
    .linkedin-button .view-on-linkedin {
        justify-content: flex-start;
        margin-left: 1.5rem;
    }

/* SUBMIT BUTTON */
    #contact input[type="submit"] {
        display: block;
        width: 100%;
        max-width: 550px;
        margin: 1em auto;
        height: 50px;
        font-size: 1.1rem;
        background-color: var(--color-yellow-brighter);
        border-color: var(--color-yellow-brighter);
        border-radius: 0.25rem;
        cursor: pointer;
        color: var(--color-black);
        font-weight: 600;
        font-size: 1.25rem;
    }
    #contact input[type="submit"]:hover {
        background-color: var(--color-black);
        border-color: var(--color-black);
        color: var(--color-white);
    }

/* BACK TO TOP BUTTON */
    .top-button {
        place-self: end;
        position: sticky;
        bottom: 20px;
        margin-right: 1.5rem;
        margin-top: 100vh;
        text-decoration: none;
        padding: 0px;
        color: var(--color-black);
        font-size: 3rem;
    }
    @media (min-width: 850px) {
        .top-button {
            bottom: 40px;
            margin-right: 3rem;
        }
    }
    @media (min-width:1300px) {
        .top-button {
            bottom: 50px;
            margin-right: 4rem;
            font-size: 5rem;
        }
    }

/* TYPOGRAPHY BUTTON */
    .codepen-button p,
    .feedback-button p,
    .list-class-centralbutton p,
    .blog-button p,
    .twitter-button p,
    .linkedin-button p {
        font-size: 1.2rem;
    }
    .codepen-button .link-icon,
    .feedback-button .link-icon,
    .cc-link-button .link-icon,
    .bg-link-button .link-icon,
    .tr-link-button .link-icon,
    .ln-link-button .link-icon {
        font-size: 1.75rem;
    }
    @media (min-width:850px) {
        .view-on-class-central p {
            font-size: 1.05rem;
        }
    }
    #projects .feedback-button .leave-a-message p {
        margin: 0;
    }
    .education .view-on-class-central {
        font-size: 1.05rem;
    }

    .codepen-button:hover,
    .feedback-button:hover,
    .list-class-central-button:hover,
    .blog-button:hover,
    .twitter-button:hover,
    .linkedin-button:hover {
        color: var(--color-black);
        background-color: var(--color-yellow);
        border: 1px solid var(--color-black);
    }


/*
  ========================================
  III. SHARED:
    D) ANIMATIONS
  ========================================
*/
/* ----------------------------------------------
 * Generated by Animista on 2022-2-3 15:6:36
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
 .slide-in-left {
    -webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
            animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
}
    @-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }

  .contact-link-hover:hover {
    transform: scale(1.1);
    transition: 0.5s;
}

/*
  ========================================
  III. SHARED: 
    E) YELLOW WAVES AS BG
  ========================================
*/
/* SMALL SCREENS (320-499) */
    .new-yellow-waves {
        margin-bottom: 5rem;
        margin-top: 4rem;
    }
    .new-yellow-waves img {
        height: 142px;
        width: auto;
    }
    .new-yellow-waves .waves-section-intro {
        margin-top: -6.5rem;
    }

    @media (min-width: 410px) {
        .new-yellow-waves img {
            height: 173px;
            width: auto;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -7.5rem;
        }
    }

/* MEDIUM SCREENS (500-849) */
    @media (min-width: 500px) {
        .new-yellow-waves img {
            height: 185px;
        }
    }
    @media (min-width: 530px) {
        .new-yellow-waves img {
            height: 200px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -8.5rem;
        }
    }
    @media (min-width: 575px) {
        .new-yellow-waves img {
            height: 220px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -9.5rem;
        }
    }
    @media (min-width: 630px) {
        .new-yellow-waves img {
            height: 245px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -10.5rem;
        }
    }
    @media (min-width: 700px) {
        .new-yellow-waves img {
            height: 280px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -11.75rem;
        }
        .new-yellow-waves {
            margin-bottom: 7rem;
        }
    }
    @media (min-width: 800px) {
        .new-yellow-waves img {
            height: 300px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -11.75rem;
        }
    }

/* LARGE SCREENS (850-1359) */
    @media (min-width: 850px) {
        .new-yellow-waves img {
            height: 333px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -13.5rem;
        }
    }
    @media (min-width: 950px) {
        .new-yellow-waves img {
            height: 351px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -14.5rem;
        }
        .new-yellow-waves {
            margin-bottom: 9rem;
        }
    }
    @media (min-width: 1000px) {
        .new-yellow-waves img {
            height: 386px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -15.5rem;
        }
    }
    @media (min-width: 1100px) {
        .new-yellow-waves img {
            height: 421px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -17.5rem;
        }
    }
    @media (min-width: 1200px) {
        .new-yellow-waves img {
            height: 456px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -18.5rem;
        }
        .new-yellow-waves {
            margin-top: 3rem;
        }
    }
    @media (min-width: 1300px) {
        .new-yellow-waves img {
            height: 490px;
        }
        .new-yellow-waves .waves-section-intro {
            margin-top: -20.5rem;
        }
    }

/* LARGER SCREENS (1360-1920+) */
    @media (min-width: 1360px) {
        .new-yellow-waves {
            margin-top: 3rem;
            margin-bottom: 11rem;
        }
    }

/*
  ========================================
  III. SHARED: 
    F) IMAGES SIZING
  ========================================
*/
/* HOME */
    .jewel-keith-dp {
        width: 100%;
        max-width: 350px;
        height: auto;
        /* margin-bottom: 1rem; */
    }
/* PROJECTS > FEEDBACK */
    .feedback img {
        width: 150px;
        max-width: 200px;
        height: auto;
}

/* ABOUT */
    .code-design-pics-list img {
        width: 100%;
        max-width: 200px;
        height: auto;
        margin-bottom: 1rem;
    }
    .one-step-goal-flag-pics-list img {
        width: 100%;
        max-width: 200px;
        height: auto;
    }
    .con-per-fai-pics-list img {
        width: 100%;
        max-width: 150px;
        height: auto;
    }

/* SKILLS */
    .html-css-des-pics-list img,
    .js-uxui-pics-list img {
        height: 100%;
        max-height: 80px;
        width: auto;
    }
    @media (min-width: 580px) {
        .html-css-des-pics-list img,
        .js-uxui-pics-list img {
            max-height: 100px;
        }
    }

/* EDUCATION */
    .list-brain-strengthening-pics-list img,
    .happy-sharing-writings-money-pics-list img {
        width: 100%;
        max-width: 200px;
        height: auto;
        margin-bottom: 1rem;
    }

/* CONTACT */
    .contact-links-pics img {
        width: 80px;
        height: auto;
    } 

/*
  ========================================
  III. SHARED: 
    G) SECTIONS' POSITIONING & SPACING (EXCEPT FOR HOME)
  ========================================
*/
/* FLEXBOX FOR MAIN AND SUB SECTIONS */
    .projects,
    .projects article,
    .flip-yeah,
    .feedback,
    .about,
    .about article,
    .skills,
    .skills article,
    .education,
    .education article,
    .contact {
        padding: 0;
        margin: 0 auto; 
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        gap: 1rem;   
    }

    .projects .feedback {
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

    .h3-feedback-intro,
    .feedback img {
        flex-basis: 100%;
    }

/* CHILDREN 100% FLEXBASIS SO ALL BE CENTERED UP TO 1200PX*/
    /* projects */
        .projects article {
            flex-basis: 100%;
        }
    /* about */
        .about article,
        .about .code-design-solutions-problems-sub-section,
        .about .one-step-sub-section,
        .about .con-per-fai-sub-section {
            flex-basis: 100%;
        }
    /* skills */
        .skills article {
            flex-basis: 100%;
        }
    /* education */
        .education article {
            flex-basis: 100%;
        }
    /* contact */
        .contact .intro-and-contact-form,
        .contact .links-my-accounts  {
            flex-basis: 100%;
        }
        .contact .links-my-accounts {
            max-width: 610px;
        }

/* MAX WIDTH & HEIGHT, MARGIN FOR SECTIONS / SUBSECTIONS */
    /* projects */
        .projects {
            max-width: 1600px;
            margin: 0 auto;
        }
        .projects article {
            flex-basis: 100%;
            max-width: 610px;
            margin: 0 auto;
            margin-left: 1rem;
            margin-right: 1rem;
        }
        .projects .project-title {
            flex-basis: 100%;
        }
        
        .projects article {
            margin-bottom: 1rem;
        }
    /* about */
        .about article {
            max-width: 1600px;
        }
        .about article section {
            max-width: 610px;
            margin: 0 auto;
        }

        .about .code-design-solutions-problems-sub-section,
        .about .one-step-sub-section {
            margin-bottom: 3rem;
        }

        @media (min-width: 760px) {
            .about article {
                margin-left: 3rem;
                margin-right: 3rem;
            }
        }
    /* skills */
        .skills article {
            max-width: 1600px;
            margin: 0 auto;
        }
        .skills article section {
            flex-basis: 100%;
            margin: 0 auto;
        }
        .skills .gained-skills-intro-p,
        .skills .currently-learning-intro-p {
            max-width: 610px;
            margin: 0 auto;
        }
        .skills .skill-label {
            margin-bottom: 0.5rem;
        }
        @media (min-width: 1360px) {
            .skills .currently-learning-sub-section {
                max-height: 324px;
            }
        }
    /* education */
        .education article {
            max-width: 1600px;
            margin: 0 auto;
        }
        .education article section {
            flex-basis: 100%;
            max-width: 700px;
            margin: 0 auto;
        }
        .education .class-central-list-intro-p,
        .education .blog-twitter-linkedin-intro-p {
            max-width: 610px;
        }

/*
  ========================================
  IV. CUSTOM: 
    A) HOME SECTION
  ========================================
*/
.empty-div-home {
    display: none;
}
.home {
    margin-top: 4rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 2rem;
}
.jewel-keith-intro-home,
.home img {
    flex-basis: 100%;
}

/* MEDIUM SCREENS (500-849) */
    @media (min-width:620px) {
        .home img {
            order: 1;
        }
        .jewel-keith-intro-home {
            order: 2;
        }
        .jewel-keith-intro-home {
            flex-basis: 70%;
            max-width: 325px;
        }
        .home img {
            flex: 30%;
            max-width: 200px;
        }
    }
    @media (min-width:700px) {
        .home img {
            max-width: 220px;
        }
    }
    @media (min-width:801px) {
        .home img {
            max-width: 250px;
        }
        .jewel-keith-intro-home {
            max-width: 447px;
        }
    }

/* LARGE & LARGER SCREENS (850-1920+) */
    @media (min-width:850px) {
        .home {
            margin-top: 7rem;
        }
    }
    @media (min-width: 1100px) {
        .home img {
            max-width: 360px;
        }
        .jewel-keith-intro-home {
            max-width: 631px;
        }
        .home h1 {
            font-size: 5.5rem;
        }
        .home h2 {
            font-size: 3rem;
        }
        .home p {
            font-size: 1.5rem;
        }
        .home {
            margin-top: 8rem;
        }
    }

/*
  ========================================
  IV. CUSTOM: 
    B) PROJECTS SECTION
  ========================================
*/
/* SMALL SCREENS (320-499) */
    /* 1) FLIP CARD */
        .flip-card {
            width: 280px;
            height: 280px;
            perspective: 1000px;
            margin: 0.4rem 0 0.4rem 0;
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }

        .flip-card-front, 
        .flip-card-back5, 
        .flip-card-back6,
        .flip-card-back3,
        .flip-card-back4 {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .flip-card-back5,
        .flip-card-back6,
        .flip-card-back3,
        .flip-card-back4 {
            transform: rotateY(180deg);
            background-image: url('../img/(Light-Projects)_Small_Pp/Projects_Window_W_lightbg_Back.png');
            background-size: 100% 100%;
        }

        .flip-card-back5 p,
        .flip-card-back6 p,
        .flip-card-back3 p,
        .flip-card-back4 p {
            font-size: 0.9rem;
            text-align: left;
            padding: 2.4rem 1rem 0 1rem;
            font-style: italic;
        }
        .flip-card-back5 .languages,
        .flip-card-back6 .languages,
        .flip-card-back3 .languages,
        .flip-card-back4 .languages {
            padding: 0.4rem 1rem 0 1rem;
        }

        .flip-card-back5 .languages,
        .flip-card-back6 .languages,
        .flip-card-back3 .languages,
        .flip-card-back4 .languages,
        .flip-card-back5 li,
        .flip-card-back6 li,
        .flip-card-back3 li,
        .flip-card-back4 li {
            font-style: normal;
            font-weight: bold;
        }

        .flip-card-back5 ul,
        .flip-card-back6 ul,
        .flip-card-back3 ul,
        .flip-card-back4 ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row wrap;
        }

        .flip-card-back5 li,
        .flip-card-back6 li,
        .flip-card-back3 li,
        .flip-card-back4 li {
            text-align: center;
            flex-basis: 10%;
            font-size: 0.7rem;
            padding: 0.3rem 0 0 1rem;
        }

        .flip-card-back5 li:first-child,
        .flip-card-back6 li:first-child,
        .flip-card-back3 li:first-child,
        .flip-card-back4 li:first-child {
            padding: 0.3rem 0 0 2rem;
        }

        .flip-card-back5 img,
        .flip-card-back6 img,
        .flip-card-back3 img,
        .flip-card-back4 img {
            width: 40px;
            height: auto;
        }
        
    /* 2) FEEDBACK */
        .feedback p {
            margin: 0 1rem 0 1rem;
        }
        .feedback-info-button {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
        }
        .feedback-info-button .feedback-info-margin {
            margin-top: 0.5rem;
            margin-bottom: 1rem;
        }

        @media (min-width: 410px) {
            .feedback-info-button .feedback-info-margin {
                flex-basis: 79%;
            }
        }

    /* DISPLAY OFF THE MEDIUM, LARGE & LARGER LAYOUT */
        .projects .empty-div-1-left,
        .projects .empty-div-1-right,
        .projects .empty-div-2-left,
        .projects .empty-div-2-right,
        .project-preview-left,
        .project-preview-right,
        .project-info-right,
        .project-info-left {
            display: none;
        }

/* MEDIUM - LARGE SCREENS (620-1359) */
    @media (min-width: 620px) {
    /* DISPLAY OFF THE SMALL LAYOUT FOR MEDIUM AND LARGE */
            .flip-yeah {
                display: none;
        }

    /* DISPLAY ON THE MEDIUM & LARGE LAYOUT  */
        .projects .empty-div-1-left,
        .projects .empty-div-1-right,
        .projects .empty-div-2-left,
        .projects .empty-div-2-right,
        .project-preview-left,
        .project-preview-right,
        .project-info-right,
        .project-info-left {
            display: block;
        }

    /* FLEXBASIS FOR CONSUMED SPACE */
        .project-title-left,
        .empty-div-1-right,
        .project-preview-left,
        .project-info-right,
        .codepen-link-button-left,
        .empty-div-2-right,
        .empty-div-1-left,
        .project-title-right,
        .project-info-left,
        .project-preview-right,
        .empty-div-2-left
        .codepen-link-button-right {
            flex-basis: 45%;
        }

    /* FILLING SPACE IN EMPTY DIVS */
        .empty-div-1-left,
        .empty-div-1-right,
        .empty-div-2-left,
        .empty-div-2-right {
            height: 25px;
            width: auto;
        }

    /* STYLING LANGUAGES LIST & LOGOS, PROJECTS' PREVIEW */
        .project-info-left ul,
        .project-info-right ul {
            list-style-type: none;
            padding: 0;
            padding-left: 2rem;
            margin: 0;
            display: flex;
            flex-flow: row wrap;
        }
        .project-info-left li,
        .project-info-right li {
            font-style: normal;
            font-weight: bold;
            text-align: center;
            flex-basis: 10%;
            font-size: 1rem;
            padding: 0.3rem 0 0 1rem;
        }
        .project-info-left .languages,
        .project-info-right .languages {
            font-weight: bold;
            margin-top: 0.5rem;
        }
        .project-info-left ul img,
        .project-info-right ul img {
            width: 40px;
            height: auto;
        }
        .project-preview-left,
        .project-preview-right {
            display: inline-block;
            width: 280px;
            max-width: 300px;
            height: auto;
        }

    /* GRID FOR ARRANGING THE CELLS UNDER PROJECT ARTICLES */
        .projects .first-project,
        .projects .second-project,
        .projects .third-project,
        .projects .fourth-project {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: 50% 50%;
        }
        /* UNIFORM ROWS */
        .project-title-left,
        .empty-div-1-right,
        .empty-div-1-left,
        .project-title-right {
            grid-row: 1/ span 1;
        }
        .project-preview-left,
        .project-info-right,
        .project-info-left,
        .project-preview-right {
            grid-row: 2/ span 1;
        }
        .codepen-link-button-left,
        .empty-div-2-right,
        .empty-div-2-left
        .codepen-link-button-right {
            grid-row: 3/ span 1;
        }
        /* ODD PROJECTS - LEFT SIDE */
        .project-title-left,
        .project-preview-left,
        .codepen-link-button-left {
            grid-column: 1/ span 1;
        }
        .empty-div-1-right,
        .project-info-right,
        .empty-div-2-right {
            grid-column: 2/ span 1;
        }
        /* EVEN PROJECTS - RIGHT SIDE */
        .empty-div-1-left,
        .project-info-left,
        .empty-div-2-left {
            grid-column: 1/ span 1;
        }
        .project-title-right,
        .project-preview-right,
        .codepen-link-button-right {
            grid-column: 2/ span 1;
        }
        
    /* TEXT ALIGN LEFT FOR PROJ INFO LEFT & RIGHT */
        .project-info-right,
        .project-info-left {
            text-align: left;
        }
    /* ADDING PADDING AT ONE SIDE TO PROJ INFOS */
        .project-info-right {
            padding-left: 0.5rem;
        }
        .project-info-left {
            padding-right: 0.5rem;
        }
    /* CENTERING THE PROJ PREVIEW & BUTTON */
        .project-preview-left,
        .project-preview-right,
        .codepen-link-button-left,
        .codepen-link-button-right {
            margin: 0 auto;
        }
    }

/* LARGER SCREENS LAYOUT (1360-1920) */
        @media (min-width: 1360px) {
        /* EVEN PROJECTS MOVE TO LEFT SIDE */
            .project-title-right,
            .project-preview-right,
            .codepen-link-button-right {
                grid-column: 1/ span 1;
            }
            .empty-div-1-left,
            .project-info-left,
            .empty-div-2-left {
                grid-column: 2/ span 1;
            }
        /* MARGIN BETWEEN SECTIONS */
            .projects .third-project,
            .projects .fourth-project,
            .projects .feedback {
                margin-top: 2rem;
            }
        }

/*
  ========================================
  IV. CUSTOM: 
    C) ABOUT SECTION
  ========================================
*/
/* CODE DESIGN SOLUTION SUB SEC */
    /* GRID */
        .about .code-design-solutions-problems-sub-section {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: auto;
        }
        .code-design-pics-list,
        .code-design-solutions-problems-sub-section p {
            grid-column: 1/ span 1;
        }
        .code-design-pics-list {
            grid-row: 1/ span 1;
        }
        .code-design-solutions-problems-sub-section p {
            grid-row: 2/ span 1;
        }
    /* FLEXBOX */
        .about .code-design-pics-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: 1rem;
        }
/* ONE STEP SUB SEC */
    /* GRID */
        .about .one-step-sub-section {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: auto;
            grid-gap: 5% 0;
        }
        .one-step-goal-flag-pics-list,
        .one-step-sub-section p {
            grid-column: 1/ span 1;
            margin: 0 auto 1rem auto;
        }
        .one-step-goal-flag-pics-list {
            grid-row: 1/ span 1;
        }
        .one-step-sub-section p {
            grid-row: 2/ span 1;
        }
    /* FLEXBOX */
        .about .one-step-goal-flag-pics-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: 1rem;
        }

/* CON-PER-FAI-SUB-SEC */
    /* GRID */
        .about .con-per-fai-sub-section {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: auto;
            grid-gap: 10%;
        }
        .con-per-fai-pics-list,
        .con-per-fai-sub-section h3 {
            grid-column: 1/ span 1;
        }
        .con-per-fai-pics-list {
            grid-row: 1/ span 1;
        }
        .con-per-fai-sub-section h3 {
            grid-row: 2/ span 1;
        }
    /* FLEXBOX */
        .about .con-per-fai-pics-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: 1rem;
        }

/* LARGER SCREENS LAYOUT (1360-1920) */
@media (min-width: 1360px) {
/* grid for about article to position the sub sections*/
    .about article {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-gap: 2% 2%;
    }
    /* row */
        .about .code-design-solutions-problems-sub-section,
        .about .one-step-sub-section {
            grid-row: 1/ span 1;
        }
        .about  .con-per-fai-sub-section {
            grid-row: 2/ span 1;
        }
    /* column */
        .about .code-design-solutions-problems-sub-section {
            grid-column: 1/ span 1;
        }
        .one-step-sub-section {
            grid-column: 2/ span 1;
        }
        .con-per-fai-sub-section {
            grid-column: 1/ span 2;
        }
}

/*
  ========================================
  IV. CUSTOM: 
    D) SKILLS SECTION
  ========================================
*/
/* GAINED SKILLS SUB SEC */
    /* GRID */
        .skills .gained-skills-sub-section {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: auto;
            grid-gap: 5%;
            margin-bottom: 5rem;
        }
        .html-css-des-pics-list,
        .skills-label-p,
        .gained-skills-intro-p {
            grid-column: 1/ span 1;
        }
        .html-css-des-pics-list {
            grid-row: 1/ span 1;
        }
        .skills-label-p {
            grid-row: 2/ span 1;
        }
        .gained-skills-intro-p {
            grid-row: 3/ span 1;
        }
        
    /* FLEXBOX */
        .skills .html-css-des-pics-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: 2rem;
        }
/* CURRENTLY LEARNING SUB SECTION */
    /* GRID */
        .skills .currently-learning-sub-section {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: auto;
            grid-gap: 5%;
        }
        .js-uxui-pics-list,
        .learning-skills-label-p,
        .currently-learning-intro-p {
            grid-column: 1/ span 1;
        }
        .js-uxui-pics-list {
            grid-row: 1/ span 1;
        }
        .learning-skills-label-p {
            grid-row: 2/ span 1;
        }
        .currently-learning-intro-p {
            grid-row: 3/ span 1;
        }
    /* FLEXBOX */
        .skills .js-uxui-pics-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: 2rem;
        }
        
/* LARGE SCREEN LAYOUT (1360-1920) */ 
    @media (min-width: 1360px) {
        /* grid for about article to position the sub sections*/
            .skills article {
                display: grid;
                grid-template-columns: auto;
                grid-template-rows: auto;
                grid-gap: 2% 2%;
            }
            /* row */
                .skills .gained-skills-sub-section,
                .skills .currently-learning-sub-section {
                    grid-row: 1/ span 1;
                }
            /* column */
                .skills .gained-skills-sub-section {
                    grid-column: 1/ span 1;
                }
                .skills .currently-learning-sub-section {
                    grid-column: 2/ span 1;
                }
        }

/*
  ========================================
  IV. CUSTOM: 
    E) EDUCATION SECTION
  ========================================
*/
/* CLASS CENTRAL LIST SUB SECTION,
    BLOG TWITTER LINKEDIN SUB SECTION */
    /* GRID */
        .education .class-central-list-sub-section,
        .education .blog-twitter-linkedin-sub-section {
            flex-basis: 100%;
            padding: 0;
            padding-bottom: 1rem;
            margin: 0 auto;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            align-content: flex-start;
            gap: 1rem;
        }
        
        .list-brain-strengthening-pics-list,
        .happy-sharing-writings-money-pics-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: 1rem;
        }
        
        .grateful-label-p,
        .actions-thank-you-label-p {
            flex-basis: 100%;
        }
        
/* LARGE SCREEN LAYOUT (1360-1920) */ 
    @media (min-width: 1360px) {
        /* grid for about article to position the sub sections*/
            .education article {
                display: grid;
                grid-template-columns: auto;
                grid-template-rows: auto;
                grid-gap: 2% 2%;
            }
            /* row */
                .education .class-central-list-sub-section,
                .education .blog-twitter-linkedin-sub-section {
                    grid-row: 1/ span 1;
                }
            /* column */
                .education .class-central-list-sub-section {
                    grid-column: 1/ span 1;
                    margin-left: 4rem;
                }
                .education .blog-twitter-linkedin-sub-section {
                    grid-column: 2/ span 1;
                    margin-right: 4rem;
                }
        }

/*
  ========================================
  IV. CUSTOM:
    D) CONTACT SECTION
  ========================================
*/
/* FORM */
    .contact form {
        max-width: 550px;
        min-width: 295px;
        margin: 0 auto;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 0.25rem;
    }

    .contact fieldset {
        border: none;
        padding: 0;
        margin: 0 auto;
        max-width: 550px;
    }

    .contact label {
        display: block;
        margin: 0.5rem 0;
        text-align: left;
    }

    .contact input,
    .contact textarea {
        margin: 10px 0 0 0;
        width: 100%;
        min-height: 2em;
        padding: 5px;
        background-color: var(--color-black);
        color: var(--color-white);
        border: 1px solid var(--color-black);
        border-radius: 0.25rem;
    }

/* LINKS */
    .contact-links-pics {
        flex-basis: 100%;
        list-style-type: none;
        padding: 0;
        margin-top: 1.5rem;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .contact-links-pics li {
        text-align: center;
        flex-basis: 25%;
    }
    @media (min-width: 620px) {
        .contact-links-pics li {
            flex-basis: 17%;
        }
    }

    .contact-links-pics p {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-weight: 400;
    }
    .contact .links-my-accounts p {
        margin-bottom: 1.5rem;
    }

/*
  ========================================
  IV. CUSTOM:
    E) FOOTER 
  ========================================
*/
.footer .footer-info {
    margin-top: 3.5rem;
    margin-bottom: 3rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
}

/* MEDIUM SCREENS (500-849) */
    @media (min-width: 500px) {
        .footer .footer-info {
            margin-bottom: 0;
        }
    }

/* LARGER SCREENS (1360-1920+) */
    @media (min-width: 1360px) {
        .footer {
            padding-bottom: 2rem;
        }
    }


/*
  ========================================
  VI. CREDITS FOR RESOURCES USED 
    A) FLIP CARD IN SMALL SCREENS: 
            @w3schools - https://www.w3schools.com/
                >tutorial link: https://www.w3schools.com/howto/howto_css_flip_card.asp
    B) ANIMATION: 
            @animista - https://animista.net/
                >slide-in-left link: https://animista.net/play/entrances/slide-in/slide-in-left
                >price: free! just make sure to give some credits
                >discovered it through Brett's AWESOME WebGuide - https://webguide.space/theguide/
    C) YELLOW WAVES AS BACKGROUND FOR MAIN HEADINGS: 
            @haikei - https://app.haikei.app/
                >layered waves: found at "layered waves" section
                >discovered it through Brett's AWESOME WebGuide - https://webguide.space/theguide/
    D) ICONS / PICTURES / LOGOS: 
            @font awesome - https://fontawesome.com/
                >icons in buttons, navigation bar: all under free category
            @canva - https://www.canva.com
                >icons or pictures in projects, about, skills, and education sections: free for all canva users (Many icons were a combination of different free icons and shapes. I put them together to create better images more suitable for my specific needs.)
                >logos in projects & contact section (except for github & freeCodeCamp): free for all canva users
            @github - https://github.com/logos
                >github logo used in contact section
                >the link points out to a page where it discusses how the github logo must be used. (In my case, I used it to link to my github profile which is one of the awesome things to do under their rules.)
            @freecodecamp - https://design-style-guide.freecodecamp.org/
                >freecodecamp logo used in contact section to point out to my learner's profile where you can see my learning progress under the curriculum
    E) OFF CANVAS MENU (CSS ONLY):
            @frontend masters - https://frontendmasters.com/
                >course: Advanced CSS Layouts by Jen Kramer
                >section: Pure CSS Off-Canvas Menu
                >link: https://frontendmasters.com/courses/advanced-css-layouts/
                >price: 5months free access for those who have the github student developer pack - https://education.github.com/pack
    F) BACK TO TOP BUTTON (CSS ONLY):
            @freeCodeCamp News/Articles - https://www.freecodecamp.org/news
                >article: How to Make an Animated Back to Top Button Using Only CSS by Temani Afif
                >link: https://www.freecodecamp.org/news/css-only-back-to-top-button/
    G) FONT FAMILY:
            @google - https://fonts.google.com/
                >montserrat - https://fonts.google.com/specimen/Montserrat
    H) BORDER BOX:
            @brumm - https://shadows.brumm.af/
                >used it to make the whole content 3d or like popping out when view on a large screen
                >discovered it through Brett's AWESOME WebGuide - https://webguide.space/theguide/
    I) DESIGN TOOLS:
            @canva - https://www.canva.com (I used it to design and customize the overall layout, typography and colors of my website and logo.)
            @open color - https://yeun.github.io/open-color/ (I used it for building my color palette. Discovered it through Brett's AWESOME WebGuide - https://webguide.space/theguide/)
  ========================================
*/
              
            
!

JS

              
                
              
            
!
999px

Console