This is Example of my webpage that I have created it is a really cool looking and simple to code page with just plain html and css. If you have some knowledge of html and CSS you can easily create it and with some javascript we can make the page responsive.Below is the HTML and code for the page you can easily understand the code and can learn different things from it.
HTML code for above webpage: <html> <head> <title> new page </title> <link rel="stylesheet" href="newpage.css"> <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@500&display=swap" rel="stylesheet"> </head> <body > <div class="header"> <h1 class="mainhead">BlogPost</h1> </div> <div class="navbar"> <ul> <li><a href="">Home </a></li> <li><a href="">About </a></li> <li><a href="">Link </a></li> <li><a href="">Contact</a></li> </ul> </div> <div class="sideright"> <h2 class="heading" >Web Designing Languages</h2> <p>1. HTML</p> <p>2. CSS</p> <p>3. Javascript</p> <p>4. Java</p> </div> <div class="main"> <h2 class="heading">C Language</h2> <p>C is middle-level programming language which was developed at Bell Lab in 1972 by Dennis Ritchie. C language combines the features of Low level as well as High-level Language. Hence its considered a middle-level Language.</p> <h2 class="heading"> C++ Language </h2> <p>C++ is a computer programming language that contains the feature of C programming language as well as Simula67( a first object Oriented language). C++ introduced the concept of Class and Objects </p> </div> <div class="sideright"> <h2 class="heading" >Android Development Languages</h2> <p>1. Java</p> <p>2. Kotlin</p> <p>3. C++</p> <p>4. C#</p> </div> <div class="main"> <h2 class="heading">Java</h2> <p>Java is a statically typed general-purpose programming language, it is an object-oriented and concurrent language. Java was meant to be WORA (write once run anywhere) language.</p> <h2 class="heading">Python</h2> <p>Python is a dynamically-typed general-purpose programming language. Python’s early development began at a research institute in the Netherlands.</p> </div> <div id="footer" > <ul> <li><a href="">Info.</a></li> <li><a href="">E-mail</a></li> <li><a href="">Phone</a></li><br> © Blogpost webcorp. All rights reserved (Creator - Piyush Barve) </ul> </div> </body> </html>CSS code of above webpage:- /* ================= Layout Section ==================== */ body{ background-color: beige; font-family: 'Baloo Thambi 2'; } .header{ height:85px; background-color:cadetblue; margin:10px; border-radius: 8px; } .mainhead{ text-align: center; font-size: 56px; color: floralwhite; text-decoration: underline; } .main{ margin-top:10px; margin-left:10px; margin-right:310px; margin-bottom:10px; background-color:lightblue; height:300px; border-radius: 8px; padding:20px; } .heading{ color: darkcyan; text-decoration: underline; } .sideright{ float:right; width:260px; background-color: lightgreen; margin:10px; margin-top:0px; border-radius: 8px; padding:15px; padding-top:20px; height:305px; } /* ===================== Navigation buttons ======================== */ .navbar ul{ height:28.4px; background-color:cadetblue; margin:10px; border-radius: 8px; padding:12px; list-style-type: none; text-align: center; } .navbar ul li{ display:inline; } .navbar ul li a{ text-decoration: none; background-color: cadetblue; color:white; padding:7px; font-size:18px; } .navbar ul li a:hover{ background-color: white; color:cadetblue; } /* ====================== footer css ====================== */ #footer ul{ height:39px; background-color:cadetblue; margin:10px; border-radius: 8px; padding:12px; list-style-type: none; text-align: center; font-size:14px; } #footer ul li{ display:inline; } #footer ul li a{ text-decoration: none; background-color: cadetblue; color:white; padding:5px; font-size:18px; } #footer ul li a:hover{ background-color: white; color:cadetblue; }
