-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstandtogether.html
116 lines (103 loc) · 4.54 KB
/
standtogether.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Stand Together | TLC</title>
<!-- Styles -->
<link rel="stylesheet" href="stylesheets/web.css">
<!-- Fonts -->
<!-- Fontawesome Icon fotns -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="font/font-awesome.min.css">
<link rel="icon" type="image/png" href="/img/TLC_fav.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://kit.fontawesome.com/af692b5953.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Js -->
<script src="js/modernizr.js"></script>
<script>
var nav = false;
function openTitle(){
document.getElementById('title').classList.toggle("show");
document.getElementById('body').classList.add("adaptiveCommonGround");
nav = true;
}
function closeTitle(){
document.getElementById('title').classList.toggle("show");
document.getElementById('body').classList.remove("adaptiveCommonGround");
nav = false;
}
function toggleTitle(){
nav ? closeTitle() : openTitle();
}
</script>
</head>
<body id="body">
<div class="header stuck" id="header">
<div class="headerTop">
<div class="col h1 bold fadeIn"><a href="/" class="home">Taylor Cottrell </a><span class="light fade show" id="title">is pro-immigration.</span></div>
<div class="col h1 fadeIn switch right"><input type="checkbox" id="toggleAll" onclick="toggleTitle()"/><label for="toggleAll"></label></div>
</div></div>
<div id ="fullPage" class="fullPage fadeIn">
<div class= "section s1">
<div class="caseText megaType">
<span class="commongroundHead">Open the door to immigration reform.</span><br>
<span class="light commongroundSubhead">
Design and art direction for the experience showing how all Americans benefit from the impact of immigrants.</span>
</div>
<div class="caseInfo">
<span class="h4 light gray">Stand Together / Factory360 / Hugo Burton, Trisha Tan, Taylor Cottrell</span>
</div>
</div>
<div class= "section s1">
<div class="caseText megaType">
<span class="commongroundHead">About.</span><br>
<span class="light commongroundSubhead">When we open the door to new perspectives, we all become better. To illustrate this, we created doors equipped with internal content screens, triggered by the user. Behind each door was a unique story.
<br></br>
We strategically placed each door at border hotspots around the country to educate people on the need for immigration reform. </span>
</div>
</div>
<div class= "section s2">
<img src="../img/ST_stills-desktop.gif" class="workImageMed fullImage"></img>
<img src="../img/ST_stills-mobile.gif" class="workImageMed mobileImage"></img>
</div>
<div class= "section s2">
<img src="../img/ST_doors-desktop.gif" class="workImageMed fullImage"></img>
<img src="../img/ST_doors-mobile.gif" class="workImageMed mobileImage"></img>
</div>
<div class= "section s2">
<video muted autoplay controls>
<source src="../img/ST_reel.mp4" type="video/mp4">
<source src="../img/LEXUS_reel.ogg" type="video/ogg">
</video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
<script>
new fullpage('#fullpage', {
licenseKey: '5CC976AE-2BA44BD9-AD76D191-06F35AD6'
})
new fullpage('#fullPage', {
autoScrolling: false,
scrollingSpeed: 4000,
dragAndMove: true,
fadingEffect: true,
navigation: true,
lazyLoading: true,
loopBottom: true,
scrollOverflow:true,
scrollBar: false,
scrollHorizontally: true
});
</script>
</body>
<header>
</header><!-- End Header -->
<!-- start footer -->
<footer>
</footer> <!-- end footer -->
<!-- jQuery-->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</body>
</html>