Open In App

Design a web page using HTML and CSS

Improve
Improve
Like Article
Like
Save
Share
Report

Creating an attractive page 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 to make a web page, we need to know HTML and CSS. In this article, the main focus will be implementing CSS. To design a web page, we must first create an HTML web structure.

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=
                 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>
 
        <div class="thumbnail">
            <img src="img.png"
                 alt="laptop image">
        </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: 



Last Updated : 29 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Similar Reads