-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (138 loc) · 6.09 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
<!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>Home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="styles.css" rel="stylesheet">
</head>
<body>
<!-- Header Section -->
<section class="desktop-nav">
<div class="first-navbar">
<nav>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#">English</a></li>
<li><a href="#">My Page</a></li>
<li><a href="#">Logout</a></li>
</ul>
</nav>
</div>
<div class="second-navbar">
<div>
<a href="index.html"><img class="nav-logo" src="./assets/images/capstone-logo-removebg-preview.png" alt="the-logo" /></a>
</div>
<div>
<nav>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="#programs-section">Program</a></li>
<li><a href="#join-section">Join</a></li>
<li><a href="#featured-section">Filmmakers</a></li>
<li><a href="#partners-section">Partners</a></li>
<li class="last-list-item"><a href="#">HR Campaign</a></li>
</ul>
</nav>
</div>
</div>
</section>
<section class="first-page">
<header class="header-sect">
<a href="#"><i class="fas fa-bars fa-2xl" id="hamburger-menu"></i></a>
</header>
<article class="intro-sect">
<p class="heading-intro">"Let us stand together!"</p>
<h2>ECHO INTERNATIONAL</h2>
<h2>HUMAN RIGHTS FILM FESTIVAL</h2>
<h2>2022</h2>
<p class="intro-description">A film festival to celebrate humanity in all its glorious colors. We are one
clan and on this day we come to stand for each other because human rights matter.</p>
<h3>2022.8.23(TUE) ~ 24(FRI)</h3>
<h4>@Barbican Cinema 1, London and more</h4>
</article>
</section>
<!-- Programs' Section -->
<section class="programs-sect" id="programs-section">
<h2 class="main-program">Main Program</h2>
<hr class="under-line">
<div class="program-activities">
<ul>
<li>
<i class="fas fa-atom fa-2xl comments"></i>
<h4>Speeches</h4>
<p>Listen to brief speeches from various human rights filmmakers from across the globe.</p>
</li>
<li>
<i class="fas fa-burn fa-2xl comments"></i>
<h4>Short Film</h4>
<p>Watch two short (20 minutes max) films on various human rights issues in the world.</p>
</li>
<li>
<i class="fas fa-brain fa-2xl comments"></i>
<h4>Forum</h4>
<p>A discussion among the audience about the creative and thematic aspects of the films.</p>
</li>
<li>
<i class="fas fa-balance-scale fa-2xl comments"></i>
<h4>Feature Film</h4>
<p>Watch a feature film on a current global human rights issue (40 minutes minimum).</p>
</li>
<li>
<i class="fas fa-bahai fa-2xl comments"></i>
<h4>Filmmakers' Panel</h4>
<p>Panel discussion with the audience led by the feature film's filmmaker and producer.</p>
</li>
</ul>
</div>
<h4 class="whole-program"><a href="#" id="join-section">Join Echo IHRFF</a></h4>
</section>
<!-- Featured Filmmakers Section -->
<section class="featured-sect" id="featured-section">
</section>
<!-- Partners' Section -->
<section class="partner-sect" id="partners-section">
<h2 class="partner-heading">Partners</h2>
<hr class="under-line">
<div class="partner-images-sect">
<img src="./assets/images/amnesty-int1.png" alt="Amnesty International" />
<img src="./assets/images/humanrightswatch.jpg" alt="Human Rights Watch" />
<img class="last-img" src="./assets/images/savethechildren.png" alt="Save the Children" />
<img src="./assets/images/UNHCR1.png" alt="UNHCR" />
<img src="./assets/images/underourskin.png" alt="Under Our Skin" />
</div>
</section>
<!-- Footer Section -->
<section class="footer-sect">
<footer>
<img class="capstone-logo" src="./assets/images/capstone-logo-removebg-preview.png" alt="Logo" />
<div>
<p class="footer-content">2022 International Human Rights Film Festival. Some Rights Reserved.</p>
</div>
</footer>
</section>
<!-- Menu Overlay -->
<section class="menu-overlay">
<div id="menu-bar-overlay">
<div class="menu-icon">
<i class="fa-solid fa-xmark fa-2xl" id="close-menu-item"></i>
</div>
<nav class="menu-overlay-nav">
<ul>
<li class="menu-options"><a href="about.html">About</a></li>
<li class="menu-options"><a href="#programs-section">Program</a></li>
<li class="menu-options"><a href="#join-section">Join</a></li>
<li class="menu-options"><a href="#featured-section">Filmmakers</a></li>
<li class="menu-options"><a href="#partners-section">Partners</a></li>
</ul>
</nav>
</div>
</section>
<script src="scripts/index.js"></script>
</body>
</html>