Building a website with HTML and CSS is a beginner-friendly way to learn front-end development, creating a static, styled, and responsive site.
- Learn to structure content with HTML and style it using CSS.
- Create a simple static website with a homepage and styled elements.
- Gain hands-on experience in responsive design without using JavaScript or frameworks.
Features
We will build a simple website using only HTML and CSS that includes the following features:
- A clean and structured layout with a navigation bar, hero section, and content sections.
- Multiple gradient-colored sections (Home, About Us, Courses) with visually appealing designs.
- A sticky navigation bar with smooth scrolling to different sections of the page.
- Interactive and stylish buttons and search bar (UI only, no JavaScript).
- A fully responsive and animated design, making it look modern and engaging.
Note: This project is perfect for beginners who want to learn how to structure a webpage using HTML and enhance its appearance with CSS — no JavaScript needed.
HTML Setup
<!DOCTYPE html>
<html>
<head>
<title>Simple web page Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar background">
<div class="logo">
<img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg" style="height: 30px;" alt="Logo">
</div>
<ul class="nav-list">
<li><a href="#web">Home</a></li>
<li><a href="#program">About Us</a></li>
<li><a href="#course">Courses</a></li>
</ul>
<div class="rightnav">
<input type="text" name="search" id="search">
<button class="btn btn-sm">Search</button>
</div>
</nav>
<section class="firstsection" id="web">
<div class="box-main">
<div class="firstHalf">
<h1 class="text-big">Welcome To GeeksforGeeks
</h1>
</div>
</div>
</section>
<section class="secondsection" id="program">
<div class="box-main">
<div class="firstHalf">
<h1 class="text-big">
About Us
</h1>
<p class="text-small">
GeeksforGeeks is one of the largest and most trusted platforms for computer science education and
technical interview preparation. Founded in 2009 by Sandeep Jain, an IIT Roorkee alumnus, GFG aims
to bridge the gap between academic learning and industry demands by providing high-quality content
in the field of
programming, data structures, algorithms, system design, and more.
</p>
</div>
</div>
</section>
<section class="thirdsection" id="course">
<div class="box-main">
<div class="firstHalf">
<h1 class="text-big">JavaScript</h1>
<p class="text-small">
JavaScript (JS) is a high-level programming language that is widely used to make web pages
interactive and dynamic. It is one of the core technologies of web development, along with HTML and
CSS. While HTML provides the structure of a web page and CSS handles the design and layout,
JavaScript is responsible for the behavior and interactivity. For example, when users click buttons,
fill out forms, or see pop-up messages, JavaScript is usually behind those actions. It can update
content on a page without needing to reload it, validate form inputs, control multimedia, and even
create animations and games.
</p>
</div>
</div>
</section>
<footer class="background">
<p class="text-footer">
Copyright ©-All rights are reserved
</p>
</footer>
</body>
</html>
- The page starts with standard HTML boilerplate including a title and a link to an external CSS file (style.css) for styling.
- Navigation Bar: A sticky top navigation bar (<nav>) contains a logo, menu links (Home, About Us, Courses), and a search bar with a button.
- Three Content Sections: There are three sections:
- Home (#web) with a welcome heading
- About Us (#program) with a paragraph about GeeksforGeeks.
- Courses (#course) describing JavaScript.
- Internal Page Navigation: Each navbar link points to a section using anchor IDs (href="#web", etc.), allowing smooth scrolling to that section when clicked.
- Footer: A simple footer at the bottom displays a copyright message.
CSS Styles
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(to right, #f5f7fa, #c3cfe2);
color: #222;
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Navbar */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
padding: 15px 30px;
background: linear-gradient(to right, #1a2a6c, #b21f1f, #fdbb2d);
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.background {
background: #222;
}
.nav-list {
display: flex;
align-items: center;
gap: 25px;
list-style: none;
}
.nav-list li a {
text-decoration: none;
color: #ffffff;
font-weight: bold;
transition: color 0.3s ease;
}
.nav-list li a:hover {
color: #ffe66d;
text-shadow: 1px 1px 5px #000;
}
.logo img {
width: 160px;
border-radius: 50px;
transition: transform 0.3s ease;
}
.logo img:hover {
transform: scale(1.1) rotate(3deg);
}
.rightnav {
display: flex;
align-items: center;
gap: 10px;
}
#search {
padding: 8px;
font-size: 16px;
border: 2px solid #ffe66d;
border-radius: 8px;
outline: none;
background: #fffefc;
transition: 0.3s ease;
}
#search:focus {
box-shadow: 0 0 10px #ffe66d;
}
/* Buttons */
.btn {
padding: 8px 20px;
border: none;
border-radius: 8px;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
color: #000;
font-weight: bold;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn:hover {
background: linear-gradient(45deg, #a1c4fd, #c2e9fb);
transform: scale(1.05);
}
.btn-sm {
padding: 8px 16px;
font-size: 14px;
}
/* Section Styles (Common) */
.firstsection,
.secondsection,
.thirdsection {
height: 515px;
color: white;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 1.5s ease-in;
}
/* Individual Gradient Backgrounds */
.firstsection {
background: linear-gradient(to right, #f12711, #f5af19);
}
.secondsection {
background: linear-gradient(to right, #fc466b, #3f5efb);
}
.thirdsection {
background: linear-gradient(to right, #12f295, #5f82ae);
}
/* Content inside sections */
.box-main {
text-align: center;
max-width: 80%;
}
.text-big {
font-family: 'Piazzolla', serif;
font-weight: bold;
font-size: 42px;
margin-bottom: 15px;
animation: slideUp 1s ease-in-out;
}
.text-small {
font-size: 18px;
color: #f8f8f8;
line-height: 1.6;
}
.text-footer {
text-align: center;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
display: flex;
justify-content: center;
background-color: #343a40;
color: white;
}
footer {
text-align: center;
padding: 15px;
background-color: #0b0b0b;
color: white;
}
/* Image Responsive */
img {
max-width: 100%;
height: auto;
}
- The universal selector * removes default margin and padding from all elements, and box-sizing: border-box ensures width/height includes padding and borders.
- Navbar: Sticky top bar with a gradient, styled logo, nav links, and a search bar.
- Buttons & Search: Rounded buttons with gradient backgrounds and hover animations; search input has focus glow.
- Sections: Three sections with fixed height, centered content, and different gradient backgrounds.
- Text & Footer: Animated headings, styled paragraphs, and a responsive dark footer with white text.
Output: