<nav id="nav-bar">
<header>
<!-- 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">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/fda4c0cf9d.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</header>
<!-- Top Navigation Menu -->
<div class="topnav">
<div class="profile-link">
<a href="https://www.freecodecamp.org/learn" target="_blank" class="active"><i class="fab fa-free-code-camp fa-1g"></i></a>
<a href="https://www.instagram.com/" id="profile-link" target="_blank" class="active"><i class="fab fa-instagram"></i></a>
</div>
<!-- Navigation links (hidden by default) -->
<div id="myLinks">
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</nav>
<section id="welcome-section">
<div>
<h1>Web Developer</h1>
<p>FCC Certified</p>
</div>
</section>
<section id="projects">
<h1>Projects</h1>
<div class="grid-container">
<div class="row">
<div class="column project-tile">
<iframe height="265" style="width: 80%;" scrolling="no" title="Tribute Page Mehmed ||" src="https://codepen.io/janjib/embed/preview/LYpwyBB?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/LYpwyBB'>Tribute Page Mehmed ||</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: 80%;" scrolling="no" title="RwrbRvr" src="https://codepen.io/janjib/embed/preview/RwrbRvr?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/RwrbRvr'>RwrbRvr</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 class="row">
<div class="column">
<iframe height="265" style="width: 80%;" scrolling="no" title="WNQVxgd" src="https://codepen.io/janjib/embed/preview/WNQVxgd?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/WNQVxgd'>WNQVxgd</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: 80%;" scrolling="no" title="Oda Nobunaga's Tribute Page" src="https://codepen.io/janjib/embed/preview/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'>Oda Nobunaga's Tribute Page</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>
</section>
/* Style the navigation menu */
.topnav {
background-color: black;
overflow: hidden;
position: fixed;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
}
/* Style navigation menu links */
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
/* Style the hamburger menu */
.topnav a.icon {
display: block;
position: fixed;
right: 0;
top: 0;
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Style the active link (or home/logo) */
.active {
background-color: black;
color: white;
}
body{
background:black;
color:white;
font-family: 'Space Mono', monospace;
}
h1{
font-size:40px;
}
p{
font-size:25px;
}
#welcome-section{
height:500px;
justify-content:center;
display:flex;
align-items:center;
background-image:url("https://c4.wallpaperflare.com/wallpaper/500/442/354/outrun-vaporwave-hd-wallpaper-thumb.jpg")
}
#projects{
height:500px;
}
.row{
display:flex;
flex-direction:row;
width:100%;
margin-left:100px;
}
.column{
display:flex;
flex-direction:column;
flex:1;
margin-bottom:40px;
}
h1{
text-align:center;
}
.profile-link{
display:flex;
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
External CSS
This Pen doesn't use any external CSS resources.