Overviews
Hello readers, today in this blog you are going to learn how to create a fully responsive personal portfolio website using only HTML and CSS. Personal portfolio sites are consistent and should be taken care of throughout your business. It provides a convenient way for potential clients to showcase your business while also allowing you to expand your skills/experiences and services.
On the blog, I saw the Responsive Single Page Personal Website, and I hope you understood the little icons of this design. I did my best to make this blog understandable to all readers. If this blog has been of some help to you, don't forget to leave a comment.
I have provided all the codes for this project below and also provided this project download link where you can easily download the source files of this portfolio project. You can use this project with your own creative customization and you can take this project to the next level with your creativity.
Responsive Personal Portfolio Website
--- Source Codes ---
To create this website (personal website), you need to create two files: an HTML file and a CSS file. After creating these files, just paste the following codes into your file.
HTML
First, create an HTML file named index.html and paste the given code into your HTML file. Remember that you must create a file with a .html extension and the images used on this website will not appear. You have to download the files from the given download button to use the images as well.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Music-Website ==> | Bijan Rai</title>
<!---- CSS ---->
<link rel="stylesheet" href="./source/css/style.css">
<!---- BOXICONS ---->
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="continer">
<!------- MAIN -------->
<div class="main-content">
<!------- NAV-BAR -------->
<div class="circle">
<span class="circle_0"></span>
<span class="circle_1"></span>
<span class="circle_2"></span>
</div>
<nav class="nav-bar">
<div class="logo">
<a href="#"><i class='bx bx-headphone'></i>Music</a>
</div>
<div class="navigatation section">
<a class="active" href="#">Home</a>
<a href="#">About</a>
<a href="#">Blogs</a>
<a href="#">Contact</a>
<a class="sign-up" href="#">Sign-Up</a>
</div>
</nav>
<div class="home-content section">
<div class="heading">
<span>Hello <h1>Dear</h1></span>
<p>Music is the best sounds where <br> people are forget the pain of their life.</p>
<div class="social-icons">
<a href="#"><i class='bx bxl-facebook-circle'></i></a>
<a href="#"><i class='bx bxl-github'></i></a>
<a href="#"><i class='bx bxl-instagram-alt' ></i></a>
<a href="#"><i class='bx bxl-youtube'></i></a>
</div>
<div class="button">
<input type="button" value="Hire Us->">
<input type="button" value="Get Start->">
</div>
</div>
<div class="login-form">
<form action="#" method="post">
<h2><i class='bx bx-headphone'></i>Music</h2>
<div class="input-data">
<input type="email" placeholder="Email or username" required />
<input type="password" placeholder="Password" required />
</div>
<div class="login-button">
<input type="button" value="sign-in">
</div>
<p>Not have account <a href="#">click here...</a></p>
</form>
</div>
</div>
<footer class="copy-right">
<p> <span>©</span>Create by <a href="#">Bijan Rai</a>. All rigths reserved</p>
</footer>
</div>
</div>
</body>
</html>
CSS
Second, create a CSS file named style.css and paste the given symbols into your CSS file. Remember that you must create a file with a .css extension.
:root {
/*==== COLORS ====*/
--body-color: hsla(229, 59%, 85%, 1);
--text-color: hsla(148, 7%, 6%, 1);
--text: #fff;
--first-color: hsla(321, 81%, 54%, 1);
--primary-color: rgba(39, 233, 50, 1);
--first-circle: hsla(336, 98%, 54%, 1);
/*=== FONTS SIZE ===*/
--h1-font: 1.59rem;
--h2-font: 1.45rem;
--h3-font: 1.35rem;
--normal-font: 1rem;
--small-font: 0.934rem;
}
/*=== BASIC ====*/
a {
text-decoration: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--body-color);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
/*=== CONTAINER ===*/
.continer {
position: relative;
background-color: var(--text);
height: 90vh;
width: 90%;
border-radius: 20px;
box-shadow: 1px 2px 2px 1px var(--primary-color);
overflow: hidden;
}
/*=== HOME PAGE ===*/
.main-content {
background: url("../images/music.jpg") center/cover no-repeat fixed;
z-index: 1000;
border-radius: 20px;
height: 100%;
}
.main-content .circle {
display: flex;
position: absolute;
padding: 15px 15px;
gap: 2px;
background: transparent;
}
.main-content .circle span {
height: 1.5rem;
width: 1.5rem;
background-color: var(--first-circle);
border-radius: 50%;
}
.main-content .circle span.circle_1 {
background-color: hsla(119, 76%, 47%, 1);
}
.main-content .circle span.circle_2 {
background-color: hsla(245, 33%, 79%, 1);
}
.nav-bar {
display: flex;
justify-content: space-between;
}
.logo,
.navigatation {
margin: 5.5% 8%;
}
.logo a {
font-weight: 900;
height: 2.5rem;
color: var(--first-color);
font-size: var(--h1-font);
}
.logo a i {
color: red;
}
.navigatation a {
padding: 3px 5px;
border-radius: 5px;
font-size: var(--h3-font);
font-weight: 500;
color: var(--text);
cursor: pointer;
transition: 0.9s;
}
.navigatation a:hover,
.navigatation a.active {
color: var(--text-color);
background-color: var(--text);
}
.sign-up{
border: 2px solid var(--text-color);
}
/*==== CONTENT ===*/
.home-content {
display: flex;
justify-content: space-between;
margin: 5% 8%;
}
.home-content .heading {
background: none;
}
.home-content .heading span {
font-size: var(--h1-font);
display: flex;
gap: 0.5rem;
font-weight: 500;
color: var(--text-color);
text-transform: uppercase;
}
.home-content .heading span h1 {
font-size: var(--h1-font);
color: var(--first-color);
text-transform: capitalize;
}
.home-content .heading p {
margin: 10px 0;
font-size: var(--normal-font);
color: var(--text);
}
.social-icons{
position: relative;
margin: 5px 0px;
}
.social-icons a{
padding: 0 3px;
font-size: var(--h3-font);
color: var(--text-color);
}
.social-icons a:hover{
color: var(--text);
}
.button {
display: flex;
gap: 5px;
margin-top: 1rem;
}
.button input {
width: 70px;
height: 30px;
background: transparent;
border-radius: 10px;
border: 2px solid var(--text-color);
cursor: pointer;
transition: 0.85s;
outline: none;
}
.button input:hover {
background-color: var(--first-circle);
color: var(--text);
border: none;
}
.login-form {
display: flex;
height: 50%;
top: 0;
bottom: 0;
}
.login-form form {
position: relative;
align-items: center;
background-color: var(--text-color);
padding: 25px 15px;
border-radius: 9px;
}
.login-form h2 {
margin: 5px 0 0;
text-align: center;
font-size: var(--h3-font);
color: var(--first-color);
border-bottom: 2px solid var(--primary-color);
text-transform: uppercase;
}
.login-form h2 i {
color: var(--first-circle);
}
.login-form p {
font-size: var(--normal-font);
color: var(--text);
text-align: justify;
}
.login-form p a {
font-size: var(--small-font);
color: var(--primary-color);
}
.login-form form .input-data {
display: grid;
padding: 20px 0;
}
.login-form form .input-data input {
margin: 3px 0;
height: 1.75rem;
width: 100%;
padding: 20 5px;
border: none;
background: none;
border-bottom: 2px solid var(--body-color);
outline: none;
color: var(--text);
font-size: var(--normal-font);
}
.login-button {
margin-bottom: 10px;
position: relative;
}
.login-button input {
width: 100%;
height: 30px;
border: none;
border-radius: 8px;
font-size: var(--h3-font);
background-color: var(--primary-color);
}
.copy-right {
display: flex;
position: absolute;
bottom: 0;
width: 100%;
justify-content: center;
padding-bottom: 5px;
}
.copy-right p {
font-size: var(--normal-font);
color: var(--text);
}
.copy-right p span{
color: rgba(55, 0, 255, 1);
font-size: var(--h3-font);
}
.copy-right p a{
font-size: var(--small-font);
color: var(--primary-color);
font-style: italic;
}
.copy-right p a:hover{
color: var(--first-circle);
}
That's it, you have now successfully created a responsive personal portfolio website using only HTML and CSS. If your code does not work or you encounter any error/problem, please download the source code files from the given download button. It is free and the .zip file will be downloaded and then you have to extract it. If you face any problem while downloading or after downloading the source code files, feel free to comment or contact us through the contact page.