Bootcamp Website Template using HTML and CSS
Last Updated :
09 Aug, 2024
We will explore how to design a simple BootCamp website template using HTML and CSS. Creating an attractive template can be challenging for those who are not proficient in CSS. Without CSS, enhancing the visual appeal of a web page is difficult. Therefore, to create a compelling web page, knowledge of both HTML and CSS is essential. In this article, we will use HTML and CSS to build the website template. To start, we will first create the HTML structure of the web page.
Step 1: Creating Web Page 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>[email protected]</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 Template 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 */
Output: Open with the live server in Visual Studio Code or if you are using any other code editor just open the index.html file in the browser.
Similar Reads
Create a Blog Website Layout using HTML and CSS The Blog layout consists of a header, navigation menu, main content area, and footer. The header contains the website logo, name, and its tagline. The navigation menu is used to allow users to easily navigate through the different sections of the blog. The main content area contains the list of blog
4 min read
How to Create a Website Using HTML and CSS? Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu
5 min read
Email Template using HTML and CSS Ever been intrigued by the vibrant and engaging email templates that land in your inbox? This article will guide you through the process of creating a basic, yet visually appealing, email template using HTML and CSS. Such templates are primarily used in marketing campaigns with the ultimate goal of
5 min read
Create a Portfolio Website Template using Tailwind CSS In this tutorial, we'll guide you through the process of creating a stunning portfolio website using Tailwind CSS, a powerful CSS framework that makes styling web pages easy and efficient. Preview of Final Output: Let us have a look at how the final output will look like. Personal PortfolioPrerequis
6 min read
How to Create Multipage Website Using Bootstrap? To create a multipage website using Bootstrap and HTML structure utilize Bootstrap's navbar component to create navigation links between pages. Incorporate Font Awesome icons for visual enhancements and use Bootstrap classes for responsive design.Output Preview:How to Create Multipage Website Using
5 min read