Skip to content

Commit ff6650b

Browse files
Aryan-VoraAryan-Vora
authored
a
1 parent ff18945 commit ff6650b

File tree

4 files changed

+337
-0
lines changed

4 files changed

+337
-0
lines changed

‎index.css

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
body {
2+
margin: 0;
3+
}
4+
5+
.landing-main {
6+
height: 100vh;
7+
width: 100vw;
8+
overflow-x: hidden;
9+
10+
}
11+
12+
.landing-title {
13+
font-family: Chivo;
14+
display: inline-block;
15+
font-size: 2em;
16+
user-select: none;
17+
margin: 10px 25px;
18+
color: #3FE73C;
19+
font-weight: 400;
20+
text-decoration: none;
21+
}
22+
23+
.landing-navbar {
24+
text-align: center;
25+
}
26+
.landing-container {
27+
display: flex;
28+
background-image: url(https://glife.com.my/wp-content/uploads/2019/10/Grey-Gradient-Background-300x136.jpg);
29+
background-position: center;
30+
background-repeat: no-repeat;
31+
background-size: cover;
32+
}
33+
.noScroll{
34+
overflow: hidden;
35+
}
36+
.landing-line {
37+
border: 1px solid #000;
38+
display: block;
39+
padding: 0;
40+
margin: 0;
41+
width: 100%;
42+
}
43+
44+
#landing-navbar {
45+
width: auto;
46+
background-color: rgb(255, 255, 255);
47+
}
48+
49+
#content-tile {
50+
display: flex;
51+
flex-direction: column;
52+
list-style-type: none;
53+
position: fixed;
54+
55+
56+
}
57+
#content-tileTest {
58+
display: flex;
59+
flex-direction: column;
60+
list-style-type: none;
61+
}
62+
.support-mainImage{
63+
height: 440px;
64+
width: 740px;
65+
}
66+
.main-text {
67+
padding-top: 10px;
68+
padding-left: 10px;
69+
font-family: Chivo;
70+
font-style: normal;
71+
font-weight: normal;
72+
}
73+
74+
75+
#content-tile img {
76+
height: 200px;
77+
margin-right: 2vw;
78+
margin-bottom: 10px;
79+
position: fixed;
80+
box-shadow: -5px 10px 10px #212121;
81+
82+
83+
84+
}
85+
#content-tileTest img {
86+
height: 200px;
87+
margin-right: 2vw;
88+
margin-bottom: 10px;
89+
box-shadow: -5px 10px 10px #212121;
90+
list-style-type: none;
91+
92+
93+
}
94+
.img1{
95+
top: 12%;
96+
97+
}
98+
.img2{
99+
top:42%
100+
}
101+
.img3{
102+
top:72%;
103+
}
104+
105+
#content-tile p {
106+
text-align: center;
107+
108+
}
109+
.landing-subtitles{
110+
font-family: Chivo;
111+
font-style: normal;
112+
font-weight: 600;
113+
font-size: 2em;
114+
color: #13d4be;
115+
margin-bottom: 10px;
116+
margin-right: 4vw;
117+
margin-top: 0;
118+
}
119+
.landing-rightSubtitle1{
120+
top: 7%;
121+
font-family: Chivo;
122+
font-style: normal;
123+
font-weight: 600;
124+
font-size: 2em;
125+
color: #13d4be;
126+
margin-bottom: 10px;
127+
margin-right: 4vw;
128+
margin-top: 0;
129+
position: fixed;
130+
}
131+
.landing-rightSubtitle2{
132+
top: 37%;
133+
font-family: Chivo;
134+
font-style: normal;
135+
font-weight: 600;
136+
font-size: 2em;
137+
color: #13d4be;
138+
margin-bottom: 10px;
139+
margin-right: 4vw;
140+
margin-top: 0;
141+
position: fixed;
142+
}
143+
.landing-rightSubtitle3{
144+
top: 67%;
145+
font-family: Chivo;
146+
font-style: normal;
147+
font-weight: 600;
148+
font-size: 2em;
149+
color: #13d4be;
150+
margin-bottom: 10px;
151+
margin-right: 4vw;
152+
margin-top: 0;
153+
position: fixed;
154+
}
155+
156+
#top-btn {
157+
158+
display: inline;
159+
color: #212121;
160+
background-color: #dedede;
161+
border-radius: 15px;
162+
padding: 10px;
163+
margin: -45px 7px 15px 0px;
164+
text-decoration: none;
165+
}
166+

‎index.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<link rel="preconnect" href="https://fonts.gstatic.com">
7+
<link href="https://fonts.googleapis.com/css2?family=Chivo:wght@300&display=swap" rel="stylesheet">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
<title>Landing</title>
11+
<link rel="stylesheet" href="index.css">
12+
</head>
13+
14+
<body>
15+
<main class="landing-main">
16+
<div class="landing-navbar">
17+
<a href="index.html"class="landing-title" >The Iceberg Crisis</a>
18+
<span class="landing-line"></span>
19+
</div>
20+
21+
<div class="landing-container">
22+
<div class="main-text">
23+
24+
<p class="landing-subtitles">Our Mission</p>
25+
<p >
26+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit porro aliquid, impedit ex beatae
27+
molestias, expedita esse saepe quis modi ut similique, ratione animi consequuntur aperiam ea! Iusto
28+
possimus ipsum officiis quam blanditiis cupiditate ipsa cumque reprehenderit suscipit! Nam, deleniti
29+
nisi quos minus at corporis, nulla recusandae sequi doloribus magnam consequatur accusamus ad? Ea,
30+
placeat ipsam? Eum hic animi, cupiditate non soluta molestias pariatur laboriosam accusantium sunt
31+
maiores. Voluptatem tenetur iure eum laudantium reiciendis ipsa dolores, expedita dolor assumenda
32+
optio ex perspiciatis veritatis sunt et ad porro ut illo, beatae blanditiis odit numquam ipsum at
33+
obcaecati. Cupiditate nobis consequuntur repellat?
34+
</p>
35+
<div>
36+
<iframe src="https://datahub.io/core/glacier-mass-balance/view/0" width="100%" height="500px"
37+
frameborder="0"class="noScroll"></iframe>
38+
</div>
39+
</div>
40+
<ul id="content-tileTest">
41+
<p class="landing-subtitles">News</p>
42+
<li><a href="news.html"><img
43+
src="https://images.pexels.com/photos/694218/pexels-photo-694218.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
44+
alt="" ></a></li>
45+
<p class="landing-subtitles">Updates</p>
46+
<li><a href="updates.html" target="_blank"><img
47+
src="https://cdn.britannica.com/67/156367-050-31221132/Glacier-Argentina-South-America-blue-ice.jpg"
48+
alt="" ></a></li>
49+
<p class="landing-subtitles">Support</p>
50+
<li><a href="support.html"><img
51+
src="https://images.unsplash.com/photo-1516569422572-d9e0514b9598?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Z2xhY2llcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
52+
alt="" ></a></li>
53+
</ul>
54+
</div>
55+
</main>
56+
<script src="index.js"></script>
57+
</body>
58+
59+
</html>

‎news.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<link rel="preconnect" href="https://fonts.gstatic.com">
7+
<link href="https://fonts.googleapis.com/css2?family=Chivo:wght@300&display=swap" rel="stylesheet">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
<title>Document</title>
11+
<link rel="stylesheet" href="index.css">
12+
</head>
13+
14+
<body>
15+
<main class="landing-main">
16+
<div class="landing-navbar">
17+
<a href="index.html" class="landing-title" id="top">The Iceberg Crisis</a>
18+
<span class="landing-line"></span>
19+
</div>
20+
21+
<div class="landing-container">
22+
<div class="main-text">
23+
24+
<p class="landing-subtitles" id="top">Glacier News</p>
25+
<div class="t-news">
26+
<a class="twitter-timeline" data-width="700"
27+
href="https://twitter.com/GlacierHub?ref_src=twsrc%5Etfw">Tweets by GlacierHub</a>
28+
</div>
29+
</div>
30+
<div class="content-tile-container">
31+
<ul id="content-tile">
32+
<p class="landing-rightSubtitle1">News</p>
33+
<li><a href="news.html"><img
34+
src="https://images.pexels.com/photos/694218/pexels-photo-694218.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
35+
alt="" class="img1"></a></li>
36+
<p class="landing-rightSubtitle2">Updates</p>
37+
<li><a href="updates.html" target="_blank"><img
38+
src="https://cdn.britannica.com/67/156367-050-31221132/Glacier-Argentina-South-America-blue-ice.jpg"
39+
alt="" class="img2"></a></li>
40+
<p class="landing-rightSubtitle3">Support</p>
41+
<li><a href="support.html"><img
42+
src="https://images.unsplash.com/photo-1516569422572-d9e0514b9598?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Z2xhY2llcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
43+
alt="" class="img3"></a></li>
44+
</ul>
45+
</div>
46+
</div>
47+
<a id="top-btn" href="#top">Back To Top</a>
48+
</main>
49+
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
50+
51+
</body>
52+
53+
</html>

‎support.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<link rel="preconnect" href="https://fonts.gstatic.com">
7+
<link href="https://fonts.googleapis.com/css2?family=Chivo:wght@300&display=swap" rel="stylesheet">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
<title>Support</title>
11+
<link rel="stylesheet" href="index.css">
12+
</head>
13+
14+
<body>
15+
<main class="landing-main">
16+
<div class="landing-navbar">
17+
<a href="index.html"class="landing-title" >The Iceberg Crisis</a>
18+
<span class="landing-line"></span>
19+
</div>
20+
21+
<div class="landing-container">
22+
<div class="main-text">
23+
24+
<p class="landing-subtitles">What Can You Do to Help?</p>
25+
<p >
26+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit porro aliquid, impedit ex beatae
27+
molestias, expedita esse saepe quis modi ut similique, ratione animi consequuntur aperiam ea! Iusto
28+
possimus ipsum officiis quam blanditiis cupiditate ipsa cumque reprehenderit suscipit! Nam, deleniti
29+
nisi quos minus at corporis, nulla recusandae sequi doloribus magnam consequatur accusamus ad? Ea,
30+
placeat ipsam? Eum hic animi, cupiditate non soluta molestias pariatur laboriosam accusantium sunt
31+
maiores. Voluptatem tenetur iure eum laudantium reiciendis ipsa dolores, expedita dolor assumenda
32+
optio ex perspiciatis veritatis sunt et ad porro ut illo, beatae blanditiis odit numquam ipsum at
33+
obcaecati. Cupiditate nobis consequuntur repellat?
34+
</p>
35+
<div class="support-mainImage">
36+
<img class="support-mainImage" src="http://www.kimnicholas.com/uploads/2/5/7/6/25766487/fig1full.jpg" alt="" >
37+
</div>
38+
</div>
39+
<ul id="content-tileTest">
40+
<p class="landing-subtitles">News</p>
41+
<li><a href="news.html"><img
42+
src="https://images.pexels.com/photos/694218/pexels-photo-694218.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
43+
alt="" ></a></li>
44+
<p class="landing-subtitles">Updates</p>
45+
<li><a href="updates.html" target="_blank"><img
46+
src="https://cdn.britannica.com/67/156367-050-31221132/Glacier-Argentina-South-America-blue-ice.jpg"
47+
alt="" ></a></li>
48+
<p class="landing-subtitles">Support</p>
49+
<li><a href="support.html"><img
50+
src="https://images.unsplash.com/photo-1516569422572-d9e0514b9598?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Z2xhY2llcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
51+
alt="" ></a></li>
52+
</ul>
53+
</div>
54+
</div>
55+
</main>
56+
<script src="index.js"></script>
57+
</body>
58+
59+
</html>

0 commit comments

Comments
 (0)