-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
112 lines (111 loc) · 5.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gothic Library - Dashboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="dark-mode">
<div class="container">
<!--pop up-->
<div class="pop-up">
<label for="name" class="text small">What is your name?</label>
<input class="name-input text small" type="text" name="name">
<button class="btn input-btn">Enter</button>
</div>
<main class="main">
<div class="side-bar hide">
<div class="logo">
<img src="images\books.png" class="img logo">
</div>
<div class="break"></div>
<div class="list">
<div class="main-list">
<li class="link"><a href="">Home</a></li>
<li class="link"><a href="">Search</a></li>
<li class="link"><a href="">Books</a></li>
<li class="link"><a href="">Quotes</a></li>
<li class="link"><a href="">Settings</a></li>
</div>
<div class="break"></div>
<div class="side-list">
<button class="btn img-btn mode-btn">
<img src="images\light-mode.png" class="img icon dark-mode hide">
<img src="images\night-mode.png" class="img icon light-mode show">
</button>
<div class="break"></div>
<button class="btn img-btn">
<a href="https://github.com/aigle-levant"><img src="images\github-dark.png" class="img icon"></a>
</button>
</div>
</div>
</div>
<div class="main-content hide">
<div class="header">
<h1 class="heading">Hello, <span class="output-text">Anonymous</span>!</h1>
</div>
<div class="books">
<div class="book-content last-read">
<h3 class="sub-heading">Last read</h3>
<div class="last-read-content">
<img src="images/orwell.jpg" class="cover-img">
<p class="text">1984</p>
</div>
</div>
<div class="book-content book-shelf">
<h3 class="sub-heading">All books</h3>
<div class="book-shelf-content">
<div class="book-one">
<img src="images/cemetery.jpg" class="cover-img">
<p class="text">Cemetery Boys</p>
</div>
<div class="book-two">
<img src="images/dorian.jpg" class="cover-img">
<p class="text">Picture of Dorian Gray</p>
</div>
<div class="book-three">
<img src="images/orwell.jpg" class="cover-img">
<p class="text">1984</p>
</div>
<div class="book-four">
<img src="images/kalanithi.jpg" class="cover-img">
<p class="text">When Breath Becomes Air</p>
</div>
</div>
</div>
</div>
<div class="quotes">
<div class="header-text-quotes">
<h3 class="sub-heading">All quotes</h3>
<div class="underline"></div>
</div>
<div class="quotes-content">
<div class="quote quote-one">
<p class="text">We shall meet in the place where there is no darkness</p>
<p class="text">- O'Brien</p>
</div>
<div class="quote quote-two">
<p class="text">Thoughtcrime does not entail death: thoughtcrime IS death.</p>
<p class="text">- Winston</p>
</div>
<div class="quote quote-three">
<p class="text">Each of us has Heaven and Hell in him, Basil</p>
<p class="text">- Dorian Gray</p>
</div>
<div class="quote quote-four">
<p class="text">The costume of our day is detestable. It is so sombre, so depressing. Sin is the only colour- element left in modern life.</p>
<p class="text">- Lord Henry Wotton</p>
</div>
</div>
</div>
</div>
</main>
<div class="attribution hide">
<h2 class="sub-heading">Made by Aigle | Check out my <a href="https://github.com/aigle-levant">Github</a></h2>
</div>
</div>
<script src="script.js" defer></script>
</body>
</html>