Home page in html:
Here I am creating a responsive home page in html5 and css3. Before you try to understand the code learn a little html CSS then it will be easier and faster to create a home page in html and CSS. You can copy the code and paste on your text-editor to experiment with this code that will be better for you to learn faster with the help of website design examples. I am not trying to teach you HTML CSS or other code, I am trying to teach you how to create a webpage or website using HTML CSS and many other languages.
Let first see the layout of the responsive home page in html5 and css3 :
Computer compatibility:
 |
home page in html(pc version) |
Mobile Compatibility:
 |
| home page in html (mobile and tab version) |
I am writing the HTML code first you can copy the HTML code for website design:
/* the HTML code starts here*/
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>basic html5 responsive layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="your keyword">
<meta name="Description" content="your site description">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<h1>Coding<span>School</span></h1>
</div>
<nav class="upper-nav">
<ul>
<li><a class="uppernav-link" href="#">Home</a></li>
<li><a class="uppernav-link" href="#">About-Us</a></li>
<li><a class="uppernav-link" href="#">Contact</a></li>
<li><a class="uppernav-link" href="#">Forum</a></li>
</ul>
</nav>
</header>
<div class="body-container">
<div class="main-content">
<h3>coding learning</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium congue eros, ac aliquet enim molestie ullamcorper. Duis condimentum sapien sit amet tortor fermentum, vel ultrices ante ornare. Morbi a tellus congue, ultrices tellus eu, ornare metus. Nam porta eget magna sed gravida. Pellentesque dapibus neque turpis, vel consectetur orci faucibus id. Etiam non molestie orci. Ut sit amet dui vehicula, volutpat dolor in, sodales ex. Nullam sodales non lectus sit amet consequat.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ut mauris urna. Mauris volutpat efficitur auctor. Etiam hendrerit blandit lacus non convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<h3>how to add css</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium congue eros, ac aliquet enim molestie ullamcorper. Duis condimentum sapien sit amet tortor fermentum, vel ultrices ante ornare. Morbi a tellus congue, ultrices tellus eu, ornare metus. Nam porta eget magna sed gravida. Pellentesque dapibus neque turpis, vel consectetur orci faucibus id. Etiam non molestie orci. Ut sit amet dui vehicula, volutpat dolor in, sodales ex. Nullam sodales non lectus sit amet consequat.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ut mauris urna. Mauris volutpat efficitur auctor. Etiam hendrerit blandit lacus non convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</br></br>Ut pretium congue eros, ac aliquet enim molestie ullamcorper. Duis condimentum sapien sit amet tortor fermentum, vel ultrices ante ornare. Morbi a tellus congue, ultrices tellus eu, ornare metus. Nam porta eget magna sed gravida. Pellentesque dapibus neque turpis, vel consectetur orci faucibus id. Etiam non molestie orci. Ut sit amet dui vehicula, volutpat dolor in, sodales ex. Nullam sodales non lectus sit amet consequat.
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ut mauris urna. Mauris volutpat efficitur auctor. Etiam hendrerit blandit lacus non convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Sed pulvinar neque quis metus molestie porta.</br></br> In pharetra eros est, venenatis pretium quam dapibus in. Aenean tempor eros quis nisi varius, nec maximus tellus maximus. Duis tempus mattis suscipit. Fusce posuere eros turpis, condimentum molestie est consequat vitae. Sed quis dapibus dui, sit amet efficitur lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacus velit, cursus vel lorem ornare, tempus faucibus elit. Donec vitae nibh eget ante faucibus hendrerit a sit amet nulla.
Duis tempor semper libero sed gravida. Curabitur sit amet aliquet risus. Cras eget sem eget lorem semper aliquam.
</p>
<h3>tips&trics</h3>
<p>
Sed pulvinar neque quis metus molestie porta. In pharetra eros est, venenatis pretium quam dapibus in. Aenean tempor eros quis nisi varius, nec maximus tellus maximus. Duis tempus mattis suscipit. Fusce posuere eros turpis, condimentum molestie est consequat vitae. Sed quis dapibus dui, sit amet efficitur lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacus velit, cursus vel lorem ornare, tempus faucibus elit. Donec vitae nibh eget ante faucibus hendrerit a sit amet nulla.
Duis tempor semper libero sed gravida. Curabitur sit amet aliquet risus. Cras eget sem eget lorem semper aliquam.
</p>
</div>
<div class="adds-container">
<div class="adds-1">
<h4> Special Offer</h4>
<p>
Duis condimentum sapien sit amet tortor fermentum, vel ultrices ante ornare. Morbi a tellus congue, ultrices tellus eu, ornare metus. Nam porta eget magna sed gravida. Pellentesque dapibus neque turpis, vel consectetur orci faucibus id. Etiam non molestie orci.
</p>
</div>
<div class="adds-1">
<h4>Bumper Offer</h4>
<p>
nec maximus tellus maximus. Duis tempus mattis suscipit. Fusce posuere eros turpis, condimentum molestie est consequat vitae. Sed quis dapibus dui, sit amet efficitur lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacus velit, cursus vel lorem ornare, tempus faucibus elit.
</p>
</div>
<div class="adds-1">
<h4> Special Offer</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium congue eros, ac aliquet enim molestie ullamcorper. Duis condimentum sapien sit amet tortor fermentum.
</p>
</div>
</div>
</div>
<footer>
CanSolveError.Com © 2020
</footer>
</body>
</html>
/* the HTML code ends here*/
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>basic html5 responsive layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="your keyword">
<meta name="Description" content="your site description">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<h1>Coding<span>School</span></h1>
</div>
<nav class="upper-nav">
<ul>
<li><a class="uppernav-link" href="#">Home</a></li>
<li><a class="uppernav-link" href="#">About-Us</a></li>
<li><a class="uppernav-link" href="#">Contact</a></li>
<li><a class="uppernav-link" href="#">Forum</a></li>
</ul>
</nav>
</header>
<div class="body-container">
<div class="main-content">
<h3>coding learning</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium congue eros, ac aliquet enim molestie ullamcorper. Duis condimentum sapien sit amet tortor fermentum, vel ultrices ante ornare. Morbi a tellus congue, ultrices tellus eu, ornare metus. Nam porta eget magna sed gravida. Pellentesque dapibus neque turpis, vel consectetur orci faucibus id. Etiam non molestie orci. Ut sit amet dui vehicula, volutpat dolor in, sodales ex. Nullam sodales non lectus sit amet consequat.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ut mauris urna. Mauris volutpat efficitur auctor. Etiam hendrerit blandit lacus non convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<h3>how to add css</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium congue eros, ac aliquet enim molestie ullamcorper. Duis condimentum sapien sit amet tortor fermentum, vel ultrices ante ornare. Morbi a tellus congue, ultrices tellus eu, ornare metus. Nam porta eget magna sed gravida. Pellentesque dapibus neque turpis, vel consectetur orci faucibus id. Etiam non molestie orci. Ut sit amet dui vehicula, volutpat dolor in, sodales ex. Nullam sodales non lectus sit amet consequat.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ut mauris urna. Mauris volutpat efficitur auctor. Etiam hendrerit blandit lacus non convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</br></br>Ut pretium congue eros, ac aliquet enim molestie ullamcorper. Duis condimentum sapien sit amet tortor fermentum, vel ultrices ante ornare. Morbi a tellus congue, ultrices tellus eu, ornare metus. Nam porta eget magna sed gravida. Pellentesque dapibus neque turpis, vel consectetur orci faucibus id. Etiam non molestie orci. Ut sit amet dui vehicula, volutpat dolor in, sodales ex. Nullam sodales non lectus sit amet consequat.
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ut mauris urna. Mauris volutpat efficitur auctor. Etiam hendrerit blandit lacus non convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Sed pulvinar neque quis metus molestie porta.</br></br> In pharetra eros est, venenatis pretium quam dapibus in. Aenean tempor eros quis nisi varius, nec maximus tellus maximus. Duis tempus mattis suscipit. Fusce posuere eros turpis, condimentum molestie est consequat vitae. Sed quis dapibus dui, sit amet efficitur lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacus velit, cursus vel lorem ornare, tempus faucibus elit. Donec vitae nibh eget ante faucibus hendrerit a sit amet nulla.
Duis tempor semper libero sed gravida. Curabitur sit amet aliquet risus. Cras eget sem eget lorem semper aliquam.
</p>
<h3>tips&trics</h3>
<p>
Sed pulvinar neque quis metus molestie porta. In pharetra eros est, venenatis pretium quam dapibus in. Aenean tempor eros quis nisi varius, nec maximus tellus maximus. Duis tempus mattis suscipit. Fusce posuere eros turpis, condimentum molestie est consequat vitae. Sed quis dapibus dui, sit amet efficitur lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacus velit, cursus vel lorem ornare, tempus faucibus elit. Donec vitae nibh eget ante faucibus hendrerit a sit amet nulla.
Duis tempor semper libero sed gravida. Curabitur sit amet aliquet risus. Cras eget sem eget lorem semper aliquam.
</p>
</div>
<div class="adds-container">
<div class="adds-1">
<h4> Special Offer</h4>
<p>
Duis condimentum sapien sit amet tortor fermentum, vel ultrices ante ornare. Morbi a tellus congue, ultrices tellus eu, ornare metus. Nam porta eget magna sed gravida. Pellentesque dapibus neque turpis, vel consectetur orci faucibus id. Etiam non molestie orci.
</p>
</div>
<div class="adds-1">
<h4>Bumper Offer</h4>
<p>
nec maximus tellus maximus. Duis tempus mattis suscipit. Fusce posuere eros turpis, condimentum molestie est consequat vitae. Sed quis dapibus dui, sit amet efficitur lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacus velit, cursus vel lorem ornare, tempus faucibus elit.
</p>
</div>
<div class="adds-1">
<h4> Special Offer</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium congue eros, ac aliquet enim molestie ullamcorper. Duis condimentum sapien sit amet tortor fermentum.
</p>
</div>
</div>
</div>
<footer>
CanSolveError.Com © 2020
</footer>
</body>
</html>
/* the HTML code ends here*/
Copy the code to your text editor and save the file with the extension".html"
Example: index.html
But if you try to run in your browser the layout will not be the same as i mentioned earlier in this page with the screenshot.
Look at the head section of the HTML code, the last link was <link rel="stylesheet" href="style.css">
That means a CSS style sheet is linked to this HTML code.
copy the CSS code to your text editor and save as "style.css " in the same directory.
then you can browse the HTML file.
But if you try to run in your browser the layout will not be the same as i mentioned earlier in this page with the screenshot.
Look at the head section of the HTML code, the last link was <link rel="stylesheet" href="style.css">
That means a CSS style sheet is linked to this HTML code.
let see the css code:
/*css code starts here*/
*{
margin:0;
padding:0;
word-wrap:break-word;
}
header h1{
font-size:4em;
color:black;
background-color:white;
padding:0em 0em 0.1em 0.2em;
font-weight:1000;
}
header h1 span{
color:green;
}
.upper-nav{
text-transform:uppercase;
background-color:grey;
}
.upper-nav ul{
padding:0;
margin:0;
list-style:none;
display: inline-flex;
background-color:grey;
}
.upper-nav ul li{
margin:0em 0em 0em 0em;
padding:0.5em 1.5em;
}
.uppernav-link{
font-size:1.2em;
text-decoration:none;
font-weight:900;
color:black;
}
.upper-nav ul li:hover .uppernav-link{
color:white;
background-color:green;
}
.upper-nav ul li:hover{
background-color:green;
}
.main-content{
width:76%;
background-color:white;
margin-bottom:0.5em;
}
.body-container{
display:flex;
justify-content:space-between;
align-items:flex-start;
padding:0.5em;
}
.main-content h3{
text-decoration:underline;
margin: 0.5em 0em;
color:green;
}
.adds-container{
width:22%;
}
.adds-1{
background-color:black;
color:grey;
padding:1em;
margin-bottom:0.5em;
text-align:center;
font-size:1.2em;
}
.adds-1 h4{
margin:0.8em 0em;
font-size:1.6em;
color:white;
}
footer{
background-color:grey;
text-align:center;
padding:0.5em;
}
@media only screen and (max-width: 700px) {
.body-container{
padding:0.5em;
margin:0;
flex-direction:column;
align-items:center;
}
.adds-container, .main-content{
width:99%;
margin:0;
}
.adds-1, .main-content{
padding:0.5em;
margin:0.5em 0em;
}
.upper-nav ul{
text-align:center;
display: inline-block;
width:100%;
}
.upper-nav ul li{
max-width:30%;
border-bottom:1px solid white;
margin:auto;
}
header h1{
font-size:3em;
padding:0.5em;
text-align:center;
}
}
}
/*css code ends here*/
copy the CSS code to your text editor and save as "style.css " in the same directory.
then you can browse the HTML file.
3 Comments
Really good
ReplyDeleteHome page in HTML ...nice
ReplyDeleteReally glad to read this post. Expert web developers from Web designLtd. offers affordable web design services for businesses across the UK. For more info website design company, Free Phone 0800 009 6292.
ReplyDeleteresponsive web design