How to Create a Responsive Personal Portfolio Website HTML

How to Create a Responsive  Personal Portfolio Website HTML
Personal Portfolio Website

Learn How To Make Responsive Personal Portfolio Website Only Using HTML and CSS. Easy Way To Create Portfolio Website in HTML and CSS. You will create this website by watching my video or follow those steps, which I have given below.



How to Make a Responsive Personal Portfolio Website Only using HTML and CSS

  1. 0.0 - 2.0 min : Intro
  2. 1.0 - 54.0 min: Create a Responsive Personal Portfolio Website Only using HTML and CSS


Basic HTML Code

This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices.


<!--doctype html-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<title>Personal Website</title>
	<!--style----->
	<style>
		body{
			font-family:poppins;
		}
	</style>
	
</head>

<body>
</body>
</html>

Portfolio Website HTML CSS

You can easily make a personal Portfolio Website by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML and CSS code that I give below. Paste this HTML and CSS code into your HTML and CSS file. On the youtube video tutorial, I tell you all the important points which help you to make the Personal Portfolio Website like that for your website. So I recommended you watch the Personal Portfolio Website Section video Tutorial on how can I make this Only using HTML and CSS. This Personal Portfolio Website is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand my Personal Portfolio Website video tutorial on how I make this Personal Portfolio Website. you can use this on your website without any copyright.


Navigation
Navigation HTML CSS

➤ Navigation HTML Code have given below.


<section id="main">
<nav>
	<!--logo--------------->
	<a href="#" class="logo">
		<img src="images/logo.png"/>	
	</a>
	<!--menu-btn-------------->
		<input class="menu-btn" type="checkbox" id="menu-btn">
		<label class="menu-icon" for="menu-btn">
			<span class="nav-icon"></span>
		</label>
	<!--menu-------------->
	<ul class="menu">
		<li><a href="#main">Home</a></li>	
		<li><a href="#skills">Skills</a></li>	
		<li><a href="#recent">Recent</a></li>	
		<li><a href="#client">Client</a></li>	
		<li><a href="#contact">Contact</a></li>	
	</ul>
	<!--say-hey--------->
	<a href="#" class="hey">Say Hi!</a>
	</nav>
    </section>

➤ Navigation CSS Code have given below.

@charset "utf-8";
/* CSS Document */
body{
	margin:0px;
	padding: 0px;
	font-family: poppins;
	
}
*{
	box-sizing:border-box;
	scroll-behavior: smooth;
}
ul{
	list-style:none;
}
a{
	text-decoration:none;
}
#main{
	width:100%;
	height:100vh;
	position: relative;
}
nav{
	display: flex;
	justify-content: space-around;
	align-items: center;
	box-shadow: 5px 10px 30px rgba(0,0,0,0.02);
	position: fixed;
	left: 0;
	top: 0;
	width:100%;
	z-index: 1;
	background-color: #FFFFFF;
}
.logo img{
	height:45px;
}
nav ul{
	display: flex;
}
nav ul li a{
	height:40px;
	line-height: 43px;
	margin: 3px;
	padding: 0px 22px;
	display: flex;
	font-size: 0.8rem;
	text-transform: uppercase;
	font-weight: 500;
	color:#585b5b;
	letter-spacing: 1px;
}
.hey{
	color:#39bfbd;
	font-weight: 500;
	font-size: 0.9rem;
	border-bottom: 2px solid #40c6c4;
}
nav ul li a:hover{
	background-color: #2adabc;
	color:#FFFFFF;
	box-shadow: 5px 10px 30px rgba(64,198,196,0.3);
	transition: all ease 0.2s;
}

Content
content HTML

➤ Content HTML Code have given below.


  <!--content----------------->
	<div class="content">
	<!--model--------------->
	<div class="model">
		<img src="images/model.png"/>	
	</div>
	<!--text-------------->
	<div class="main-text">
		<h1>Hello, I am Smith</h1>
		<p>Hey, In this video i am gonna show you how to make a responisve personal website only using HTML and CSS.</p>
	<!--btn------->
		<a href="#" class="portfolio-btn">See My Portfolio</a>
	</div>
	</div>
  

➤ Content CSS Code have given below.

.model img{
	width:100%;
	height: 100%;
	object-fit: contain;
}
.model{
	width:500px;
	height: 500px;
}
.content{
	width:90%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.main-text{
	width:500px;
}
.main-text h1{
	font-size: 3.5rem;
	color:#1c3548;
	margin:0px 0px 10px 0px;
	line-height: 60px;
}
.main-text p{
	color:#747474;
}
.portfolio-btn{
	width:190px;
	height: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	color:#FFFFFF;
	background-color: #1db096;
	border-radius: 20px;
	box-shadow: 4px 10px 30px rgba(24,139,119,0.2);
}
.portfolio-btn:hover{
	background-color: #23cdaf;
	transition: all ease 0.2s;
}

Skill
Skill Section HTML

➤ Skills HTML Code have given below.


  <!--skills------------->
	<section id="skills">
	<!--text--------->
	<div class="skill-text">
		<!--heading-->
		<div class="skill-heading">
		<span>My Skills</span>
		<h2>My Experties</h2>
		</div>
		<!--skill-box-container----------->
		<div class="s-box-container">
		<!--skill-box-------------->
		<div class="skill-box">
		<!--icon------->
		<div class="s-box-icon">
			<i class="fab fa-html5"></i>
		</div>
		<!--skill-box-text--------->
		<div class="s-box-text">
		<strong>Hyper Text Markup Language(HTML)</strong>
		<p>I have 3 years experience in HTML and i completed 100+ HTML project.</p>
		</div>
		</div>
		<!--skill-box-------------->
		<div class="skill-box">
		<!--icon------->
		<div class="s-box-icon">
			<i class="fab fa-css3-alt"></i>
		</div>
		<!--skill-box-text--------->
		<div class="s-box-text">
		<strong>Cascading Style Sheets(CSS)</strong>
		<p>I have 3 years experience in CSS and i completed 100+ CSS project.</p>
		</div>
		</div>
		<!--skill-box-------------->
		<div class="skill-box">
		<!--icon------->
		<div class="s-box-icon">
			<i class="fab fa-js-square"></i>
		</div>
		<!--skill-box-text--------->
		<div class="s-box-text">
		<strong>JavaScript(Js)</strong>
		<p>I have 3 years experience in JavaScript and i completed 100+ Js project.</p>
		</div>
		</div>
			
			
		</div>
	</div>
	<!--img--------------->
	<div class="skill-img">
	<img src="images/skill2.png"/>	
	</div>
	</section>
  

➤ Skills CSS Code have given below.

#skills{
	display: flex;
	justify-content: space-around;
	align-items: center;
	width:90%;
	margin:auto auto 50px auto;
}
.skill-text{
	width:400px;
}
.skill-img{
	width:600px;
	height: 600px;
}
.skill-img img{
	width:100%;
	height: 100%;
	object-fit: contain;
}
.skill-heading span{
	color:#36b7b5;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1rem;
}
.skill-heading h2{
	color: #1c3548;
	font-size: 3.3rem;
	margin:0px;
	font-weight: 400;
	letter-spacing: 1px;
}
.s-box-container{
	margin-top: 30px;
}
.skill-box{
	display: flex;
	margin: 25px 0px;
}
.s-box-icon{
	margin-right:12px;
}
.s-box-icon i{
	width:40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f0f0f0;
	font-size: 1.1rem;
}
.s-box-text strong{
	color:#1c3548;
	margin: 0px;
	font-size: 0.9rem;
	font-weight: 600;
}
.s-box-text p{
	color:#747474;
	font-size: 0.9rem;
}
.fa-html5{
	color:#e06061;
}
.fa-css3-alt{
	color:#416cdf;
}
.fa-js-square{
	color:#f98231;
}

Recent

➤ Recent Section HTML Code have given below.


  <!--recent-project---------------------------->
	<section id="recent">
	<!--heading--------------->
	<div class="recent-heading">
	<span>Recent</span>
	<h3>Recent Doing Project Design</h3>
	</div>
	<!--img--------------->
	<div class="recent-img">
		<img src="images/recent.png"/>	
	</div>
	<!--btn----------->
	<a href="#" class="recent-btn">View Design</a>
	</section>
  

➤ Recent Section CSS Code have given below.

#recent{
	display: flex;
	justify-content: center;
	align-items: center;
	margin:30px 0px;
	flex-direction: column;
}
.recent-heading span,
.client-heading span{
	color:#36b7b5;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1.1rem;
}
.recent-heading h3,
.client-heading h3,
#contact h3{
	color:#1c3548;
	font-size: 3rem;
	margin: 0px;
	font-weight: 400;
	letter-spacing: 1px;
}
.recent-img{
	margin:0px 40px;
}
.recent-img img{
	width:100%;
	height: 100%;
}
.recent-btn{
	width:190px;
	height: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	color:#FFFFFF;
	background-color: #1db096;
	border-radius: 20px;
	box-shadow: 4px 10px 30px rgba(24,139,119,0.2);
}

.recent-btn:hover{
	background-color: #23cdaf;
	transition: all ease 0.2s;
}
.recent-btn{
	width:190px;
	margin-top: -20px;
}


Client
Client Section HTML

➤ Client Section HTML Code have given below.


  <!--client----------------------------------->
	<section id="client">
	<!--heading------->
	<div class="client-heading">
	<span>Comments</span>
	<h3>Client's Say</h3>
	</div>
	<!--client-box-container--------------->
	<div class="c-box-container">
	<!--box-1----->	
	<div class="client-box">
		<!--img-------->
		<img src="images/client-1.png"/>
		<!--stars/reviews---------->
		<div class="star">
			<i class="fas fa-star"></i>
			<i class="fas fa-star"></i>
			<i class="fas fa-star"></i>
			<i class="fas fa-star"></i>
			<i class="fas fa-star"></i>
		</div>
		<!--details/comment------>
		<p>If you're looking for random paragraphs, you've come to the right place. When a random word or a random sentence isn't quite enough, the next logical step is to find a random paragraph. </p>
		<!--btn--------->
		<a href="#">Read More</a>
	</div>
		<!--box-2----->	
	<div class="client-box">
		<!--img-------->
		<img src="images/client-2.png"/>
		<!--stars/reviews---------->
		<div class="star">
			<i class="fas fa-star"></i>
			<i class="fas fa-star"></i>
			<i class="fas fa-star"></i>
			<i class="fas fa-star"></i>
			<i class="far fa-star"></i>
		</div>
		<!--details/comment------>
		<p>If you're looking for random paragraphs, you've come to the right place. When a random word or a random sentence isn't quite enough, the next logical step is to find a random paragraph. </p>
		<!--btn--------->
		<a href="#">Read More</a>
	</div>
		<!--box-3----->	
	<div class="client-box">
		<!--img-------->
		<img src="images/client-3.png"/>
		<!--stars/reviews---------->
		<div class="star">
			<i class="fas fa-star"></i>
			<i class="fas fa-star"></i>
			<i class="fas fa-star"></i>
			<i class="fas fa-star"></i>
			<i class="far fa-star"></i>
		</div>
		<!--details/comment------>
		<p>If you're looking for random paragraphs, you've come to the right place. When a random word or a random sentence isn't quite enough, the next logical step is to find a random paragraph. </p>
		<!--btn--------->
		<a href="#">Read More</a>
	</div>
	</div>
	</section>
      

➤ Font Awesome Link


  <!--using FontAwesome--------------->
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
  

➤ Client Section CSS Code have given below.

#client{
	width:100%;
	border-top: 1px solid rgba(58,58,58,0.03);
	border-bottom: 1px solid rgba(58,58,58,0.03);
	padding: 50px 0px;
	background-image: url("../images/bg.png");
	background-position: center;
	background-size: 1000px;
}
.client-heading{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.c-box-container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin:20px 0px;
}
.client-box {
	width:310px;
	height: 350px;
	background-color: #FFFFFF;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 10px;
	margin: 20px;
	box-shadow: 5px 10px 30px rgba(0,0,0,0.08);
}
.client-box img{
	width:90px;
	height: 90px;
	border-radius: 50%;
	object-fit: cover;
}
.client-box strong{
	color:#1c3548;
	margin:0px;
	font-size: 1.1rem;
	font-weight: 600;
	margin-top:10px;
}
.star{
display: flex;
	margin: 10px 0px 10px 0px;
}
.star i{
	color:#ff9529;
}
.client-box p{
	color:#747474;
	font-size: 0.9rem;
	margin:0px;
	text-align: center;
	display: block;
	display: -webkit-box;
	max-width: 80%;
	-webkit-line-clamp:4;
	-webkit-box-orient:vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.client-box a{
	width:190px;
	height: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	color:#FFFFFF;
	background-color: #1db096;
	border-radius: 20px;
	box-shadow: 4px 10px 30px rgba(24,139,119,0.2);
}
.client-box a{
	width:140px;
	margin-top: 20px;
	border-radius: 0px;
}
.client-box:hover{
	transform: translateY(-10px);
	box-shadow: 5px 10px 30px rgba(0,0,0,0.1);
    background-color: #23cdaf;
	transition: all ease 0.2s;
}

Contact and Footer

➤ Contact and Footer Section HTML Code have given below.


  <!--contact------------------------->
	<section id="contact">
	<!--img-------->
	<img src="images/contact.svg"/>
	<!--heading---------------->
	<h3>Get The Best Project Estimation</h3>
	<!--input----------------->
	<div class="contact-input">
		<input type="email" placeholder="Example@gmail.com"/>
		<a href="#">Continue</a>
	</div>
	</section>
	<!--footer--------->
	<footer>
	<p>Going To Internet, Ltd Consumer Website</p>
	<p>Copyright 2020 - GoingToInternet</p>
	</footer>
  

➤ Contact and Footer Section CSS Code is have given below.

#contact{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin:40px 0px;
}
#contact h3{
	font-size:2.5rem;
	margin:20px;
}
#contact img{
	height:300px;
}
.contact-input{
	width:400px;
	height:50px;
	background-color:#FFFFFF;
	display:flex;
	justify-content: center;
	border-radius: 50px;
	box-shadow: 2px 2px 30px rgba(0,0,0,0.15);
}
.contact-input input{
	width:100%;
	background-color: transparent;
	border:none;
	outline: none;
	text-align: center;
	color:#242425;
}
.contact-input a{
	width:200px;
	height:35px;
	background-color:#1db096;
	color:#FFFFFF;
	display: flex;
	font-size: 0.9rem;
	justify-content: center;
	align-items: center;
	margin: auto 10px;
	border-radius: 20px;
	font-weight: 500;
}
footer{
	display:flex;
	justify-content: space-around;
	border-top: 1px solid rgba(232,232,232,0.5);
	background-color:#FFFFFF;
}
footer p{
	margin:15px 0px;
	color:#5f5f5f;
	font-size: 0.9rem;
}

Make Responsive
nav .menu-btn,
.menu-icon{
		display:none;
	}
@media(max-width:1140px){
	.content{
		width:100%;
	}
	.model{
		width:400px;
		height: 400px;
	}
	.main-text,.model{
		margin:10px;
	}
	.main-text h1{
		font-size:3rem;
	}
	.skill-img{
		width:400px;
		height: 400px;
	}
	.client-box{
		flex-grow:0.5;
	}
}
@media(max-width:900px){
.menu-icon{
display:block;}
	nav{
		justify-content: space-between;
		height: 65px;
		padding: 0px 30px;
	}
	.logo img{
		height:35px;
	}
	.menu{
		display:none;
		position:absolute;
		top:65px;
		left:0px;
		background-color:#FFFFFF;
		border-bottom:4px solid #1db096;
		width:100%;
		padding:0px;
		margin:0px;
	}
	.menu li{
		width:100%;
	}
	nav .menu li a{
		width:100%;
		height:40px;
		justify-content: center;
		align-items: center;
		margin:0px;
		padding: 25px;
		border:1px solid rgba(38,38,38,0.03);
	}
	nav .menu-icon{
		cursor:pointer;
		float:right;
		padding:28px 20px;
		position:relative;
		user-select: none;
	}
	nav .menu-icon .nav-icon{
		background-color:#333333;
		display:block;
		height:2px;
		position:relative;
		transition: background 0.2s ease-out;
		width:18px;
	}
	nav .menu-icon .nav-icon:before,
	nav .menu-icon .nav-icon:after{
		background:#333;
		content:'';
		display:block;
		height:100%;
		position:absolute;
		transition:all ease-out 0.2s;
		width:100%;
	}
	nav .menu-icon .nav-icon:before{
		top:5px;
	}
	nav .menu-icon .nav-icon:after{
		top:-5px;
	}
	nav .menu-btn:checked ~ .menu-icon .nav-icon{
		background:transparent;
	}
	nav .menu-btn:checked ~ .menu-icon .nav-icon:before{
		transform: rotate(-45deg);
		top:0;
	}
	nav .menu-btn:checked ~ .menu-icon .nav-icon:after{
		transform: rotate(45deg);
		top:0;
	}
	nav .menu-btn{
		display:none;
	}
	nav .menu-btn:checked ~ .menu{
		display:block;
	}
	#skills{
		width:100%;
		justify-content: space-between;
		padding-left: 40px;
	}
	.skill-text{
		width:400px;
	}
	.skill-img{
		width:40%;
		height:300px;
	}
	.skill-img img{
		object-fit: cover;
		object-position: left;
	}
	.recent-heading h3,
	.client-heading h3,
	#contact h3{
		font-size:2.2rem;
		text-align:center;
	}
	.recent-heading{
		text-align:center;
		padding:0px 15px;
	}
	
}
@media(max-width:720px){
	.model{
		display:none;
	}
	.main-text{
		width:70%;
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		
	}
	#contact img{
		height:200px;
	}
	footer{
		justify-content: center;
		padding:10px 20px;
	}
	footer p{
		text-align: center;
	}
	.recent-btn{
		margin:0px;
	}
}
@media(max-width:530px){
	.contact-input{
		width:90%;
	}
	.skill-img{
		display:none;
	}
	.skill-text{
		width:85%;
	}
	#skills{
		margin:0px;
	}
}



How To Dowload Files

Comments


Archive

Contact Form

Send