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:
<!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.w3wiki.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.w3wiki.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>
Bootcamp Website Template using HTML and CSS
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.