-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (130 loc) · 6.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="index.css">
<title>Landing Page</title>
</head>
<body>
<!------------------------navbar -------------- -->
<section class="nav">
<div class="logo">
<div class="image-logo"></div>
<h1 class="name">Manga King</h1>
</div>
<div class="search">
<label for="search"><span class="material-icons-outlined search-icon">
search
</span></label>
<input type="text" placeholder="search" name="search" id="search" >
</div>
<div class="menu">
<a href="" class="icon"><i class="fa fa-fw fa-home"></i>Home</a>
<a href="#trending" class="icon">Trending</a>
<button type="button" class="btn">Login</button>
<button type="button" class="button">Sign up</button>
</div>
</section>
<!--------------------------vedio----------------------- -->
<video id = "myVideo" muted autoplay loop>
<source src = "./luffy clip.mp4" type = "video/mp4"></src>
</video>
<!-- -------------------------------trending------------------------>
<div class="trending-container" id="trending">
<h1 class="heading">The Top 10 Trending Manga.</h1>
<div class="container flex">
<div class="item flex-item">
<div class="card">
<img src="./one piece.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">One Piece</div>
<a href="" class="page" target="_blank"><button type="submit" class="click">Click here</button></a>
</div>
</div>
</div>
<div class="item flex-item">
<div class="card">
<img src="./tale-demon.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Tales Of Demon God</div>
<a href="https://manhuaplus.com/manga/tales-of-demons-and-gods01/" target="_blank" class="page"><button type="submit" class="click">Click here</button></a>
</div>
</div>
</div>
<div class="item flex-item">
<div class="card">
<img src="./demonslayer.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Demon Slayer</div>
<a href="" class="page" target="_blank"><button type="submit" class="click">Click here</button></a>
</div>
</div>
</div>
<div class="item flex-item"><div class="card">
<img src="./martial-peak.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Martial Peak</div>
<a href="" class="page" target="_blank"><button type="submit" class="click">Click here</button></a>
</div>
</div></div>
<div class="item flex-item">
<div class="card">
<img src="./demon-emperor.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Demon Emperor</div>
<a href="" class="page" target="_blank"><button type="submit" class="click">Click here</button></a>
</div>
</div>
</div>
<div class="item flex-item">
<div class="card">
<img src="./apotheosis.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Apotheosis</div>
<a href="" class="page" target="_blank"><button type="submit" class="click">Click here</button></a>
</div>
</div>
</div>
<div class="item flex-item">
<div class="card">
<img src="./yuan-zun.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Yuan-Zun</div>
<a href="https://manhuaplus.com/manga/yuan-zun01/" class="page" target="_blank"><button type="submit" class="click">Click here</button></a>
</div>
</div>
</div>
<div class="item flex-item">
<div class="card">
<img src="./the-great-ruler.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">The Great Ruler</div>
<a href="" class="page" target="_blank"><button type="submit" class="click">Click here</button></a>
</div>
</div>
</div>
</div>
</div>
<!------------------------------------ Sign up----------------------------- -->
<div class="signup">
<div class="sign-up-wrapper">
<div class="catalog">
<div class="textBox">
<p class="textBox-big">Call to action! It's time!</p>
<p class="textBox-small">Sign up for more manga clicking that button right over there!</p>
</div>
<div class="center-btn">
<button class="sign-up-button">Sign Up</button>
</div>
</div>
</div>
</div>
<!------------------------------- footer--------------------------- -->
<footer class="footer">
<p class="footer-name">© 2021 The Odin Project</p>
</footer>
</body>
</html>