Responsive Header Source code

Read


The header section of an HTML web page is the topmost section of the page, and it is typically used to display the website's logo, navigation links, and other important information. The header section is also important for search engine optimization (SEO), as search engines use the header content to index and understand the web page.

To create a header in HTML, you can use the <header> element. The <header> element can contain any type of content, including text, images, and links. However, it is important to note that the <header> element should not be used to contain the document's main content.

 beginners project sidebar menu list project list part-1 #htmlproject Hi, thanks for watching my video In this video this is beginners projects for those student are learning programming in web development so share with and subscribe my channel I dedicated to helping beginners navigate through their project journey! Our channel focuses on providing step-by-step tutorials and guidance on creating a project sidebar menu list. Whether you are new to programming or looking to enhance your skills, our videos are designed to simplify the process and make it accessible for everyone. Join our community of aspiring developers and enthusiasts by subscribing to our YouTube channel today! Don't forget to hit the notification bell to stay updated with our latest videos. Start your project journey with us and unlock endless possibilities.







Header Responsive source code:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Header</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h3>MyItems</h3>
      <input type="checkbox" id="check" />
      <label for="check"> <p>showMenu</p></label>
      <label for="check"> <b>hidemenu</b></label>

      <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">items</a></li>
        <li><a href="#">Card</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </header>
  </body>
</html>


Css :


* {
  margin: 0;
  padding: 0;
}

header {
  height: 60px;
  width: 100%;
  background-color: tomato;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

ul {
  height: 50px;
  width: 30%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

ul li a {
  text-decoration: none;
  color: #fff;
}

#check {
  display: none;
}

label p {
  display: none;
}

label b {
  display: none;
}

@media (max-width: 768px) {
  ul {
    height: 300px;
    width: 100%;
    position: absolute;
    margin-top: 350px;
    background-color: red;
    display: flex;
    flex-direction: column;
    display: none;
    text-align: center;
  }

  ul li {
    line-height: 40px;
  }

  label p {
    display: block;
    margin-left: 200px;
    position: relative;
  }

  #check:checked ~ ul {
    display: block;
  }

  #check:checked ~ label p {
    display: none;
  }

  #check:checked ~ label b {
    display: block;
  }
}






Once you have created the <header> element, you can use CSS to style the header content. For example, you can use CSS to change the font size, font color, and background color of the header content. You can also use CSS to position the header content at the top of the page and to make it responsive so that it looks good on all devices.

This header includes the following tags:

  • meta charset="utf-8": This tag specifies that the web page is encoded in UTF-8, which is the standard encoding for web pages.

  • title: This tag specifies the title of the web page.

  • description: This tag provides a brief description of the web page.

  • keywords: This tag lists keywords that are relevant to the web page.

  • <header>: This element contains the header content of the web page.

  • <h1>: This element is used to create the most important heading on the web page.

  • <a>: This element is used to create links to other web pages or resources.

  • #programming

  • #coding

  • #webdevelopment

  • #softwaredevelopment

  • #frontenddevelopment

  • #backenddevelopment

  • #fullstackdevelopment

  • #javascript

  • #python

  • #java

  • #c++

  • #c#

  • #php

  • #html

  • #css

  • #sql

  • #webdesign

  • #webapps

  • #opensource

  • #oss

  • #codingbootcamp

  • #learnprogramming

  • #programminglifestyle

  • #codinghumor

  • #devlife

thanks...
Tags :

No comments:

Subscribe to: Post Comments ( Atom )
Created By AsgarTech