-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (91 loc) · 4.43 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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Custom Lightbox</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/lightbox.css">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nav{
background: black;
color: whitesmoke;
padding: 1rem 0.5rem;
display: flex;
flex-direction: row;
}
.container{
width: 70%;
margin: auto;
}
.main{
margin: 3rem 0;
}
</style>
</head>
<body>
<div class="nav">
<h2>Very Great Coding Co.</h2>
</div>
<div class="container">
<section class="main">
<h1>This is an example page</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus minima sint cum omnis facilis accusamus neque corrupti officia magnam vitae a iure, id, odit dolorem fugit delectus itaque rem qui! Consequuntur voluptatum asperiores quo accusantium?</p>
<br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus minima sint cum omnis facilis accusamus neque corrupti officia magnam vitae a iure, id, odit dolorem fugit delectus itaque rem qui! Consequuntur voluptatum asperiores quo accusantium?</p>
<br>
<p> If you aren't seeing the lightbox, you may have visited this page already within the last 24 hours and will need to <span onClick="refreshMe()" style="text-decoration: underline; font-weight: bold; cursor: pointer;">clear the lastVisit variable from your local storage by clicking here</span>. The page will reload and you should see the lightbox reappear. Check your console for more information. </p>
</section>
</div>
<!-- The Lightbox -->
<div id="lightbox" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">X</span>
<br>
<div>
<div>
<h2 class="title">Dax says what a wonderful lightbox!</h2>
<br>
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum alias quis ad, hic libero odit explicabo obcaecati quam laborum veniam, facilis quibusdam at? Doloribus quae dolores illum, cum atque explicabo, exercitationem a in debitis laboriosam repudiandae, magni deserunt culpa. Dolorem!
</p>
<br>
<i>
* All feedback is welcome.
</i>
</div>
<br>
<div class="group">
<div class="sub-parent">
<div class="child">
<a href="https://duckduckgo.com" target="_blank" rel="noopener">DuckDuckGo</a>
</div>
<div class="child">
<a href="https://google.com" target="_blank" rel="noopener">Google</a>
</div>
</div>
<div class="hide-mobile" onClick="destroyLightbox()">
<a href="https://duckduckgo.com">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2F9%2F90%2FThe_DuckDuckGo_Duck.png&f=1&nofb=1" class="image" alt="Dax from Duck Duck Go!">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="assets/lightbox.js" async defer></script>
</body>
</html>