-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (128 loc) · 6.11 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
154
155
156
157
158
159
160
<!doctype html>
<html lang="en">
<head>
<!-- Title -->
<title>Literator</title>
<!-- Page meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/svg" href="Assets/Images/Site/favicon.svg">
<!-- Description meta -->
<meta name="author" content="Aarush Kumbhakern">
<meta name="description" content="Collaborative story-writing.">
<!-- OG meta -->
<meta property="og:site_name" content="Literator">
<meta property="og:url" content="url">
<!-- OG article meta tags -->
<meta property="og:type" content="website">
<meta property="og:title" content="Literator">
<meta property="og:article:author" content="Aarush Kumbhakern">
<meta property="og:description" content="Collaborative story-writing.">
<meta property="og:image" content="thumbnail_url">
<!-- Twitter article meta tags -->
<meta name="twitter:card" content="summary_large_image">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="CSS/fonts.css">
<link rel="stylesheet" type="text/css" href="CSS/main.css">
<link rel="stylesheet" type="text/css" href="CSS/home.css">
</head>
<body>
<div id="page">
<header id="hero">
<div id="hero_heading">lIterator</div>
</header>
<nav id="navbar">
<div id="navbar_hero_wrapper">
<div id="navbar_hero">
<span>lIterator</span>
</div>
</div>
<img id="mobile_navbar_menu_button" class="clickable" src="Assets/Images/Icons/menu.svg" alt="menu" onclick="toggleNavbarMenu();">
<div id="navbar_menu_wrapper">
<div id="navbar_menu">
<a class="unstyled navbar-link" href="#">
<span>Explore</span>
</a>
<a class="unstyled navbar-link" href="#">
<span>Library</span>
</a>
<a class="unstyled navbar-link" href="#">
<span>Profile</span>
</a>
</div>
</div>
</nav>
<main id="main">
<aside class="compact-spacing column listbox card" id="bulletin">
<div class="header" id="bulletin_header">
<h1>News</h1>
</div>
<div id="bulletin_content">
<p>Dark spruce forest frowned on either side of the frozen waterway.</p>
<p>The trees had been stripped by a recent wind of their white covering of frost, and they seemed to lean toward each other, black and ominous, in the fading light.</p>
<p>A vast silence reigned over the land. The land itself was a desolation, lifeless, without movement, so lone and cold that the spirit of it was not even that of sadness. There was a hint in it of laughter, but of a laughter more terrible than any sadness — a laughter that was mirthless as the smile of the Sphinx, a laughter cold as the frost and partaking of the grimness of infallibility.</p>
</div>
</aside>
<div id="main_content">
<div id="story_previews">
<div class="story preview compact-spacing column listbox card">
<div class="background-image" style="background-image: url('https://source.unsplash.com/random?1');">
<div class="wiper"></div>
</div>
<div class="compact-spacing column listbox header">
<div class="category pill">Period Fiction | 27 / 12 / 2022</div>
<h1 class="title">The Curious Case of Benjamin Button</h1>
</div>
<div class="content">
<p>As long ago as 1860 it was the proper thing to be born at home. At present, so I am told, the high gods of medicine have decreed that the first cries of the young shall be uttered upon the anaesthetic air of a hospital, preferably a fashionable one.</p>
</div>
<div class="authors pill">By OunceOfShag, Inshallah, and others</div>
</div>
<div class="story preview compact-spacing column listbox card">
<div class="background-image" style="background-image: url('https://source.unsplash.com/random?2');">
<div class="wiper"></div>
</div>
<div class="compact-spacing column listbox header">
<div class="category pill">Legal Fiction | 12 / 12 / 2022</div>
<h1 class="title">To Kill a Mockingbird</h1>
</div>
<div class="content">
<p>Atticus said to Jem one day, “I’d rather you shot at tin cans in the backyard, but I know you’ll go after birds. Shoot all the blue jays you want, if you can hit ‘em, but remember it’s a sin to kill a mockingbird.” That was the only time I ever heard Atticus say it was a sin to do something, and I asked Miss Maudie about it. “Your father’s right,” she said.</p>
</div>
<div class="authors pill">By OunceOfShag, Inshallah, and others</div>
</div>
<div class="story preview compact-spacing column listbox card">
<div class="background-image" style="background-image: url('https://source.unsplash.com/random?3');">
<div class="wiper"></div>
</div>
<div class="compact-spacing column listbox header">
<div class="category pill">Surreal Fiction | 3 / 1 / 2023</div>
<h1 class="title">In Search of Lost Time</h1>
</div>
<div class="content">
<p>believe that we can change the things around us in accordance with our desires—we believe it because otherwise we can see no favourable outcome. We do not think of the outcome which generally comes to pass and is also favourable: we do not succeed in changing things in accordance with our desires, but gradually our desires change.</p>
</div>
<div class="authors pill">By OunceOfShag, Inshallah, and others</div>
</div>
</div>
</div>
</main>
<div id="toolbar">
<div id="toolbar_buttons">
<div class="toolbar-button"><img src="Assets/Images/Icons/top.svg" alt="Go to Top"></div>
<div class="toolbar-button"><img src="Assets/Images/Icons/bell.svg" alt="Updates"></div>
<div class="toolbar-button"><img src="Assets/Images/Icons/write.svg" alt="Continue"></div>
<div class="toolbar-button"><img src="Assets/Images/Icons/plus.svg" alt="New"></div>
</div>
</div>
<footer id="footer">
<div id="footer_hero">
<h1 id="footer_hero_heading">lIterator</h1>
<div id="footer_hero_subheading">By Aarush K. and Ayman M.</div>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="JS/scripts.js"></script>
</body>
</html>