Building A Basic Portfolio Website Using HTML CSS And JavaScript

Preview Link
Quick Info
Youtube : https://youtu.be/Thy5IWXN-fo
Views : 63705
Skills : HTML And CSS
Category : Web Design
Tag : Portfolio Website

In This Tutorial We Are Learning how to building a basic portfolio website using html css and javascript. This website is going to be pure HTML and CSS.

You can use this website as a personal portfolio website using html and css. This is complete free, you can use it for personal use

Section We Are Going To build in our basic portfolio website using html css and javascript

In our portfolio website using html css, we are going to design three main section : Header section, Main Body And Footer section

In this tutorial we are going to design 3 main section in our basic portfolio website using html css and javascript, with the help of their sub sections. Subsections are created as per the website content.

Header

  • Logo
  • Main menu
  • Banner

Main Body

  • About us section of portfolio website using html and css
  • Services
  • Experience, Education, Portfolio
  • Testimonial
  • Contact Us

Footer

  • Social media link
  • Copyright information

Video Tutorial

To see full coding video on building a basic portfolio website using html css and javascript to understand easily.

Let's Start The Coding Portfolio Website

Before starting Coding Portfolio Website, Firstly, Create the folder on dekstop, my folder name is portfolio website Inside folder portfolio website, create two sub folder : - 1) css and 2) images

Inside portfolio website folder, I am creating HTML file file name - index.html

Inside css folder, I am creating CSS file - file name - style.css

Let's start with writing basic meta code for coding portfolio website in index.html, and link the style.css file to index.html file

Meta html code. Copy And paste the code in index.html

index.html
 <!-----META SECTION----->
<!DOCTYPE html>
<html>
<head>
<title>Student Portfolio Website Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>

Common CSS. Copy and paste the code in style.css

style.css
/*****COMMON CSS SECTION*****/
  * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-outline: 0;
	font-family Roboto, sans-serif, arial;
}
html, body 
	{
	font-size: 14px;
	font-weight: 400;
	background: #000000;
	color: #fff;
}
.container {
	width: 1100px;
	margin: 0px auto;
	display: table;
}
.width-33 {
	width: 33%;
	float: left;
}
.width-66 {
	width: 66%;
	float: left;
}

2) Now, we will design Navbar Section.

In our Navbar section, we are having content. we are using content are written in ul tag.

Please copy and paste the below code to design Top header section

Navbar Section Of Portfolio HTML Code. Copy This Portfolio Website HTML Code And Paste In index.html file

index.html
<!-----MENU SECTION------>
<div class="main-panel">
  <div class="container">
    <div class="width-33 logo">Port <span class="span-col">folio</span>
    </div>
    <div class="width-66">
      <nav>
        <a href="#">
          <span class="span-col">Home</span>
        </a>
        <a href="#">About me</a>
        <a href="#">Education</a>
        <a href="#">My Services</a>
        <a href="#">Portfolio</a>
        <a href="#">Testimonial</a>
      </nav>
    </div>
  </div>

Navbar Section CSS code. Copy The Code And Paste in style.css

style.css
/*****MENU SECTION*****/
.main-panel {
	width: 100%;
	float: left;
	padding-top: 20px;
	padding-bottom: 50px;
	height: 100vh;
}

.logo {
	font-size: 40px;
	font-weight: 600;
}

.span-col {
	color: #ffbf35;
}

nav {
	float: right;
}

nav a {
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	margin-left: 20px;
	color: white;
}

Output Of Navbar Section of basic portfolio website using html css and javascript

logo and menu section of basic portfolio website using html css and javascript

3) Now, we will design Banner section.

In our portfolio website we are having Banner section with our own image with social media link and button. For Creating we have img tag and for contact me button we are using button tag.

Please copy and paste the below code to design Banner section

Banner Section HTML code. Copy This Code And Paste In index.html file

index.html
<!------MAIN BANNERR------>
<div class="container ">
  <div class="width-50">
    <div class="banner-section">
      <span class="span-col">Welcome To Dezven.com</span>
      <h1>Evans <span class="span-col">Dezven</span>
      </h1>
      <h2>- I'm a passionate graphic designer from New York.</h2>
      <a href="#">
        <i class="fa fa-facebook"></i>
      </a>
      <a href="#">
        <i class="fa fa-twitter"></i>
      </a>
      <a href="#">
        <i class="fa fa-linkedin"></i>
      </a>
      <a href="#">
        <i class="fa fa-instagram"></i>
      </a>
      <a href="#">
        <i class="fa fa-github"></i>
      </a>
    </div>
  </div>
  <div class="width-50">
    <img src="images/about-us.png">
  </div>
</div>
</div>

Banner section CSS code. Copy The Code And Paste in style.css

style.css
/*****Main BANNER*****/
.width-50 {
	float: left;
	width: 50%;
}
.banner-section {
	width: 100%;
	float: left;
	margin-top: 25vh;
}
.banner-section h1 {
	font-size: 48px;
	margin-top: 10px;
	font-weight: bolder;
}
.banner-section h2 {
	font-size: 20px;
	line-height: 25px;
	margin-top: 10px;
	font-weight: 400;
}
.banner-section a {
	float: left;
	text-decoration: none;
	font-size: 18px;
	margin-top: 20px;
	border-radius: 50%;
	text-align: center;
	border: 2px solid #ffbf35;
	color: #ffbf35;
	margin-left: 10px;
	height: 50px;
	width: 50px;
	line-height: 50px;
}
/*****Main BANNER IMAGE*****/
.main-panel img {
	margin-top: 10%;
	width: 100%;
	margin-left: 10%;
}

Output Of Banner Section

banner section of basic portfolio website using html css and javascript

4) Now, we will design About Us Section.

In Our About Us Section, We are going to styling a portfolio using css, we are having content, image and we are using ul and img tag. For Creating image, we have ul and img tag.

Please copy and paste the below code to design About US Section

About Us Section HTML code. Copy This Code And Paste In index.html file

index.html
<!------ABOUT US SECTION------>
<div class="main-section bg-lightgrey">
  <div class="container">
    <div class="width-50">
      <img src="images/about-us.png" class="about-img">
    </div>
    <div class="width-50">
      <div class="about-us">
        <h2 class="heading-text">About Us</h2>
        <h3>I am available for UI UX Design Project</h3>
        <p>Hi, I am Evans Dezven, From USA. Get best computer science student portfolio website Genius In You With Genius 2023. Welcome To The Best Private University in 2023.</p>
        <div class="width-50 mt-20">
          <table cellspacing="8" cellpadding="8">
            <tr>
              <th>Name:</th>
              <td>Evans Dezven</td>
            </tr>
            <tr>
              <th>Email:</th>
              <td> info@example.com</td>
            </tr>
            <tr>
              <th>Birthday:</th>
              <td> 12 March, 1991</td>
            </tr>
            <tr>
              <th>Study:</th>
              <td> Chicago University</td>
            </tr>
          </table>
        </div>
        <div class="width-50 mt-20">
          <table cellspacing="8" cellpadding="8">
            <tr>
              <th>Phone:</th>
              <td>(+12) 3467-890-123</td>
            </tr>
            <tr>
              <th>City:</th>
              <td>New York, USA</td>
            </tr>
            <tr>
              <th>Freelancer:</th>
              <td> Available</td>
            </tr>
            <tr>
              <th>Website:</th>
              <td> www.dezven.com</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

About Us Section CSS Code. Copy The Code And Paste in style.css

style.css
/*ABOUT US SECTION*/
.main-section {
	width: 100%;
	float: left;
	padding: 110px 0px 110px 0px;
}
.width-100 {
	width: 100%;
	float: left;
}
.mt-20 {
	margin-top: 20px;
}
.heading-text {
	width: 100%;
	float: left;
	font-size: 35px;
	text-align: center;
	margin-bottom: 50px;
	color: #ffbf35;
}
.about-img {
	width: 100%;
	padding: 0px 50px;
	margin-top: 20px;
}
.about-us {
	width: 100%;
	float: left;
	padding: 20px;
}
.about-us p {
	font-size: 16px;
	margin-top: 15px;
	line-height: 27px;
}
table {
	width: 100%;
}
table th,
table td {
	font-size: 16px;
	text-align: left;
	padding: 5px 0px;
}

Output Of About Us Section

about us section of basic portfolio website using html css and javascript

5) Now, we will design skill section.

Now we are going to create skill section of portfolio website using html and css. In this section we are having Graph and progress bar with percentage, this we are going to design only using pure HTML and CSS. For creating content we are using paragraph tag

Please copy and paste the below code to design Skill section

Skill Section HTML Code. Copy This Code And Paste in index.html file

index.html
<!------SKILL SECTION------>
<div class="main-section">
  <div class="container">
    <h2 class="heading-text">My Skills</h2>
    <div class="width-50">
      <div class="skill">
        <b>HTML</b>
        <span>95%</span>
        <div>
          <span style="width:95%"></span>
        </div>
      </div>
      <div class="skill">
        <b>CSS</b>
        <span>91%</span>
        <div>
          <span style="width:91%"></span>
        </div>
      </div>
      <div class="skill">
        <b>JavaScript</b>
        <span>85%</span>
        <div>
          <span style="width:85%"></span>
        </div>
      </div>
      <div class="skill">
        <b>React js</b>
        <span>79%</span>
        <div>
          <span style="width:79%"></span>
        </div>
      </div>
    </div>
    <div class="width-50">
      <div class="width-50">
        <div role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="--value:65">React-65</div>
      </div>
      <div class="width-50">
        <div role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="--value:85">Jquery-85</div>
      </div>
      <div class="width-50">
        <div role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="--value:65">Node-65</div>
      </div>
      <div class="width-50">
        <div role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="--value:85">CMD-85</div>
      </div>
    </div>
  </div>
</div>

Skill Section CSS Code. Copy The Code And Paste in style.css

style.css
/*****SKILL SECTION*****/
.skill {
	margin-top: 30px;
	font-size: 17px;
}

.skill span {
	float: right;
}

.skill div {
	width: 100%;
	float: left;
	margin-top: 5px;
	background: #e7e7e7;
	border-radius: 10px;
}

.skill div span {
	background: #ffbf35;
	height: 5px;
	float: left;
}

div[role="progressbar"] {
	color: #ffbf35;
	margin-left: 100px;
	margin-bottom: 20px;
	width: 100px;
	;
	height: 100px;
	;
	border-radius: 50%;

	place-items: center;
	display: grid;

	--pgPercentage: var(--value);
	background: radial-gradient(closest-side, black 80%, transparent 0 99.9%, black 0),
		conic-gradient(#ffbf35 calc(var(--pgPercentage) * 1%), #ffe6af 0);

}

Output Of Skill Section

skill section of basic portfolio website using html css and javascript

6) Now, we will design Experience section.

In our Experience section, we are having content. For Creating content that we are using pragraph tag.

Please copy and paste the below code to design Experience section

Experience Section HTML Code. Copy This Code And Paste in index.html file

index.html
<!------EXPERIENCE SECTION------>
<div class="main-section bg-lightgrey">
  <div class="container">
    <div class="edu-exp">
      <h2 class="heading-text">Education</h2>
      <div class="experience-list">
        <div class="experience-content">
          <h2>Harvard University </h2>
          <h3>2005-2008</h3>
          <p>Master in Computer Engineering</p>
        </div>
      </div>
      <div class="experience-list">
        <div class="experience-content">
          <h2>Stanford University</h2>
          <h3>2005-2008</h3>
          <p>Doctor in Computer Engineering</p>
        </div>
      </div>
      <div class="experience-list">
        <div class="experience-content">
          <h2>University of Oxford</h2>
          <h3>2005-2008</h3>
          <p>Bachelor in Computer Engineering</p>
        </div>
      </div>
      <div class="experience-list">
        <div class="experience-content">
          <h2>University of Cambridge</h2>
          <h3>2005-2008</h3>
          <p>Polytechnic in Computer Engineering</p>
        </div>
      </div>
    </div>
    <div class="edu-exp">
      <h2 class="heading-text">Experience</h2>
      <div class="experience-list">
        <div class="experience-content">
          <h2>Apple Inc Company</h2>
          <h3>2023-current</h3>
          <p>Font End Developer</p>
        </div>
      </div>
      <div class="experience-list">
        <div class="experience-content">
          <h2>Google Inc Company</h2>
          <h3>2021-2023</h3>
          <p>Graphic design student portfolio websites template.</p>
        </div>
      </div>
      <div class="experience-list">
        <div class="experience-content">
          <h2>Amazon Ecommerce Company</h2>
          <h3>2019-2021</h3>
          <p>Font End Developer</p>
        </div>
      </div>
      <div class="experience-list">
        <div class="experience-content">
          <h2>Microsoft Adobe Company</h2>
          <h3>2017-2019</h3>
          <p>UI / UX Designer</p>
        </div>
      </div>
    </div>
  </div>
</div>

Experience Section CSS Code. Copy The Code And Paste in style.css

style.css
/*****EXPERIENCE SECTION*****/
.bg-lightgrey {
	background-color: #1a1a1a;
}
.edu-exp {
	padding: 10px 0px;
	width: 48%;
	margin: 1%;
	float: left;
	padding-left: 10px;
}
.experience-list {
	width: 100%;
	float: left;
	padding: 30px 10px;
	background: #262626;
	margin-bottom: 20px;
}
.experience-content {
	width: 100%;
	float: left;
	margin-left: 10px;
}
.experience-content h2 {

	font-weight: 600;
	margin-bottom: 5px;
	font-size: 20px;
}
.experience-content h3 {
	color: #ffbf35;
	font-weight: 500;
	margin-bottom: 2px;
	font-size: 17px;
}
.experience-content p {
	font-size: 15px;
}

Output Of Experience And Education Section

experience section of basic portfolio website using html css and javascript

7) Now, We'll Design Services Section Of Building A Basic Portfolio Website Using HTML CSS And JavaScript

Now we are going to create services section. In this section we have contact and icon at a particular size. For creating icons we are using icon tag

Please copy and paste the below code to design Services section

Services Section HTML Code. Copy This Code And Paste in index.html file

index.html
<!------SERVICE SECTION------>
<div class="main-section">
  <div class="container">
    <h2 class="heading-text">My Service</h2>
    <div class="width-50">
      <div class="service-list">
        <i class="fa fa-chrome"></i>
        <h3>Web Development</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing portfolio student website</p>
      </div>
    </div>
    <div class="width-50">
      <div class="service-list">
        <i class="fa fa-instagram"></i>
        <h3>Web Design</h3>
        <p>Lorem ipsum dolor sit amet, student graphic design portfolio websites euismod</p>
      </div>
    </div>
    <div class="width-50">
      <div class="service-list">
        <i class="fa fa-reddit"></i>
        <h3>Creative Design</h3>
        <p>Lorem ipsum dolor sit amet, student portfolio website examples nonummy nibh euismod</p>
      </div>
    </div>
    <div class="width-50">
      <div class="service-list">
        <i class="fa fa-video-camera"></i>
        <h3>Video Editing</h3>
        <p>student portfolio website, consectetuer adipiscing elitsed nonummy nibh euismod</p>
      </div>
    </div>
    <div class="width-50">
      <div class="service-list">
        <i class="fa fa-camera"></i>
        <h3>Photography</h3>
        <p>portfolio website examples for students adipiscing elitsed nonummy nibh euismod</p>
      </div>
    </div>
    <div class="width-50">
      <div class="service-list">
        <i class="fa fa-apple"></i>
        <h3>App Developing</h3>
        <p>digital portfolio websites for students adipiscing elitsed nonummy nibh euismod</p>
      </div>
    </div>
  </div>
</div>

Services Section CSS Code. Copy The Code And Paste in style.css

style.css
/*SERVICE SECTION*/
.service-list {
	padding: 40px;
	margin-top: 35px;
	background: #262626;
	border-radius: 15px;
	width: 94%;
	float: left;
}

.service-list i {
	font-size: 50px;
	color: #ffbf35;
	width: 70px;
	float: left;
}

.service-list h3 {
	font-size: 28px;
	margin-top: 8px;
	margin-bottom: 15px;
}

.service-list p {
	font-size: 15px;
	line-height: 25px;
}

Output Of Service Section

service section of basic portfolio website using html css and javascript

8) Now, we will design Testimonial section Of Best Portfolio websites.

In testimonial section of building building a basic portfolio website using html css and javascript, we are having testimonial content and images of user with their designation. For Creating movement we are using marquee tag.

Please copy and paste the below code to design testimonial section

Testimonial Section HTML Code. Copy This Code And Paste in index.html file

index.html
<!------TESTIMONIAL SECTION------>
<div class="main-section bg-lightgrey">
  <div class="container">
    <h2 class="heading-text">What Client Say's </h2>
    <div class="testimonial">
      <div class="testimonial-content">
        <div class="testimonial-img">
          <img src="images/testimonial-1.jpg">
        </div>
        <i class="fa fa-quote-left"></i>
        <p> Contrary to popular belief, I will provide free portfolio website templates. It has roots in a piece of classical Latin literature from 45 BC, making it. Richard McClintock, Hampden-Sydney College.</p>
        <div class="testimonial-name">
          <h5>Johndove</h5>
          <p>Data Analysis</p>
        </div>
      </div>
    </div>
    <div class="testimonial">
      <div class="testimonial-content">
        <div class="testimonial-img">
          <img src="images/testimonial-2.jpg">
        </div>
        <i class="fa fa-quote-left"></i>
        <p> Contrary to popular belief, I will provide free portfolio website templates. It has roots in a piece of classical Latin literature from 45 BC, making it. Richard McClintock, Hampden-Sydney College.</p>
        <div class="testimonial-name">
          <h5>Johndove</h5>
          <p>Data Analysis</p>
        </div>
      </div>
    </div>
    <div class="testimonial">
      <div class="testimonial-content">
        <div class="testimonial-img">
          <img src="images/testimonial-3.jpg">
        </div>
        <i class="fa fa-quote-left"></i>
        <p> Contrary to popular belief, I will provide free portfolio website templates. It has roots in a piece of classical Latin literature from 45 BC, making it. Richard McClintock, Hampden-Sydney College.</p>
        <div class="testimonial-name">
          <h5>Johndove</h5>
          <p>Data Analysis</p>
        </div>
      </div>
    </div>
  </div>
</div>

Testimonial Section CSS Code. Copy The Code And Paste in style.css

style.css
/*****TESTIMONIAL SECTION*****/
.testimonial {
	width: 32%;
	float: left;
	margin-right: 1%;
	margin-top: 50px;
}

.testimonial-content {
	background: #262626;
	color: #cfcfcf;
	width: 100%;
	float: left;
	padding: 0px 20px 20px 20px;
	font-size: 16px;
	line-height: 28px;
	position: relative;
	text-align: center
}

.testimonial i {
	color: #ffbf35;
	font-size: 35px;
	margin-top: 60px;
}

.testimonial-img {
	width: 100%;
	float: left;
	text-align: center;
	position: absolute;
	left: 0px;
	top: -35px;
}

.testimonial-img img {
	width: 80px;
	height: 80px;
	border: 3px solid white;
	border-radius: 50%;
}

.testimonial-name {
	width: 100%;
	float: left;
}

.testimonial-name h5 {
	color: #ffbf35;
	font-size: 20px;
	margin-top: 10px;
}

.testimonial-name p {
	font-size: 16px;
}

Output Of Testmonial Section Of Best Portfolio websites

testimonial section of basic portfolio website using html css and javascript

9) Now, we will design Portfolio section.

In our Portfolio section, we are having images of previous work and content. For Creating images we have img tag.

Please copy and paste the below code to design Product section

Portfolio Section HTML code. Copy This Code And Paste in index.html file

index.html
<!------PORTFOLIO SECTION------>
<div class="main-section">
  <div class="container">
    <h2 class="heading-text">My Portfolio</h2>
    <div class="gallery">
      <div class="width-33">
        <img src="images/gallery-1.jpg">
      </div>
      <div class="width-33">
        <img src="images/gallery-2.jpg">
      </div>
      <div class="width-33">
        <img src="images/gallery-3.jpg">
      </div>
      <div class="width-33">
        <img src="images/gallery-4.jpg">
      </div>
      <div class="width-33">
        <img src="images/gallery-5.jpg">
      </div>
      <div class="width-33">
        <img src="images/gallery-6.jpg">
      </div>
    </div>
  </div>
</div>

Portfolio Section CSS Code. Copy The Code And Paste in style.css

style.css
/*PORTFOLIO SECTION*/
.gallery {
	width: 100%;
	float: left;
	margin-top: 30px;
}
.gallery img {
	height: auto;
	width: 95%;
	margin-bottom: 20px;
}

Output Of Portfolio Section

portfolio section of basic portfolio website using html css and javascript

10) Now, we will design Contact us section of our simple portfolio website using html and css.

In our contact us section, we are having contact form with submit button,text, get in social media icons. For Creating contact us section we have ul, a(anchor) tag and paragraph tag.

Please copy and paste the below code to design Footer section

Contact Us Section Of Portfolio HTML Code. Copy This Code And Paste in index.html file

index.html
<!-------------CONTACT US SECTION----------------------->
<div class="main-section contact bg-lightgrey">
  <div class="container">
    <h2 class="heading-text">Get In Touch</h2>
    <div class="width-100">
      <form>
        <input type="text" placeholder="Full Name...">
        <input type="text" placeholder="Full Email Id...">
        <input type="text" placeholder="Full Mobile No...">
        <textarea placeholder="Enter Address...">< /textarea>
        <button type="submit">Submit< /button>
      </form>
    </div>
    <div class="width-33">
      <h3>
        <i class="fa fa-map-marker">< /i>
      </h3>
      <h4>Address</h4>
      <p>186, 3rd floor, near Hotel Galaxy Star, Near Sargam Cinema, Zone-II,M P Nagar</p>
    </div>
    <div class="width-33">
      <h3>
        <i class="fa fa-phone">< /i>
      </h3>
      <h4>Phone</h4>
      <p>+91 99 26 661 418</p>
    </div>
    <div class="width-33">
      <h3>
        <i class="fa fa-envelope-o">< /i>
      </h3>
      <h4>Email</h4>
      <p>support@dezven.com</p>
    </div>
  </div>
</div>

Contact Us Section CSS Code. Copy The Code And Paste in style.css

style.css
/*CONTACT US SECTION*/
.contact form {
	width: 66%;
	margin: 0px auto;
}
.contact input,
textarea {
	width: 100%;
	float: left;
	margin-bottom: 20px;
	height: 40px;
	padding: 10px;
	border: 1px solid #a1a1a1;
}
.contact textarea {
	height: 80px;
}
.contact button {
	width: 100%;
	float: left;
	margin-bottom: 20px;
	height: 40px;
	padding: 10px;
	background: #ffbf35;
	color: #fff;
	border: none;
	font-size: 16px;
}
.contact h3 {
	font-size: 26px;
	text-align: center;
	margin-top: 60px;
	color: #ffbf35;
}
.contact h4 {
	font-size: 22px;
	text-align: center;
	margin-top: 10px;
}
.contact p {
	text-align: center;
	font-size: 16px;
	margin-top: 5px;
}

Output Of Contact Us Section Of Building A Basic Portfolio Website Using HTML CSS And JavaScript

contact us section of basic portfolio website using html css and javascript

11) Now, we will design Footer section Of Portfolio Website Using HTML And CSS.

In our footer section, we are having content our get in social media icons. For Creating footer section we have ul, a(anchor) tag and paragraph tag.

Please copy and paste the below code to design Footer section

Footer Section HTML Code. Copy This Code And Paste in index.html file

index.html
<!------FOOTER SECTION------>
<div class="footer">
  <div class="container">
    <div class="footer-sect social-icon width-50">
      <a href="#">
        <i class="fa fa-facebook"></i>
      </a>
      <a href="#">
        <i class="fa fa-twitter"></i>
      </a>
      <a href="#">
        <i class="fa fa-linkedin"></i>
      </a>
      <a href="#">
        <i class="fa fa-instagram"></i>
      </a>
    </div>
    <div class="footer-sect mt-20 width-50">CopyRight © 2023 Dezven.com Website Template. All Rights Reserved</div>
  </div>
</div>

Footer Section CSS Code. Copy The Code And Paste in style.css

style.css
/*****FOOTER SECTION*****/
.footer {
	background-color: #202020;
	padding: 30px 0px 40px 0px;
	width: 100%;
	float: left;
}
.footer-sect {
	color: #b3b3b3;
}
.footer-sect a {
	color: #b3b3b3;
	margin-left: 10px;
	text-decoration: none;
	font-size: 18px;
	text-align: center;
}
.social-icon a i {
	width: 50px;
	height: 50px;
	border: 1px solid #cdcdcd;
	line-height: 50px;
	font-size: 20px;
	border-radius: 50%;
}

Output Of Footer Section Of Portfolio Website Using HTML And CSS

footer section of basic portfolio website using html css and javascript

Conclusion

This is simple portfolio website using html and css we have design. This is one of the best portfolio websites. You can copy complete portfolio website using html css and javascript source code also.

Post your comment
For any query, information or suggestion, post your comment below. We love to hear from your.
  • so easy and so nicely explained! thanks a ton.

  • e-commerce website ka image send me

  • very nicely coding portfolio website. easy to understand

  • extremely impressеd, very nice blog and easy to understand this

  • highly recommended portfolio website

  • i don't see any use of javascript in this portfolio website. It is design only using html and css?

  • perfect portfolio website using html and css

  • very nice video on Building A Basic Portfolio Website Using HTML CSS And JavaScript

Subscribe Us On Youtube