forked from geomarts/viewport-relative-css-units
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (139 loc) · 5.75 KB
/
index.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Testing the new dynamic CSS units</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<main>
<section class="hero">
<div>
<h1>Testing the new dynamic CSS units</h1>
<div>
<button class="active" type="button">vh</button>
<button type="button">dvh</button>
<button type="button">lvh</button>
<button type="button">svh</button>
</div>
<a href="sticky.html">Example with sticky header</a>
</div>
</section>
<section class="text">
<div class="container">
<h2>Heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam ac tincidunt est, quis ultricies eros. Phasellus
at pellentesque ipsum. Suspendisse tempor sodales
pretium. Etiam fringilla mauris non iaculis ultrices.
Nullam ac ligula ex. Aliquam erat volutpat. Proin
aliquam risus massa, non egestas elit ultrices quis.
Cras laoreet nulla eget nibh feugiat ultricies congue
nec mi. Vestibulum a metus ut libero aliquet porta.
Phasellus a lobortis erat. Praesent laoreet dolor vel
odio laoreet, eu cursus libero hendrerit. Nunc
consectetur lacus id risus lacinia finibus. Curabitur
ornare sagittis metus in rutrum.
</p>
<p>
Phasellus eu tristique mauris. Nulla facilisi. Sed
tellus diam, vehicula ut bibendum id, egestas eu ante.
Etiam eu porta quam, sit amet viverra odio. Donec cursus
leo massa, eu laoreet lectus auctor sed. Suspendisse
lacinia imperdiet maximus. Fusce malesuada rutrum dolor
in maximus. Phasellus vitae metus in orci lacinia
tristique. In hac habitasse platea dictumst. Donec
tincidunt purus sit amet nisl cursus aliquet. Nunc lorem
mi, pulvinar non lectus at, ornare luctus ipsum. Class
aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos.
</p>
<p>
Donec cursus sollicitudin lorem, ac porttitor ante.
Nullam nunc tortor, luctus nec feugiat ac, euismod vel
ligula. Nullam at velit tortor. Vestibulum blandit
euismod dolor. Morbi ultricies elementum tellus, a
facilisis felis fermentum sed. Quisque molestie eleifend
dolor et sollicitudin. Nullam luctus ante id turpis
blandit consequat. Morbi lobortis, mi at fermentum
sodales, turpis nisl sollicitudin urna, a tempus nisi
dolor vitae massa. Vivamus egestas ut diam at efficitur.
Donec a eros in turpis venenatis finibus vitae id dui.
Nam blandit, dolor at accumsan pretium, urna erat
ullamcorper mauris, in semper diam purus sed tellus. Sed
molestie tellus est, ac feugiat lacus vehicula ut.
Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia curae; Praesent id finibus
quam, eget ultrices risus. Morbi vel lacus vel metus
molestie elementum id et magna. Aliquam bibendum leo a
ipsum blandit, quis ornare nisl sagittis.
</p>
<p>
Vivamus nec tortor semper, gravida mauris ac, interdum
sem. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia curae; Praesent at
nibh porttitor, congue justo vel, tincidunt libero.
Aliquam eros augue, tincidunt sed massa tempus, sodales
pellentesque lectus. Etiam fringilla lorem porta mi
cursus tincidunt. Ut nisl magna, placerat eget mattis
quis, dignissim ut metus. Quisque tempor leo ut nisl
faucibus, a maximus arcu rutrum. Sed in purus quis odio
tempor euismod in at lacus. Ut vel ultricies magna.
Nulla sed venenatis nibh, ornare consectetur tellus.
Aliquam auctor mauris velit, at feugiat ligula accumsan
elementum. Ut efficitur consequat feugiat. Curabitur
suscipit vestibulum nisl, eu congue sem aliquet vitae.
Duis vulputate et sem sit amet rutrum. Aenean a
porttitor felis, sed volutpat augue. Quisque finibus
porta tristique.
</p>
<p>
In vel nunc eget lacus lacinia malesuada eget sit amet
nisl. Sed libero nisi, malesuada in arcu ac, elementum
porttitor diam. Phasellus lacinia egestas congue. Proin
eleifend euismod risus fermentum ullamcorper. Nam
condimentum odio id tellus sollicitudin luctus eu
finibus lacus. Integer sed nisi a nisi rhoncus pharetra
quis eget quam. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos.
Quisque eget erat bibendum, commodo felis eget, egestas
dui.
</p>
</div>
</section>
<div class="toolbar">
<a href="" title="Mail me">
<svg
width="30"
height="30"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill-rule="evenodd"
clip-rule="evenodd"
>
<path
d="M24 21h-24v-18h24v18zm-23-16.477v15.477h22v-15.477l-10.999 10-11.001-10zm21.089-.523h-20.176l10.088 9.171 10.088-9.171z"
/>
</svg>
</a>
<a href="" title="Phone me">
<svg
width="30"
height="30"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill-rule="evenodd"
clip-rule="evenodd"
>
<path
d="M8.26 1.289l-1.564.772c-5.793 3.02 2.798 20.944 9.31 20.944.46 0 .904-.094 1.317-.284l1.542-.755-2.898-5.594-1.54.754c-.181.087-.384.134-.597.134-2.561 0-6.841-8.204-4.241-9.596l1.546-.763-2.875-5.612zm7.746 22.711c-5.68 0-12.221-11.114-12.221-17.832 0-2.419.833-4.146 2.457-4.992l2.382-1.176 3.857 7.347-2.437 1.201c-1.439.772 2.409 8.424 3.956 7.68l2.399-1.179 3.816 7.36s-2.36 1.162-2.476 1.215c-.547.251-1.129.376-1.733.376"
/>
</svg>
</a>
</div>
</main>
<script src="main.js"></script>
</body>
</html>