-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (54 loc) · 10 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
<!DOCTYPE html>
<html>
<head>
<title>GLS Fullstack Exercise</title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<a href="#"><h1>GLS Fullstack Exercise</h1></a>
</header>
<div class="main-container">
<div class="spacer"></div>
<div class="content-wrapper">
<div class="content">
<h2 id="id_1">First tip on me using id</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla risus et felis mattis molestie. Aenean aliquet augue at ante convallis, vel sagittis tellus imperdiet. Proin purus enim, pulvinar et mollis a, malesuada nec sapien. Morbi a magna dignissim, egestas felis in, volutpat turpis. Integer nec rutrum turpis. Proin varius justo id quam congue blandit. Vestibulum efficitur diam sit amet felis feugiat dapibus. Sed iaculis vel metus in facilisis. Morbi vitae enim at tellus tempus accumsan ultricies sed sapien. Fusce ut ornare turpis, lobortis elementum turpis. Maecenas malesuada quis lectus eget elementum. Pellentesque eros urna, ultricies vitae nisl eget, scelerisque faucibus ante. Etiam venenatis diam ipsum, vitae pretium nunc finibus vel. Integer elementum ipsum leo. Donec in mattis velit, sit amet sodales erat. Praesent tristique lacus non ullamcorper iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla risus et felis mattis molestie. Aenean aliquet augue at ante convallis, vel sagittis tellus imperdiet. Proin purus enim, pulvinar et mollis a, malesuada nec sapien. Morbi a magna dignissim, egestas felis in, volutpat turpis. Integer nec rutrum turpis. Proin varius justo id quam congue blandit. Vestibulum efficitur diam sit amet felis feugiat dapibus. Sed iaculis vel metus in facilisis. Morbi vitae enim at tellus tempus accumsan ultricies sed sapien. Fusce ut ornare turpis, lobortis elementum turpis. Maecenas malesuada quis lectus eget elementum. Pellentesque eros urna, ultricies vitae nisl eget, scelerisque faucibus ante. Etiam venenatis diam ipsum, vitae pretium nunc finibus vel. Integer elementum ipsum leo. Donec in mattis velit, sit amet sodales erat. Praesent tristique lacus non ullamcorper iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla risus et felis mattis molestie. Aenean aliquet augue at ante convallis, vel sagittis tellus imperdiet. Proin purus enim, pulvinar et mollis a, malesuada nec sapien. Morbi a magna dignissim, egestas felis in, volutpat turpis. Integer nec rutrum turpis. Proin varius justo id quam congue blandit. Vestibulum efficitur diam sit amet felis feugiat dapibus. Sed iaculis vel metus in facilisis. Morbi vitae enim at tellus tempus accumsan ultricies sed sapien. Fusce ut ornare turpis, lobortis elementum turpis. Maecenas malesuada quis lectus eget elementum. Pellentesque eros urna, ultricies vitae nisl eget, scelerisque faucibus ante. Etiam venenatis diam ipsum, vitae pretium nunc finibus vel. Integer elementum ipsum leo. Donec in mattis velit, sit amet sodales erat. Praesent tristique lacus non ullamcorper iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla risus et felis mattis molestie. Aenean aliquet augue at ante convallis, vel sagittis tellus imperdiet. Proin purus enim, pulvinar et mollis a, malesuada nec sapien. Morbi a magna dignissim, egestas felis in, volutpat turpis. Integer nec rutrum turpis. Proin varius justo id quam congue blandit. Vestibulum efficitur diam sit amet felis feugiat dapibus. Sed iaculis vel metus in facilisis. Morbi vitae enim at tellus tempus accumsan ultricies sed sapien. Fusce ut ornare turpis, lobortis elementum turpis. Maecenas malesuada quis lectus eget elementum. Pellentesque eros urna, ultricies vitae nisl eget, scelerisque faucibus ante. Etiam venenatis diam ipsum, vitae pretium nunc finibus vel. Integer elementum ipsum leo. Donec in mattis velit, sit amet sodales erat. Praesent tristique lacus non ullamcorper iaculis.</p>
</div>
<div class="content">
<h2 class="myClass2">Second tip on me using class</h2>
<p>Nulla in consectetur nulla, vel dignissim enim. Nunc scelerisque urna ultricies orci finibus tincidunt. Etiam vel risus ante. Maecenas consectetur libero in ex sagittis bibendum. Sed vitae ex diam. Aliquam quis fringilla est, ut ultricies augue. Morbi libero dui, tempor et odio quis, imperdiet imperdiet massa. Phasellus aliquet vel leo quis mattis. Pellentesque porttitor laoreet ex. Phasellus euismod dictum purus a feugiat. Mauris enim mauris, tincidunt at euismod ac, suscipit nec orci. Donec pulvinar pretium semper.</p>
<p>Nulla in consectetur nulla, vel dignissim enim. Nunc scelerisque urna ultricies orci finibus tincidunt. Etiam vel risus ante. Maecenas consectetur libero in ex sagittis bibendum. Sed vitae ex diam. Aliquam quis fringilla est, ut ultricies augue. Morbi libero dui, tempor et odio quis, imperdiet imperdiet massa. Phasellus aliquet vel leo quis mattis. Pellentesque porttitor laoreet ex. Phasellus euismod dictum purus a feugiat. Mauris enim mauris, tincidunt at euismod ac, suscipit nec orci. Donec pulvinar pretium semper.</p>
<p>Nulla in consectetur nulla, vel dignissim enim. Nunc scelerisque urna ultricies orci finibus tincidunt. Etiam vel risus ante. Maecenas consectetur libero in ex sagittis bibendum. Sed vitae ex diam. Aliquam quis fringilla est, ut ultricies augue. Morbi libero dui, tempor et odio quis, imperdiet imperdiet massa. Phasellus aliquet vel leo quis mattis. Pellentesque porttitor laoreet ex. Phasellus euismod dictum purus a feugiat. Mauris enim mauris, tincidunt at euismod ac, suscipit nec orci. Donec pulvinar pretium semper.</p>
<p>Nulla in consectetur nulla, vel dignissim enim. Nunc scelerisque urna ultricies orci finibus tincidunt. Etiam vel risus ante. Maecenas consectetur libero in ex sagittis bibendum. Sed vitae ex diam. Aliquam quis fringilla est, ut ultricies augue. Morbi libero dui, tempor et odio quis, imperdiet imperdiet massa. Phasellus aliquet vel leo quis mattis. Pellentesque porttitor laoreet ex. Phasellus euismod dictum purus a feugiat. Mauris enim mauris, tincidunt at euismod ac, suscipit nec orci. Donec pulvinar pretium semper.</p>
</div>
<div class="content">
<h2>I am the 3rd div. 3rd tip on me using xpath</h2>
<p>Integer pellentesque lectus orci, ut scelerisque massa molestie sit amet. Ut ut congue eros. Etiam feugiat a libero eget ultricies. Etiam auctor, dolor eu mattis porttitor, ipsum nulla mattis lorem, mattis maximus tortor sem sed lectus. Duis sodales lacus a augue condimentum, sed laoreet mauris pellentesque. Nulla sed ultrices nisi, nec pretium magna. Aliquam turpis nunc, molestie vel eros eu, pharetra rutrum eros. Fusce convallis, metus at ornare consectetur, erat tortor congue arcu, nec sollicitudin arcu tellus sit amet justo. Mauris eu velit ut erat efficitur viverra. Donec et congue libero. Nulla ultricies posuere faucibus. In sollicitudin maximus dolor, sed aliquam tellus finibus sed. Sed id nisi sit amet justo pretium egestas eget sed augue.</p>
<p>Integer pellentesque lectus orci, ut scelerisque massa molestie sit amet. Ut ut congue eros. Etiam feugiat a libero eget ultricies. Etiam auctor, dolor eu mattis porttitor, ipsum nulla mattis lorem, mattis maximus tortor sem sed lectus. Duis sodales lacus a augue condimentum, sed laoreet mauris pellentesque. Nulla sed ultrices nisi, nec pretium magna. Aliquam turpis nunc, molestie vel eros eu, pharetra rutrum eros. Fusce convallis, metus at ornare consectetur, erat tortor congue arcu, nec sollicitudin arcu tellus sit amet justo. Mauris eu velit ut erat efficitur viverra. Donec et congue libero. Nulla ultricies posuere faucibus. In sollicitudin maximus dolor, sed aliquam tellus finibus sed. Sed id nisi sit amet justo pretium egestas eget sed augue.</p>
<p>Integer pellentesque lectus orci, ut scelerisque massa molestie sit amet. Ut ut congue eros. Etiam feugiat a libero eget ultricies. Etiam auctor, dolor eu mattis porttitor, ipsum nulla mattis lorem, mattis maximus tortor sem sed lectus. Duis sodales lacus a augue condimentum, sed laoreet mauris pellentesque. Nulla sed ultrices nisi, nec pretium magna. Aliquam turpis nunc, molestie vel eros eu, pharetra rutrum eros. Fusce convallis, metus at ornare consectetur, erat tortor congue arcu, nec sollicitudin arcu tellus sit amet justo. Mauris eu velit ut erat efficitur viverra. Donec et congue libero. Nulla ultricies posuere faucibus. In sollicitudin maximus dolor, sed aliquam tellus finibus sed. Sed id nisi sit amet justo pretium egestas eget sed augue.</p>
<p>Integer pellentesque lectus orci, ut scelerisque massa molestie sit amet. Ut ut congue eros. Etiam feugiat a libero eget ultricies. Etiam auctor, dolor eu mattis porttitor, ipsum nulla mattis lorem, mattis maximus tortor sem sed lectus. Duis sodales lacus a augue condimentum, sed laoreet mauris pellentesque. Nulla sed ultrices nisi, nec pretium magna. Aliquam turpis nunc, molestie vel eros eu, pharetra rutrum eros. Fusce convallis, metus at ornare consectetur, erat tortor congue arcu, nec sollicitudin arcu tellus sit amet justo. Mauris eu velit ut erat efficitur viverra. Donec et congue libero. Nulla ultricies posuere faucibus. In sollicitudin maximus dolor, sed aliquam tellus finibus sed. Sed id nisi sit amet justo pretium egestas eget sed augue.</p>
</div>
</div>
</div>
<div class="tooltip-block left fadeOut">
<div class="tooltip-container">
<span class="tooltip-number">1</span>
<div class="tooltip-content-wrapper">
<h3 class="tooltip-title">Take an example tour</h3>
</div>
<div class="tooltip-actions">
<button class="tooltip-nav-button back tooltip-back">Back</button>
<button class="tooltip-nav-button next tooltip-next">Next</button>
<button class="tooltip-nav-button next tooltip-done">Done</button>
</div>
<div class="tooltip-close">close</div>
</div>
</div>
<script src="player.js" type="text/javascript"></script>
</body>
</html>