-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnot-responsive.html
61 lines (49 loc) · 1.87 KB
/
not-responsive.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
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Not responsive demo</title>
<style>
html {
font-family: sans-serif;
background-color: gray;
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
}
header {
background: url(header.jpg) no-repeat center;
height: 200px;
}
section {
padding: 20px;
}
p {
line-height: 1.5;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
</style>
</head>
<body>
<header>
</header>
<main>
<section>
<h1>My website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget venenatis ligula. Ut lacinia at dolor vitae pulvinar. Aliquam pretium dignissim eros. Integer faucibus, dui non aliquet bibendum, lectus orci lobortis odio, ornare porttitor est tellus eget velit. Nulla eros elit, malesuada id neque vel, viverra vehicula neque. Nullam auctor turpis non leo iaculis finibus. Quisque blandit arcu venenatis libero tempor, ac pulvinar ligula dapibus.</p>
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
<p>Suspendisse potenti. Ut in luctus eros. Mauris pulvinar vehicula aliquet. Etiam imperdiet eleifend luctus. Duis ut justo nec eros ornare consectetur. Vestibulum convallis condimentum varius. Maecenas rutrum porta varius. Phasellus volutpat sem id sagittis luctus. Morbi vitae quam vitae nisi iaculis dignissim.</p>
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
<p>Header image originally by <a href="https://www.flickr.com/photos/miwok/17086751527/">Miwok</a>.</p>
</section>
</main>
</body>
</html>