How To Create Free Portfolio Bootstrap Template

Leave a Comment / By /

 

Hi everybody! Using HTML, CSS, and JavaScript, you will learn

how to create a responsive portfolio bootstrap template free using HTML CSS And BOOTSTRAP in this Blog.

Using standard JavaScript, users can use the navigation buttons on the web design moving car animation  website design to navigate through each slide. The clip-path property is utilized for the transition on the slide. I hope that when you design a website with online moving car animation , this video will be helpful.

You can download all of the source files and codes from this location. The code from the text editors must be copied and pasted. Try it out first by watching the video tutorial. It will assist you in comprehending everything. After that, if your code isn’t working right, look at the source codes provided and compare them to your own. It will assist you in comprehending everything, including your errors.

Index.html

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>START BOOTSTRAP</title>
      
    <!-- custome style link -->
    <link rel="stylesheet" href="style.css">

    <!-- custome bootstrap link -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- custome scripts link -->
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

      <!-- custome font link -->
      <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
      <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">
</head>
<body>
    
  <!-- navbar -->

  <nav class="navbar navbar-expand-lg navbar-dark text-uppercase fixed-top navhead">
    <div class="container">
      <a class="navbar-brand navmain" href="#">START BOOTSTRAP</a>
      <button class="navbar-toggler nav_btn" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">MENU
      <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto nav_links">
          <li class="nav-item mx-0 mx-lg-1 nav_item">
            <a class="nav-link" href="#">PROTFOLIO</a>
          </li>
          <li class="nav-item mx-0 mx-lg-1 nav_item">
            <a class="nav-link" href="#">ABOUT</a>
          </li>
          <li class="nav-item mx-0 mx-lg-1 nav_item">
            <a class="nav-link" href="#">CONTACT</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- main -->

<div class="container-fluid main">
  <div class="container align-items-center main_items">
    <img fetchpriority="high" decoding="async" src="img/avataaars.svg" width="250" height="250" alt="">
    <h1>START BOOTSTRAP</h1>

    <div class="container main_star">
      <h2><span><i class="fa fa-star"></i></span></h2>
    </div>
    <p>Graphis Artist - web Designer - Illustrator</p>
  </div>
</div>

<!-- portfolio -->

<div class="container port">
<h1 >PORTFOLIO</h1>
<div class="container port_star">
<h2><span><i class="fa fa-star" aria-hidden="true"></i></span></h2>
</div>
  

<div class="row">
<div class="col-md-6 col-lg-4 mb-5 relative">
<img decoding="async" src="img/cabin.png" class="img-fluid">
<div class=" absolute" data-toggle="modal" data-target="#staticBackdrop">
<i class="fa fa-plus" aria-hidden="true" ></i>
</div></div>
  
  <!-- Modal -->
<div class="modal fade" id="staticBackdrop">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content ">
<div class="modal-header ">
<div class="container modal_text">
<h5 class="modal-title justify-content-md-center" id="staticBackdropLabel">LOG CABIN</h5>
<div class="container port_star">
<h2><span><i class="fa fa-star" aria-hidden="true"></i></span></h2>
</div></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body text-center">
<img decoding="async" src="img/cabin.png" >
</div>
<div class="modal-footer justify-content-md-center ">
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." 
  "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
  " Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<button type="button" class="btn btn-success" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Close Windows</button>
</div></div></div></div>

  <!-- 2 -->
  
<div class="col-md-6 col-lg-4 mb-5 relative">
<img decoding="async" src="img/cake.png" class="img-fluid">
<div class="  absolute" data-toggle="modal" data-target="#staticBackdrop1">
<i class="fa fa-plus" aria-hidden="true" ></i>
</div></div>
  
  <!-- Modal -->
<div class="modal fade" id="staticBackdrop1">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content ">
<div class="modal-header ">
<div class="container pqp">
<h5 class="modal-title justify-content-md-center" id="staticBackdropLabel">TASTY CAKE</h5>
<div class="container xyzp">
<h2><span><i class="fa fa-star" aria-hidden="true"></i></span></h2>
</div></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body text-center">
<img decoding="async" src="img/cake.png" >
</div>
<div class="modal-footer justify-content-md-center ">
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." 
  "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
  " Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button type="button" class="btn btn-success" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Close Windows</button>
</div></div></div></div>
  
  
  <!-- 3 -->
  
<div class="col-md-6 col-lg-4 mb-5 relative">
<img decoding="async" src="img/circus.png" class="img-fluid">
<div class=" absolute" data-toggle="modal" data-target="#staticBackdrop2">
<i class="fa fa-plus" aria-hidden="true" ></i>
</div></div>
  
  <!-- Modal -->
<div class="modal fade" id="staticBackdrop2">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content ">
<div class="modal-header ">
<div class="container pqp">
<h5 class="modal-title justify-content-md-center" id="staticBackdropLabel">CIRCUS TENT</h5>
<div class="container xyzp">
<h2><span><i class="fa fa-star" aria-hidden="true"></i></span></h2>
</div></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body text-center">
<img decoding="async" src="img/circus.png" >
</div>
<div class="modal-footer justify-content-md-center">
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." 
  "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
  " Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
 <button type="button" class="btn btn-success" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Close Windows</button>
</div></div></div></div>
  
  
 
  <!-- 4 -->
  
  
<div class="col-md-6 col-lg-4 mb-5 relative">
<img decoding="async" src="img/game.png" class="img-fluid">
<div class=" absolute" data-toggle="modal" data-target="#staticBackdrop3">
<i class="fa fa-plus" aria-hidden="true" ></i>
</div></div>
  
  <!-- Modal -->
<div class="modal fade" id="staticBackdrop3">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content ">
<div class="modal-header ">
<div class="container pqp">
<h5 class="modal-title justify-content-md-center" id="staticBackdropLabel">CONTROLLER</h5>
<div class="container xyzp">
<h2><span><i class="fa fa-star" aria-hidden="true"></i></span></h2>
</div></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body text-center">
<img decoding="async" src="img/game.png" >
</div>
<div class="modal-footer justify-content-md-center">
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." 
  "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
  " Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button type="button" class="btn btn-success" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Close Windows</button>
</div></div></div></div>
  
  
  
  
  <!-- 5 -->
  
<div class="col-md-6 col-lg-4 mb-5 relative">
<img decoding="async" src="img/safe.png" class="img-fluid">
<div class=" absolute" data-toggle="modal" data-target="#staticBackdrop4">
<i class="fa fa-plus" aria-hidden="true" ></i>
</div></div>
  
  <!-- Modal -->
<div class="modal fade" id="staticBackdrop4">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content ">
<div class="modal-header ">
<div class="container pqp">
<h5 class="modal-title justify-content-md-center" id="staticBackdropLabel">LOCKED SAFE</h5>
<div class="container xyzp">
<h2><span><i class="fa fa-star" aria-hidden="true"></i></span></h2>
</div></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body text-center">
<img decoding="async" src="img/safe.png" >
</div>
<div class="modal-footer justify-content-md-center">
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." 
  "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
  " Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button type="button" class="btn btn-success" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Close Windows</button>
</div></div></div></div>
  
  
  
  
  
  <!-- 6 -->
  
<div class="col-md-6 col-lg-4 mb-5 relative">
<img decoding="async" src="img/submarine.png" class="img-fluid">
<div class=" absolute" data-toggle="modal" data-target="#staticBackdrop5">
<i class="fa fa-plus" aria-hidden="true" ></i>
</div></div>
  
  <!-- Modal -->
<div class="modal fade" id="staticBackdrop5">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content ">
<div class="modal-header ">
<div class="container pqp">
<h5 class="modal-title justify-content-md-center" id="staticBackdropLabel">SUBMARINE</h5>
<div class="container xyzp">
<h2><span><i class="fa fa-star" aria-hidden="true"></i></span></h2>
</div></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body text-center">
<img decoding="async" src="img/submarine.png" >
</div>
<div class="modal-footer justify-content-md-center">
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." 
  "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
  " Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button type="button" class="btn btn-success" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Close Windows</button>
</div></div></div></div></div></div>

<!-- about -->

<div class="container-fluid about">
<div class="container about_text">
<h1 >ABOUT</h1>
<h2><span><i class="fa fa-star" aria-hidden="true"></i></span></h2>
<div class="row row_text">
<div class="col-lg-4 ml-auto">
<p class="text_par">Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional SASS stylesheets for easy customization.</p>
</div>
<div class="col-lg-4 mr-auto">
<p class="text_par">You can create your own custom avatar for the masthead, change the icon in the dividers, and add your email address to the contact form to make it fully functional!</p>
</div></div>
<button type="button" class="btn btn-outline-light btn-lg btn_text"><i class="fa fa-download" aria-hidden="true"> </i>Free Download!</button>
</div></div>
<br><br><br>


<!-- contact me -->
<div class="container-fluid contact">
<div class="container contact_text">
<h1 >CONTACT ME</h1>
<h2><span><i class="fa fa-star" aria-hidden="true"></i></span></h2>

<!-- contact me form-->
  
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-8 mx-auto ">
<label for="validationCustom01">Name</label>
<input type="text contact_input" class="form-control" id="validationCustom01" value="" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
  
  
<div class="col-md-8 mx-auto">
<label for="validationCustom02">Email</label>
<input type="text" class="form-control" id="validationCustom02" value="" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
  
  
<div class="col-md-8 mx-auto">
<label for="validationCustom02">Phone Number</label>
<input type="text" class="form-control" id="validationCustom02" value="" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
  
  
<div class="col-md-8 mx-auto">
<label for="validationCustom02">Message</label>
<input type="text" class="form-control" id="validationCustom02" value="" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
  
  
<div class="col-md-8 mx-auto">
<br>
<button class="btn btn-success" type="submit">Submit form</button>
</form>
</div></div>
  
  <script>
  // Example starter JavaScript for disabling form submissions if there are invalid fields
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
  </script>
  
  </div>
  </div>

<!-- footer -->

<footer class="footer text-center footer_text">
  <div class="container footer_con">
       <div class="row">
         <div class="col-lg-4 mb-5 mb-lg-0">
           <h4 class="text-uppercase mb-4">location</h4>
           <p class="mb-0">
             2215 John Daniel Drive
             <br>
             Clark, MO 65243
           </p>
         </div>

         <div class="col-lg-4 mb-5 lg-0">
           <h4 class="text-uppercase mb-4">AROUND THE WEB</h4>
           <p class="mb-0">
             <i class="fa fa-facebook" aria-hidden="true" ></i>
             <i class="fa fa-twitter" aria-hidden="true" ></i>

             <i class="fa fa-linkedin" aria-hidden="true" ></i>
             <i class="fa fa-dribbble" aria-hidden="true" ></i>
              
           </p>
         </div>
         
         <div class="col-lg-4 mb-5 mb-lg-0">
           <h4 class="text-uppercase mb-4">ABOUT FREELANCER</h4>
           <p class="mb-0">
             Freelance is a free to use, MIT licensed Bootstrap them created by
             <br>

           </p>
         </div>
       </div>
  </div>
  <div class="copywright">
    <div class="container container_text">
      <p>Copyright © Your Website 2022 Dailywebdesign</p>
    </div>
  </div>
</footer>



















  
    
</body>
</html>

style.css

				
					.navhead{
    background-color: #2c3e50 !important;
    padding:22px !important;
}
.navmain{
    font-size: 28px !important;
    font-weight: bold !important;
}
.nav_btn{
    color: #fff !important;
    background-color: #1abc9c !important;
    font-weight:bold !important;
    font-size: 20px !important;
}
.nav_links{
    font-weight: bold !important;
    font-size: 17px;
}
.nav_item a{
    color: #fff !important;
}
.nav_item a:hover{
    color: #1abc9c !important;
}

.main{
    background-color: #1abc9c;
    height: 800px;
}

.main_items{
    height:300px;
    text-align: center;
    padding:100px;
}

.main_items img{
    margin-top:-25px;
}

.main_items h1{
    color: #fff !important;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 64px;
    margin-top:-75px;
}

h2{
    color: #2c3e50;
  font-family: sans-serif;
  margin: 100px auto;
  text-align: center;
  font-size: 40px;
  max-width: 600px;
  position: relative;
}

 h2::before{
  content: "";
  display: inline-block;
  width: 97px;
  height: 4px;
  background-color:#2c3e50; 
  position: absolute;
  right: 56%;
  top: 50%;
  border-radius: 10px;
}
 h2::after{
  content: "";
  display: inline-block;
  width: 97px;
  height: 4px;
  background-color: #2c3e50;
  position: absolute;
  left:  56%;
  top: 50%;
  border-radius: 10px;
}

.main_items p{
    font-size: 24px;
    line-height:94px;
    color: #fff;
    font-family: 'Lato', sans-serif;
}

.port{
    height:700px;
    text-align: center;
    margin:30px;
}
.port h1{
    margin: 30px;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
}
.port_star{
    height:100px;
    position: relative;
    margin-top:-80px;
}
.port_star i{
    color: #000000;
    font-size: 30px;
}
.port_star h2{
    color: #000000;
    font-family: sans-serif;
    margin: 100px auto;
    text-align: center;
    font-size: 40px;
    max-width: 600px;
    position: relative;
}
img{
    border-radius: 10px;
    max-width: 100%;
    height:500px;
}
.relative{
    height:239.77px;
    width: 332px;
    position: relative;
}
.relative img{
    height:239.77px;
    width: 332px;
}

.absolute{
    width: 332px;
    top: 0px;
    left: 9px;
    right: 0px;
    position: absolute;
    background-color: #28a745;
    opacity: 0.9;
    height:0;
    overflow: hidden;
    margin-left: 15px;
    border-radius: 10px;
}
.absolute i{
    position: absolute;
    color: #fff;
    text-align: center;
    top:40%;
    left: 45%;
    font-size: 52px;
}
.relative:hover .absolute{
    height:239.77px;
}
.modal_text h5{
    margin: 30px;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
}

.about{
    background-color: #1abc9c;
    height:600px;
}
.about_text{
    height:500px;
    text-align: center;
    padding: 100px;
}
.about_text h1{
    color: #fff !important;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 3rem;
}
.row_text{
    height:215px;
}
.text_par{
    font-size: 19px;
    text-align: left;
    color: #fff;
    line-height: 30px;
}
.btn_text{
    color: #fff !important;
    height:60px;
    width:auto;
    font-family: 'Lato', sans-serif;
}
.btn_text:hover{
    color: #000 !important;
}

.contact{
    height:700px;
}

.contact_text{
    height: 500px;
}
.contact_text h1{
    color: #2c3e50;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 3rem;
    text-align: center;
}
.contact_input{
    height:300px;
}

.footer_text{
    background-color: rgb(44, 62, 80);
    height:250px;
}
.footer_con{
    height:250px;
    padding:24px;
}
p{
    color: #fff;
}
h4{
    font-size: 24px;
    color: #fff;
}
.copywright{
    background-color: rgb(26, 37, 47);
    height:90px;
}
.container_text{
    padding:24px;
}
.container_text p{
    text-align: center;
    color: #fff;
}

images

portfolio bootstrap template
portfolio bootstrap template
portfolio bootstrap template
portfolio bootstrap template
portfolio bootstrap template
portfolio bootstrap template
portfolio bootstrap template
portfolio bootstrap template
portfolio bootstrap template
portfolio bootstrap template
portfolio bootstrap template
portfolio bootstrap template
portfolio bootstrap template
portfolio bootstrap template

 

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top