Bootcamp Website Template using HTML and CSS

Last Updated : 08 Nov, 2021

In this article, we will see how to design a simple Bootcamp Website Template using HTML and CSS.

Creating an attractive template will be difficult for those who are not experts in CSS. Without using CSS, you will not be able to make the web page more attractive. So in order to make a web page, we need to have a knowledge of HTML and CSS. In this article, we will use HTML and CSS to make the website template. In order to design a template, we need to first create an HTML web structure.

Step 1: Creating web structure using HTML – In this section, we will create a simple structure of the web page by using <div>, <li>, and <section> tags as well as class and id attributes. We will have the following sections: Navbar, Banner, Courses, About, and at the last, we will have the contact us section. So this will create a simple interface that you can check by running the following code.

HTML Code:

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <meta http-equiv="X-UA-Compatible" 
        content="ie=edge" /> 
    <title>BOOTCAMP</title> 
    <link rel="stylesheet" href="style.css" /> 
    <link rel="stylesheet" href= 
"https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity= 
"sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
        crossorigin="anonymous" /> 
</head> 
  
<body> 
    <div class="container"> 
  
        <!-------- Creating Navbar --------->
        <nav> 
            <a href="#">BOOTCAMP</a> 
            <div class="navbar"> 
                <ul> 
                    <li><a href="index.html">Home</a></li> 
                    <li><a href="#">Courses</a></li> 
                    <li><a href="#">About</a></li> 
                    <li><a href="#">Contact</a></li> 
                </ul> 
            </div> 
        </nav> 
  
        <!--------- Creating Banner -------->
        <div class="main-banner"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20211022104311/coding.jpeg"
                alt="banner" /> 
        </div> 
  
        <!-------- Courses or services ------->
        <section class="service"> 
            <h1>Courses</h1> 
            <div class="col"> 
                <i class="fab fa-algolia fa-3x ip"></i> 
                <h3>Web Designing</h3> 
                <p> 
                    If you are looking for a way to  
                    use your artistic side, web design  
                    is a great way to do it.In today's  
                    world, learning how to design  
                    websites can be an incredibly useful  
                    skill. 
                </p> 
  
                <a href="#">Know More</a> 
            </div> 
  
            <div class="col"> 
                <i class="fas fa-code fa-3x ip"></i> 
                <h3>Web Development</h3> 
                <p> 
                    Web development gives you the  
                    opportunity to express yourself  
                    creatively on the internet. 
                    Fortunately, the high demand,  
                    easy-to-learn, fun-to-experience 
                    life. 
                </p> 
  
                <a href="#">Know More</a> 
            </div> 
  
            <div class="col"> 
                <i class="fab fa-android fa-3x ip"></i> 
                <h3>Android</h3> 
                <p> 
                    By learning Android Development,  
                    you give yourself the best possible  
                    chance to reach any career goals you  
                    set. Once you get started, within no  
                    time, you'll land in your dream job. 
                </p> 
  
                <a href="#">Know More</a> 
            </div> 
        </section> 
  
        <section class="about"> 
            <h1>Why choose us?</h1> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20211022104311/coding.jpeg"
                alt="about us" /> 
            <p> 
                In today’s digital world, when there  
                are thousands of online platforms  
                (maybe more than that!) available over  
                the web, it becomes quite difficult for  
                students to opt for a quality, relevant  
                and reliable platform for themselves. 
                BOOTCAMP will help you excel in your  
                choice of domain by giving industry  
                equivalent experience. 
            </p> 
  
            <a href="#">More</a> 
        </section> 
  
        <section id="contact"> 
            <div class="services-info"> 
                <h1>Get in<span id="blue">Touch</span></h1> 
                <p> We are Available</p> 
            </div> 
  
            <div class="contact-row"> 
                <div class="contact-left-col"> 
                    <div class="form"> 
                        <input type="text" name="" 
                            placeholder="E-mail"> 
                        <input type="text" name="" 
                            placeholder="Subject"><br> 
                        <textarea rows="10" cols="40" 
                            placeholder="Message"> 
                        </textarea> 
                        <br>  
                        <button class="c_btn"> 
                            Send 
                        </button> 
                    </div> 
                </div> 
  
                <div class="contact-right-col"> 
                    <h1> 
                        <i class="fa fa-envelope" 
                            aria-hidden="true"></i> E-mail 
                    </h1> 
                    <p>geek@gmail.com</p><br> 
                    <h1> 
                        <i class="fa fa-phone" 
                            aria-hidden="true"></i> Mobile 
                    </h1> 
                    <p>8212341487, 9080140989</p> 
                    <br> 
                    <h1> 
                        <i class="fa fa-location-arrow" 
                            aria-hidden="true"></i> Address 
                    </h1> 
                    <p> Noida Sector 136<br> 
                        Metro Pillar- 237 
                    </p> 
                </div> 
            </div> 
        </section> 
  
        <footer> 
            <small>Copyright © 2021 || Designed by Geeks 
            </small> 
        </footer> 
    </div> 
</body> 
  
</html>

Step 2: Designing the web structure using CSS – We will use CSS to give proper design effects to the HTML web structure that we have created in HTML code. We will give styling to the classes and ids that we have used in the above code. We will be using the flex property so that It is easy to position child elements and the main container. The margin doesn’t collapse with the content margins. The order of any element can be easily changed without editing the HTML section.

CSS code:

style.css

/* Write CSS Here */* { 
  margin: 0px; 
  padding: 0px; 
  box-sizing: border-box; 
} 
  
body { 
  background-color: #e3e3e3; 
} 
.container { 
  width: 1000px; 
  margin-left: auto; 
  margin-right: auto; 
  margin-bottom: 10px; 
} 
  
nav { 
  background-color: #089de3; 
} 
  
nav > a { 
  color: #fff; 
  font-size: 30px; 
  text-decoration: none; 
  /* top right bottom left*/
  padding: 10px 10px 10px 30px; 
  float: left; 
} 
  
.navbar > ul { 
  list-style: none; 
  float: right; 
} 
  
.navbar > ul > li { 
  display: inline-block; 
  line-height: 60px; 
  /*top-bottom right-left*/
  padding: 0px 20px; 
} 
  
.navbar > ul:last-child { 
  padding-right: 100px; 
} 
  
.navbar > ul > li > a { 
  text-decoration: none; 
  font-size: 18px; 
  color: #fff; 
} 
  
.navbar > ul > li:hover { 
  background-color: #111111; 
} 
  
nav::after { 
  content: " "; 
  display: block; 
  clear: both; 
  *zoom: 1; 
} 
  
/* Navbar End */
  
/* Banner Start */
.main-banner { 
  height: 400px; 
} 
.main-banner > img { 
  width: 100%; 
  height: 400px; 
  object-fit: cover; 
} 
/* Banner End */
  
/* Service Start */
.service { 
  background-color: #fff; 
} 
  
.service > h1 { 
  font-size: 30px; 
  text-align: center; 
  padding: 30px; 
} 
  
.col { 
  width: 300px; 
  text-align: center; 
  margin-left: 20px; 
  border-right: solid #bebebe 1px; 
  padding-bottom: 30px; 
  float: left; 
} 
  
.col:last-child { 
  border-right: none; 
} 
  
.col > h3 { 
  /* top-bottom right-left */
  padding: 10px 0px; 
  color: grey; 
} 
  
.col > p { 
  padding-bottom: 20px; 
} 
  
.col > a { 
  background-color: #089de3; 
  color: #fff; 
  font-size: 17px; 
  text-decoration: none; 
  border: solid white 2px; 
  padding: 5px 10px; 
  border-radius: 20px; 
} 
  
.col > a:hover { 
  background-color: #111111; 
  border: solid #111111 2px; 
} 
.service::after { 
  content: " "; 
  display: block; 
  clear: both; 
  *zoom: 1; 
} 
/* Service End */
  
/* about Start */
.about { 
  background-color: #089de3; 
  min-height: 300px; 
  text-align: center; 
  padding: 20px; 
  color: #fff; 
} 
  
.about > h1 { 
  font-size: 30px; 
  padding-bottom: 20px; 
} 
  
.about > img { 
  border: solid 2px; 
  width: 100px; 
  height: 100px; 
  border-radius: 50px; 
  object-fit: cover; 
} 
  
.about > p { 
  font-size: 18px; 
  margin: 10px 200px; 
  padding-bottom: 10px; 
  line-height: 25px; 
} 
  
.about > a { 
  color: #fff; 
  font-size: 17px; 
  text-decoration: none; 
  border: solid white 1px; 
  padding: 5px 20px; 
} 
  
.about > a:hover { 
  background-color: #111111; 
  border: solid #111111 1px; 
} 
/* about End */
  
#contact{ 
    padding: 30px 0px; 
} 
  
.contact-row{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
.contact-left-col{ 
    flex-basis: 50%; 
    padding-top: 50px; 
} 
.contact-right-col{ 
    flex-basis: 50%; 
    max-width: 450px; 
    margin: auto; 
} 
.contact-right-col i{ 
    font-size: 20px; 
    padding: 10px; 
    background:#089de3; 
    color: white;  
} 
.contact-right-col p{ 
    margin-top: 10px; 
    margin-bottom: 20px; 
} 
  
.form{ 
  
    width: 70%; 
    margin:auto; 
    text-align: center; 
} 
.form input[type="text"]{ 
    width: 70%; 
    padding: 10px; 
    margin-bottom: 10px; 
} 
textarea{ 
    width: 70%; 
    padding: 10px; 
    margin-bottom: 10px; 
} 
  
  
  
.c_btn{ 
    background: black; 
    color: white; 
    padding: 10px; 
    width: 50%; 
    border:none; 
} 
  
  
/* Footer Start */
footer { 
  background-color: #089de3; 
  text-align: center; 
  padding: 10px; 
} 
  
footer > small { 
  color: #fff; 
} 
  
footer > small > a { 
  color: #fff; 
  text-decoration: none; 
} 
/* Footer End */