How To Create Portfolio Website Using HTML CSS And BOOTSTRAP
Preview Link
Quick Info
| Youtube : | https://youtu.be/RfukYh2qw98 |
| Views : | 16166 |
| 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.
Table of contents
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
<>
<>
<>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--->
<>
<>
<>
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 --->
<>
<>
<>
<>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 <><>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
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
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 -->
<>
<>
<>
<>
<>
<>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<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
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
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 -->
<>
<>
<>
<><>
<>
<>
<>
<>
<><>
<>
<>
<>9<>
<>Total Experience<>
<>
<>
<>
<>
<><>
<>
<>
<>500<>
<>Happy Clients<>
<>
<>
<>
<>
<><>
<>
<>
<>500<>
<>Project Complete<>
<>
<>
<>
<>
<><>
<>
<>
<>500<>
<>Award Win<>
<>
<>
<>
<>
<>
<>undefined
<>
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
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 ------------->
<>
<>
<>
<><>
<>
<>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%<>
<>
<>
<><>
<>
<>
<>
<>
<>
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
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 ------------->
<>
<>
<>
<>
<>
<>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..<>
<>
<>
<>
<>
<>
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
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 --->
<>
<>
<>
<>
<>
<>Portfolio<>
<>
<><>
<>
<>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <> Apple has been the standard dummy text. <>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
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
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 --->
<>
<>
<>
<>
<>
<>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<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
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
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 ------------->
<>
<>
<>
<>
<>
<>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. <>
<>
<>
<>
<> <>
<>
<>
<> <>
<>
<>
<> <>
<>
<>
<> <>
<>
<>
<>
<>
<>
<>
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
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 --------->
<>
<>
<>
<>
<>
<>
<><>
<>
<>
<><>
<>
<>
<><>
<>
<>
<><>
<>
<>
<><>
<>
<>
<>
<>
<>Copyright © 2022 All Rights Reserved Dezven.com<>
<>
<>
<>
<>
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;
}
}
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