Skip to content
Related Articles

Related Articles

Design a web page using HTML and CSS
  • Last Updated : 20 Dec, 2020

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 in order to make a web page, we need to have a knowledge of HTML and CSS. In this article, the main focus will be implementing CSS. In order to design a web page we need to first create an HTML web structure.

Creating structure: In this section, we will create a simple structure of web page by using <li> and <section> tags. So this will create a simple interface which you can check by running the following code .

HTML code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html>
  
<head>
    <title>
        Simple web Development Template
    </title>
</head>
  
<body>
    <nav class="navbar background">
        <ul class="nav-list">
            <div class="logo">
                <img src="logo.png">
            </div>
            <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>

chevron_right


We have used classes like section, section-left which is used in CSS to give a proper styling, as it will make the web page more attractive.

CSS design: We will use CSS to give proper design effects to the HTML web structure that we have created in HTML code. The most difficult part is to display the picture in a different direction. Consider the picture is in the right direction and the text along with it is in the left direction. When we use flex-direction:row-reverse, the image which is on the right side will be shown on the left side and the text will be shown on the right side.



CSS code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    * {
        margin: 0;
        padding: 0;
    }
  
    .navbar {
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        cursor: pointer;
    }
  
    .background {
        background: black;
        background-blend-mode: darken;
        background-size: cover;
    }
  
    .nav-list {
        width: 70%;
        display: flex;
        align-items: center;
    }
  
    .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;
    }
  
    .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;
    }
</style>

chevron_right


Final code: We will combine both HTML and CSS in order to create the web page.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html>
  
<head>
    <title>Simple web Development Template</title>
  
    <style>
        * {
            margin: 0;
            padding: 0;
        }
  
        .navbar {
            display: flex;
            align-items: center;
            justify-content: center;
            position: sticky;
            top: 0;
            cursor: pointer;
        }
  
        .background {
            background: black;
            background-blend-mode: darken;
            background-size: cover;
        }
  
        .nav-list {
            width: 70%;
            display: flex;
            align-items: center;
        }
  
        .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;
        }
  
        .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;
        }
    </style>
</head>
  
<body>
    <nav class="navbar background">
        <ul class="nav-list">
            <div class="logo">
                <img src= "logo.png">
            </div>
            <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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :