Simple Website from Scratch using Bootstrap

Hello friends, Today in this blog, we will learn to create a simple responsive website using HTML CSS and Bootstrap. In this blog, I have shared many code snippets based on CSS animation examples, Bootstrap and JavaScript, etc. please click the load more link below the homepage of this blog. For making this simple website, I have used the latest HTML5 & CSS3 properties and a bootstrap responsive grid system. You can use this source code to create a personal portfolio website, digital agency website, photography website, and many more.

There are six different sections in this particular website like home, about, services, team, portfolio, and contact. There is also a footer where you can put your company copyright trademark. Each section of this website looks neat and minimal. On the homepage, there is a brand name on the left-hand side. You can put a brand logo image here as well if you want. On the right side, there are six menu links. I have used some custom jQuery codes to make the navbar remain sticky while scrolling down the webpage. A smooth transition effect is also added to make the navbar looks aesthetic. In the middle of the homepage, we will see a header text, a paragraph text, and a call-to-action button. I have a bootstrap carousel to make a text slider for the homepage. In this way, the background will remain fixed, but the text will slide after a specific time interval.

In the about area, you will see an image in the middle and header text along will some random text. From the services section, I have included a section header for each section of the webpage. I have taken three services boxes with a font-awesome icon, service name, and some text. You can take more according to your service variation. I have used a bootstrap grid of 'col-MD-4', as I have taken three, but you can take the 'col-MD-3' column grid in the case of four. I have taken six portfolio boxes with an image, a header text, and some text in the portfolio area. I have also included nice hover CSS animation on each picture of the portfolio section. In the team section, I have taken three boxes with the person's name, some text, and social media profile links using font-awesome icons. I have used a form snippet from a bootstrap website and customized it according to the website's needs in the contact section. And finally, and a footer section with copyright text in it.

You may also like:

If you like this website and want the source code, get it from the code box. to get the whole source along with the images, click the download code button.

Simple Website from Scratch using Bootstrap [ Source Code ]

To create this webpage, you need to make three files. Those are HTML, CSS, and a js file. After the creation of this file, paste the code you copied and save.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Website from Scratch using Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="header-area" id="home">
        <nav class="navbar navbar-default custom-style navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">DesignMode</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home" class="smooth-menu">Home</a></li>        
        <li><a href="#about" class="smooth-menu">About</a></li>        
        <li><a href="#portfolio" class="smooth-menu">Portfolio</a></li>        
        <li><a href="#services" class="smooth-menu">Services</a></li>        
        <li><a href="#team" class="smooth-menu">Team</a></li>        
        <li><a href="#contact" class="smooth-menu">Contact</a></li>        
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
   
   <div class="slider-area">
       <div class="container">
           <div id="fawesome-carousel" class="carousel slide" data-ride="carousel">
           <div class="carousel-inner" role="listbox">
               <div class="item active">
                   <h2>Creative Digital Agency</h2>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cupiditate voluptas unde consequuntur porro officiis, eaque ex ut temporibus aperiam?</p>
                   <a href="#">Learn More</a>
               </div>
               <div class="item">
                   <h2>UI / UX Design</h2>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cupiditate voluptas unde consequuntur porro officiis, eaque ex ut temporibus aperiam?</p>
                   <a href="#">Learn More</a>
               </div>
               <div class="item">
                   <h2>Graphics Design Company</h2>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cupiditate voluptas unde consequuntur porro officiis, eaque ex ut temporibus aperiam?</p>
                   <a href="#">Learn More</a>
               </div>
           </div>
       </div>
       </div>
   </div>
   
   
    </div>
    
    
    <div class="about-area section-padding" id="about">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12">
                    <div class="about-content text-center">
                       <img src="images/about.jpg" alt="">
                        <h2>We Area Creative Digital Agency</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis cupiditate nihil sint tempora atque ad necessitatibus. Expedita totam obcaecati, modi similique maiores aspernatur nesciunt, ad, reiciendis cupiditate nemo culpa repellat vero dicta earum. Quisquam recusandae corrupti at sit incidunt sunt unde quos vero, adipisci neque aperiam libero eum minima, fugiat nobis soluta culpa laboriosam porro saepe consequatur odio deleniti ratione eligendi modi ipsam. Ipsum laboriosam exercitationem suscipit voluptate nam eligendi laudantium possimus unde corporis doloremque!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    <div class="services-area section-padding" id="services">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="section-header text-center">
                        <h2>Services</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae ipsam magnam ipsum ut explicabo? Nobis?</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="single-services text-center">
                        <i class="fa fa-globe"></i>
                        <h4>Web Design</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos voluptate porro delectus, sequi ex veritatis.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-services text-center">
                        <i class="fa fa-cloud"></i>
                        <h4>Graphics Design</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos voluptate porro delectus, sequi ex veritatis.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-services text-center">
                        <i class="fa fa-laptop"></i>
                        <h4>Digital marketing</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos voluptate porro delectus, sequi ex veritatis.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="portfolio-area section-padding" id="portfolio">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="section-header text-center">
                        <h2>Portfolio</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae ipsam magnam ipsum ut explicabo? Nobis?</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="single-portfolio text-center">
                        <div class="port-img-area">
                            <img src="images/port1.jpg" alt="">
                            <div class="port-text">
                                <i class="fa fa-search"></i>
                            </div>
                        </div>
                        <h4>HTML</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum magnam tempore, officiis alias saepe deleniti!</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-portfolio text-center">
                        <div class="port-img-area">
                            <img src="images/port2.jpg" alt="">
                            <div class="port-text">
                                <i class="fa fa-search"></i>
                            </div>
                        </div>
                        <h4>Javascript</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum magnam tempore, officiis alias saepe deleniti!</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-portfolio text-center">
                        <div class="port-img-area">
                            <img src="images/port3.jpg" alt="">
                            <div class="port-text">
                                <i class="fa fa-search"></i>
                            </div>
                        </div>
                        <h4>Bootstrap</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum magnam tempore, officiis alias saepe deleniti!</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-portfolio text-center">
                        <div class="port-img-area">
                            <img src="images/port4.jpg" alt="">
                            <div class="port-text">
                                <i class="fa fa-search"></i>
                            </div>
                        </div>
                        <h4>Laravel</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum magnam tempore, officiis alias saepe deleniti!</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-portfolio text-center">
                        <div class="port-img-area">
                            <img src="images/port5.jpg" alt="">
                            <div class="port-text">
                                <i class="fa fa-search"></i>
                            </div>
                        </div>
                        <h4>Php</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum magnam tempore, officiis alias saepe deleniti!</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-portfolio text-center">
                        <div class="port-img-area">
                            <img src="images/port6.jpg" alt="">
                            <div class="port-text">
                                <i class="fa fa-search"></i>
                            </div>
                        </div>
                        <h4>Wordpress</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum magnam tempore, officiis alias saepe deleniti!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="team-area section-padding" id="team">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="section-header text-center">
                        <h2>About Us</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae ipsam magnam ipsum ut explicabo? Nobis?</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="single-team text-center">
                        <img src="images/team-1.jpg" alt="">
                        <h2>John Doe</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, dolore.</p>
                        <div class="socials">
                            <i class="fa fa-facebook"></i>
                            <i class="fa fa-twitter"></i>
                            <i class="fa fa-youtube"></i>
                            <i class="fa fa-dribbble"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-team text-center">
                        <img src="images/team-2.jpg" alt="">
                        <h2>Dave Wood</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, dolore.</p>
                        <div class="socials">
                            <i class="fa fa-facebook"></i>
                            <i class="fa fa-twitter"></i>
                            <i class="fa fa-youtube"></i>
                            <i class="fa fa-dribbble"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-team text-center">
                        <img src="images/team-3.jpg" alt="">
                        <h2>Jason Holder</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, dolore.</p>
                        <div class="socials">
                            <i class="fa fa-facebook"></i>
                            <i class="fa fa-twitter"></i>
                            <i class="fa fa-youtube"></i>
                            <i class="fa fa-dribbble"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="form-area section-padding" id="contact">
        <div class="container">
           <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="section-header text-center">
                        <h2>Contact Us</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae ipsam magnam ipsum ut explicabo? Nobis?</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="single-form">
                        <form>
                          <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                          </div>
                          <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                          </div>
                          <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="footer-area">
        <div class="container">
            <div class="row">
                <div class="single-footer text-center">
                    <p>All Right Reserved By ©Your Website</p>
                </div>
            </div>
        </div>
    </div>
    
    
    
    
    
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>

    $(document).ready(function () {
    'use strict';

    $(window).scroll(function() {
        if($(this).scrollTop()>5) {
            $(".custom-style").addClass("fixed-me");
        }else{
            $(".custom-style").removeClass("fixed-me");
        }
    });
    
    
    //************ smooth scroll js

    $('a.smooth-menu').on("click", function (e) {
        e.preventDefault();
        var anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $(anchor.attr('href')).offset().top - 50
        }, 1000);
    });



});

</script>
</body>
</html>

CSS:

/*Base CSS*/


a:focus{
    outline: 0 solid;
}
img{
    max-width: 100%;
    height: auto;
}
h1,h2,h3,h4,h5,h6{
    margin: 0 0 15px;
    font-weight: 700;
}
html,
body{
    height: 100%;
    font-family: montserrat;
}
a{
    transition: 0.3s;
    color: #333;
}
a:hover{
    text-decoration: none;
}
.section-padding{
    padding: 80px 0;
}
p{
    color: #969696;
}

/* header-area */

.header-area{
    background-image: url(images/1.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.carousel-inner .item{
    color: #fff;
    padding: 300px 0;
    text-align: center;
}

.custom-style{
    padding: 10px 0;
    background-color: transparent;
    top: 0;
    border: 0;
    border-radius: 0;
    transition: all 1s;
}
.fixed-me{
    background-color: rgba(0,0,0,0.7) !important;
    padding: 0 !important;
    margin-bottom: 5px;
    position: fixed;
    top: 0;
    z-index: 888;
    width: 100%;
    transition: all 1s;
}

.navbar-default .navbar-brand{
    color: greenyellow;
    font-size: 30px;
}
.navbar-default .navbar-nav > li > a{
    color: #fff;
    font-size: 20px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus{
    color: #fff;
    background-color: transparent;
}

/*slider area*/

.slider-area .carousel-inner .item h2{
    font-size: 35px;
}
.slider-area .carousel-inner .item p {
	font-size: 15px;
	color: #fff;
	width: 75%;
	margin: auto;
}
.slider-area .carousel-inner .item a{
    background: greenyellow;
    color: #000;
    padding: 10px 15px;
    border-radius: 5px;
    text-transform: uppercase;
    display: inline-block;
    margin-top: 15px;
}

/*about area*/

.about-content img {
	width: 500px;
	height: auto;
	margin-bottom: 30px;
}
.about-content p {
	line-height: 2;
}


/*services area*/

.section-header{
    padding: 30px 0;
}
.section-header h2{
    text-transform: uppercase;
}
.single-services i{
    margin-bottom: 30px;
    font-size: 50px;
    color: greenyellow;
}

.single-services p{
    color: #969696;
    line-height: 33px;
}


/*portfolio area*/

.port-img-area{
    position: relative;    
}
.port-text{
    position: absolute;
    top: 0;
    left: 0;
    font-size: 35px;
    color: #fff;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    text-align: center;
    transform: scale(0);
    transition: all .5s ease-in;
}

.port-text i{
    padding-top: 26%;
}
.port-img-area:hover .port-text{
    transform: scale(1);
}
.single-portfolio h4{
    font-size: 25px;
    margin-top: 25px;
}

.single-portfolio{
    margin: 25px 0;
}

/*team area*/

.single-team h2 {
  text-transform: uppercase;
  margin: 15px 0;
}
.socials i {
  font-size: 25px;
  margin: 0 15px;
    color: greenyellow;
}
.socials {
  margin: 30px 0;
}

/*contact*/

.single-form button {
	background: greenyellow;
}


/*footer area*/

.footer-area{
    background: #262626;
    padding: 30px 0;
}
.single-footer p{
    color: #fff;
}

I hope you liked this code of Simple Website from Scratch using Bootstrap. If so, please share the articles on this blog. Please follow us on our social media profiles to stay connected with this blog. If you do that, you will keep getting updates of the future post of this blog. Thank you very much for stopping by this blog.

DOWNLOAD SOURCE CODE

Follow Us:

Simple Website from Scratch using Bootstrap

Post a Comment

Contact Form