-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (135 loc) · 7.44 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
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faux News</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<section class = "container">
<!-- NAVBAR -->
<div class = "navbar">
<a class = "navbar-brand" href = "#">Faux News Blog</a>
</div>
<!-- CONTENT -->
<div id = "pop-up">
<div class = "pop-up-header">
<div class = "title">Have A Question?</div>
<button class = "close-button">×</button>
</div>
<div class = "pop-up-body">We cannot help you right now :( <br><br>
All our customer service agents have resigned in protest because they accuse us of overworking them.<br><br>We are currently contesting the case and we're sure that we will win because we have the money to.<br><br>
Thank you for your cooperation and understanding!</div>
</div>
<div id = "overlay"></div>
<div class = "content">
<p class = "headline scroll" data-rate = "-1.5" data-direction = "horizontal">5 Reasons Workplaces Should Absolutely Love Short, Strict Deadlines</p>
<div class = "first scroll fade-in" data-rate = "-1" data-direction = "vertical">
<p class = "heading">Adrenaline Overload</p>
<p class = "para">Who doesn't love the thrill of racing against the clock in a sheer state of panic all the time?<br><br>
Honestly, giving up all enjoyment in order to complete an unfairly large amount of work alone, is the life man!
</p>
</div>
<div class = "second scroll fade-in" data-rate = "-1" data-direction = "vertical">
<p class = "heading">Quality, Schmality</p>
<p class = "para">The biggest companies put out bad products that constantly glitch, or have grave issues we are told to ignore. There is no reason to give workers enough time to build good, useful, long-lasting products that they care for.<br><br>
Like, what else, the world is made up of unicorns and rainbows and happy citizens living productive lives within their means?<br><br>
Get out haha.
</p>
</div>
<div class = "third scroll fade-in" data-rate = "-1" data-direction = "vertical">
<p class = "heading">People Waste Their Time Anyways</p>
<p class = "para">Have you seen students who dare to have a social life while they should be sobbing over writing twenty useless experiments for three labs and preparing for exams simultaneously? Doesn't it make your blood boil?<br><br>
Similarly, we must make sure that workers don't get to do anything they want with their time (as if they own it!).
<br><br>Especially sleep. Who even needs it...I don't get it.
</p>
</div>
<div class = "fourth scroll fade-in" data-rate = "-1" data-direction = "vertical">
<p class = "heading">Zero Fear of Rebellious Opinions</p>
<p class = "para">Exhausted people can't raise their voices! So everything unjust that you're doing will definitely be ignored by the authorities.<br><br>
Not that you need them to, lol. As if the government cares about the workers, ha!
</p>
</div>
<div class = "fifth scroll fade-in" data-rate = "-1" data-direction = "vertical">
<p class = "heading">Our History, Our Heritage</p>
<p class = "para">Oh capitalism, the beacon of equality and fairness for those who can afford it!<br><br>
A fundamental tenet of capitalism is the dissatisfaction of workers. We must respect this tradition!<br><br>
</p>
</div>
<div class = "card scroll fade-in" data-rate = "-1" data-direction = "vertical">
<p class = "title">CTA Section For You To Ignore</p>
<p class = "para">If you want to learn more about how to make money off of human beings while making sure they lead a markedly unproductive life, then <a href = "https://www.instagram.com/mohanamisra/?hl=en">follow me on Instagram!</a><br><br>
Until the next time!
</p>
</div>
</div>
<!-- FOOTER -->
<button id = "help-button"><img class = "help hover" src = "images/question.png"></button>
<img class = "footer-image scroll" data-rate="-3" data-direction="horizontal" src = "images/cultish.jpg">
<img class = "footer-image2 scroll" data-rate="3" data-direction="horizontal" src = "images/work.jpg">
<div class = "footer">
Made by Mohana Misra © 2023
<p class = "subtext">This webpage was DEFINITELY not made within a short deadline</p>
</div>
</section>
<script>
const faders = Array.from(document.getElementsByClassName('fade-in'));
const appearOptions = {
threshold: 1,
rootMargin: "300px 0px 0px 0px"
};
const appearOnScroll = new IntersectionObserver(function (entries, appearOnScroll) {
entries.forEach(entry => {
if(!entry.isIntersecting) {
return;
}
else {
entry.target.classList.add('appear');
appearOnScroll.unobserve(entry.target);
}
})
}, appearOptions);
faders.forEach(fader => {
appearOnScroll.observe(fader);
})
window.addEventListener('scroll', function (e) {
let targets = document.getElementsByClassName("scroll");
for(let i = 0; i < targets.length; i++) {
let target = targets[i];
let pos = window.scrollY * target.dataset.rate;
if(target.dataset.direction === 'vertical') {
target.style.transform = `translate3d(0px, ${pos}px, 0px)`;
}
else {
target.style.transform = `translate3d(${pos}px, 0px, 0px)`;
}
}
})
let help = document.getElementById('help-button');
let closeButton = document.getElementsByClassName('close-button')[0];
let overlay = document.getElementById('overlay');
help.addEventListener('click', () => {
let popup = document.getElementById('pop-up');
openPopUp(popup);
})
closeButton.addEventListener('click', () => {
let popup = document.getElementById('pop-up');
closePopUp(popup);
})
function openPopUp(popup) {
if(popup == null) return;
popup.classList.add('active');
overlay.classList.add('active');
}
function closePopUp(popup) {
if(popup == null) return;
popup.classList.remove('active');
overlay.classList.remove('active');
}
</script>
</body>
</html>