How To Create A Complete Personal Portfolio Website Using HTML

byPosted at
How To Create A Complete Personal Portfolio Website Using HTML

Personal Portfolio Website

Learn How To Make a Complete Personal Portfolio Website Template In HTML And CSS. Easy Way To Create A Personal Website Using HTML And CSS. You'll Make This Awesome Portfolio Website By Following These Steps Which I Given Below.



How To Create A Complete Personal Portfolio Website Using HTML

  1. 0.0 - 1.30 min : Intro
  2. 1.30 - 39.0 min: Build a Personal Website 


About This Tutorial

Hello! In This Video Tutorial, I will show You How To Make a Personal Portfolio Website Design Using HTML And CSS. It Is Very Easy To Create This Template. Beginners Easy Learn How To Make a Personal Website. In This Video First, I Show The Design Which I Create In This Tutorial. Then I'll Make HTML And CSS File In Project Folder. Then I Will Make The Website Structure Using HTML And Design This Structure Using CSS StyleSheet. After Doing This, Your Front End Page Design Ready To Use.I Hope You Like This Article And Tutorial. Please Subscribe My Youtube Channel For More Amazing Video Tutorials.

Basic HTML Code 

<!--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>
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
	<!--style----->
	<style>
		body{
			font-family:poppins;
		}
	</style>
	
</head>

<body>
</body>
</html>


Navigation
Create Website Navigation HTML

➤ Navigation HTML Code have given below.


<section>
	<!--navigation------------------------->
	<nav>
	<!--logo-->
	<a href="#" class="logo">G T Internet</a>
	<!--menu-->
	<ul>
	<li><a href="#" class="active">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact us</a></li>
	<li><a href="#">Team</a></li>
	</ul>
	<!--bars--------------->
	<div class="toggle"></div>
	
	</nav>
  </section>

➤ Navigation CSS Code have given below.

@charset "utf-8";
/* CSS Document */
body{
	background-color:#f6f5f5;
	margin:0px;
	padding:0px;
}
ul{
	list-style:none;
}
a{
	text-decoration:none;
}
section{
	width:100%;
	height:95vh;
	background-image:url("../images/bg.png");
	background-size:cover;
	background-repeat:no-repeat;
	position: relative;
}
nav {
	display: flex;
	justify-content: space-between;
	align-items:center;
	height:60px;
	background-color:#ffffff;
	box-shadow:2px 2px 12px rgba(0,0,0,0.2);
	padding:0px 5%;
	
}
nav ul{
	display: flex;
}
.toggle{
	display: none;
}

nav ul li a{
	margin:30px;
	font-family:myriad pro regular;
	color:#505050;
	font-size: 15px;
	font-weight:700;
}
.logo{
	font-family:RoadTest;
	color:#000000;
	font-size: 22px;
}
.active{
	color:#2d2a2a;
	font-weight:bold;
}

Content
Create Website Content Section HTML

➤ Content HTML Code have given below.


<!--text----------------------->
		<div class="text-container">
			<p>Hello,</p>
		    <p>I&#8217;M MICHAEL</p>
			<p>Freelancing with Designer <br>& Devolper</p>
			<button class="hire-btn">Hire me</button>
			<button class="down-cv">Download CV</button>
		</div>
	<!--model---------------------->
	<img alt="model" class="model" src="images/model.png">

➤ FontAwesome Link Past in "Head" section.


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

➤ Content CSS Code have given below.

.model{
	height:530px;
	position:absolute;
	bottom:40px;
	left:75%;
	transform: translateX(-75%);
}
.text-container p:nth-child(1){
	font-family: calibri;
	font-weight:bold;
	color:#6d6d6d;
	font-size:22px;
}
.text-container p:nth-child(2){
	font-family:calibri;
	font-weight:bold;
	letter-spacing:1px;
	color:#1a1a1a;
	font-size:60px;
	
}
.text-container p:nth-child(3){
	font-family: myriad pro regular;
	color: #403e3e;
	font-size:30px;
	line-height:30px;
}

.text-container p{
	margin:45px 0px 25px;
	line-height:0px;
}
.text-container button{
	width:130px;
	height:42px;
	border-radius:10px;
	font-family:calibri;
	font-weight:bold;
	font-size: 14px;
	outline:none;
	margin:0px 10px;
	
}
.text-container{
	position: absolute;
	left:13%;
	top:42%;
	transform:translate(-13%,-42%);
}
.hire-btn{
	border:2px solid #373636;
	color:#373636;
	background-color:transparent;
	
}
.down-cv{
	background-color:#0B0B0B;
	color:#fff;	
	border:none;
}
button:active{
	transform:scale(1.1);
}

About
Create About Section HTML

➤ About HTML Code have given below.


  <div class="about-container">
	<!--img-->
		<img src="images/about-img.png"/>
	<!--about-me-text-->
		<div class="about-text">
		<p>About Me</p>
		<p>Devolper & Designer</p>
		<p>Hello,My name is Touseeq Ijaz. I am a Devolper and also a Designer.If you have asany Project or if you want make a software for your bisnes conatact me.I make as soon as possibale.You really like my work,if you don&#8217;t i change this until you like I give you seticfaction result.</p>
		<p>I am a Devolper and also a Designer.If you have asany Project or if you want make a software for your bussniess conatact me.I make your project as soon as possible.</p>
		<button>Hire Me</button>
		<button>Download CV</button>
		</div>
	</div>

➤ About CSS Code have given below.

.about-container{
	width:80%;
	height:330px;
	background:#ffffff;
	border-radius:20px;
	box-shadow:2px 2px 12px rgba(0,0,0,0.2);
	display: flex;
	margin: -7%  auto 20px auto;
	position: relative;
	justify-content:space-evenly;
	align-items: center;
}
.about-container img{
	height:250px;
}
.about-text{
	width:500px;
} 
.about-text p:nth-child(1){
	color:#403e3e;
	font-family: myriad pro;
	font-weight:bold;
	font-size:23px;
	line-height:0px;
}
.about-text p:nth-child(2){
	color:#3e3d3d;
	font-size:13px;
	font-family: myriad pro;
	font-weight:bold;
	line-height:5px;
}
.about-text p:nth-child(3),.about-text p:nth-child(4){
	color:#7e7d7d;
	font-family:calibri;
	font-size:16px;
}
.about-text button{
	width:120px;
	height: 40px;
	color:#ffffff;
	outline:none;
	border:none;
	font-family: calibri;
	background-color:#262525;
}

Services
Create Services Section HTML

➤ Services Section HTML Code have given below.


  <!--services-container---------------------------->
	<div class="services ">
		<!--text-->
		<div class="services-text ">
	<p>Services</p>
	<p>Qualites Requaid</p>
	<p>if you want make a software for your bussniess conatact me.I make as soon as possibale.You really like my work, if you don&#8217;t i change this until you like if you want make a software for your bussniess conatact me.I make as soon</p>
			</div>
		<div class="box-container">
		<!--1------------->
			<div class="box-1">
			<span>1</span>
			<p class="heading">Web Design</p>
			<p class="details">if you want make a software for your bussniess conatact me.I make as soon as possibale.You really like my work, if you don&#8217;t i change this until you like if you want.</p>
			<button>Read More</button>
			</div>
	   <!--2------------->
			<div class="box-2">
			<span>2</span>
			<p class="heading">Web Devoloment</p>
			<p class="details">if you want make a software for your bussniess conatact me.I make as soon as possibale.You really like my work, if you don&#8217;t i change this until you like if you want.</p>
			<button>Read More</button>
			</div>
		<!--3------------->
			<div class="box-3">
			<span>3</span>
			<p class="heading">Security SEO</p>
			<p class="details">if you want make a software for your bussniess conatact me.I make as soon as possibale.You really like my work, if you don&#8217;t i change this until you like if you want.</p>
			<button>Read More</button>
			</div>
		</div>
	</div>

➤ Services Section CSS Code have given below.

.services{
	height:600px;
	background-color:#ffffff;
	padding: 2% 10% 0px 10%;
}
.services-text p:nth-child(1){
	font-family: calibri;
	font-weight:bold;
	color:#1d1c1c;
	font-size:30px;
	line-height:0px;
}
.services-text p:nth-child(2){
	font-family:calibri;
	font-weight: bold;
	color:#3e3d3d;
	font-size: 15px;
	line-height: 5px;
}
.services-text p:nth-child(3){font-family:calibri;
color:#7e7d7d;
font-size: ;}
.services-text{
	width: 500px;
	margin:50px 0px;
}
.box-container{
	display:flex;
	justify-content:space-between;
}
.box-1,.box-2,.box-3{
	width: 300px;
	height:320px;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow:2px 2px 18px rgba(0,0,0,0.3);
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
	margin: 0px 4px;
	
	
}

.box-1{
	background-image:url("../images/services-1.png");
}
.box-2{
	background-image:url("../images/services-2.png");
}
.box-3{
	background-image: url("../images/servies-3.png");
}
.box-1 span,
.box-2 span,
.box-3 span{
	width:40px;
	height:40px;
	border-radius:50%;
	background-color:#ffffff;
	display: flex;
	justify-content: center;
	align-items:center;
	font-family: calibri;
	font-weight: bold;
}
.box-1 p:nth-child(2),
.box-2 p:nth-child(2),
.box-3 p:nth-child(2){
	color:#FFFFFF;
	font-family: calibri;
	font-size: 23px;
	line-height:0px;
}
.box-1 p:nth-child(3),
.box-2 p:nth-child(3),
.box-3 p:nth-child(3){
	font-family: calibri;
	color:#8F8F8F;
	text-align:center;
	width: 230px;
	margin:0px 0px 20px 0px;
}
.box-1 button,
.box-2 button,
.box-3 button{
	width:100px;
	height:30px;
	background-color:#FFFFFF;
	border:none;
	outline: none;
	border-radius:5px;
}

Contact
Create Contact Button HTML

➤ Contact Button Section HTML Code have given below.


  <!--if you have any project in your mind contact me-->
	<div class="contact-me">
		<p>If You Have Any Project In Your Mind ?</p>
		<button>Contact me</button>
	</div>

➤ Client Section CSS Code have given below.

.contact-me{
	width: 100%;
	height:280px;
	background-size:cover;
	background-repeat:no-repeat;
	background-image: url("../images/project in your mind.png");
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0px 0px 20px 0px;
}
.contact-me p{
	color:#FFFFFF;
	font-size: 30px;
	font-family: calibri;
	font-weight:bold;
	border-bottom:2px solid #ffffff;
}
.contact-me button{
	width:200px;
	height:40px;
	background-color: #FFFFFF;
	border:none;
	outline:none;
	font-size:14px;
	font-weight:bold;
}


Footer
Create Footer HTML

➤ Footer Section HTML Code have given below.


  <!--footer--------------->
 <footer>
	 <!--heading-->
  <p>Going-To Internet</p>
	 <!--paragraph-->
	 <p>I makeas soon as possibale.You really like my work,if you don&#8217;t i change this until you like I give you seticfaction result</p>
	 <!--social-->
	<div class="social-icons">
	<a href="#"><i class="fab fa-facebook-f"></i></a>
	<a href="#"><i class="fab fa-twitter"></i></a>
	<a href="#"><i class="fab fa-instagram"></i></a>
	<a href="#"><i class="fab fa-youtube"></i></a>
	</div>
	 <!--copyright-->
	 <p class="copyright">Copyright by Goin-To Internet</p>
</footer>
	<!--social-attach-bar-->
	<div class="social">
	<a href="#"><i class="fab fa-facebook-f"></i></a>
	<a href="#"><i class="fab fa-twitter"></i></a>
	<a href="#"><i class="fab fa-instagram"></i></a>
	<a href="#"><i class="fab fa-youtube"></i></a>
	</div>

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

footer p{
	font-family: calibri;
}
footer p:nth-child(1){
	font-size: 30px;
	font-weight:bold;
	color:#191919;
	line-height:10px;
}
footer p:nth-child(2){
	font-size: 16px;
	color:#7e7d7d;
	width:600px;
	text-align: center;
}
footer{
	height:300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}
.social-icons a{
	width:40px;
	height:40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color:#e6e3e3;
	margin:20px 10px;
	border-radius:50%;
}
.social-icons{
	display: flex;
	
}
.social-icons i,.social i{
	color:#000000;
}
.social-icons a:hover{
	background-color:#000000;
	box-shadow:2px 2px 12px rgba(0,0,0,0.2);
	transition:all ease 0.5s;
}
.social-icons a:hover i,
.social a:hover i{
	color:#FFFFFF;
	transition:all ease 0.5s;
}

.copyright{
	color:#565555;
	font-size: 12px;
	position: absolute;
	left:50%;
	bottom:10px;
	transform: translateX(-50%);
}
.social{
	position: fixed;
	top:50%;
	right:0px;
	transform:translateY(-50%);
}
.social a{
	display: flex;
	justify-content: center;
	align-items: center;
	width:50px;
	height:50px;
	margin:0px;
	padding: 0px;
	line-height:0px;
	background-color:#FFFFFF;
	border:1px solid #CBCBCB;
	box-shadow:2px 2px 12px rgba(0,0,0,0.2);
}
.social a:hover{
	background-color:#000000;
	transition:all ease 0.5s;
}
.social i{
	font-size:20px;
	color:#2B2B2B;
}

Make Responsive
Making Website Responsive Using CSS

➤ JQuery Code Past in the End of the Body tag.


  <!--JQUery-------------------->
<script type="text/javascript" src="js/JQuery.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.toggle').click(function(){
			$('.toggle').toggleClass('active')
			$('nav').toggleClass('active')
		})
	})
	</script>

➤ Responsive CSS Code is have given below.

@media(max-width:1000px){
	*{
		box-sizing: border-box;
	}
	.model{
		height: 460px;
		left: 90%;
		transform: translateX(-90%);
	}
	.text-container{
		top:46%;
	}
	.text-container button{
		margin: 5px;
	}
	.about-container{
		width:90%;
		border-radius: 10px;
	}
	.about-container img{
		height: 200px;
	}
	.about-text{
		width: 400px;
	}
	.about-text p:nth-child(1){
		font-size: 20px;
	}
	.about-text p:nth-child(2){
		font-size: 10px;
	}
	
	.about-text p:nth-child(3),
	.about-text p:nth-child(4){
		font-size: 14px;
	}
	.services{
		padding: 2% 5% 0px 5%;
	}
	.box-container{
		justify-content: center;
		flex-wrap: wrap;
	}
	.services{
		height: auto;
	}
	.box-1,.box-2,.box-3{
		flex-grow: 1;
		margin: 10px;
	}
	.contact-me{
		height: 200px;
	}
	.contact-me p{
		font-size: 26px;
	}
	.contact-me button{
		font-size: 14px;
		height:35px;
		width: 160px;
	}
}
@media(max-width:750px){
	section{
		background-image:none;
		background-color:#f7f7f7;
	}
	.model{
		display: none;
	}
	.toggle{
		display: block;
	}
	.text-container p:nth-child(2){
		line-height: 40px;
		margin: 0px;
		padding: 0px;
		
	}
	.text-container{
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 80%;
	}
	nav ul{
		margin: 0px;
		padding: 0px;
		background-color: #ebeef4;
		flex-direction: column;
		position: fixed;
		left: 0;
		top: 0;
		width:100%;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
		display: none;
		
	}
	nav ul li{
		padding: 10px;
	}
	nav ul li a{
		font-family: calibri;
		font-size: 1.4em;
		text-transform: uppercase;
		color:#5c5c5c;
	}
	nav ul li a:hover{
		color:#121212;
	}
	.toggle:before{
		content: '\f0c9';
		font-family: fontAwesome;
		line-height: 30px;
		z-index: 1;
	}
	.toggle.active:before{
		content: '\f00d';
		position: fixed;
		right: 25px;
		line-height: 0px;
		
	}
	nav.active ul{
		display: flex !important;
	}
	.about-container{
		top: 0px;
		flex-direction: column;
		width:90%;
		height: auto;
		padding: 30px 0px;
		align-items: center;
	}
	.about-text{
		width:90%;
		text-align: center;
	}
	.services-text{
		width: 100%;
	}
	.contact-me{
		height: 180px;
	}
	.contact-me p{
		font-size: 18px;
	}
	.contact-me button{
		width: 150px;
		height: 33px;
	}
	footer p:nth-child(2){
		width: 90%;
	}
	
}


How To Dowload Files

Share
24 comments Labels

Comments

  1. Ajahar PathanJuly 26, 2020 at 10:44 PM

    Konsa code editor use krte hai

    ReplyDelete
  2. Going-To InternetJuly 26, 2020 at 11:02 PM

    Adobe Dreamweaver cc 2019

    ReplyDelete
  3. vshahAugust 24, 2020 at 5:25 PM

    nice and very easy to undestand

    ReplyDelete
  4. AdminSeptember 6, 2020 at 3:58 PM

    Vaiya ye konsa theme he

    ReplyDelete
  5. UnknownSeptember 23, 2020 at 11:38 PM

    🤣

    ReplyDelete
  6. UnknownSeptember 26, 2020 at 4:19 PM

    I'm not able to get those images what should i do is there any other way to get these images

    ReplyDelete
  7. Souleymane ThirdSeptember 26, 2020 at 8:25 PM

    Thanks for sharing experiences!!!

    ReplyDelete
  8. WiploxOctober 2, 2020 at 7:06 PM

    Bro image not image.rar file... Please given or uploaded image... Very need it this all image

    ReplyDelete
  9. UnknownOctober 5, 2020 at 10:25 PM

    i can't download image file......it is vary important for me.



    ReplyDelete
  10. Moh Prayogi November 17, 2020 at 6:28 AM

    nice tutorial i like this, thank you so much for you knowladge. I will visit your website again and study with you 👍👍

    ReplyDelete
  11. AmirDecember 23, 2020 at 10:39 AM

    image.rar link not active anymore. Can you please share them again and update the link please?

    ReplyDelete
    Replies
    1. AmirDecember 23, 2020 at 10:42 AM

      Sorry, my mistake. This link is blocked here for some reason!!! I can able to download now using VPN.

      Delete
  12. hasheemi Rafsanjani January 12, 2021 at 6:59 AM

    😀 thats amazing

    ReplyDelete
  13. JabbarJanuary 20, 2021 at 12:34 PM

    Thank you so much.

    ReplyDelete
  14. ZantaFebruary 13, 2021 at 4:50 PM

    Such a nice and easy tutorial. Thank you.

    One question, did you use bootstrap for this?

    ReplyDelete
  15. Danish BaigFebruary 24, 2021 at 4:10 PM

    Can't see any images???

    ReplyDelete
  16. FahimMarch 31, 2021 at 1:54 AM

    I can't download Image file...Please help

    ReplyDelete
  17. UnknownApril 30, 2021 at 6:10 PM

    hello I didn't get the social media icons

    ReplyDelete
  18. Savvy TekMay 25, 2021 at 3:25 AM

    not able to download the files

    ReplyDelete
  19. IkramJuly 25, 2021 at 5:44 PM

    That very nice , thank you so much . I will visited you site again to study with you in fact it's amazing

    ReplyDelete
  20. UnknownAugust 25, 2021 at 1:41 PM

    Thanks for the tutorial Sir, thats amazing.
    Can you help me to give the Toggle of source code fille JQery.js ?

    ReplyDelete

Archive

Contact Form

Send