Creating a web header and footer is an essential part of designing a website. The header and footer provide a consistent look and feel to the website and allow for easy navigation and access to important information. Here's a step-by-step guide on how to create a web header and footer using HTML and CSS.
Step 1: Set Up the HTML
The first step in creating a web header and footer is to set up the HTML code for the page. This can be done by creating a header element and a footer element, and placing them at the top and bottom of the HTML code, respectively.
In this code, we have created a header element with a nav element inside, which contains an unordered list (ul) of links to the main sections of the website. We have also created a footer element with a simple copyright notice.
Step 2: Style the Header and Footer with CSS
The next step is to style the header and footer using CSS. This can be done by targeting the header, nav, ul, li, and footer elements and applying styling properties such as background color, font size, and margin.
In this code, we have set the background color and font color for the header and footer elements, and added padding to create some space around the content. We have also styled the navigation links by setting their font color and removing the default bullet points with the list-style property. Finally, we have centered the text in the footer using the text-align property.
Step 3: Add Hover Effects
To add some interactivity to the header links, we can use the :hover pseudo-class to change the color of the links when the user hovers over them.
In this code, we have set the font color to yellow (#ff0) when the user hovers over a link.
Step 4: Make the Header and Footer Responsive
To make the header and footer responsive, we can use media queries to adjust the styling based on the screen size. For example, we might want to stack the navigation links vertically on small screens.
In this code, we have used a media query to target screens with a maximum width of 600px. Inside the media
HTML CODE
<div class="navbar">
<div class="heading">
<a href="#heading"><img
src="https://rainbowit.net/themes/inbio/wp-content/themes/inbio/assets/
images/logo/logo-dark.png"></a>
</div>
<div class="list">
<ul type="none">
<li>HOME</li>
<li>FEATURES</li>
<li>©PORTFOLIO</li>
<li>RESUME</li>
<li>TESTIMONIAL</li>
<li>CLIENTS</li>
<li>SPRICING </li>
<li>BLOG </li>
<li>CONTACTS</li>
</ul>
</div>
<div class="icons">
<ion-icon name="bag-add-sharp"></ion-icon>
<div class="icons_div">
<p><b>0</b></p>
</div>
<button><b>BUY NOW</b></button>
</div>
</div>
<div class="page1">
<div class="page1_in_div1">
<h2>WELCOME TO MY WORLD</h2>
<h1>Hi, I’m
<span>Jone Leea Developer.</span>
<br>Professional Coder.
</h1>
<p>I use animation as a third dimension by which to simplify experiences and
kuiding<br>thro each and every interaction. I’m not adding motion just to
spruce things up,<br> but doing it in ways that.</p>
<div class="icons1">
<h3>FIND WITH ME</h3>
<div class="icons_div1">
<ul type="none">
<li>
<ion-icon name="logo-facebook"></ion-icon>
</li>
<li>
<ion-icon name="logo-instagram"></ion-icon>
</li>
<li>
<ion-icon name="logo-twitter"></ion-icon>
</li>
</ul>
</div>
<div class="icons_div2">
<h3>BEST SKILL ON</h3>
<ul type="none">
<li><img src="https://rainbowit.net/themes/inbio/wp-content/
uploads/2021/08/icons-03.png"></li>
<li><img src="https://rainbowit.net/themes/inbio/wp-content/
uploads/2021/08/icons-02.png"></li>
<li><img src="https://rainbowit.net/themes/inbio/wp-content/
uploads/2021/08/icons-01.png"></li>
</ul>
</div>
</div>
</div>
<div class="page1_in_div2">
<div class="image">
<img src="https://rainbowit.net/themes/inbio/wp-content/uploads/2021/
08/banner-01.png">
</div>
</div>
</div>
<div class="footer">
<div class="footer1">
<a href="#heading"><img
src="https://rainbowit.net/themes/inbio/wp-content/themes/inbio/
assets/images/logo/logo-dark.png"></a>
<div class="icons_div1">
<ul type="none">
<li>
<ion-icon name="logo-facebook"></ion-icon>
</li>
<li>
<ion-icon name="logo-instagram"></ion-icon>
</li>
<li>
<ion-icon name="logo-twitter"></ion-icon>
</li>
</ul>
</div>
</div>
<div class="footer1">
<h3>QUICK LINK</h3>
<ul type="none">
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="footer1">
<h3>RESOURCES</h3>
<ul type="none">
<li>Authentication</li>
<li>System Status</li>
<li>Terms of Service</li>
<li>Pricing</li>
<li>Over Right</li>
</ul>
</div>
<div class="footer1">
<h3>DEVELOPERS</h3>
<ul type="none">
<li>Documentation</li>
<li>Authentication</li>
<li>API Reference</li>
<li>Support</li>
<li>Open Source</li>
</ul>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
CSS CODE
* {
margin: 0;
padding: 0;
font-family: arial;
}
body {
background-color: #dce2ec;
overflow-x: hidden;
}
.navbar {
width: 100%;
height: 7rem;
border-bottom: 1px solid dimgray;
float: left;
/*position: fixed;*/
background-color: #dce2ec;
}
.heading {
width: 10rem;
height: 100%;
/*background-color: yellow;*/
margin-left: 3rem;
float: left;
}
.heading img {
position: relative;
top: 1.1rem;
}
.list {
width: 55.5rem;
height: 100%;
/*background-color: blue;*/
float: left;
}
.list ul {
margin-left: 3rem;
}
.list ul li {
font-size: .9rem;
float: left;
margin-left: 1.5rem;
margin-top: 2.5rem;
}
.list ul li:hover {
color: #ff014f;
}
.icons ion-icon {
font-size: 1.8rem;
padding: .7rem;
/*background-color: white;*/
position: relative;
top: 1.5rem;
left: 2rem;
border-radius: 50%;
box-shadow: 5px 4px 20px 5px #888888;
}
.icons ion-icon:hover {
font-size: 1.9rem;
}
.icons_div {
width: 20px;
height: 20px;
background-color: #ff014f;
position: absolute;
right: 160px;
top: 25px;
text-align: center;
border-radius: 50%;
}
.icons_div p {
color: white;
position: relative;
top: 2px;
}
.icons button {
width: 6rem;
height: 2.5rem;
background-color: #dce2ec;
position: relative;
left: 3.5rem;
top: .2rem;
border: none;
border-radius: .5rem;
box-shadow: 2px 3px 20px 2px #888888;
color: #ff014f;
transition: .6s;
}
.icons button:hover {
color: white;
background: linear-gradient(to bottom right, #6497be 0%, #ff014f 100%);
position: relative;
}
.page1 {
width: 100%;
height: 40rem;
/*background-color:#D0B8A8;*/
position: relative;
top: 8em;
left: 3rem;
}
.page1_in_div1 {
width: 50rem;
height: 100%;
/*background-color: #7895B2;*/
}
.page1_in_div1 h2 {
color: #3c3e41;
font-size: 18px;
position: relative;
top: -3rem;
}
.page1_in_div1 h1 {
font-size: 3.5rem;
position: relative;
top: -1.8rem;
}
.page1_in_div1 span {
color: #ff014f;
}
.page1_in_div1 p {
font-size: 1.2rem;
line-height: 1.7rem;
}
.icons_div1 ul li {
float: left;
margin-left: 1.5rem;
border-radius: none;
/*background-color: #eef1f4;*/
border-radius: 50%;
padding: 18px 18px 15px 18px;
box-shadow: 2px 3px 20px 2px #888888;
font-size: 23px;
}
.icons_div1 ul li:hover {
color: white;
background: linear-gradient(to bottom right, #6497be 0%, #ff014f 100%);
}
.icons_div1 ul {
margin-top: 50px;
position: relative;
left: -2rem;
}
.icons1 h3 {
font-size: .8rem;
position: relative;
top: 2rem;
/*left: 2rem;*/
color: gray;
}
.icons_div2 ul li img {
width: 1.5rem;
height: 1.5rem;
position: relative;
left: 4rem;
float: left;
padding: 18px 18px 15px 18px;
box-shadow: 2px 3px 20px 2px #888888;
border-radius: 50%;
margin-left: 20px;
}
.icons_div2 h3 {
position: relative;
top: -1rem;
left: 5.5rem;
}
.page1_in_div2 {
width: 27rem;
height: 80%;
/*background-color: yellow;*/
border-radius: 10px;
position: relative;
top: -35rem;
left: 49rem;
box-shadow: 2px 3px 20px 2px #888888;
}
.page1_in_div2 img {
width: 100%;
height: 100%;
position: relative;
top: -5rem;
}
.footer {
width: 100%;
height: 25rem;
/*background-color: black;*/
position: relative;
top: 10rem;
float: left;
}
.footer1 {
width: 320px;
height: 100%;
/*background-color: #FFA1CF;*/
float: left;
margin-left: 10px;
}
.footer1 h3 {
font-size: 20px;
position: relative;
top: 4rem;
left: 4rem;
color: #ff014f;
}
.footer1 ul {
position: relative;
top: 5.5rem;
left: 4rem;
font-size: 20px;
}
.footer1 ul li {
margin-top: 20px;
}
.footer1 ul li:hover {
color: #ff014f;
}
.footer1 img {
position: relative;
top: 4rem;
left: 4rem;
}
.footer1 .icons_div1 ul {
position: relative;
top: 20px;
left: 10px;
}
Comments
Post a Comment