Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                <!DOCTYPE html>
<html>

<head>
<!--   <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css"> -->
  <script src="https://kit.fontawesome.com/f6cfa43d23.js" crossorigin="anonymous"></script>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  <title>Michael Nicol's Portfolio Page</title>
</head>
<body>
  <!-- Test #x -->
  <header id="welcome-section">
    <nav id="navbar">
      <ul>
   <!-- Some of the ID's may have been changed due to FCC certifcation -->
        <li class="nav-pill"><a class="nav-pill-text" href="#about-me-section">About me</a></li>
        <li class="nav-pill"><a class="nav-pill-text" href="#skill-section">Skill set</a></li>
        <li class="nav-pill" id="cert-pill"><a class="nav-pill-text" href="#cert-section">Certifications</a></li>
        <li class="nav-pill" id="website-pill"><a class="nav-pill-text" href="#website-section">Your Website</a></li>
        <!-- project-section changed to projects -->
        <li class="nav-pill"><a class="nav-pill-text" href="#projects">Projects</a></li>
        <li class="nav-pill" id="contact-pill"><a class="nav-pill-text" href="#contact-section">Contact Me</a></li>
      </ul>
    </nav>
    <div class="header-image-container">
      <div class="header-image-overlay">
        <h1>Michael Nicol</h1>
        <p class="overlay-desc">Front End Developer</p>
        <hr class="overlay-hr">
        <div class="sm-icons-wrapper">
          <a target="_blank" href="https://www.youtube.com/channel/UC_eOgWLj3-ryK7X4-7Eg4XA"><i class="fab fa-youtube"></i></a>
<!--           <a target="_blank" href="https://www.instagram.com/michaelnicol84"><i class="fab fa-instagram"></i></a> -->
          <!-- Added profile-link for test #x -->
          <a target="_blank" id="profile-link" href="https://www.freecodecamp.org/michael_nicol"><i class="fab fa-free-code-camp"></i></a>
          <a target="_blank" href="https://codepen.io/michaelnicol"><i class="fab fa-codepen"></i></a>
        </div>
      </div>
    </div>
  </header>
  <main>
    <section id="about-me-section">
      <h2>About Me</h2>
      <hr class="section-hr">
      <div class="image-text-container">
        <div class="text-wrapper">
          <h3>Who Am I?</h3>
          <p class="text-wrapper-desc">I am a 17 year old computer science student. I have enjoyed three years of martial arts in both Tang Soo Do and Taekwondo. I also enjoy boating, drag racing, and ATV riding due to the ability to spend time with friends and family. Programming and engineering has always been of interest to me due to the limitless possibilites. Self driving cars, space ships and movie CGI are all possible via computer science. I often follow SpaceX in their Starship development program and hope to one day see a Starship launch in person.</p>
        </div>
        <img src="https://i.imgur.com/mNLRKl5.jpg" class="image-card medium-size">
      </div>
      <div class="image-text-container row-reverse">
        <div class="text-wrapper">
          <h3>Education</h3>
          <p class="text-wrapper-desc">I am currently a Senior in High School majoring in both Engineering and Computer Science. I first learned the basics Front End Development from freeCodeCamp. I worked my way through the HTML, CSS and JavaScript certifications. I have created many exciting projects including calculators, API weather applications, cash registers, portfolio page, tribute page, mock SpaceX application, mock MDN documentation page and a maze solving algorithm. I am currently working through the Microsoft CompTIA 220-1001 and CompTIA 220-1002 certifications. In Engineering, I have 3D modeled various projects including a self-sustainable 500 person underground moon base for my capstone. I learned the importance of Project Mangement, Professionlism, and the Engineering Design Process. My future career goal is to work in Cyber Security.</p>
        </div>
        <img src="https://i.imgur.com/w5Zj9pZ.png" class="image-card">
      </div>
    </section>
    <section class="divide-section quote-section">
      <p class="quote-text">There's a silly notion that failure's not an option at NASA. Failure is an option here. If things are not failing, you are not innovating enough.</p>
      <p class="quote-credit">- Elon Musk</p>
    </section>
    <section id="skill-section">
      <h2>Skill Set</h2>
      <hr class="section-hr">
      <div class="card-container">
        <div class="skill-card">
          <img src="https://i.imgur.com/ubSWiWi.png" class="skill-card-logo">
          <h3>Skills</h3>
          <div class="skill-bar-wrapper">
            <i class="fab fa-html5" style="color: #E64E2C;"></i>
            <div class="bar-container">
              <div class='bar' id="html-bar">
                <p>85%</p>
              </div>
            </div>
          </div>
          <div class="skill-bar-wrapper">
            <i class="fab fa-css3-alt" style="color: #2E609E;"></i>
            <div class="bar-container">
              <div class='bar' id="css-bar">
                <p>75%</p>
              </div>
            </div>
          </div>
          <div class="skill-bar-wrapper">
            <i class="fab fa-js" style="color: #D7B942;"></i>
            <div class="bar-container">
              <div class="bar" id="js-bar">
                <p>65%</p>
              </div>
            </div>
          </div>
          <div class="skill-bar-wrapper">
            <i class="fab fa-java" style="color: #5382a1"></i>
            <div class="bar-container">
              <div class="bar" id="ja-bar">
                <p>50%</p>
              </div>
            </div>
          </div>
<!--           <div class="skill-bar-wrapper">
            <i class="fab fa-python" style="color: #4C6EF5"></i>
            <div class="bar-container">
              <div class="bar" id="py-bar">
                <p>50%</p>
              </div>
            </div>
          </div> -->
          <a href="https://www.freecodecamp.org/michael_nicol" target="_blank" class="info-button">More Information</a>
        </div>
        <div class="skill-card">
          <img class="skill-card-logo" src="https://i.imgur.com/C4hjK5U.png">
          <h3>freeCodeCamp</h3>
          <p>Certified in both JavaScript Algorithms/ Data Structures, and Responsive Web Design. Have completed over 455 programming lessons across 18 sections including 10 projects. Have been a member of the freeCodeCamp fourms since 2018 with a total of 318 Project Feedback Contributions. This also includes 270 likes, 3 solutions, and a 1000 click Famous Link.</p>
          <a class="info-button" href="https://forum.freecodecamp.org/u/michaelnicol/summary" target="_blank">More Information</a>
        </div>
        <div class="skill-card">
          <img class="skill-card-logo" style="margin: 0px 0px 20px 0px;" src="https://i.imgur.com/T9C23ww.png">
          <h3>Code.org</h3>
          <p>Completed AP CSP curriculum from 2019 to 2020, scoring a 5 on the final AP project. Learned the basics of user interfaces and good programming practices via basic JavaScript. Completed the basics on how the internet works including the World Wide Web, number systems, DNS, HTTP, and TCP/ IP.</p>
          <a class="info-button" href="https://studio.code.org/projects/applab/8Cfu1I3HpGq3nd_R2YRJhZv4S1r681wqc46m8IfOJT0" target="_blank" >More Information</a>
        </div>
        <div class="skill-card">
          <img class="skill-card-logo" style="margin: 0px 0px 20px 0px;" src="https://i.imgur.com/3zL989K.png">
          <h3>HTML 5</h3>
          <p>Learned the basics of HTML 5 on freeCodeCamp. This includes the use of navigation bars, heading tags, checkboxes, forms, radio buttons, text and number fields. Also learned applied acccessibility for the disabled to navigate webpages. Completed five HTML 5 projects found in the Project Showcase below to implement responsive principles. </p>
          <a href="https://www.freecodecamp.org/learn/responsive-web-design/#basic-html-and-html5" target="_blank" class="info-button">More Information</a>
        </div>
        <div class="skill-card">
          <img class="skill-card-logo" style="margin: 0px 0px 20px 0px;" src="https://i.imgur.com/3CQXLht.png">
          <h3>CSS 3</h3>
          <p>Learned the basics of CSS 3 on freeCodeCamp. This includes, basic CSS, Flexbox, Flex Grid, animations, positioning, color schemes and contrast. Applied these CSS skills to HTML 5 to add functionality to all five of my Web Design Projects in the Project Showcase.</p>
          <a class="info-button" target="_blank"href="https://www.freecodecamp.org/learn/responsive-web-design/#basic-css">More Information</a>
        </div>
        <div class="skill-card">
          <img class="skill-card-logo" style="margin: 0px 0px 20px 0px;" src="https://i.imgur.com/BbQOhhB.png">
          <h3>jQuery</h3>
          <p>Knowledgable of jQuery to create functional user interfaces between HTML and JavaScript. Am able to use DOM programming to access, read, and send information to and from the user interface.</p>
          <a class="info-button" target="_blank" href="https://codepen.io/michaelnicol/full/bGWXyxb">More Information</a>
        </div>
        <div class="skill-card">
          <img class="skill-card-logo" style="margin: 0px 0px 20px 0px;" src="https://i.imgur.com/BSlWMad.png">
          <h3>JavaScript</h3>
          <p>Learned the basics of JavaScript via freeCodeCamp. This includes basic syntax, ES6, Regular Expressions, Basic Data Structures, Functional Programming and Object Oriented Programming. Skills were applied to 16 Basic Algorithms, 21 Intermediate Algorithms, and 5 final Data Structure Projects.</p>
          <a class="info-button" target="_blank" href="https://replit.com/@Michael_Nicol">More Information</a>
        </div>
        <div class="skill-card">
          <img class="skill-card-logo" style="margin: 0px 0px 20px 0px;" src="https://i.imgur.com/ocRwOCf.png">
          <h3>Java</h3>
          <p>Learned the basics of Java via Edhessive for AP CSA. This includes the basics of variables, loops, matrixs, 2D matrixs, conditions, classes, objects, and methods. Also learned solid Object Oriented Programming practices from a back-end language standpoint.</p>
          <a class="info-button" target="_blank" href="https://replit.com/repls/folder/Java">More Information</a>
        </div>
      </div>
    </section>
    <section id="cert-section">
      <h2>Certifications</h2>
      <hr class="section-hr">
      <div class="card-container">
        <a class="cert-card" href="https://www.freecodecamp.org/certification/michael_nicol/javascript-algorithms-and-data-structures" target="_blank"><img src="https://i.imgur.com/Fxssfia.png" alt="freeCodeCamp JavaScript Algorithms and Data Structures"></a>
        <a class="cert-card" href="https://www.freecodecamp.org/certification/michael_nicol/responsive-web-design" target="_blank"><img src="https://i.imgur.com/kjcoBIF.png" alt="freeCodeCamp Responsive Web Design"></a>
          <a class="cert-card" href="https://www.freecodecamp.org/certification/michael_nicol/front-end-development-libraries" target="_blank"><img src="https://i.imgur.com/FKmedx0.png" alt="freeCodeCamp Front End Development Libraries"></a>
          <a class="cert-card" href="https://www.freecodecamp.org/certification/michael_nicol/scientific-computing-with-python-v7" target="_blank"><img src="https://i.imgur.com/JGMZ0Kk.png" alt="freeCodeCamp Scientific Computing with Python
"></a>
      </div>
    </section>
    <section id-="video-section" class="divide-section">
      <h2>Watch the Tutorial</h2>
      <hr class="section-hr white-hr">
      <p class="video-desc">Watch the six part series by Michael Nicol to learn how to build this portfolio page using HTML and CSS. Learn how to host images, create responsive text layouts, Font Awesome Icons, and use Flexbox for a powerful web page.</p>
      <div class="video-wrapper">
        <iframe class="video-iframe" src="https://www.youtube.com/embed/X25v5NI-b0o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </section>
    <section id="website-section">
      <h2>Introducing New Horizons</h2>
      <hr class="section-hr">
      <p class="website-slogan"><i>The Tool of the Universe</i></p>
        <div class="image-text-container">
        <div class="text-wrapper">
          <h3>Why Horizon?</h3>
          <p class="text-wrapper-desc">New Horizons offers a vast intergalactic store for rocket engines of any type! Users can choose between buying, selling used rocket engines or participating in galactic trade. New Horizons uses a fleet of Alcubierre warp drives to send cargo across the universe in a matter of hours. By contracing the space infront and expanding space behind the drive, the machine is capable of reaching the outter star systems with faster then light delivery speeds.</p>
        </div>
        <img src="https://i.imgur.com/Gd6qcYz.jpg" class="image-card medium-size">
      </div>
      <div class="card-container">
        <div class="website-features-card">
          <img src="https://i.imgur.com/v6z3aDK.png" class="feature-logo">
          <h4>Security</h4>
          <p class="feature-desc">New Horizons uses Fully guarded cargo vessels to prevent pirate attacks and uses only approved galactic trade approved passageways.</p>
        </div>
         <div class="website-features-card">
            <img src="https://i.imgur.com/q2VQ8Dr.png" class="feature-logo">
            <h4>Low Prices</h4>
            <p class="feature-desc">Lowest Prices for Tier 3 Ion Engines in the Galaxy. Base model engines start at only 25 GC, creating space accessible for all.</p>
          </div>
          <div class="website-features-card">
            <img src="https://i.imgur.com/Fw9oKta.png" class="feature-logo">
            <h4>Warranty</h4>
            <p class="feature-desc">New Horizons offers Full warranty no damage shipping with a 150 year warranty on all Ion Engines.</p>
          </div>
          <div class="website-features-card">
            <img src="https://i.imgur.com/3XWfEwO.png" class="feature-logo">
            <h4>Consumer</h4>
            <p class="feature-desc">Highly moderated trading and selling for quality engines. New Horizons offers intergalatic delivery of all engines. Engines are refueled at certified galactic trade hubs.</p>
          </div>
      </div>
      <a class="info-button signup-button" href="https://codepen.io/michaelnicol/full/eYWGwBW" target="_blank">Sign Up Today!</a>
    </section>
    <section id="projects">
      <h2>My Projects</h2>
      <hr class="section-hr">
      <div class="card-container">
        <!-- project-card changed to project-tile -->
        <div class="project-tile" id="test">
          <img src="https://i.imgur.com/vMzCooM.jpg" alt="Elon Musk Tribute Page">
          <div class="project-desc">
            <p>Elon Musk Tribute Page</p>
            <a href="https://codepen.io/michaelnicol/full/KKmgZxZ" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
         <div class="project-tile">
          <img src="https://i.imgur.com/V4cFhD9.jpg" alt="JavaScript Algorithm Playground">
          <div class="project-desc">
            <p>JavaScript Algorithm Playground</p>
            <a href="https://codepen.io/michaelnicol/full/bGWXyxb" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
        <div class="project-tile">
          <img src="https://i.imgur.com/JF3knoH.jpg" alt="New Horizons Product Landing Page">
          <div class="project-desc">
            <p>New Horizons Product Landing Page</p>
            <a href="https://codepen.io/michaelnicol/full/eYWGwBW" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
         <div class="project-tile">
          <img src="https://i.imgur.com/p5rJfAO.jpg" alt="Survey Form: SpaceX Application">
          <div class="project-desc">
            <p>Survey Form: SpaceX Application</p>
            <a href="https://codepen.io/michaelnicol/full/ExmwKwZ" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
        <div class="project-tile">
          <img src="https://i.imgur.com/Fawkytd.jpg" alt="Flexbox Technical Documentation Page">
          <div class="project-desc">
            <p>Flexbox Technical Documentation Page</p>
            <a href="https://codepen.io/michaelnicol/full/ExmevJy" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
         <div class="project-tile">
          <img src="https://i.imgur.com/qsOto0V.jpg" alt="Responsive Image Overlay Test">
          <div class="project-desc">
            <p>Responsive Image Overlay Test</p>
            <a href="https://codepen.io/michaelnicol/full/mdmWVwQ" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
          <div class="project-tile">
          <img src="https://i.imgur.com/ylr6b30.jpg" alt="2D Depth-First Search Maze Algorithm">
          <div class="project-desc">
            <p>2D Depth-First Search Maze Algorithm</p>
            <a href="https://codepen.io/michaelnicol/full/QWgEpJe" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
          <div class="project-tile">
          <img src="https://i.imgur.com/GLQDKHs.jpg" alt="3D Depth-First Search Maze Algorithm">
          <div class="project-desc">
            <p>3D Depth-First Search Maze Algorithm</p>
            <a href="https://codepen.io/michaelnicol/full/PojObVP" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
      </div>
      <h3>Other Accounts</h3>
      <div class="text-wrapper">
        <p>My first Codepen.io account contains many more projects dating back to 2017. Here is just a few of my earliest programming projects. My programming skills have come a long way since these projects were created.</p>
      </div>
      <div class="card-container">
              <div class="project-tile">
          <img src="https://i.imgur.com/KXP8kNf.jpg" alt="Responsive Image Overlay Test">
          <div class="project-desc">
            <p>Standard Deviation Calculator</p>
            <a href="https://codepen.io/Mike-was-here123/full/rQXpGd" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
        <div class="project-tile">
          <img src="https://i.imgur.com/5P6apSh.jpg" alt="Combination Calculator 2.0">
          <div class="project-desc">
            <p>Combination Calculator 2.0</p>
            <a href="https://codepen.io/Mike-was-here123/full/MLLprL" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
        <div class="project-tile">
          <img src="https://i.imgur.com/z9UpT2E.jpg" alt="Minecraft Map Calculator">
          <div class="project-desc">
            <p>Minecraft Map Calculator</p>
            <a href="https://codepen.io/Mike-was-here123/full/dxWNMO" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
        <div class="project-tile">
          <img src="https://i.imgur.com/2SrxH0o.jpg" alt="Hermitcraft Tag Fan Project">
          <div class="project-desc">
            <p>Hermitcraft Tag Fan Project</p>
            <a href="https://codepen.io/Mike-was-here123/full/GwqBwQ" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
        <div class="project-tile">
          <img src="https://i.imgur.com/guQEJir.jpg" alt="Annoying Tab Generator">
          <div class="project-desc">
            <p>Annoying Tab Generator</p>
            <a href="https://codepen.io/Mike-was-here123/full/bmXyzB" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
        <div class="project-tile">
          <img src="https://i.imgur.com/tcgJozk.jpg" alt="Forza Level Calculator">
          <div class="project-desc">
            <p>Forza Level Calculator</p>
            <a href="https://codepen.io/Mike-was-here123/full/NLedzZ" target="_blank" class="view-project-button">View Project</a>
          </div>
        </div>
      </div>
    </section>
    <section id="contact-section" class="divide-section">
      <h2>Contact Me</h2>
      <hr class='section-hr white-hr'>
      <!-- Commented this out so people don't use my number -->
<!--     <p><i class="fas fa-phone"></i> 1-234-678-9101</p> -->
      <p><i class="fas fa-envelope-square"></i> [email protected]</p>
    </section>
  </main>
  <footer>
    <h4>Portfolio Project for freeCodeCamp Responsive Web Design Certification</h4>
    <hr class="section-hr">
    <p>Built and Designed by Michael Nicol. Special thanks to FCC fourms for help!</p>
    <p>Creation of this page was documented for Quasi Code on Youtube</p>
    <p>Use of this page as a template may be subject to copyrite and plagiarism laws.</p>
  </footer>
</body>

</html>
!

CSS 

              
                @import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
:root{
  scroll-behavior: smooth;
  overflow-y: scroll;
  ms-overflow-style: none;
  scrollbar-width: none;
} 
:root::-webkit-scrollbar{
  display: none;
} 
body {
  padding: 0px;
  font-family: 'Space Mono', monospace;
  margin: 0px;
}
nav {
  position: fixed;
  z-index: 9;
  background-color: black;
  box-shadow: 2px 2px 5px black;
  width: 100%;
}
nav > ul {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;
}
.nav-pill {
  flex: 1;
  list-style-type: none;
  padding: 15px;
  text-align: center;
  background-color: black;
  transition: 0.3s ease-in-out;
}
.nav-pill:hover {
  transform: scale(1.1);
  box-shadow: 3px 3px 6px black;
  border: 1px solid white;
}
.nav-pill-text{
  color: white;
  text-decoration: none;
  font-size: 20px;
}
.nav-pill-text:hover{
  color:white;
  animation-name: shadow;
  animation-duration: 0.3s;
}
@keyframes shadow {
  0% {
    text-shadow: 2px 2px 5px white;
  }
  25% {
    text-shadow: 2px 2px 10px white;
  }
  50% {
    text-shadow: 2px 2px 15px white;
  }
  75% {
    text-shadow: 2px 2px 50px white;
  }
  100% {
    text-shadow: 2px 2px 100px white;
  }
}

/* bannner image */

.header-image-container {
  height: 100vh;
  width: 100%;
  background-color: black;
  background-image: url('https://i.imgur.com/1yFjfLZ.jpg');
/*   background-image: url('https://i.imgur.com/w6V6t6f.jpg'); */
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-image-overlay {
  color: white;
  text-align: center;
  box-shadow: 2px 2px 5px black;
  padding: 15px;
  text-shadow: 2px 2px 5px black;
  backdrop-filter: blur(3px);
}
h1 {
  margin: 0;
  font-size: 7.5em;
}
.overlay-desc {
  font-size: 2.5em;
  margin: 0;
}
.overlay-hr {
  background-color: white;
  opacity: 1;
  border: 1px solid white;
  box-shadow: 2px 2px 5px black;
  width: 50%;
  margin: 25px auto;
}
.sm-icons-wrapper {
  display: flex;
  gap: 25px;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.fab {
  font-size: 40px;
  color: white;
}
.sm-icons-wrapper > a {
  transition: 0.2s ease-in-out;
}
.sm-icons-wrapper > a:hover{
  transform: scale(1.1);
  text-shadow: 3px 3px 6px black;
}

/* Sections */

section, footer { /* Part 5 */
  width: 100%;
  padding: 30px 20px 50px 20px;
  text-align: center;
}

h2 {
  font-size: 35px;
}

.section-hr {
  width: 15%;
  min-width: 200px;
  margin: 20px auto; /* Changed from 10px to 20px in part 4 */
  border: 2px solid black;
  box-shadow: 2px 2px 5px black;
}
.image-text-container {
  display: flex;
  gap: 2%;
  margin-top: 50px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.text-wrapper {
  width: 100%;
  max-width: 600px;
}
.text-wrapper-desc {
  text-align: justify;
}
.image-card {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16/9;
  transition: 0.3s ease-in-out;
  box-shadow: 2px 2px 5px black;
}
.image-card:hover{
  transform: scale(1.05);
  box-shadow: 3px 3px 6px black;
}
.row-reverse {
  flex-direction: row-reverse;
}

/* Divide Section */

.divide-section {
  text-align: center;
  background-color: black;
  color: white;
  box-shadow: 2px 2px 5px black;
}
.quote-text {
  margin: 10px auto;
  max-width: 1920px;
  font-size: 30px;
}
.quote-text:before {content: open-quote;}
.quote-text:after {content: close-quote;}
.quote-credit {
  font-size: 25px;
}
h3 {
  margin-bottom: 20px;
}

/* Skill Section */

#skill-section {
  background-color: rgb(223, 223, 230);
}
.card-container {
  display: flex;
  justify-content: center;
  max-width: 1920px;
  flex-wrap: wrap;
  margin: 50px auto;
  gap: 50px;
/*   border: 1px solid red; */
}
.skill-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  width: 350px;
  border: 1px solid black;
  box-shadow: 2px 2px 5px black;
  text-align: left; /* Changed from center to left */
  padding: 20px;
  border-radius: 10px;
  transition: 0.3s ease-in-out;
}
.skill-card:hover{
  box-shadow: 3px 3px 6px black;
  transform: scale(1.03);
}
.skill-card-logo {
  width: 200px;
  aspect-ratio: 1/1; /* Added after recording part */
}
.skill-bar-wrapper {
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}
.skill-bar-wrapper > .fab, .skill-bar-wrapper > .fas {
  font-size: 38px;
  margin-right: 2%;
}
.bar-container {
  height: 38px;
  width: 90%;
  margin-left: 10px;
  border: 1px solid black;
  border-radius: 20px;
  padding: 0px;
}
.bar {
  padding: 0px;
  height: 100%;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.bar > p {
  color: white;
  font-size: 20px;
  text-shadow: 2px 2px 5px black;
  padding: 0;
  text-align: center; /* Needed if skill-card text-align is not set to center. */
  margin: auto;
}
/* .skill-card > p {
  text-align: justify;
} */
#html-bar {
  width: 90%;
  border: 1px solid #E64E2C;
  background-color: #E64E2C;
}
#css-bar {
  width: 85%;
  border: 1px solid #2E609E;
  background-color: #2E609E;
}
#js-bar {
  width: 75%;
  border: 1px solid #D7B942;
  background-color: #D7B942;
}
#ja-bar{
  width: 70%;
  border: 1px solid #5382a1;
  background-color: #5382a1;
}
#py-bar{
  width: 50%;
  border: 1px solid #4C6EF5;
  background-color: #4C6EF5;
}
.info-button {
  border: 1px solid black;
  color: black;
  padding: 10px;
  margin-top: auto;
  display: block;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.3s ease-in-out;
}
.info-button:hover {
  color: white;
  cursor: pointer; 
  background-color: black;
  transform: scale(1.03);
  box-shadow: 2px 2px 5px black;
}

/* Certification Section */

.cert-card {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1.31/1;
  border: 1px solid black;
  box-shadow: 2px 2px 5px black;
  transition: 0.3s ease-in-out;
  background-color: rgb(223, 223, 230);
}
.cert-card > img {
  width: 100%;
  height: 100%;
}
.cert-card:hover{
  transform: scale(1.03);
  box-shadow: 3px 3px 6px black;
}

/* Video Section */

.white-hr{
  opacity: 1;
  border: 1px solid white;
  margin: 20px auto;
  box-shadow: 2px 2px 5px white;
}
.video-desc {
  max-width: 800px;
  margin: 20px auto;
  font-size: 17px;
  text-align: justify;
}
.video-wrapper {
  max-width: 1920px;
  width: 100%;
  margin: 2% auto;
  height: auto;
}
.video-iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

/* Website */

.website-slogan {
  font-size: 30px;
}
.feature-logo {
  width: 125px;
  aspect-ratio: 1/1;
  margin-bottom: 20px;
}
.website-features-card {
  padding: 20px; /* 10px --> 20px */
  width: 300px;
  height: auto;
  transition: 0.3s ease-in-out;
  border: 2px solid #d3d3d3; /* Added */
}
.feature-desc {
  text-align: left;
}
.website-features-card:hover{
  box-shadow: 3px 3px 6px black;
  border: 1px solid black;
  border-radius: 10px;
  transform: scale(1.03);
  background-color: rgb(223,223,230);
}
.signup-button {
  font-size: 20px;
  max-width: 350px;
  width: 100%;
  margin: auto;
}

/* Project Section */

/* project-card changed to project-tile */
.project-tile {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 16/9;
  background-color: white;
  box-shadow: 2px 2px 5px black;
  border: 1px solid black;
  transition: 0.3s ease-in-out;
}
.project-tile img {
  width: 100%;
  height: auto;
}

.project-desc {
  position: absolute;
  top: 0;
  left: 0;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  opacity: 0;
  background-color: black;
  font-size: 20px;
  padding: 5%;
  width: 100%;
  height: 100%;
  color: white;
  transition: 0.5s ease-in-out;
}

.project-tile:hover .project-desc {
  opacity: 0.8;
/*   cursor: pointer; --> Removed: pointer on non-clickable items is bad code  */
  z-index: 2;
}

.project-tile:hover {
  box-shadow: 5px 5px 10px black;
  transform: scale(1.05);
}

.view-project-button {
  border-radius: 5px;
  color: white;
  border: 2px solid white;
  width: relative;
  font-size: 15px;
  height: auto;
  padding: 7px;
  margin: 0 auto;
  transition: 0.5s ease-in-out;
  text-decoration: none;
}

.view-project-button:hover{
  background-color: white;
  color: black !important;
  text-decoration: none;
}
/* project-section changed to projects */
#projects > .text-wrapper {
  margin: 0 auto;
  text-align: left; /* DONT FORGET THIS */
}

#projects {
  background-color: rgb(223,223,230);
}

/* Contact Me */

#contact-section {
  font-size: 25px;
}

/* Footer */

@media screen and (max-width: 1280px) {
  #contact-pill {
    display: none;
    flex: 0;
  }
}
@media screen and (max-width: 1000px) {
  /* Post Production */
  .project-tile {
    max-width: none;
  }
  .cert-card {
    max-width: none;
  }
  
  #cert-pill {
    display: none;
    flex: 0;
  }
  .header-image-overlay {
    width: 100%;
    backdrop-filter: none;
    box-shadow: none;
  }
  h1 {
    font-size: 55px;
  }
  .overlay-desc {
    font-size: 30px;
  }
  .overlay-hr {
    margin: 20px auto;
    width: 100%;
    max-width: 275px;
  }
  .fab {
    font-size: 30px;
  }
}
@media screen and (max-width: 720px) {
  #website-pill {
    display: none;
    flex: 0;
  }
  .quote-text, .quote-credit {
    font-size: 20px;
  }
}
@media screen and (max-width: 550px) {
  #contact-section > p, contact-section > i {
    font-size: 18px;
  }
  .text-wrapper-desc {
    text-align: left;
  }
  nav {
    display: none;
  }
  .card-container {
    margin: 10px auto;
    gap: 20px;
  }
}
!

JS
!
999px

Console