-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhero-only.html
51 lines (36 loc) · 2.2 KB
/
hero-only.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Image Example Code</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="hero.css">
</head>
<body>
<div class="wrapper">
<header>
<h1>"Hero Image" Example Code</h1>
</header>
<div class="hero-image">
<div class="hero-text">
<h2>A "Hero Image" is a large image with text overtop</h2>
<p>often placed at the top of a webpage</p>
<a href="#">Read More...</a>
</div>
</div>
<main>
<h2>What is a Hero Image?</h2>
<p>A hero image is a web design term used to describe the full-screen video, photo, illustration, or banner that welcomes visitors to a webpage. The image always has a prominent place near the top of a webpage that usually extends full width across the screen.</p>
<p>Sometimes called a “hero header” or a “hero section”, it not only serves as a user’s first glimpse of your company but is a key part of the user experience of your site. The perfect hero image will grab the user’s attention, visually demonstrate your value proposition, and even help the user navigate to exactly the right information.</p>
<h2>Why do people use hero images?</h2>
<p>Because people are highly visual, having high-quality, full-screen imagery at the top of your page can help create a positive first impression. Choosing the right hero image — whether it’s a high-quality photo, video, or illustration — immediately lets your visitors know that they’re in the right place. Hero images on media sites and blogs can also be used to catch the visitors' attention and draw them into reading the article on the page. </p>
<p>In addition to being a must for an engaging user experience (UX), a hero image also adds value by directing users towards a desired link or call-to-action or presenting your business’ value proposition at the top of the webpage.</p>
</main>
<footer>
<small>Free template - feel free to use in your project</small>
</footer>
</div>
</body>
</html>