Build: The Web
😎

A Simple Portfolio Site

To the index.html file, add the following.
<!DOCTYPE html>
<html lang="en"> 
 
	<head>    
		<meta charset="UTF-8" />    
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />    
		<link rel="stylesheet" href="style.css" />    
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>    
		<title>Portfolio</title>  
	</head>  

	<body>
    
		<header>      
			<nav>        
				<img src="https://cdn-icons-png.flaticon.com/512/826/826904.png" width="50" />        
				<i id="menu" class="fa-solid fa-bars fa-2xl"></i>        
				<div id="items">          
					<a href="/index.html">Home</a>          
					<a href="#projects">Projects</a>          
					<a href="#contact">Contact</a>        
				</div>      
			</nav>      
			<div>        
				<h1>Your Name.</h1>        
				<hr />        
				<h3>Web Developer</h3>        
				<p>A short web developer description.</p>        
				<div>          
					<a href="https://twitter.com/LincCodes"><i class="fa-brands fa-twitter fa-2xl"></i></a>          
					<a href="https://www.instagram.com/linccodes/"><i class="fa-brands fa-instagram fa-2xl"></i></a>        
				</div>      
			</div>    
		</header> 
   
		<section class="sec1" id="projects">      
			<h2>Projects</h2>      
			<hr />      
			<p>The projects you have built.</p>      
			<div>        
				<div>          
					<img src="https://images.pexels.com/photos/1591060/pexels-photo-1591060.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />          
					<p>Lorem ipsum dolor sit amet.</p>        
				</div>        
				<div>          
					<img src="https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=940" />          
					<p>Lorem ipsum dolor sit amet.</p>        
				</div>        
				<div>          
					<img src="https://images.pexels.com/photos/270637/pexels-photo-270637.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=940" />          
					<p>Lorem ipsum dolor sit amet.</p>        
				</div>      
			</div>    
		</section> 
   
		<section class="sec2" id="contact">      
			<h2>Contact</h2>      
			<hr />      
			<p>Feel free to reach out to me.</p>      
			<div>        
				<a href="https://twitter.com/LincCodes"><i class="fa-brands fa-twitter fa-2xl"></i></a>        
				<a href="https://www.instagram.com/linccodes/"><i class="fa-brands fa-instagram fa-2xl"></i></a>      
			</div>    
		</section>  
  
		<footer>      
			<p>Copyright @ 2022 - Linc</p>    
		</footer>    

		<script src="script.js"></script>
  
	</body>

</html>
The code might look complex but it isn’t. The code is actually broken down into 4 parts, the header, two sections and a footer.
To the style.css file, add the following.
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Redressed&family=Rubik&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Redressed&family=Rubik&display=swap");

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Rubik", sans-serif;
	color: #fff;
}

h1,
h2,
h3 {
	font-family: "Redressed", cursive;
	text-align: center;
	padding: 10px 0;
}

p {
	text-align: center;
	padding: 0 0 20px 0;
}

::-webkit-scrollbar {
	width: 0;
}

body {
	background-color: #000428;
	width: 100%;
}

hr {
	background-color: rgb(255, 92, 92);
	width: 200px;
	height: 4px;
	border: 0;
	margin-bottom: 10px;
}

header {
	min-height: 100vh;
	background-image: url("https://images.pexels.com/photos/3165335/pexels-photo-3165335.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
	background-size: cover;
	background-position: center;
	opacity: 0.9;
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
}

a {
	padding: 10px;
}
a:hover {
	color: skyblue;
}
nav > div > a {
	text-decoration: none;
	font-size: 1.25rem;
	display: block;
	text-align: center;
}

nav > div > a:hover {
	border: 0;
	background-color: skyblue;
	color: #000;
}

nav > div {
	display: none;
}

header > div {
	min-height: 70vh;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

section {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.sec1 {
	background: linear-gradient(to top, #000428, #01427a);
}
.sec2 {
	background: linear-gradient(to bottom, #000428, #01427a);
}

.sec1 > div {
	display: grid;
	grid-template-columns: 1fr;
	padding: 30px;
}

.sec1 > div > div {
	padding: 10px 0;
}

.sec1 > div > div > img {
	width: 100%;
}

footer {
	padding: 30px;
	background-color: #000428;
	display: flex;
	justify-content: center;
	align-items: center;
}
.show {
	display: block !important;
	position: fixed;
	top: 0px;
	right: 0px;
	padding: 20px;
	background-color: #000428;
	opacity: 0.8;
	width: 70%;
	height: 100vh;
}

@media screen and (min-width: 600px) {
	nav > div > a {
		display: inline;
	}
	h1 {
		font-size: 3em;
	}
	h2 {
		font-size: 2em;
	}
	h3,
	p {
		font-size: 1.25em;
	}
	nav > #menu {
		display: none;
	}
	nav > div {
		display: inline;
	}
	.sec1 > div {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
}
@media screen and (min-width: 800px) {
	h1 {
		font-size: 4em;
	}
	h2 {
		font-size: 3em;
	}
	h3,
	p {
		font-size: 1.5em;
	}
	nav > #menu {
		display: none;
	}
	nav > div > a {
		display: inline;
	}
	.sec1 > div {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 20px;
	}
}
Again, one is free to style it to their liking, the @import url() is used to import a font family into the webpage and the @media screen and (min-width: 0px) is a media query used to make the webpage responsive.
To the script.js file, add the following.
const menu = document.querySelector("#menu");
const items = document.querySelector("#items");
const body = document.querySelector("body");

menu.addEventListener("click", show);
items.addEventListener("click", hide);
body.addEventListener("click", hide, true);

function show() {
	items.classList.add("show");
}
function hide() {
	items.classList.remove("show");
}
The code above selects the div tags with an id of “menu”, items and the body tag and shows and hides the navigation menu on click but adding and removing a class that has display value “none”, check the above CSS style for more info.
badge