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

              
                <!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> michaelnicol71@gmail.com</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