Responsive Personal Portfolio Website using HTML, CSS, and JavaScript
Foolish Developer
Posted on May 7, 2021
Here you can learn how to create a responsive personal portfolio website using HTML, CSS, javascript, and bootstrap. I have already designed many types of websites. This is a fully responsive personal portfolio website for which I have used Bootstrap 4 code. In addition, common HTML and CSS programming codes have been used.
Personal portfolio sites are consistent that need to be taken care of throughout your work. It gives a convenient way for potential clients to view your work while also letting you expand on your skills/experiences and services. In this site [Personal Portfolio], there are eight sections on one page - Home, About, Services, Skills, portfolio, Teams, and Contact, footer, and each section is attractive and eye-catching.
Video Tutorial:
Download Source Code
Step by Step Tutorial:
Navigation Menu:
<!-- Navbar Start -->
<nav class="navbar fixed-top shadow-sm navbar-expand-lg bg-light navbar-light py-3 py-lg-0 px-lg-5">
<a href="index.html" class="navbar-brand ml-lg-3">
<h1 class="m-0 display-5"><span class="text-primary">Free</span>Folio</h1>
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse px-lg-3" id="navbarCollapse">
<div class="navbar-nav m-auto py-0">
<a href="#home" class="nav-item nav-link active">Home</a>
<a href="#about" class="nav-item nav-link">About</a>
<a href="#qualification" class="nav-item nav-link">Quality</a>
<a href="#skill" class="nav-item nav-link">Skill</a>
<a href="#service" class="nav-item nav-link">Service</a>
<a href="#portfolio" class="nav-item nav-link">Portfolio</a>
<a href="#testimonial" class="nav-item nav-link">Review</a>
<a href="#contact" class="nav-item nav-link">Contact</a>
</div>
<a href="" class="btn btn-menu d-none d-lg-block" style="background-color:#457efa; color: #ffffff;">Hire Me</a>
</div>
</nav>
<!-- Navbar End -->
/* ================ Navigation Menu ====================*/
.navbar-light {
display: none;
}
.navbar-light .navbar-nav .nav-link {
padding: 25px 10px;
color: #343a40;
font-weight: 500;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #0BCEAF;
}
@media (max-width: 991.98px) {
.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
}
}
Hero area:
<!-- Header Start -->
<div class="container-fluid bg-primary d-flex align-items-center mb-5 py-5" id="home" style="min-height: 100vh;">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-7 text-center text-lg-left">
<h3 class="text-white font-weight-normal mb-3">Hello, my name</h3>
<h1 class="display-3 text-uppercase text-primary mb-2" style="-webkit-text-stroke: 4px #ffffff;">Alaxe Smith</h1>
<h1 class="typed-text-output d-inline font-weight-lighter text-white"></h1>
<div class="typed-text d-none">Web Designer, Web Developer, Front End Developer, Apps Designer, Apps Developer</div>
<div class="d-flex align-items-center justify-content-center justify-content-lg-start pt-5">
<a href="" class="btn btn-white mr-4">Download CV</a>
<a href="" class="btn btn-blue d-none d-sm-block">Play Video</a>
</div>
</div>
<div class="col-lg-6 px-8 pl-lg-0 pb-5 pb-lg-4 about-img">
<img class="img-fluid w-100 rounded-circle shadow-sm" src="img/profile.png" alt="">
</div>
</div>
</div>
</div>
<!-- Header End -->
/*===================== Hero section ======================*/
.about-img{
margin-left: -100px;
right: -60px;
}
.display-1{
font-size: 160px;
font-weight: 1000;
}
.position-absolute{
font-weight: 700;
}
.typed-cursor {
font-size: 45px;
color: #ffffff;
}
.blue{
background-color: #1c5ce6;
color: #ffffff;
}
.btn{
border: 2px solid rgb(29, 105, 247);
}
.btn-white{
background-color: #ffffff;
border:2px solid #ffffff;
}
.btn-blue{
border: 2.4px solid #ffffff;
color: #ffffff;
}
@media (max-width: 700px) {
.about-img{
margin-left: 20px;
right: 0px;
top: 30px;
}
}
<!-- About Start -->
<div class="container-fluid py-5" id="about">
<div class="container">
<div class="position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">About</h1>
<h1 class="position-absolute text-uppercase text-primary">About Me</h1>
</div>
<div class="row align-items-center">
<div class="col-lg-5 pb-4 pb-lg-0">
<img class="img-fluid rounded w-100" src="img/about.jpg" alt="">
</div>
<div class="col-lg-7">
<h3 class="mb-4">UI/UX Designer & Web Developer</h3>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum. Amet dolor stet lorem diam dolor justo et dolor dolor dolor</p>
<div class="row mb-3">
<div class="col-sm-6 py-2"><h6>Name: <span class="text-secondary">Kate Winslet</span></h6></div>
<div class="col-sm-6 py-2"><h6>Birthday: <span class="text-secondary">1 April 1990</span></h6></div>
<div class="col-sm-6 py-2"><h6>Degree: <span class="text-secondary">Master</span></h6></div>
<div class="col-sm-6 py-2"><h6>Experience: <span class="text-secondary">10 Years</span></h6></div>
<div class="col-sm-6 py-2"><h6>Phone: <span class="text-secondary">+012 345 6789</span></h6></div>
<div class="col-sm-6 py-2"><h6>Email: <span class="text-secondary">info@example.com</span></h6></div>
<div class="col-sm-6 py-2"><h6>Address: <span class="text-secondary">123 Street, New York, USA</span></h6></div>
<div class="col-sm-6 py-2"><h6>Freelance: <span class="text-secondary">Available</span></h6></div>
</div>
<a href="" class="btn blue btn-outline-primary mr-4">Hire Me</a>
<a href="" class="btn btn-outline-primary">Learn More</a>
</div>
</div>
</div>
</div>
<!-- About End -->
No CSS Code
Skill Start:
<!-- Skill Start -->
<div class="container-fluid py-5" id="skill">
<div class="container">
<div class="position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Skills</h1>
<h1 class="position-absolute text-uppercase text-primary">My Skills</h1>
</div>
<div class="row align-items-center">
<div class="col-md-6">
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">HTML</h6>
<h6 class="font-weight-bold">95%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">CSS</h6>
<h6 class="font-weight-bold">85%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">PHP</h6>
<h6 class="font-weight-bold">90%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">Javascript</h6>
<h6 class="font-weight-bold">90%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">Angular JS</h6>
<h6 class="font-weight-bold">95%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">Wordpress</h6>
<h6 class="font-weight-bold">85%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Skill End -->
/*===================== Progress Bar ====================*/
.progress {
border-radius: 10px;
}
.progress .progress-bar {
width: 0px;
border-radius: 10px;
transition: 2s;
}
Qualification Start:
<!-- Qualification Start -->
<div class="container-fluid py-5" id="qualification">
<div class="container">
<div class="position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Quality</h1>
<h1 class="position-absolute text-uppercase text-primary">Education & Expericence</h1>
</div>
<div class="row align-items-center">
<div class="col-lg-6">
<h3 class="mb-4">My Education</h3>
<div class="border-left border-primary pt-2 pl-4 ml-2">
<div class="position-relative ex-me mb-4">
<i class="far fa-dot-circle text-primary position-absolute" style="top: 2px; left: -35px; font-size: 22px;"></i>
<h5 class="font-weight-bold mb-1">Bachelor of Science</h5>
<p class="mb-2"><strong>Cambridge University</strong> | <small>2005 - 2009</small></p>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum stet lorem diam</p>
</div>
<div class="position-relative ex-me mb-4">
<i class="far fa-dot-circle text-primary position-absolute" style="top: 2px; left: -35px; font-size: 22px;"></i>
<h5 class="font-weight-bold mb-1">Master In CSE</h5>
<p class="mb-2"><strong>Cambridge University</strong> | <small>2009 - 2011</small></p>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum stet lorem diam</p>
</div>
<div class="position-relative ex-me mb-4">
<i class="far fa-dot-circle text-primary position-absolute" style="top: 2px; left: -35px; font-size: 22px;"></i>
<h5 class="font-weight-bold mb-1">IIT Kharagpur</h5>
<p class="mb-2"><strong>Cambridge University</strong> | <small>2011 - 2015</small></p>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum stet lorem diam</p>
</div>
</div>
</div>
<div class="col-lg-6">
<h3 class="mb-4">My Expericence</h3>
<div class="border-left border-primary pt-2 pl-4 ml-2">
<div class="position-relative ex-me mb-4">
<i class="far fa-dot-circle text-primary position-absolute" style="top: 2px;left: -35px; font-size: 22px;"></i>
<h5 class="font-weight-bold mb-1">Web Designer</h5>
<p class="mb-2"><strong>Soft Company</strong> | <small> Excellent</small></p>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum stet lorem diam</p>
</div>
<div class="position-relative ex-me mb-4">
<i class="far fa-dot-circle text-primary position-absolute" style="top: 2px;left: -35px; font-size: 22px;"></i>
<h5 class="font-weight-bold mb-1">Artificial Intelligence</h5>
<p class="mb-2"><strong>Soft Company</strong> | <small> Good</small></p>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum stet lorem diam</p>
</div>
<div class="position-relative ex-me mb-4">
<i class="far fa-dot-circle text-primary position-absolute" style="top: 2px;left: -35px; font-size: 22px;"></i>
<h5 class="font-weight-bold mb-1">Web Development</h5>
<p class="mb-2"><strong>Soft Company</strong> | <small> Excellent</small></p>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum stet lorem diam</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Qualification End -->
/* =================== Queality ======================*/
.ex-me{
margin-top: 35px;
}
Services Start:
<!-- Services Start -->
<div class="container-fluid pt-5" id="service">
<div class="container">
<div class="service-h4 position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Service</h1>
<h1 class="position-absolute text-uppercase text-primary">My Services</h1>
</div>
<div class="row pb-3">
<div class="service-box col-lg-4 col-md-6 text-center mb-5">
<div class="d-flex align-items-center justify-content-center mb-4">
<i class="fa fa-2x fa-laptop service-icon bg-primary text-white mr-3"></i>
<h4 class="font-weight-bold m-0">Web Design</h4>
</div>
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem lorem est amet labore eirmod erat clita</p>
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
</div>
<div class="service-box col-lg-3 col-md-6 text-center mb-5">
<div class="d-flex align-items-center justify-content-center mb-4">
<i class="fa fa-2x fa-laptop-code service-icon bg-primary text-white mr-3"></i>
<h4 class="font-weight-bold m-0">Development</h4>
</div>
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem</p>
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
</div>
<div class="service-box col-lg-4 col-md-6 text-center mb-5">
<div class="d-flex align-items-center justify-content-center mb-4">
<i class="fab fa-2x fa-android service-icon bg-primary text-white mr-3"></i>
<h4 class="font-weight-bold m-0">Apps Design</h4>
</div>
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem lorem est amet labore eirmod erat clita</p>
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
</div>
<div class="service-box col-lg-4 col-md-6 text-center mb-5">
<div class="d-flex align-items-center justify-content-center mb-4">
<i class="fab fa-2x fa-apple service-icon bg-primary text-white mr-3"></i>
<h4 class="font-weight-bold m-0">Apps Development</h4>
</div>
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem Amet lorem lorem</p>
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
</div>
<div class="service-box col-lg-3 col-md-6 text-center mb-5">
<div class="d-flex align-items-center justify-content-center mb-4">
<i class="fa fa-2x fa-search service-icon bg-primary text-white mr-3"></i>
<h4 class="font-weight-bold m-0">SEO</h4>
</div>
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem </p>
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
</div>
<div class="service-box col-lg-4 col-md-7 text-center mb-5">
<div class="d-flex align-items-center justify-content-center mb-4">
<i class="fa fa-2x fa-edit service-icon bg-primary text-white mr-3"></i>
<h4 class="font-weight-bold m-0">Content Creating</h4>
</div>
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem lorem est amet labore eirmod erat clita</p>
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
</div>
</div>
</div>
</div>
<!-- Services End -->
/* =================== Service Section ==================*/
.service-h4{
padding-bottom: 30px;
}
.service-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 60px;
}
.service-box{
box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.1);
margin-left: 20px;
padding: 15px;
padding-left: 30px;
padding-right: 30px;
}
.service-box:hover{
box-shadow: 0px 1px 13px rgba(27, 27, 27, 0.705);
}
Portfolio Start:
<!-- Portfolio Start -->
<div class="container-fluid pt-5 pb-3" id="portfolio">
<div class="container">
<div class="position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Gallery</h1>
<h1 class="position-absolute text-uppercase text-primary">My Portfolio</h1>
</div>
<div class="row">
<div class="col-12 text-center mb-2">
<ul class="list-inline mb-4" id="portfolio-flters">
<li class="btn btn-sm btn-outline-primary m-1 active" data-filter="*">All</li>
<li class="btn btn-sm btn-outline-primary m-1" data-filter=".first">Design</li>
<li class="btn btn-sm btn-outline-primary m-1" data-filter=".second">Development</li>
<li class="btn btn-sm btn-outline-primary m-1" data-filter=".third">Marketing</li>
</ul>
</div>
</div>
<div class="row portfolio-container">
<div class="col-lg-4 col-md-6 mb-4 portfolio-item first">
<div class="position-relative overflow-hidden mb-2">
<img class="img-fluid rounded w-100" src="img/portfolio-1.jpg" alt="">
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
<a href="img/portfolio-1.jpg" data-lightbox="portfolio">
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 portfolio-item second">
<div class="position-relative overflow-hidden mb-2">
<img class="img-fluid rounded w-100" src="img/portfolio-2.jpg" alt="">
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
<a href="img/portfolio-2.jpg" data-lightbox="portfolio">
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 portfolio-item third">
<div class="position-relative overflow-hidden mb-2">
<img class="img-fluid rounded w-100" src="img/portfolio-3.jpg" alt="">
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
<a href="img/portfolio-3.jpg" data-lightbox="portfolio">
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 portfolio-item first">
<div class="position-relative overflow-hidden mb-2">
<img class="img-fluid rounded w-100" src="img/portfolio-4.jpg" alt="">
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
<a href="img/portfolio-4.jpg" data-lightbox="portfolio">
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 portfolio-item second">
<div class="position-relative overflow-hidden mb-2">
<img class="img-fluid rounded w-100" src="img/portfolio-5.jpg" alt="">
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
<a href="img/portfolio-5.jpg" data-lightbox="portfolio">
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 portfolio-item third">
<div class="position-relative overflow-hidden mb-2">
<img class="img-fluid rounded w-100" src="img/portfolio-6.jpg" alt="">
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
<a href="img/portfolio-6.jpg" data-lightbox="portfolio">
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio End -->
/* =================== Portfolio section ==================*/
.portfolio-item .portfolio-btn {
position: absolute;
width: 0;
height: 0;
top: 50%;
left: 50%;
border-radius: 4px;
opacity: 0;
transition: .5s;
}
.portfolio-item:hover .portfolio-btn {
opacity: 1;
width: calc(100% - 60px);
height: calc(100% - 60px);
top: 30px;
left: 30px;
}
Testimonial Start:
<!-- Testimonial Start -->
<div class="container-fluid py-5" id="testimonial">
<div class="container">
<div class="position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Review</h1>
<h1 class="position-absolute text-uppercase text-primary">Clients Say</h1>
</div>
<div class="row justify-content-center">
<div class="col-lg-9">
<div class="owl-carousel testimonial-carousel">
<div class="text-center">
<i class="fa fa-3x fa-quote-left text-primary mb-4"></i>
<h4 class="font-weight-light mb-4">Dolor eirmod diam stet kasd sed. Aliqu rebum est eos. Rebum elitr dolore et eos labore, stet justo sed est sed. Diam sed sed dolor stet accusam amet eirmod eos, labore diam clita</h4>
<img class="img-fluid rounded-circle mx-auto mb-3" src="img/testimonial-1.jpg" style="width: 80px; height: 80px;">
<h5 class="font-weight-bold m-0">Client Name</h5>
<span>Profession</span>
</div>
<div class="text-center">
<i class="fa fa-3x fa-quote-left text-primary mb-4"></i>
<h4 class="font-weight-light mb-4">Dolor eirmod diam stet kasd sed. Aliqu rebum est eos. Rebum elitr dolore et eos labore, stet justo sed est sed. Diam sed sed dolor stet accusam amet eirmod eos, labore diam clita</h4>
<img class="img-fluid rounded-circle mx-auto mb-3" src="img/testimonial-2.jpg" style="width: 80px; height: 80px;">
<h5 class="font-weight-bold m-0">Client Name</h5>
<span>Profession</span>
</div>
<div class="text-center">
<i class="fa fa-3x fa-quote-left text-primary mb-4"></i>
<h4 class="font-weight-light mb-4">Dolor eirmod diam stet kasd sed. Aliqu rebum est eos. Rebum elitr dolore et eos labore, stet justo sed est sed. Diam sed sed dolor stet accusam amet eirmod eos, labore diam clita</h4>
<img class="img-fluid rounded-circle mx-auto mb-3" src="img/testimonial-3.jpg" style="width: 80px; height: 80px;">
<h5 class="font-weight-bold m-0">Client Name</h5>
<span>Profession</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonial End -->
/* ====================== Testimonial ================*/
.testimonial-carousel .text-center{
background-color: #eaecf0d0;
border-radius: 20px;
margin: 20px;
}
.testimonial-carousel .text-center h4{
}
.testimonial-carousel .owl-dots {
margin-top: 25px;
text-align: center;
}
.testimonial-carousel .owl-dot {
display: inline-block;
margin: 0 5px;
width: 12px;
height: 12px;
border-radius: 10px;
background: #dddddd;
}
.testimonial-carousel .owl-dot.active {
background: #0BCEAF;
}
Contact Start:
<!-- Contact Start -->
<div class="container-fluid py-5" id="contact">
<div class="container">
<div class="position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Contact</h1>
<h1 class="position-absolute text-uppercase text-primary">Contact Me</h1>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="contact-form text-center">
<div id="success"></div>
<form name="sentMessage" id="contactForm" novalidate="novalidate">
<div class="form-row">
<div class="control-group col-sm-6">
<input type="text" class="form-control p-4" id="name" placeholder="Your Name"
required="required" data-validation-required-message="Please enter your name" />
<p class="help-block text-danger"></p>
</div>
<div class="control-group col-sm-6">
<input type="email" class="form-control p-4" id="email" placeholder="Your Email"
required="required" data-validation-required-message="Please enter your email" />
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<input type="text" class="form-control p-4" id="subject" placeholder="Subject"
required="required" data-validation-required-message="Please enter a subject" />
<p class="help-block text-danger"></p>
</div>
<div class="control-group">
<textarea class="form-control py-3 px-4" rows="5" id="message" placeholder="Message"
required="required"
data-validation-required-message="Please enter your message"></textarea>
<p class="help-block text-danger"></p>
</div>
<div>
<button class="btn btn-outline-primary" type="submit" id="sendMessageButton">Send
Message</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Contact End -->
/* ========================== Contact Us ========================*/
.contact-form .help-block ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Footer Start:
<!-- Footer Start -->
<div class="container-fluid bg-primary text-white mt-5 py-1 px-sm-1 px-md-5">
<div class="container text-center py-5">
<div class="d-flex justify-content-center mb-4">
<a class="btn btn-light btn-social mr-2" href="#"><i class="fab fa-twitter"></i></a>
<a class="btn btn-light btn-social mr-2" href="#"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-light btn-social mr-2" href="#"><i class="fab fa-linkedin-in"></i></a>
<a class="btn btn-light btn-social" href="#"><i class="fab fa-instagram"></i></a>
</div>
<div class="d-flex justify-content-center mb-3">
<a class="text-white" href="#">Privacy</a>
<span class="px-3">|</span>
<a class="text-white" href="#">Terms</a>
<span class="px-3">|</span>
<a class="text-white" href="#">FAQs</a>
<span class="px-3">|</span>
<a class="text-white" href="#">Help</a>
</div>
<p class="m-0">© <a class="text-white font-weight-bold" href="#">MysteryCode</a>. All Rights Reserved. Designed by <a class="text-white font-weight-bold" href="#">Mystery Code</a>
</p>
</div>
</div>
<!-- Footer End -->
No Css code
Back to Top:
<!-- Back to Top -->
<a href="#" class="btn btn-outline-dark px-0 back-to-top"><i class="fa fa-angle-double-up"></i></a>
/*====================== Back to buttom ==================*/
.back-to-top {
position: fixed;
display: none;
width: 30px;
text-align: center;
right: 30px;
bottom: 30px;
z-index: 11;
animation: action 1s infinite alternate;
}
@keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-15px);
}
}
Download Source Code
If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Related Post:
💖 💪 🙅 🚩
Foolish Developer
Posted on May 7, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
