Open In App

Design a web page using HTML and CSS

Last Updated : 20 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Create a webpage with HTML and CSS. Use HTML to structure content, incorporating elements like headings, paragraphs, and images. Apply CSS for styling, including colors, fonts, margins, and positioning. Ensure responsiveness for various devices using media queries and flexible layouts.

Preview:

Screenshot-2024-01-15-170222

Approach:

  • Create a basic HTML structure with a navigation bar with a logo and navigation links.
  • Add a search box with a search button in the navigation menu
  • Add a header section (`<header>`) with a title and introductory content.
  • Divide the main content into sections using section tags and apply CSS for styling, including fonts, colors, and spacing.
  • Design the Footer section using the footer tag for writing about any copyright issue.
  • Implement media queries for a responsive layout on different devices.

Example: This example shows the implementation of a simple webpage using HTML and CSS.

html
<!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">Web Technology</a></li>
            <li><a href="#program">C Programming</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">
        <div class="box-main">
            <div class="firstHalf">
                <h1 class="text-big" 
                    id="web">Web Technology
                  </h1>
                <p class="text-small">
                    HTML stands for HyperText Markup Language.
                    It is used to design web pages using a markup
                    language. HTML is the combination of Hypertext
                    and Markup language. Hypertext defines the
                    link between the web pages. A markup language
                    is used to define the text document within tag
                    which defines the structure of web pages.
                    HTML is a markup language that is used by the
                    browser to manipulate text, images, and other
                    content to display it in the required format.
                </p>


            </div>
        </div>
    </section>

    <section class="secondsection">
        <div class="box-main">
            <div class="firstHalf">
                <h1 class="text-big" 
                    id="program">
                    C Programming
                </h1>
                <p class="text-small">
                    C is a procedural programming language. It
                    was initially developed by Dennis Ritchie
                    as a system programming language to write
                    operating system. The main features of C
                    language include low-level access to memory,
                    simple set of keywords, and clean style,
                    these features make C language suitable for
                    system programming like operating system or
                    compiler development.
                </p>
            </div>
        </div>
    </section>

    <section class="section">
        <div class="paras">
            <h1 class="sectionTag text-big">Java</h1>
            <p class="sectionSubTag text-small">
                Java has been one of the most popular
                programming language for many years.
                Java is Object Oriented. However it is
                not considered as pure object oriented
                as it provides support for primitive
                data types (like int, char, etc) The
                Java codes are first compiled into byte
                code (machine independent code). Then
                the byte code is run on Java Virtual
                Machine (JVM) regardless of the
                underlying architecture.
            </p>
        </div>
    </section>

    <footer class="background">
        <p class="text-footer">
            Copyright ©-All rights are reserved
        </p>
    </footer>
</body>

</html>
CSS
* {
    margin: 0;
    padding: 0;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    padding: 15px;
    cursor: pointer;
}

.background {
    background: black;
    background-blend-mode: darken;
    background-size: cover;
}

.nav-list {
    width: 70%;
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img {
    width: 180px;
    border-radius: 50px;
}

.nav-list li {
    list-style: none;
    padding: 26px 30px;
    padding: 10px;
}

.nav-list li a {
    text-decoration: none;
    color: white;
}

.nav-list li a:hover {
    color: grey;
}

.rightnav {
    width: 30%;
    text-align: right;
}

#search {
    padding: 5px;
    font-size: 17px;
    border: 2px solid grey;
    border-radius: 9px;
}

.firstsection {
    background-color: green;
    height: 400px;
}

.secondsection {
    background-color: blue;
    height: 400px;
}

.box-main {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    max-width: 80%;
    margin: auto;
    height: 80%;
}

.firsthalf {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.secondhalf {
    width: 30%;
}

.secondhalf img {
    width: 70%;
    border: 4px solid white;
    border-radius: 150px;
    display: block;
    margin: auto;
}

.text-big {
    font-family: 'Piazzolla', serif;
    font-weight: bold;
    font-size: 35px;
}

.text-small {
    font-size: 18px;
}

.btn {
    padding: 8px 20px;
    margin: 7px 0;
    border: 2px solid white;
    border-radius: 8px;
    background: none;
    color: white;
    cursor: pointer;
}

.btn-sm {
    padding: 6px 10px;
    vertical-align: middle;
}

.section {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90%;
    margin: auto;
}

.section-Left {
    flex-direction: row-reverse;
}

.paras {
    padding: 0px 65px;
}

.thumbnail img {
    width: 250px;
    border: 2px solid black;
    border-radius: 26px;
    margin-top: 19px;
}

.center {
    text-align: center;
}

.text-footer {
    text-align: center;
    padding: 30px 0;
    font-family: 'Ubuntu', sans-serif;
    display: flex;
    justify-content: center;
    color: white;
}

footer {
    text-align: center;
    padding: 15px;
}


.rightnav {
    width: 100%;
    text-align: right;
    margin-top: 10px;
}

#search {
    box-sizing: border-box;
    width: 70%;
    padding: 8px;
    font-size: 17px;
    border: 2px solid grey;
    border-radius: 9px;
}

.btn-sm {
    padding: 8px 20px;
    margin: 7px 5px;
}

img {
    max-width: 100%;
    height: auto;
}

Output: 

Design-a-web-page-using-HTML-and-CSS

Design a web page using HTML and CSS Example Output



Similar Reads

How to Create Sticky Header/Footer on a Web Page using HTML CSS and JavaScript ?
When designing a website, it's essential to consider the sticky header and footer. These elements enhance the user experience by keeping important navigation links accessible as users scroll. This article explores creating sticky headers and footers with CSS. We can do this by using the following CSS propertiesPosition: sticky; is a CSS property th
7 min read
How to create multicolored text in a web page using HTML and CSS ?
In this article, we will learn the art of coloring text on web pages using HTML &amp; CSS. We can either use &lt;font&gt; color attribute in HTML or linear-gradient to multi-color the text using CSS. We will explore both methods &amp; understand their usage with the help of examples. Table of Content Using color attributeUsing linear-gradient attri
2 min read
Design a Subscription Page using HTML and CSS
In this article, we will see how to design a Subscription Page using HTML and CSS. The subscription page is a popup that has an input field for email ID and a button to subscribe the newsletter. We create a card that have an input box and a submit button, enabling users to subscribe to any newsletter using their email address. Once subscribed, the
2 min read
Design a Layered Image Page Template using HTML and CSS
The article provides a complete guide for creating a layered image layout using HTML and CSS. The Layered Image Page refers to a webpage design that contains layered structured visual elements using images. Here, the design contains two boxes with background images and some empty rounded boxes with borders to make the page more beautiful. The CSS p
3 min read
Design a Overlap Block Page Template using HTML and CSS
In this article, we will create an Overlap Block layout template using HTML &amp; CSS. The Overlap Block Layout is a design concept where multiple elements or blocks on a webpage visually overlap with one another. This layout frequently uses CSS's z-index property to regulate the order in which items stack, in addition to absolute or relative place
3 min read
Design a Contact Page with a Map using HTML and CSS
In this article, we will design a Contact Page with a Map using HTML and CSS. The Contact Page with the Map is useful and provides users with geographical context for finding your organization or the location more efficiently. Here, we will create the basic contact form for the user to fill out and the location of the organization that we want to d
3 min read
Design a Tribute Page using HTML and CSS
A tribute page is an overview of someone whom we admire in our life. In this article, we are creating a tribute webpage of the Late A.P.J. Abdul Kalam Sir using HTML and CSS. The page features a clean and visually appealing design, incorporating a header with a centered title, a main section with content including text and images, and a footer for
5 min read
Design an About us Page using HTML and CSS
An "About" page is a section on a website that gives you information about the people or company behind the site. It's a great way to get to know the people you're interacting with online and to learn more about their stories and what they stand for. In this article, we are going to make an About page by using HTML and CSS. Preview :[caption width=
5 min read
Design a Wedding Theme based Page using HTML and CSS
Designing a wedding-themed webpage is a fun way to capture the joy of this special day. In this article, we'll help you create a beautiful webpage using simple HTML and CSS. PreviewApproachFirslty, create a new file with the "index.html". Include Google Fonts, Font Awesome Icons, and external CSS link.Then, organise content in header, navigation, m
6 min read
Design a Contact us Page using HTML and CSS
A Contact Us page is used to allow visitors to contact the website owner or administrator for various purposes, such as asking questions, giving feedback, requesting information, or reporting issues. In this article, we will see how to design a Contact Us page using HTML and CSS. Creating an attractive page may seem to be difficult for, those who d
4 min read