-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (108 loc) · 5.86 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
---
title: "Home"
layout: default
description: "The official Park Lane International School student magazine."
---
<body data-bs-spy="scroll" data-bs-target="#navScroll">
<main>
<div class="w-100 overflow-hidden bg-gray-100" id="top">
<div class="w-100 overflow-hidden bg-gray-100" id="top">
<div class="container position-relative">
<div class="col-12 col-lg-8 mt-0 h-100 position-absolute top-0 end-0 bg-cover" data-aos="fade-left"
style="background-image: url(https://images.unsplash.com/photo-1596667980201-40d82a8a3ba3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Ym9va3xlbnwwfDF8MHx3aGl0ZXw%3D&auto=format&fit=crop&w=800&q=60);">
</div>
<div class="row">
<div class="col-lg-7 py-vh-6 position-relative" data-aos="fade-right">
<h1 class="display-1 fw-bold mt-5">Welcome to the Oracle!</h1>
<p class="lead">A by-students, for-students magazine brought to you by the high schoolers of Park Lane
International School, a private British school in the heart of Europe.</p>
<a href="/full-issues" class="btn btn-dark btn-xl shadow me-3 rounded-0 my-5">Read the latest issue</a>
<a href="/articles" class="btn btn-dark btn-xl shadow me-3 rounded-0 my-5">Browse all articles</a>
</div>
</div>
</div>
</div>
<div class="py-vh-5 w-100 overflow-hidden" id="services">
<div class="container">
<div class="row d-flex justify-content-end">
<div class="col-lg-8" data-aos="fade-down">
<h2 class="display-6">Who, what, why? Here's a 30-second rundown on our magazine, and several compelling
reasons to read it!</h2>
</div>
</div>
<div class="row d-flex align-items-center">
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
<span class="h5 fw-lighter">01.</span>
<h3 class="py-5 border-top border-dark">Why start the Oracle?</h3>
<p>Well, we felt like this student voice in publications was something that was missing at park lane, and we
wanted to share our opinions, advice, and knowledge on a range of topics. We will write about fun topics,
like advice, TV shows, books, scary stories, and unsolved mysteries, or more serious topics like current
affairs and bizarre science.</p>
<a href="/team" class="link-fancy">Meet the team
</a>
</div>
<div class="col-md-6 col-lg-4 py-vh-4 pb-0" data-aos="fade-up" data-aos-delay="400">
<span class="h5 fw-lighter">02.</span>
<h3 class="py-5 border-top border-dark">What do we write about?</h3>
<p>The word “oracle” comes from the latin word <em>orare</em> (to speak), and oracles in ancient Greece were
wise women that supposedly had the magic ability to predict the future. It was believed that the gods were
speaking through them, and while we aren’t suggesting that we have divine power, we believe that sharing
stories and covering important issues is a magic in and of itself. </p>
<a href="/articles" class="link-fancy">Browse all articles
</a>
</div>
<div class="col-md-6 col-lg-4 py-vh-6 pb-0" data-aos="fade-up" data-aos-delay="600">
<span class="h5 fw-lighter">03.</span>
<h3 class="py-5 border-top border-dark">Who exactly are we?</h3>
<p>We're all students who want to give you something other than plain news or updates. We hope to express
our interests and motivate others to be intrigued with us. If you'd like to join the team, or have an
article/story that you think should be published, don’t hesitate to shoot us an email at
<span style="font-family: monospace">info@oraclemag.org</span> or through our contact page!</p>
<a href="/contact" class="link-fancy">Send a message
</a>
</div>
</div>
</div>
</div>
<div class="py-vh-6 bg-gray-100 w-100 overflow-hidden">
<div class="container">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-lg-5">
<h3 class="py-5 border-top border-dark" data-aos="fade-right">A note from our founder:</h3>
</div>
<div class="col-md-7" data-aos="fade-left">
<blockquote>
<div class="fs-4 my-3 fw-light pt-4 border-bottom pb-3">“I'm thrilled to let all of you see what we have
been working on and are hoping you find our articles entertaining and educational. The Oracle magazine
will be published in print and online every term. Mark your calendars!”</div>
<img src="assets/images/students/CharlotteC.jpeg" width="64" height="64" class="img-fluid rounded-circle me-3" alt=""
data-aos="fade">
<span><span class="fw-bold">Charlotte Comstock,</span>
Y13</span>
</blockquote>
</div>
</div>
</div>
</div>
</main>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/aos.js"></script>
<script>
AOS.init({
duration: 800, // values from 0 to 3000, with step 50ms
});
</script>
<script>
let scrollpos = window.scrollY
const header = document.querySelector(".navbar")
const header_height = header.offsetHeight
const add_class_on_scroll = () => header.classList.add("scrolled", "shadow-sm")
const remove_class_on_scroll = () => header.classList.remove("scrolled", "shadow-sm")
window.addEventListener('scroll', function () {
scrollpos = window.scrollY;
if (scrollpos >= header_height) { add_class_on_scroll() }
else { remove_class_on_scroll() }
})
</script>
</body>
</html>