generated from krisbobo/dev-html-css-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (134 loc) · 6.49 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
<link rel="stylesheet" href="./css/home.css">
<title>Save Our Planet Global Summit on Climate Change</title>
</head>
<body>
<header>
<div class="menu-container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<nav class="mobile-nav">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="#program">Program</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">Sponsor</a></li>
<li><a href="#">News</a></li>
<li><a href="#">SOP Campaign</a></li>
</ul>
</nav>
<div class="navbar-nav">
<ul>
<li><i class="devicon-facebook-plain"></i></li>
<li><i class="devicon-twitter-original"></i></li>
<li><a href="#">English</a></li>
<li><a href="#">My Page</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
<nav class="navbar">
<div id="logo">
<a href="index.html" class="logo"><img src="./assets/soplogo.png" alt="Save Our Planet Logo"></a>
</div>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="#program">Program</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">Sponsor</a></li>
<li><a href="#">News</a></li>
<li><a href="#" id="border">SOP Campaign</a></li>
</ul>
</nav>
</header>
<main>
<section class="headline">
<h2 class="home">Climate Change</h2>
<h1 class="homeText">SOS! Save Our Planet</h1>
<h1 class="home-header">save our planet global summit 2022</h1>
<p class="someText">
Global temperatures and sea levels are rising,
and possibly contributing to larger more devastating storms.
This can all be contributed to climate change.
Climate change is defined as gradual changes in all the interconnected weather elements on our planet over approximately 30 years.
The data shows the Earth is warming and it's up to us to make the changes necessary for a healthier planet.
</p>
<p class="h-text">A joyful celebration believing in the value of openness and sharing, creating a positive change with people from
over 80 countries is taking place in August, in Paris.
</p>
<h2 class="date">2022.08.15(MON) ~ 16(TUE)</h2>
<p class="venue">@ Conference Hall, Paris</p>
</section>
<section id="program" class="prog">
<h2 class="prog-header">Main Program</h2>
<hr class="prog-line">
<ul class="row-container">
<li class="lecture">
<img src="./assets/lecture.png" alt="Lecture Icon on IconScout">
<h3>Lecture</h3>
<p>Listen to popular speakers from various countries about the next steps and necessary actions the world has to take to fight climate change.</p>
</li>
<li class="exhibition">
<img src="./assets/whiteboard.png" alt="Explaining concepts on a board">
<h3>Exhibition</h3>
<p>Appreciate various efforts made so far towards the fight against climate change. Showcase marvelous works in that light.</p>
</li>
<li class="forum">
<img src="./assets/speech-bubble.png" alt="Share your thoughts with others">
<h3>Forum</h3>
<p>Have the time to share your thoughts and opinions with experts for each topic. Ask and answer popular questions.</p>
</li>
<li class="workshop">
<img src="./assets/screwdriver_318-881772.png" alt="Work with others to build stuff practically ">
<h3>Workshop</h3>
<p>Examine new ways of conquering climate change by checking for safer or more efficient energy production techniques.</p>
</li>
<li class="connect">
<img src="./assets/networking.png" alt="Connect with others">
<h3>Networking</h3>
<p>Get amazing opportunities to network with SOP affiliates around the world, also after the summit. Work better together.</p>
</li>
</ul>
<button type="button" class="join-program">Join SOP Summit 2022</button>
<div class="see-more">see the whole program</div>
</section>
<section class="talks" id="speakers">
<h2 class="subheading">Featured Speakers</h2>
<hr class="prog-line">
<div class="grid-container">
</div>
<button type="button" class="more">More</button>
</section>
<section class="partner home-partner" id="partners">
<h2>Partner</h2>
<hr class="line">
<div class="first-row">
<a href="#"><img src="./assets/mozilla.ico" alt="Mozilla Firefox Logo"></a>
<a href="#"><img src="./assets/google.ico" alt="Google Logo"></a>
<a href="#"><img src="./assets/airbnb.ico" alt="Airbnb Logo"></a>
<a href="#" class="second-row"><img src="./assets/nasa.png" alt="Nasa Logo"></a>
<a href="#" class="second-row"><img src="./assets/apple-logo.png" alt="Apple Logo"></a>
</div>
</section>
</main>
<footer class="footer" id="footer">
<img src="./assets/soplogo.png" alt="logo">
<div>
<p class="footer-title">
2022 SOP Summit Paris. Some rights reserved
</p>
<p id="rights">SOP Global Summit 2022 works under the SOP license which means that the content provided during the program will be under the same license.
Refer to the SOP page to read more about it.
</p>
</div>
</footer>
<script src="./js/main.js"></script>
</body>
</html>