| Youtube : | https://youtu.be/RfukYh2qw98 |
| Views : | 9015 |
| 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.
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
Main Body
Footer
You can also watch video of creating portfolio website with html css bootstrap to understand easily. You can watch the complete video tutorial below.
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
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
index.html
<>
<>
<>Dezven Portfolio Website Template <>
<>
<>
<!--- Bootstrap 5 CSS link --->
<>
<!--- Font Awesom CSS link --->
<>
<!--- Google Font Family --->
<>
<!--- Live Jquery URL--->
<><>
<!--- Bootstrap 5 Jquery URL--->
<><>
<!--- Owl Carousel Js And CSS For Testimonial Slider--->
<><>
<>
<!--- style.css, where we will write our custom 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;
}
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
index.html
<!--- LOGO, MENU AND ABOUT DETAILS SECTION --->
<>
<>
<>
<>Shail<>
<>
<><>
<>
<>
<>
<><>
<>
<>
<>
<>
<>Home<>
<>
<>
<>About Me<>
<>
<>
<>Services<>
<>
<>
<>Portfolio<>
<>
<>
<>Testimonials<>
<>
<>
<>Contact Us<>
<>
<>
<>Let's work together?<>
<>info@dezven.com<>
<>
<>
<>
<>
<>
<>
<>
<>
<>Hello,<>
<>I'm Shail Dezven<>
<>I Am Passionate <>Designer|<>
<>
<>CONTACT US <><>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
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;
}
}
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.
index.html
<!---ABOUT US SECTION ABOUT US SECTION ABOUT US SECTION -->
<>
<>
<>
<>
<>
<>About Me<>
<>A Lead UX & UI designer based in Canada<>
<>I <>design and develop<> 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. <>
<>
<>
<>
<>
<>Birthday :<>
<>/ 4th april 1998<>
<>
<>
<>Age :<>
<>/ 25 Yr<>
<>
<>
<>Residence :<>
<>/ Canada<>
<>
<>
<>Address :<>
<>/ Ring Road USA<>
<>
<>
<>
<>
<>
<>
<>Email :<>
<>/ info@dezven.com<>
<>
<>
<>Phone :<>
<>/ 9926 66 14 18<>
<>
<>
<>Freelancer :<>
<>/ Available<>
<>
<>
<>Address :<>
<>/ Ring Road USA<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
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;
}
}
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
index.html
<!---COUNTER SECTION COUNTER SECTION COUNTER SECTION -->
<>
<>
<>
<><>
<>
<>
<>
<>
<><>
<>
<>
<>9<>
<>Total Experience<>
<>
<>
<>
<>
<><>
<>
<>
<>500<>
<>Happy Clients<>
<>
<>
<>
<>
<><>
<>
<>
<>500<>
<>Project Complete<>
<>
<>
<>
<>
<><>
<>
<>
<>500<>
<>Award Win<>
<>
<>
<>
<>
<>
<>undefined
<>
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;
}
}
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
index.html
<!--------------SKILL SECTION SKILL SECTION SKILL SECTION ------------->
<>
<>
<>
<><>
<>
<>I <>design and develop services<> for customers of all sizes, specializing in creating stylish, modern websites, web services and online stores. Lorem Ipsum is simply dummy text of the <>printing and typesetting industry<>. Lorem Ipsum has been the industry's standard dummy text. <>
<>
<>
<>
<>Facebook Marketing<>
<>95%<>
<>
<>
<><>
<>
<>
<>Search Engine<>
<>65%<>
<>
<>
<><>
<>
<>
<>Content Writing<>
<>79%<>
<>
<>
<><>
<>
<>
<>Web Writing<>
<>89%<>
<>
<>
<><>
<>
<>
<>
<>
<>
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;
}
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
index.html
<!--------------SERVICES SECTION SERVICES SECTION ------------->
<>
<>
<>
<>
<>
<>What I Do<>
<>
<><>
<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <> Apple has been the standard dummy text. <>
<>
<>
<>
<>
<>
<>
<>
<>Unique design<>
<>
<><>
<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Apple has been the standard dummy text..<>
<>
<>
<>
<>
<>
<>Different Layout<>
<>
<><>
<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Apple has been the standard dummy text..<>
<>
<>
<>
<>
<>
<>Make it Simple<>
<>
<><>
<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Apple has been the standard dummy text..<>
<>
<>
<>
<>
<>
<>Responsiveness<>
<>
<><>
<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Apple has been the standard dummy text..<>
<>
<>
<>
<>
<>
<>Testing for Perfection<>
<>
<><>
<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Apple has been the standard dummy text..<>
<>
<>
<>
<>
<>
<>Advanced Options<>
<>
<><>
<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Apple has been the standard dummy text..<>
<>
<>
<>
<>
<>
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;
}
}
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
index.html
<!--- PORTFOLIO SECTION PORTFOLIO SECTION PORTFOLIO SECTION --->
<>
<>
<>
<>
<>
<>Portfolio<>
<>
<><>
<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <> Apple has been the standard dummy text. <>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
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;
}
}
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
index.html
<!---TESTIMONIAL SECTION TESTIMONIAL SECTION TESTIMONIAL SECTION --->
<>
<>
<>
<>
<>
<>Testimonials<>
<><><><>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <>
Apple has been the standard dummy text.<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<> <> <>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>
<>
<> <> <>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>
<>
<> <> <>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
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;
}
}
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
index.html
<!-------------- CONTACT US SECTION CONTACT US SECTION ------------->
<>
<>
<>
<>
<>
<>Let's work together?<>
<>
<><>
<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <> Apple has been the standard dummy text. <>
<>
<>
<>
<>
<>
<>Get in Touch<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<><>
<>
<>
<>Send Me <>
<>
<>
<>
<>
<>
<>E-Mail :<>
<> info@dezven.com <> support@dezven.com <>
<>
<>
<>Address :<>
<> Warnwe Park Streetperrine, <> FL 33157 New York City <>
<>
<>
<>Phone :<>
<>+91 9926 66 1418 <> +044 123 456 7890. <>
<>
<>
<>
<> <>
<>
<>
<> <>
<>
<>
<> <>
<>
<>
<> <>
<>
<>
<>
<>
<>
<>
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;
}
}
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
index.html
<!--------FOOTER SECTION FOOTER SECTION FOOTER SECTION --------->
<>
<>
<>
<>
<>
<>
<><>
<>
<>
<><>
<>
<>
<><>
<>
<>
<><>
<>
<>
<><>
<>
<>
<>
<>
<>Copyright © 2022 All Rights Reserved Dezven.com<>
<>
<>
<>
<>
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;
}
}
Rajesh Singh
is this free portfolio bootstrap templates ? Can I use this for my free
Alvarez
highly recommended bootstrap portfolio page !!
Lesley
very easy tutorial on portfolio website with bootstrap
Gilbert philips
very good website for portfolio website using HTML CSS and bootstrap