hero html

Solutions on MaxInterview for hero html by the best coders in the world

showing results for - "hero html"
22 Jan 2017
1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6body, html {
7  height: 100%;
8  margin: 0;
9  font-family: Arial, Helvetica, sans-serif;
10}
11
12.hero-image {
13  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
14  height: 50%;
15  background-position: center;
16  background-repeat: no-repeat;
17  background-size: cover;
18  position: relative;
19}
20
21.hero-text {
22  text-align: center;
23  position: absolute;
24  top: 50%;
25  left: 50%;
26  transform: translate(-50%, -50%);
27  color: white;
28}
29
30.hero-text button {
31  border: none;
32  outline: 0;
33  display: inline-block;
34  padding: 10px 25px;
35  color: black;
36  background-color: #ddd;
37  text-align: center;
38  cursor: pointer;
39}
40
41.hero-text button:hover {
42  background-color: #555;
43  color: white;
44}
45</style>
46</head>
47<body>
48
49<div class="hero-image">
50  <div class="hero-text">
51    <h1 style="font-size:50px">I am (Name)</h1>
52    <p>And I'm a Coder</p>
53    <button>Follow me</button>
54  </div>
55</div>
56</body>
57</html>
58