<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!-- 

Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->
<navbar id="navbar">
  <!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#projects">projects</a>
  <a href="https://codepen.io/FreeCodeCamp/" target="_blank">FCC</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
</navbar>
<section id="welcome-section">
  <h1>Portfolio</h1>
  <h2><a id='profile-link' target='_blank' href='https://www.freecodecamp.org/coderteaches'></a></h2>
</section>
<section id="projects">
  <h1>projects</h1>
  <div class="grid-container">
    <div class="row">
      <div class="column project-tile">
        <iframe  height="265" style="width: 100%;" scrolling="no" title="ExVzWQm" src="https://codepen.io/janjib/embed/ExVzWQm?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/janjib/pen/ExVzWQm'>ExVzWQm</a> by Muhammad Rujhan Najib Bin Fauzi Najib
  (<a href='https://codepen.io/janjib'>@janjib</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
      </div>
      <div class="column">
        <iframe height="265" style="width: 100%;" scrolling="no" title="JjYQPBe" src="https://codepen.io/janjib/embed/JjYQPBe?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/janjib/pen/JjYQPBe'>JjYQPBe</a> by Muhammad Rujhan Najib Bin Fauzi Najib
  (<a href='https://codepen.io/janjib'>@janjib</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
      </div>
    </div>
    
  </div>
  <a id="profile-link" href="https://codepen.io/janjib/pen/JjYQPBe">projects</a></br>
<a id="profile-link" href="https://github.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-github"></i> GitHub</a>
</section>

navbar{
  position:fixed;
}
/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
  position:fixed;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
#welcome-section{
  height:600px;
  display:flex;
  justify-content:center;
  align-items:center;
}
#projects{
  height:500px;
}
.row{
  display:flex;
  flex-direction:row;
  width:100;
}

.column{
  display:flex;
  flex-direction:column;
  flex:1;
}
h1{
  text-align:center;
}
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.