How to create a simple and looking good home page for the website by using HTML and CSS only...

website_home_page_chaitu_informative_blogs
website home page

In this article, I'm showing you how to create an HTML home page by only using CSS.

NOTE: in this code, I'm provided the "Home.png" icon as a home symbol. when your using this code or trying to run this code on your PC. you must and should replace it with your own logo instead of the old logo. otherwise, you may not get a proper result. and you can create a CSS file as a separate file or use CSS code within the HTML page.

If you don't know HTML and CSS please refer to any tutorials or youtube. HTML and CSS come under web development course it is useful for the creation of beautiful websites and also you may have to design your own templets for the best looks so make sure to know about HTML, CSS after you have created some sample pages and try to add CSS elements and implement your own ideas in that so then only you will get a better understanding in that.

Simple abbreviations:

HTML(hypertext markup language)

CSS(cascading style sheet)

Also, Read

Check the below code:

HTML File:

<!DOCTYPE html>

<html>

<head>

<title>Home Page</title>

</head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="style.css">

<body>

<div class="header">

<span class="logoname"><center>Chaitu Informative Blogs</center></span></div>

<div class="navigation">

  <ul>

    <li><img src="Home.png"></li>

    <li><a href="#">HOME</a></li>

    <li><a href="#">SERVICES</a></li>

    <li><a href="#">PRODUCTS</a></li>

    <li><a href="#">CONTACT US</a></li>

 </ul>

<div class="section">

<div class="NewsBox">

<span>NEWS</span>

<div class="NEWS">

our company is one of the greatest companies in the world!

</div>

</div>

<div class="info"><p><span>Welcome !</span></p></div>

</div>

<div class="footer"><h4>Created By Chaitu Informative Blogs</h3></div>

</body>

</html>

CSS File:

    body {

    padding:0;

    margin:0;

    width: 100%;

    }

    div.header {

    height:125px;

    background-color: blue;

    }

    .logoname {

    padding:20px;

    color: white;

    font-weight: normal;

    font-weight: bold;

    font-size:30px;

    font-family: Segoe UI Light;

    user-select: none;

    }

    .logoname: hover {

        color: cyan;

        cursor: pointer;

    }

    div.navigation {

    margin-top: 1px;

    height:50px;

    width:100%;

    background-color: black;

    }

    ul {

    margin:0px;

    padding:2px;

    list-style-type:none;

    user-select: none;

    }

    a: hover {

        color: springgreen;

    }

    li {

    float: left;

    padding-left:80px;

    padding-top: 20px;

    padding-right:30px;

    color: white;

    font-size:17px;

    font-family: verdana;

    font-weight: bold;

    }

    img {

    width:35px;

    height:35px;

    float: right;

    margin-top: -15px;

    margin-right: -105px;

    }

    div.NewsBox {

    width:50%;

    padding:12px;

    font-size:16px;

    border:1px solid gray;

    margin-left:85px;

    margin-top:80px;

    line-height:2;

    font-family: candara;

    }

    div.news {

    margin-left:20px;

    padding:5px;

    font-family:candara;

    font-weight: bold;

    margin:5px;

    }

    div.info {

    margin-left:90px;

    width:80%;

    margin-top:40px;

    font-family:candara;

    font-size:16px;

    font-weight: bold;

    }

    span {

    font-family: Arial;

    font-weight: bold;

    font-size:16px;

    color:#333333;

    }

    a {

    text-decoration: none;

    color: white;

    }

    div.section {

    height: 404px;

    }

    div.footer {

    height:60px;

    width:100%;

    background-color:#ff007f;

    }

    h4 {

        color: white;

        font-family: cursive;

        text-align: end;

        padding-top: 15px;

        padding-right: 15px;

        user-select: none;

    }

Result:

website_home_page_chaitu_informative_blogs
website home page

Conclusion:

How to create a simple HTML home page by using CSS tricks.

If you like this HTML page Please feel free to use this code to customize yourself and share this post with your friends and drop your comments for any queries.