How To Create Portfolio Website Using HTML CSS And BOOTSTRAP

Preview Link
Quick Info
Youtube : https://youtu.be/RfukYh2qw98
Views : 15981
Skills : HTML, CSS, JavaScript, Bootstrap
Category : Web Design
Tag : Portfolio Website

In This Tutorial We Are Learning How To Make Portfolio Website With The Use Of HTML, CSS, Java Script and Bootstrap. We are going to use latest version of bootstrap, i.e bootstrap 5.

Section We Are Going To Design In Our Portfolio Website

In our portfolio website, we are going to design three main section using HTML CSS and Bootstrap : Header section, Main Body And Footer section

In this tutorial we are going to design these three section with the help of their sub sections. Sub sections are created as per the website content.

Header

  • Top header
  • Logo
  • Main menu
  • Banner

Main Body

  • About us
  • Services
  • Skill, Counter Portfolio
  • Testimonial
  • Contact Us

Footer

  • Social media link
  • Copyright information

Video Tutorial

You can also watch video of creating portfolio website with html css bootstrap to understand easily. You can watch the complete video tutorial below.

Let's Start The Coding

Firstly, Create the folder on desktop, my folder name is : portfolio website Inside folder portfolio website folder, create two sub folder : - 1) css and 2) images

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

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

1)Meta / Header Section

Let's start with writing basic HTML 5 code in index.html under head section, and link the style.css file to index.html file

Meta Html Code. Copy And Paste The Code in index.html

index.html

<html>
  <head>
    <title>Dezven Portfolio Website Template </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <!--- Bootstrap 5 CSS link --->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--- Font Awesom CSS link --->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <!--- Google Font Family --->
     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 	<!--- Live Jquery URL--->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <!--- Bootstrap 5 Jquery URL--->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <!--- Owl Carousel Js And CSS For Testimonial Slider--->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
    <!--- style.css, where we will write our custom css--->
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

Common CSS. Copy And Paste The Code in style.css

style.css

/****** COMMON CSS ******/
	body {
	font-size: 14px;
	font-family poppins, sans-serif;
	color: #242732;
}
.bg-image {
	background: url('../image/banner.png');
	background-size: cover;
	background-repeat: no-repeat;
}

2) Now, we will design Logo Menu and About Details Section.

In our Logo And Menu section, we are having content. we are using content are written in ul and img tag.

Please copy and paste the below code to design Logo, Menu and About Details section

Logo And Menu Section HTML code. Copy this code and paste in index.html file

index.html

	<!--- LOGO, MENU AND ABOUT DETAILS SECTION --->
 <div class="container-fluid bg-image">
  <div class="container">
    <nav class="navbar navbar-dark">
      <a class="navbar-brand" href="#">Shail</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div class="offcanvas-header">
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About Me</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Testimonials</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact Us</a>
            </li>
            <div class="info">
              <p>Let's work together?</p>
              <a href="#">info@dezven.com</a>
            </div>
          </ul>
        </div>
      </div>
    </nav>
    <div class="row">
      <div class="col-lg-5 col-md-6">
        <div class="about-detail">
          <h5>Hello,</h5>
          <h1>I'm Shail Dezven</h1>
          <p class="typing">I Am Passionate <span>Designer|</span>
          </p>
          <button>CONTACT US <i class="fa fa-arrow-right"></i>
          </button>
        </div>
      </div>
      <div class="col-lg-7 col-md-6">
        <div class="banner-img">
          <img src="image/about.png" style="">
        </div>
      </div>
    </div>
  </div>
</div>

Logo And Menu Section CSS Code. Copy The Code And Paste in Style.Css

style.css

/****** LOGO, MENU AND ABOUT DETAILS SECTION ******/
.navbar {
	padding-top: 35px;
}
.navbar-brand {
	font-size: 30px;
	color: white;
}
.offcanvas-header {
	justify-content: end;
}
.nav-link {
	color: black;
}
.info {
	padding-top: 15px;
}
.info p {
	margin: 0px;
}
.navbar .info a {
	font-size: 23px;
	color: black;
}
.pb-100 {
	padding-bottom: 100px;
}
/********* ABOUT US SECTION  *******/
.about-detail {
	padding-top: 35%;
	padding-bottom: 100px;
}
.about-detail h5 {
	font-size: 40px;
	margin-bottom: 15px;
	color: white;
	font-weight: 400;
}
.about-detail h1 {
	font-size: 58px;
	margin-bottom: 10px;
	color: white;
	font-weight: bolder;
}
.about-detail p {
	font-size: 22px;
	color: white;
	line-height: 28px;
}
.about-detail button {
	border: none;
	padding: 15px 40px;
	margin-top: 15px;
	color: white;
	background: #ef6735;
}
.about-detail button i {
	font-size: 15px;
	margin-left: 5px;
}
.typing {
	position: relative;
	width: fit-content;
	padding-right: 20px;
}
.typing::after {
	content: "|";
	position: absolute;
	right: 0;
	width: 100%;
	background: #212121;
	animation: typing 6s steps(22) infinite, caret 1s infinite;
}
@-webkit-keyframes typing {
	to {
		width: 0;
	}
}
@keyframes typing {
	to {
		width: 0;
	}
}
@-webkit-keyframes caret {
	50% {
		color: transparent;
	}
}
@keyframes caret {
	50% {
		color: transparent;
	}
}
@media screen and (max-width:768px) {
	.about-detail h5 {
		font-size: 25px;
	}
	.about-detail h1 {
		font-size: 38px !important;
	}
}
@media screen and (max-width:500px) {
	.about-detail {
		padding-top: 15%;
		padding-bottom: 60px;
	}
	.about-detail h5 {
		font-size: 20px;
	}
	.about-detail h1 {
		font-size: 35px !important;
		margin-bottom: 5px !important;
	}
}
.banner-img {
	position: relative;
	width: 100%;
	height: 100vh;
}
.banner-img img {
	position: absolute;
	bottom: 0px;
	width: 90%;
}
@media screen and (max-width:768px) {
	.banner-img {
		height: 100%;
	}
}
@media screen and (max-width:500px) {
	.banner-img {
		height: auto;
	}
	.banner-img img {
		position: relative;
	}
}

Output Of Logo And Menu Section

banner section of portfolio Website Using HTML CSS And BOOTSTRAP

3) Now, we will design About Us Section.

In our About Us Section of Portfolio Website, we are having content, image and we are using ul and img tag. For Creating image, we have ul and img tag.

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

index.html

  <!---ABOUT US SECTION ABOUT US SECTION ABOUT US SECTION  -->
  <div class="container-fluid bg-color">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-8 col-12">
        <div class="about-right">
          <h2>About Me</h2>
          <h6>A Lead UX & UI designer based in Canada</h6>
          <p>I <span>design and develop</span> services for customers Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. </p>
          <div class="row">
            <div class="col-md-6">
              <table>
                <tr>
                  <th>Birthday :</th>
                  <td>/ 4th april 1998</td>
                </tr>
                <tr>
                  <th>Age :</th>
                  <td>/ 25 Yr</td>
                </tr>
                <tr>
                  <th>Residence :</th>
                  <td>/ Canada</td>
                </tr>
                <tr>
                  <th>Address :</th>
                  <td>/ Ring Road USA</td>
                </tr>
              </table>
            </div>
            <div class="col-md-6">
              <table>
                <tr>
                  <th>Email :</th>
                  <td>/ info@dezven.com</td>
                </tr>
                <tr>
                  <th>Phone :</th>
                  <td>/ 9926 66 14 18</td>
                </tr>
                <tr>
                  <th>Freelancer :</th>
                  <td>/ Available</td>
                </tr>
                <tr>
                  <th>Address :</th>
                  <td>/ Ring Road USA</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6 col-md-4 col-12">
        <div class="about-left">
          <img src="image/about-us.png">
        </div>
      </div>
    </div>
  </div>
</div>

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

style.css

 /*************** ABOUT US SECTION ***************/
.bg-color {
	background-color: #eaedf2;
}
.about-left img {
	width: 100%;
}
.about-right {
	padding-top: 80px;
	padding-bottom: 80px;
}
.about-right h2 {
	font-size: 35px;
	color: black;
	font-weight: 600;
	margin-bottom: 10px;
}
.about-right h6 {
	color: #f90505;
	font-size: 20px;
	margin-bottom: 25px;
}
.about-right p {
	line-height: 35px;
	font-size: 16px;
	margin-bottom: 50px;
	letter-spacing: 0.2px;
	word-spacing: 0.5px;
}
.about-right p span {
	color: black;
	font-weight: 600;
	border-bottom: 3px solid red;
}
.about-right table tr td {
	padding: 10px;
}
@media screen and (max-width:768px) {
	.about-right table tr td,
	.about-right table tr th {
		padding: 10px 0px;
		font-size: 13px;
	}
}
@media screen and (max-width:500px) {
	.about-right table tr td,
	.about-right table tr th {
		padding: 10px;
		font-size: 16px;
	}
}

Output Of About Us Section

about us section of portfolio Website Using HTML CSS And BOOTSTRAP

4) Now, we will design counter section.

Now we are going to create counter section. In this section we have content and icon. For creating content we are using paragraph tag and icon tag

Please copy and paste the below code to design counter section

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

index.html

<!---COUNTER SECTION COUNTER SECTION COUNTER SECTION -->
<div class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-10 counter">
        <div class="row">
          <div class="col-lg-3 col-md-6 col-6">
            <span class="counter-icon">
              <i class="fa fa-hand-peace-o"></i>
            </span>
            <span class="counter-icon">
              <h5>9</h5>
              <p>Total Experience</p>
            </span>
          </div>
          <div class="col-lg-3 col-md-6 col-6">
            <span class="counter-icon">
              <i class="fa fa-smile-o"></i>
            </span>
            <span class="counter-icon">
              <h5>500</h5>
              <p>Happy Clients</p>
            </span>
          </div>
          <div class="col-lg-3 col-md-6 col-6">
            <span class="counter-icon">
              <i class="fa fa-thumbs-up"></i>
            </span>
            <span class="counter-icon">
              <h5>500</h5>
              <p>Project Complete</p>
            </span>
          </div>
          <div class="col-lg-3 col-md-6 col-6">
            <span class="counter-icon">
              <i class="fa fa-trophy"></i>
            </span>
            <span class="counter-icon">
              <h5>500</h5>
              <p>Award Win</p>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>undefined
</div>

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

style.css

/***************COUNTER SECTION ***************/
.counter {
	background: white;
	padding: 50px 40px;
	position: relative;
	top: -50px;
	box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
}
.counter-icon {
	float: left;
}
.counter-icon i {
	font-size: 50px;
	color: #FF5722;
	margin-top: 10px;
	margin-right: 15px;
}
.counter-icon h5 {
	font-size: 41px;
	color: black;
	font-weight: 600;
	margin: 0px;
}
.counter-icon p {
	margin: 0px;
	line-height: 10px;
	font-size: 14px;
}
@media screen and (max-width:768px) {
	.counter {
		padding: 20px 20px;
	}
	.counter .col-6 {
		margin-bottom: 30px;
	}
}
@media screen and (max-width:500px) {
	.counter {
		padding: 10px 10px;
	}
	.counter .col-6 {
		margin-bottom: 20px;
		margin-top: 20px;
	}
	.counter-icon i {
		font-size: 30px;
		margin-right: 5px;
	}
	.counter-icon h5 {
		font-size: 25px;
	}
}

Output Of Counter Section

counter section of portfolio Website Using HTML CSS And BOOTSTRAP

5) Now, we will design My Skill section.

Now we are going to create My Skill section. In this section we have content. For creating content we are using paragraph tag

Please copy and paste the below code to design My Skill section

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

index.html

<!--------------SKILL SECTION SKILL SECTION SKILL SECTION ------------->
<div class="container-fluid about-skill">
  <div class="container">
    <div class="row">
      <div class="col-lg-1"></div>
      <div class="col-lg-5 col-md-6">
        <p>I <span>design and develop services</span> for customers of all sizes, specializing in creating stylish, modern websites, web services and online stores. Lorem Ipsum is simply dummy text of the <span>printing and typesetting industry</span>. Lorem Ipsum has been the industry's standard dummy text. </p>
      </div>
      <div class="col-lg-5 col-md-6">
        <div class="skill-section">
          <p>Facebook Marketing</p>
          <span>95%</span>
        </div>
        <div class="skill-experience">
          <span style="width:95%"></span>
        </div>
        <div class="skill-section">
          <p>Search Engine</p>
          <span>65%</span>
        </div>
        <div class="skill-experience">
          <span style="width:65%"></span>
        </div>
        <div class="skill-section">
          <p>Content Writing</p>
          <span>79%</span>
        </div>
        <div class="skill-experience">
          <span style="width:79%"></span>
        </div>
        <div class="skill-section">
          <p>Web Writing</p>
          <span>89%</span>
        </div>
        <div class="skill-experience">
          <span style="width:89%"></span>
        </div>
      </div>
    </div>
  </div>
</div>

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

style.css

/**********SKILL SECTION SKILL SECTION SKILL SECTION  *********/
.about-skill {
	padding: 50px 0px;
}
.about-skill p {
	font-size: 19px;
	line-height: 30px;
	color: black;
}
.about-skill p span {
	color: red;
	font-weight: 600;
}
.skill-section {
	font-size: 25px;
	color: black;
	font-weight: 400;
	margin-bottom: 25px;
}
.skill-section p {
	float: left;
	margin-bottom: 4px;
	color: black;
	font-size: 15px;
}
.skill-section span {
	float: right;
	margin-bottom: 5px;
	color: black;
	font-size: 15px;
	margin-right: 40px;
}
.skill-experience {
	width: 100%;
	float: left;
	background: #e7e7e7;
	border-radius: 10px;
	margin-bottom: 25px;
}
.skill-experience span {
	background: red;
	height: 5px;
	float: left;
}

Output Of Skill Section

skill section of portfolio Website Using HTML CSS And BOOTSTRAP

6) Now, we will design services section.

Now we are going to create services section. In this section we have content and icon at a particular size. For creating icons we are using icon tag and ul 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

<!--------------SERVICES SECTION SERVICES SECTION ------------->
<div class="container-fluid bg-color pb-100">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="heading-section">
          <h2>What I Do</h2>
          <div class="heading-borders">
            <span class="selected"></span>
          </div>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> Apple has been the standard dummy text. </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 col-sm-6">
        <div class="service-section">
          <img src="image/service-1.png">
          <h6>Unique design</h6>
          <div class="service-border">
            <span></span>
          </div>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Apple has been the standard dummy text..</p>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="service-section">
          <img src="image/service-2.png">
          <h6>Different Layout</h6>
          <div class="service-border">
            <span></span>
          </div>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Apple has been the standard dummy text..</p>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="service-section">
          <img src="image/service-3.png">
          <h6>Make it Simple</h6>
          <div class="service-border">
            <span></span>
          </div>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Apple has been the standard dummy text..</p>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="service-section">
          <img src="image/service-4.png">
          <h6>Responsiveness</h6>
          <div class="service-border">
            <span></span>
          </div>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Apple has been the standard dummy text..</p>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="service-section">
          <img src="image/service-5.png">
          <h6>Testing for Perfection</h6>
          <div class="service-border">
            <span></span>
          </div>
          <p class="service-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Apple has been the standard dummy text..</p>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="service-section">
          <img src="image/service-6.png">
          <h6>Advanced Options</h6>
          <div class="service-border">
            <span></span>
          </div>
          <p class="service-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Apple has been the standard dummy text..</p>
        </div>
      </div>
    </div>
  </div>
</div>

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

style.css

/*********HEADING SECTION HEADING SECTION *********/
.heading-section {
	padding-bottom: 30px;
	padding-top: 80px;
}
.heading-section h2 {
	text-align: center;
	color: black;
	font-size: 40px;
	margin-bottom: 15px;
}
.heading-section p {
	font-size: 15px;
	text-align: center;
	margin-bottom: 30px;
}
.heading-borders {
	text-align: center;
	justify-content: center;
	display: flex;
}
.heading-borders span {
	border: 1px solid red;
	width: 5%;
	margin-bottom: 20px;
}
@media screen and (max-width:768px) {
	.heading-section h2 {
		font-size: 30px;
		margin-bottom: 5px;
	}
	.heading-borders span {
		width: 8%;
	}
}
@media screen and (max-width:500px) {
	.heading-borders span {
		width: 25%;
	}
	.heading-section h2 {
		font-size: 30px;
	}
}
/*********SERVICES SECTION SERVICES SECTION S*********/
.service-section {
	width: 100%;
	border: none;
	background: white;
	box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
	padding: 55px 40px;
	text-align: center;
	margin-bottom: 30px;
	float: left;
}
.service-section img {
	height: 105px;
	margin-bottom: 15px;
	padding: 0px;
}
.service-section h6 {
	font-size: 18px;
	margin-bottom: 15px;
	font-weight: 600;
	color: black;
}
.service-section p {
	line-height: 30px;
	font-size: 15px;
}
.service-border {
	text-align: center;
	justify-content: center;
	display: flex;
}
.service-border span {
	border: 1px solid red;
	width: 11%;
	margin-bottom: 20px;
}
@media screen and (max-width:768px) {
	.service-section {
		padding: 20px 20px;
	}
}
@media screen and (max-width:500px) {
	.service-section {
		padding: 20px 20px;
	}
}

Output Of Service Section

service section of portfolio Website Using HTML CSS And BOOTSTRAP

7) Now, we will design Portfolio section.

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

Please copy and paste the below code to design Portfolio section

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

index.html

 <!--- PORTFOLIO SECTION PORTFOLIO SECTION PORTFOLIO SECTION --->
 <div class="container-fluid pb-100">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="heading-section">
          <h2>Portfolio</h2>
          <div class="heading-borders">
            <span class="selected"></span>
          </div>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> Apple has been the standard dummy text. </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 col-md-6 col-xs-12">
        <div class="portfolio-section">
          <img src="image/gallery-1.jpg">
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-xs-12">
        <div class="portfolio-section">
          <img src="image/gallery-2.jpg">
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-xs-12">
        <div class="portfolio-section">
          <img src="image/gallery-3.jpg">
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-xs-12">
        <div class="portfolio-section">
          <img src="image/gallery-4.jpg">
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-xs-12">
        <div class="portfolio-section">
          <img src="image/gallery-5.jpg">
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-xs-12">
        <div class="portfolio-section">
          <img src="image/gallery-6.jpg">
        </div>
      </div>
    </div>
  </div>
</div>

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

style.css

/*********PORTFOLIO SECTION PORTFOLIO SECTION*********/
.portfolio-section {
	text-align: center;
	justify-content: center;
	display: flex;
}
.portfolio-section img {
	width: 100%;
	margin-bottom: 20px;
}
/*********HEADING SECTION HEADING SECTION*********/
.heading-section {
	padding-bottom: 30px;
	padding-top: 80px;
}
.heading-section h2 {
	text-align: center;
	color: black;
	font-size: 40px;
	margin-bottom: 15px;
}
.heading-section p {
	font-size: 15px;
	text-align: center;
	margin-bottom: 30px;
}
.heading-borders {
	text-align: center;
	justify-content: center;
	display: flex;
}
.heading-borders span {
	border: 1px solid red;
	width: 5%;
	margin-bottom: 20px;
}
@media screen and (max-width:768px) {
	.heading-section h2 {
		font-size: 30px;
		margin-bottom: 5px;
	}
	.heading-borders span {
		width: 8%;
	}
}
@media screen and (max-width:500px) {
	.heading-borders span {
		width: 25%;
	}
	.heading-section h2 {
		font-size: 30px;
	}
}

Output Of Portfolio Section

portfolio section of portfolio Website Using HTML CSS And BOOTSTRAP

8) Now, we will design Testimonial section.

In our testimonial section, we are having content and images that are moving from right to left. 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 TESTIMONIAL SECTION TESTIMONIAL SECTION --->
 <div class="container-fluid bg-color pb-100">
  <div class="container ">
    <div class="row">
      <div class="col-12">
        <div class="heading-section">
          <h2>Testimonials</h2>
          <div class="heading-borders"><span></span></div>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
            Apple has been the standard dummy text.</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="demo-1 owl-carousel owl-theme">
          <div class="item">
            <div class="testimonial">
              <div class="row">
                <div class="col-3"> <img src="image/testimonial-1.jpg"> </div>
                <div class="col-9">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                  <h5>Nancy Bayers</h5>
                  <h6> Founder & CEO  At Dezven</h6>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="testimonial">
              <div class="row">
                <div class="col-3"> <img src="image/testimonial-2.jpg"> </div>
                <div class="col-9">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                  <h5>Nancy Bayers</h5>
                  <h6> Founder & CEO  At Dezven</h6>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="testimonial">
              <div class="row">
                <div class="col-3"> <img src="image/testimonial-3.jpg"> </div>
                <div class="col-9">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                  <h5>Nancy Bayers</h5>
                  <h6> Founder & CEO  At Dezven</h6>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

style.css

/********* TESTIMONIAL SECTION TESTIMONIAL SECTION *********/
.testimonial {
	padding: 50px 30px;
	background-color: #fff;
	border-radius: 20px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 0.375rem 1.5rem 0 rgba(140, 152, 164, 0.125);
}
.testimonial img {
	width: 90px !important;
	height: 90px !important;
	border-radius: 50px;
}
.testimonial p {
	font-size: 16px;
	letter-spacing: 0.5px;
	word-spacing: 2px;
}
.owl-carousel .owl-dots {
	text-align: center;
	margin-top: 50px;
}
.owl-carousel .owl-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid #343434 !important;
	margin-right: 10px;
}
.owl-carousel .owl-dots .active {
	border: 1px solid #ea4020 !important;
	background: #ea4020;
}
@media screen and (max-width:768px) {
	.testimonial img {
		width: 50px !important;
		height: 50px !important;
		border-radius: 50px;
	}
}
@media screen and (max-width:500px) {
	.testimonial img {
		width: 60px !important;
		height: 60px !important;
		border-radius: 50px;
	}
}
/*********HEADING SECTION HEADING SECTION*********/
.heading-section {
	padding-bottom: 30px;
	padding-top: 80px;
}
.heading-section h2 {
	text-align: center;
	color: black;
	font-size: 40px;
	margin-bottom: 15px;
}
.heading-section p {
	font-size: 15px;
	text-align: center;
	margin-bottom: 30px;
}
.heading-borders {
	text-align: center;
	justify-content: center;
	display: flex;
}
.heading-borders span {
	border: 1px solid red;
	width: 5%;
	margin-bottom: 20px;
}
@media screen and (max-width:768px) {
	.heading-section h2 {
		font-size: 30px;
		margin-bottom: 5px;
	}
	.heading-borders span {
		width: 8%;
	}
}
@media screen and (max-width:500px) {
	.heading-borders span {
		width: 25%;
	}
	.heading-section h2 {
		font-size: 30px;
	}
}

Output Of Testimonial Section

testimonial section of portfolio Website Using HTML CSS And BOOTSTRAP

9) Now, we will design Contact us section.

In our contact us section, we are having 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 Contact us section

Contact Us Section HTML code. Copy this code and paste in index.html file

index.html

<!-------------- CONTACT US SECTION CONTACT US SECTION ------------->
<div class="container-fluid pb-100">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="heading-section">
          <h2>Let's work together?</h2>
          <div class="heading-borders">
            <span class="selected"></span>
          </div>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> Apple has been the standard dummy text. </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-8 col-md-7 col-12 contact-form">
        <h2>Get in Touch</h2>
        <div class="row">
          <div class="col-md-6 col-12 mt-4">
            <input type="text" class="form-control" placeholder="Enter Name...">
          </div>
          <div class="col-md-6 col-12 mt-4">
            <input type="text" class="form-control" placeholder="Enter Email...">
          </div>
          <div class="col-12 mt-4">
            <input type="text" class="form-control" placeholder="Enter Subject...">
          </div>
          <div class="col-12 mt-4">
            <textarea class="form-control" placeholder="Enter Comment...">< /textarea>
          </div>
          <div class="col-12 mt-4">
            <button>Send Me < /button>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-5 contact-info">
        <div class="col-12">
          <h4>E-Mail :</h4>
          <p> info@dezven.com <br> support@dezven.com </p>
        </div>
        <div class="col-12">
          <h4>Address :</h4>
          <p> Warnwe Park Streetperrine, <br> FL 33157 New York City </p>
        </div>
        <div class="col-12">
          <h4>Phone :</h4>
          <p>+91 9926 66 1418 <br> +044 123 456 7890. </p>
        </div>
        <div class="col-12">
          <a href="https://www.facebook.com/dezven/" target="_blank">
            <i class="fa fa-facebook"> </i>
          </a>
          <a href="https://www.youtube.com/@dezvengroup" target="_blank">
            <i class="fa fa-youtube"> </i>
          </a>
          <a href="https://www.linkedin.com/company/dezvengroup/" target="_blank">
            <i class="fa fa-linkedin"> </i>
          </a>
          <a href="https://www.instagram.com/dezvengroup/" target="_blank">
            <i class="fa fa-instagram"> </i>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

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

style.css

/*********CONTACT SECTION CONTACT SECTION*********/
.contact-info {
	background: black;
	padding: 45px;
}
.contact-info h4 {
	font-size: 17px;
	margin-top: 25px;
	color: white;
	margin-bottom: 2px;
}
.contact-info p {
	font-size: 15px;
	color: #818385;
	line-height: 30px;
}
.contact-info i {
	background: #fff;
	color: black;
	height: 40px;
	border-radius: 50%;
	font-size: 17px;
	margin-right: 15px;
	margin-top: 20px;
	width: 40px;
	line-height: 40px;
	text-align: center;
}
.contact-form {
	background: white;
	padding: 45px;
	box-shadow: 0px 0px 1px 0px #484848;
}
.contact-form h2 {
	margin-top: 25px;
	font-size: 25px;
	margin-bottom: 20px;
}
.contact-form input {
	height: 45px;
}
.contact-form button {
	color: white;
	border: none;
	background: red;
	padding: 12px 30px;
	font-size: 15px;
	margin-bottom: 25px;
}
@media screen and (max-width:768px) {
	.contact-form {
		padding: 20px;
	}
	.contact-info i {
		margin-right: 5px;
	}
}
@media screen and (max-width:500px) {
	.contact-form {
		padding: 20px;
	}
	.contact-info i {
		margin-right: 5px;
	}
}
/*********HEADING SECTION HEADING SECTION HEADING SECTION*********/
.heading-section {
	padding-bottom: 30px;
	padding-top: 80px;
}
.heading-section h2 {
	text-align: center;
	color: black;
	font-size: 40px;
	margin-bottom: 15px;
}
.heading-section p {
	font-size: 15px;
	text-align: center;
	margin-bottom: 30px;
}
.heading-borders {
	text-align: center;
	justify-content: center;
	display: flex;
}
.heading-borders span {
	border: 1px solid red;
	width: 5%;
	margin-bottom: 20px;
}
@media screen and (max-width:768px) {
	.heading-section h2 {
		font-size: 30px;
		margin-bottom: 5px;
	}
	.heading-borders span {
		width: 8%;
	}
}
@media screen and (max-width:500px) {
	.heading-borders span {
		width: 25%;
	}
	.heading-section h2 {
		font-size: 30px;
	}
}

Output Of Contact Us Section

footer section of portfolio Website Using HTML CSS And BOOTSTRAP

10) Now, we will design Footer section.

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 FOOTER SECTION FOOTER SECTION --------->
<div class="container-fluid footer">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-5 col-12">
        <div class="footer-section">
          <a href="https://www.facebook.com/dezven/" target="_blank">
            <i class="fa fa-facebook"></i>
          </a>
          <a href="https://twitter.com/Dezven" target="_blank">
            <i class="fa fa-twitter"></i>
          </a>
          <a href="https://www.linkedin.com/company/dezvengroup/" target="_blank">
            <i class="fa fa-linkedin"></i>
          </a>
          <a href="https://www.instagram.com/dezvengroup/" target="_blank">
            <i class="fa fa-instagram"></i>
          </a>
          <a href="https://www.youtube.com/@dezvengroup" target="_blank">
            <i class="fa fa-youtube"></i>
          </a>
        </div>
      </div>
      <div class="col-lg-6 col-md-7 col-12">
        <p>Copyright © 2022 All Rights Reserved Dezven.com</p>
      </div>
    </div>
  </div>
</div>

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

style.css

/*********FOOTER SECTION FOOTER SECTION FOOTER SECTION *********/
.footer {
	background: black;
	padding: 20px 0px 5px 0px;
}
.footer p {
	color: white;
	text-align: right;
}
.footer-section i {
	font-size: 20px;
	margin-right: 10px;
	color: white;
}
@media screen and (max-width:500px) {
	.footer-section {
		text-align: center !important;
	}
	.footer p {
		text-align: center;
	}
}

Output Of Footer Section

footer section of portfolio Website Using HTML CSS And BOOTSTRAP
Post your comment
For any query, information or suggestion, post your comment below. We love to hear from your.
  • is this free portfolio bootstrap templates ? Can I use this for my free

  • highly recommended bootstrap portfolio page !!

  • very easy tutorial on portfolio website with bootstrap

  • very good website for portfolio website using HTML CSS and bootstrap

Subscribe Us On Youtube