A heading here
Posted by John Doe
Some additional information here
Lorem Ipsum dolor set amet....
revision:
The <header> element represents a container for introductory content or a set of navigational links. It typically contains: one or more heading elements (<h1> - <h6>), logo or icon, authorship information.
You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.
The <header> element is one of several semantic document tags introduced with HTML5. It is used to define a header section for the element that contains it. It can be used as a header for a whole page (the most common usage), but can also be used as the header for an article or any other piece of on-page content.
A <header> is always related to the element that contains it (so no element should directly contain two "header" elements).
<header > . . . </header>
Posted by John Doe
Some additional information here
Lorem Ipsum dolor set amet....
<div>
<article>
<header>
<h1>A heading here</h1>
<p class="spec">Posted by John Doe</p>
<p class="spec">Some additional information here</p>
</header>
<p class="spec">Lorem Ipsum dolor set amet....</p>
</article>
</div>
<div>
<header>
<a src="/" id="logo">Site Title</a>
<nav>
<ul style="margin-left: 4vw;">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
</div>
<header>
<div class="overlay">
<h1>Proposed header to be considered</h1>
<h3>Why to use this header</h3>
<p>Here some text that introduces the website or covers major points of its content, its goals, and its intended audience<>
<br>
<button>read more</button>
</div>
</header>
<style>
header{background: url('../images/5.jpg'); text-align: center; width: 100%; height: auto; background-size: cover; background-attachment: fixed; position: relative; overflow: hidden; border-radius: 0% 0% 85% 85% / 50%;}
header .overlay{ width: 100%; height: 100%; padding: 2.5vw; color: cyan; text-shadow: .1vw .1vw .1vw #333; background-image: linear-gradient(185deg, #9f05ff69 40%,#fd5e086b 100%);}
h1 {font-family: Helvetica, cursive; font-size: 4vw; margin-bottom: 1vw;}
h3, p {font-family: Helvetica , sans-serif; margin-bottom: 1vw;}
button {border: none; outline: none; padding: 1vw 2vw; border-radius: 5vw; color: black; background: seagreen; margin-bottom: 5vw; box-shadow: 0 .3vw 2vw 0 pink;}
button:hover{cursor: pointer;}
</style>
<header class="header">
<div class="brand-box"><span class="brand">Logo or brand</span></div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Primary heading - main heading</span>
<span class="heading-primary-sub">Secondary heading</span>
</h1>
<a href="#" class="btn btn-white btn-animated">Discover the web content</a>
</div>
</header>
<style>
.header {height: 60vh; background-image: linear-gradient(to left top,rgba(140, 211, 150, 0.8), rgba(44, 57, 49, 0.8)), url('../images/5.jpg'); background-size: cover; background-position:
top;position: relative;clip-path: polygon(0 0, 100% 0, 100% 35vh, 0 100%);}
.brand-box {position: absolute; top: 4vw;left: 4vw;}
.brand {font-size: 1.2vw;}
.text-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.heading-primary {color: white;text-transform: uppercase;backface-visibility: hidden; margin-bottom: 1.5vw;}
.heading-primary-main {display: block; font-size: 2vw; font-weight: 300; letter-spacing: .25vw;}
.heading-primary-sub {display: block;font-size: 1.25vw; font-weight: 700;letter-spacing: .74vw;}
.btn:link, .btn:visited {text-transform: uppercase; text-decoration: none; padding: .5vw 1vw; display: inline-block; border-radius: 10vw; transition: all .2s; position: relative;}
.btn:hover {transform: translateY(-.3vw);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}
.btn:active {transform: translateY(-.1vw);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);}
.btn-white {background-color: #fff; color: #777;font-size: 1vw;}
</style>
Other text can come mere: to explain aim/goal of the website, to provide detailed information on the content, or to introduce the sections of the website.
<div class="container">
<div class="item">
<h3 class="h3">Uppercase Heading</h3>
<h1 class="main">Main Title Here</h1>
<p>Other text can come mere: to explain aim/goal of the website, to provide detailed information on the content, or to introduce the sections of the website.</p>
<button class="btn btn-primary">Find Out More</button>
</div>
</div>
<style>
.main {color: red; text-align: center; font-family: Helvetica, sans-serif; font-size: 5vw;font-weight: normal;line-height: 3.5vw; }
h3 .h3{font-size: 1.35vw;line-height: 2vw;text-transform: uppercase; letter-spacing: .1vw; color: lightgreen;}
.container {margin: 0 auto;width: 100%;height: 65vh; display: flex; justify-content: center; align-items: center; background: url('2.jpg'); background-position: center center;
background-repeat: no-repeat; background-size: cover;}
.item {padding: 0 3vw 0 3vw; text-align: center;}
.btn {text-transform: uppercase;letter-spacing: .1vw; margin-top: 1vw; display: inline-block; line-height: 1.25vw; text-align: center; white-space: nowrap;
vertical-align: middle; user-select: none; border: .1vw solid transparent;padding: .75vw 1.25vw; font-size: 1vw; border-radius: .25vw; transition: all .2s ease-in-out;}
.btn-primary {color: #fff; background-color: #000; border-color: #666;}
.btn:hover {color: #fff; background-color: #333; border-color: #666;}
@media (min-width: 992px) {
.item {width:80%;}
}
@media (min-width: 1200px) {
.item {width:60%;}
}
</style>