-
Notifications
You must be signed in to change notification settings - Fork 75
/
Copy pathindex.html
executable file
·146 lines (146 loc) · 8.08 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
144
145
146
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid Menu | Demo 1 | Codrops</title>
<meta name="description" content="A CSS Grid powered menu with a box look" />
<meta name="keywords" content="menu, css grid, box, navigation, web development, animation" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/demo1.css" />
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="demo-1">
<svg class="hidden">
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
</symbol>
</svg>
<main>
<div class="message">To see the menu, please view on a larger screen.</div>
<div class="content content--fixed">
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/GlitchSlideshow/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=34419" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
</div>
<h1 class="codrops-header__title">Grid Menu</h1>
<span class="info">Inspired by <a href="https://www.youtube.com/watch?v=Z9Ku5ptjzKw">Ableton Live 10: What's New</a></span>
</header>
<nav class="demos">
<a class="demo demo--current" href="index.html">demo 1</a>
<a class="demo" href="index2.html">demo 2</a>
<a href="https://github.com/codrops/GridMenu" class="github">github</a>
</nav>
<button class="menu-trigger">+ info</button>
</div>
<div id="content-1" class="content content--switch content--switch-current">
<h2 class="content__title">Dev Event</h2>
<div class="content__date">22 - 28 August 2018</div>
<div class="content__location">Blackpool, UK</div>
</div>
<div id="content-2" class="content content--switch">
<h2 class="content__title">Venue</h2>
<p class="content__text">Synchronising customer experience and possibly increase viewability. Driving bleeding edge with the aim to make users into advocates. Generating below the line so that as an end result, we increase viewability. Executing thought leadership and try to improve overall outcomes. Growing below the fold so that we create actionable insights. Considering responsive websites yet make users into advocates.</p>
</div>
<div id="content-3" class="content content--switch">
<h2 class="content__title">Sponsors</h2>
<p class="content__text">Informing vertical integration while remembering to funnel users. Take thought leadership with the possibility to surprise and delight. Target analytics to in turn infiltrate new markets. Demonstrate audience segments so that as an end result, we think outside the box. Create analytics in order to make the logo bigger.</p>
</div>
<div id="content-4" class="content content--switch">
<h2 class="content__title">Speakers</h2>
<p class="content__text">Utilising growth hacking in order to get buy in. Repurposing stakeholder management while remembering to re-target key demographics. Grow vertical integration to, consequently, create synergy. Synchronising custom solutions with the aim to gain traction. Amplifying branding to, consequently, re-target key demographics.</p>
</div>
<div id="content-5" class="content content--switch">
<h2 class="content__title">Tickets</h2>
<p class="content__text">Leverage outside the box thinking to in turn re-target key demographics. Build empathy maps with the possibility to re-target key demographics. Informing key demographics yet make users into advocates. Leveraging customer journeys and above all, maximise share of voice. Amplifying awareness with a goal to re-target key demographics.</p>
</div>
<div id="content-6" class="content content--switch">
<h2 class="content__title">Schedule</h2>
<p class="content__text">Amplifying below the fold in order to think outside the box. Leveraging innovation and above all, build ROI. Synchronise responsive websites but disrupt the balance. Synchronise innovation to, consequently, funnel users. Create above the fold in order to be on brand. Amplify awareness with a goal to infiltrate new markets.</p>
</div>
<nav class="grim">
<div class="grim__item">
<div class="grim__item-bg grim__item-bg--1"></div>
</div>
<div class="grim__item">
<div class="grim__item-bg grim__item-bg--2"></div>
</div>
<div class="grim__item">
<div class="grim__item-bg grim__item-bg--3"></div>
<div class="grim__item-content">
<div class="grim__item-inner">
<button class="menu-trigger menu-trigger--close">- close</button>
</div>
</div>
</div>
<div class="grim__item">
<div class="grim__item-bg grim__item-bg--4"></div>
</div>
<div class="grim__item">
<div class="grim__item-bg grim__item-bg--5"></div>
<a href="#content-1" class="grim__link grim__item-content">
<div class="grim__item-inner">
<h3 class="grim__item-title">home</h3>
</div>
</a>
</div>
<div class="grim__item">
<div class="grim__item-bg grim__item-bg--6"></div>
<a href="#content-2" class="grim__link grim__item-content">
<div class="grim__item-inner">
<h3 class="grim__item-title">venue</h3>
<span class="grim__item-desc">One place for all.</span>
</div>
</a>
</div>
<div class="grim__item">
<div class="grim__item-bg grim__item-bg--7"></div>
<a href="#content-3" class="grim__link grim__item-content">
<div class="grim__item-inner">
<h3 class="grim__item-title">sponsors</h3>
<span class="grim__item-desc">Find out who supports us.</span>
</div>
</a>
</div>
<div class="grim__item">
<div class="grim__item-bg grim__item-bg--8"></div>
<a href="#content-5" class="grim__link grim__item-content">
<div class="grim__item-inner">
<h3 class="grim__item-title">tickets</h3>
<span class="grim__item-desc">Get the right ticket</span>
</div>
</a>
</div>
<div class="grim__item">
<div class="grim__item-bg grim__item-bg--9"></div>
<a href="#content-4" class="grim__link grim__item-content">
<div class="grim__item-inner">
<h3 class="grim__item-title">speakers</h3>
<span class="grim__item-desc">Smart people. All in one place.</span>
</div>
</a>
</div>
<div class="grim__item">
<div class="grim__item-bg grim__item-bg--10" data-duration="1000" data-easing="easeOutQuint"></div>
<a href="#content-6" class="grim__link grim__item-content">
<div class="grim__item-inner">
<h3 class="grim__item-title">schedule</h3>
<span class="grim__item-desc">When the time is right, you'll learn.</span>
</div>
</a>
</div>
</nav>
</main>
<script src="js/demo.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/menu.js"></script>
</body>
</html>