-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
160 lines (150 loc) · 7.33 KB
/
index.html
File metadata and controls
160 lines (150 loc) · 7.33 KB
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
<!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>NHSS</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/weeks.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/components/effect-cube/effect-cube.min.css" />
</head>
<body>
<section>
<nav>
<a href="">Home</a>
<a href="">Projects</a>
<a href="">Core Team</a>
</nav>
<div class="container">
<img src="images/nav_logo.png" alt="" class="logo">
<h1 class="main-title">Navrachana Higher Secondary School <br>
<strong>Rethink Plastic Project</strong>
</h1>
<img src="images/Desktop/img.png" class='img' alt="">
<img src="images/Desktop/rock.png" class='rock' alt="">
<img src="images/Desktop/garbage.png" class='garbage' alt="">
</div>
<div class="notes">
<div class="principal">
<h2>From The Principal's Desk</h2>
<img src="images/kashmira.jpg" alt="">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, molestiae! Commodi voluptatum eveniet eos quae quasi! Debitis maxime hic magni, nobis itaque amet eligendi voluptatum voluptas placeat sit, libero velit harum quos! Adipisci fugit mollitia eaque totam in culpa sunt nobis quo autem, eveniet nemo quod, harum vel commodi, illo ea impedit delectus quidem soluta et necessitatibus. Quo quas quod deserunt corporis voluptas consequatur. Laborum cum obcaecati accusantium nobis atque asperiores vel fugit ducimus nostrum blanditiis, repudiandae dignissimos, quis sunt dicta doloremque nam odit quas consequatur aspernatur beatae? Saepe aperiam at neque possimus quae soluta veniam necessitatibus minima sed ad.</p>
</div>
<div class="vice-principal">
<h2>From The Vice-Principal's Desk</h2>
<img src="images/kashmira.jpg" alt="">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique soluta eaque debitis iure cupiditate quod nostrum, tenetur magnam quia asperiores id consequatur pariatur incidunt voluptate, quam impedit dicta sit ratione nemo dolore autem? Autem explicabo voluptatem saepe quia tempore repellat dolorum porro omnis pariatur eum ratione nisi molestiae aut molestias itaque consequatur sed, cupiditate quod? Maiores distinctio porro iusto enim expedita necessitatibus aliquid eius voluptatum hic iure saepe, optio illo obcaecati vel omnis sequi odit corrupti eos alias assumenda. Nobis vero, quasi vel sapiente fugit expedita dignissimos earum amet inventore nostrum. Vitae a, sapiente itaque natus ratione nulla nemo eveniet.</p>
</div>
</div>
</section>
<div class="bufferObj" style="width: 100%; height:70vh;"></div>
<div class="SomethingWhichMaamHasToldUsToDoAndWeTotallyKnowHowToDo" style="width: 100vh; height: 100vh;"></div>
<div class="week week1">
<div class="head" onclick="week1();">
<div class="calender">
<div class="circle">1</div>
</div>
<div class="weekText">
Week1
</div>
</div>
<div class="weekBody w1" style="display: none; justify-content: center; grid-template-rows: auto 1fr;">
<div class="Week1Row1" style="display: grid; justify-items: center; grid-template-columns: 1fr 1fr">
<div class="weekText" style="font-size: 15px; line-height: 15px; text-align: right; display: block;">Navrachana
Higher Secondary School has taken part in the International Plastic Project. We kick-started the project
on<br>
Earth Day ie 22nd April. Over the past 50 years, world plastic production has doubled. The student
community has thus<br>
come together to spread awareness about the history of plastic, its various types, and the known yet
ignored facts<br>
pertaining to it. Our IT team has designed E-posters have for the same. A short film has been made where
we have<br>
categorized different types of plastics and we have emphasized more on the solutions and alternatives.
Tremendous<br>
research work was done to collect the correct information and facts. We also had group discussions, and
various<br>
activities so as to make this process more interesting and productive. With the guidance of our
teachers, the students<br>
made sure that the information reaches a large number of masses through social media.<br>
The first week encouraged us to reflect on what we should do to make our planet a more sustainable
place. The students<br>
actively participated in the first week and Navrachana will continue to contribute positively towards
the project</div>
<iframe style="width: 90%; height: 60vh; margin-left: 5%; margin-right: 5%;"
src="https://www.youtube-nocookie.com/embed/VscM2JnQm48" title="Week 1 Video" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/Week1/1.jpg"></div>
<div class="swiper-slide"><img src="images/Week1/2.jpg"></div>
<div class="swiper-slide"><img src="images/Week1/3.png"></div>
<div class="swiper-slide"><img src="images/Week1/4.jpg"></div>
<div class="swiper-slide"><img src="images/Week1/5.jpg"></div>
<div class="swiper-slide"><img src="images/Week1/6.jpg"></div>
<div class="swiper-slide"><img src="images/Week1/7.jpg"></div>
<div class="swiper-slide"><img src="images/Week1/8.jpg"></div>
<div class="swiper-slide"><img src="images/Week1/9.jpg"></div>
<div class="swiper-slide"><img src="images/Week1/10.jpg"></div>
<div class="swiper-slide"><img src="images/Week1/11.jpg"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
<div class="week week2">
<div class="head" onclick="week1();">
<div class="calender">
<div class="circle">2</div>
</div>
<div class="weekText">
Week2
</div>
</div>
</div>
<div class="week week3">
<div class="head" onclick="week1();">
<div class="calender">
<div class="circle">3</div>
</div>
<div class="weekText">
Week3
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>
<script src="js/script.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper-container', {
// Optional parameters
loop: true,
effect: 'coverflow',
grabCursor: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>
</body>
</html>