<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
import React from 'react'
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
export default function Header(){
return(<>
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">To DO</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<form onSubmit={handleLogin} >
<input type="text" placeholder="username" name="username"></input>
<input type="password" placeholder="password" name="password"></input>
<button className="btn1" type="submit" >Login</button>
</form>
<h5 id="head"> not a user !? signup here </h5>
<form >
<input type="text" placeholder="username" name="username"></input>
<input type="password" placeholder="password" name="password"></input>
<button className="btn1" type ="submit" href="register" >signup</button>
</form>
</Nav>
</Container>
</Navbar>
</>)
}
Header : exists in both request and response
is metadata about the request
It's a key value pair
few common header type is
Accept header to specify what format you want to get your result
only if the api itself support
Content Type
in request header :
to specify what kind of data we are sending
to the server
in response header :
what was the contenttype we got as response
<meta http-equiv="Content-Security-Policy" content="child-src 'self' ; connect-src 'self' *.google-analytics.com *.wpengine.com yoast.com *.google.com *.g.doubleclick.net *.google-analytics.com *.wpengine.com yoast.com *.google.com *.g.doubleclick.net ; default-src 'self' ; font-src 'self' *.gstatic.com *.bootstrapcdn.com *.gstatic.com *.bootstrapcdn.com ; form-action 'self' ; frame-src 'self' *.g.doubleclick.net *.google.com *.fls.doubleclick.net *.g.doubleclick.net *.google.com *.fls.doubleclick.net ; frame-ancestors 'self' ; img-src 'self' *.googletagmanager.com *.w.org *.gravatar.com *.google.com *.google-analytics.com *.gstatic.com *.googletagmanager.com *.w.org *.gravatar.com *.google.com *.google-analytics.com *.gstatic.com ; manifest-src 'self' ; media-src 'self' ; navigate-to 'self' ; object-src 'self' ; prefetch-src 'self' ; script-src 'self' *.g.doubleclick.net *.google-analytics.com *.google.com *.googletagmanager.com *.gstatic.com *.g.doubleclick.net *.google-analytics.com *.google.com *.googletagmanager.com *.gstatic.com ; script-src-elem 'self' ; script-src-attr 'self' ; style-src 'self' *.googleapis.com *.gstatic.com *.googleapis.com *.gstatic.com ; style-src-elem 'self' ; style-src-attr 'self' ; worker-src 'self' ; " />
<meta http-equiv="X-Content-Security-Policy" content="child-src 'self' ; connect-src 'self' *.google-analytics.com *.wpengine.com yoast.com *.google.com *.g.doubleclick.net *.google-analytics.com *.wpengine.com yoast.com *.google.com *.g.doubleclick.net ; default-src 'self' ; font-src 'self' *.gstatic.com *.bootstrapcdn.com *.gstatic.com *.bootstrapcdn.com ; form-action 'self' ; frame-src 'self' *.g.doubleclick.net *.google.com *.fls.doubleclick.net *.g.doubleclick.net *.google.com *.fls.doubleclick.net ; frame-ancestors 'self' ; img-src 'self' *.googletagmanager.com *.w.org *.gravatar.com *.google.com *.google-analytics.com *.gstatic.com *.googletagmanager.com *.w.org *.gravatar.com *.google.com *.google-analytics.com *.gstatic.com ; manifest-src 'self' ; media-src 'self' ; navigate-to 'self' ; object-src 'self' ; prefetch-src 'self' ; script-src 'self' *.g.doubleclick.net *.google-analytics.com *.google.com *.googletagmanager.com *.gstatic.com *.g.doubleclick.net *.google-analytics.com *.google.com *.googletagmanager.com *.gstatic.com ; script-src-elem 'self' ; script-src-attr 'self' ; style-src 'self' *.googleapis.com *.gstatic.com *.googleapis.com *.gstatic.com ; style-src-elem 'self' ; style-src-attr 'self' ; worker-src 'self' ; " />
const images = [banner1Url, banner2Url, banner3Url, banner4Url,
banner5Url, banner6Url];
const headers = [Header1, Header2, Header3, Header4, Header5,
Header6];
const desc = [description 1, description 2, description 3,
description 4, description 5, description 6];
const links = [link 1, link 2, link 3, link 4, link 5, link 6];