-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (86 loc) · 3.02 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project: Landing Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- header/nav -->
<header class="header">
<a href="index.html" class="logo">K.DOKJA</a>
<nav class="navbar">
<a href="#">ABOUT</a>
<a href="#">QUOTE</a>
<a href="#">OUR COMMUNITY</a>
</nav>
</header>
<!-- main title, text & image -->
<div class="section">
<div class="section-left">
<h1 class="title">A fan-site about Kim Dokja.</h1>
<p class="subtext">
This website is dedicated to our beloved reader, Kim Dokja! Author
tweets, updates and anything related to ORV is released and maintained
by our community of Dokja fans. We too host merch giveaways, so be
sure to sign-up with us and be part of the community!
</p>
<button class="button">Sign Up!</button>
</div>
<div class="section-right">
<img src="./images/cover.jpg" />
</div>
</div>
<!-- section two -->
<div class="section-two">
<h2 id="title">DOKJA VISUALS</h2>
<div class="graphics">
<div class="image">
<img src="./images/1.png" alt="" />
<p>Our beloved Dokja beautifully illustrated in the webtoon *_*</p>
</div>
<div class="image">
<img src="./images/2.png" alt="" />
<p>Our beloved Dokja shrugging with a deadpan expression :)</p>
</div>
<div class="image">
<img src="./images/3.png" alt="" />
<p>Our beloved Dokja with the most heartwarming smile <3</p>
</div>
<div class="image">
<img src="./images/4.png" alt="" />
<p>Our beloved Dokja in action-- he's just so cool!! :D</p>
</div>
</div>
</div>
<!-- section three -->
<div class="section-three">
<p class="quote">
“It doesn't matter what gender, race or world you originated from.
<br />
It doesn't matter if you are strong or weak, famous or not famous.
Anything is okay. What I am looking for is passion. I hope you <br />
have the passion to see the end of this damn story with me."
</p>
<span class="quote-author">- Kim Dokja, Reader</span>
</div>
<!-- section four -->
<div class="section-four">
<div class="left-section">
<h3 class="title-two">Are you an Omniscient Reader fan?</h3>
<p class="subtext-two">
Sign up to join our ORV community, and make sure to shoot your shot
<br />
to stand a chance at winning a monthly giveaway!
</p>
</div>
<button class="cta-button">Sign Up!</button>
</div>
<!-- footer -->
<div class="footer">
<span> Copyright © The Odin Project & Jk the coder ace! 2023 </span>
</div>
</body>
</html>