-
Notifications
You must be signed in to change notification settings - Fork 0
/
home page.html
172 lines (155 loc) · 5.46 KB
/
home page.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
161
162
163
164
165
166
167
168
169
170
171
172
<!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>MCU Fan page</title>
<style>
* {
padding: 0;
margin: 0
}
.parent:first-of-type {
background: #ffffff url("images/home.jpg") no-repeat center center fixed;
background-size: cover;
}
.parent:nth-of-type(2) {
background: #ffffff url("images/Marvel_Cinematic_Universe_logo.png") no-repeat center center fixed;
background-size: cover;
}
.parent:nth-of-type(3) {
background: #ffffff url("images/other.jpg") no-repeat center center fixed;
background-size: cover;
}
.parent:nth-of-type(4) {
background: #ffffff url("images/superheroes.jpg") no-repeat center center fixed;
background-size: cover;
}
.parent:last-of-type {
background: #ffffff url("images/other\ bg.jpg") no-repeat center center fixed;
background-size: cover;
}
.parent {
width: 100%;
height: 150vh;
color: #fff;
text-shadow: 0 0 5px #000;
font-family: tahoma;
text-align: center;
line-height: 180%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden
}
.parent p {
padding: 25px
}
img{
width: 150px;
border-radius: 10px;
float: center;
margin-right: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#logo{
width: 100px;
border-radius: 50px;
float: inline-start;
margin-right: 10px;
}
footer {
text-align: center;
padding: 3px;
background-color: rgb(53, 51, 51);
color: white;
}
</style>
<script>
$(function() {
"use strict";
var parallex = $(".parent > .parallex");
$(window).on('scroll', function() {
parallex.css({
"transform": "translate(0, " + $(window).scrollTop() + "px)"
});
if ($('.parent > div').offset.top() >= $(window).scrollTop()) {
parallex = $(".parent > .parallex, .parent > div");
}
});
});
</script>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">About MCU</a></li>
<li><a href="#supes">Superheroes</a></li>
<li><a href="#other">Other</a></li>
<li><a href="index.html">Login</a></li>
<li><a href="signup.html">Signup</a></li>
</ul>
<div class="parent" id="home">
<div class="parallex">
<h1>MCU FAN PAGE</h1>
<p><font size="+1">This website is a treasure tove for all the MCU fans. This website contains anything and everything from Marvel. Scroll down to know about more about your favorite Marvel superheroes.</font></p>
</div>
</div>
<div class="parent" id="about">
<div>
<h1>About MCU</h1>
<p>The Marvel Cinematic Universe (MCU) is an American media franchise and shared universe centered on a series of superhero films produced by Marvel Studios. The films are based on characters that appear in American comic books published by Marvel Comics. The franchise also includes television series, short films, digital series, and literature. The shared universe, much like the original Marvel Universe in comic books, was established by crossing over common plot elements, settings, cast, and characters.</p>
</div>
</div>
<div class="parent" id="supes">
<div>
<h1>Marvel Superheroes</h1>
<p>Click on the images below to know more about the respective superhero</p>
<p align="center">
<a href="cap.html"><img src="images/cap dp.webp" alt=""></a>
<a href="iron man.html"><img src="images/iron man dp.jpg" alt=""></a>
<a href="hulk.html"><img src="images/hulk dp.jpg" alt=""></a><br><br>
<a href="thor.html"><img src="images/thor dp.jpg" alt=""></a>
<a href="hawkeye.html"><img src="images/hawkeye dp.jpg" alt=""></a>
<a href="black panther.html"><img src="images/bp dp.jpg" alt=""></a> </p>
<p>To know more about other superheroes, <a href="https://marvelcinematicuniverse.fandom.com/wiki/Category:Characters" target="_blank">click on this link.</a></p>
</div>
</div>
<div class="parent" id="other">
<div>
<h1>Other resources</h1>
<p>Test your knowledge regarding the MCU by attending this quiz. </p>
<a href="quiz.html"><img id="logo" src="images/quiz.png"></a>
<p>Connect with other Marvel fans alike and share your thoughts by joining the Reddit community. Click the image below to visit r/Marvel on Reddit.</p>
<a href="https://www.reddit.com/r/marvelstudios/" target="_blank"><img id="logo"src="images/reddit.png"></a>
<p><a href="form.html">Click this text</a> to fill this form and to subscibe to our free newsletter to know about the latest news on Marvel.</p>
</div>
</div>
<footer>
<p>Webpage done by Jashwanth SA</p>
<p>1st year - CSE dept, CIT chennai</p>
<a href="mailto:jashwanthsa.cse2022@citchennai.net">jashwanthsa.cse2022@citchennai.net</a>
</footer>
</body>
</html>