-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (115 loc) · 6.01 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Elluru Sree Harshini and Lee Jia Ying Jess">
<meta name="description" content="Contact">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<title>Scitastic</title>
<link rel="icon" href="images/icon.png">
<!--External Style Sheets-->
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<!--Navigation Bar-->
<nav class="navbar navbar-light">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><em>Sci</em>statics</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="discover_page1.html">Discover<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="discover_page1.html">Topic 1-1</a></li>
<li><a href="discover_page2.html">Topic 1-2</a></li>
</ul>
</li>
<li><a href="games.html">Games</a></li>
<li><a href="leader_board.html">Leaderboard</a></li>
<li><a href="contact_us.html">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html"><span class="glyphicon glyphicon-user" id="account_pic"></span></a>
<li><a href="account.html"><span id="navbar-username"></span></a></li>
</ul>
</li>
</div>
</nav>
<!--Get started button-->
<div class="ctn">
<img src="images/indexpage.jpg" class="img-fluid" alt="Responsive image" style="width: 100%;">
<a class="btn btn-danger" href="create_account.html" role="button">Get Started now</a>
<!--Content (1st strip)-->
<div class="container-fluid text-center ">
<h2 style="font-family: 'Oswald';font-size: 40px">Creative, Innovative Learning in Scistatic</h2>
<h4>SCISTASTIC aims to offer a platform for students to be able to explore the world of science.</h4>
<br>
<div class="row">
<div class="col-sm-4">
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_syatpott.json" background="transparent" speed="1" style="width: 100px; height: 100px; margin: 0 auto;" loop autoplay></lottie-player>
<h4 style ="font-family: 'Oswald';font-size: 30px">INTERACTIVE</h4>
<p>Our games are explicitly designed with educational purposes, which aims to help our users learn science topics is a more fun way. </p>
</div>
<div class="col-sm-4">
<lottie-player src="https://assets9.lottiefiles.com/packages/lf20_8autcbbt.json" background="transparent" speed="1" style="width: 100px; height: 100px;margin: 0 auto;" loop autoplay></lottie-player>
<h4 style="font-family: 'Oswald';font-size: 30px">SIMPLE</h4>
<p>The features in our website is made easy for young learners to log in easily by using a combination of pictures. </p>
</div>
<div class="col-sm-4">
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_8elcqxrg.json" background="transparent" speed="1" style="width: 100px; height: 100px;margin: 0 auto;" loop autoplay></lottie-player>
<h4 style="font-family: 'Oswald';;font-size: 30px">PASSION</h4>
<p>As the creators of SCISTASTIC, our main goal is to help our users learn and do better in Science. We will continue to improvise and do better for the learning of our users.</p>
</div>
</div>
</div>
</div>
</div>
<!--Content (2nd strip)-->
<!--Headings-->
<div class="container-fluid text-center bg-grey">
<div class="inner-ctn">
<h2 class="text-left"><strong><em>Sci</em>statics anywhere,<br> <em>Sci</em>statics everywhere.</strong></h2>
<h4 class="text-left">Any device, secured. 100% free.</h4>
</div>
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/classdojo-accesible.jpg" style="height: 100px; width: 100px;">
<p>Works on iOS, Android, Kindle Fire, and on any computer</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/classdojo-privacy.jpg" style="height: 100px; width: 100px;">
<p>Built with privacy by design.</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/classdojo-free.jpg" style="height: 100px; width: 100px;">
<p>Scistatic is free for anyone, everyone.</p>
</div>
</div>
</div>
</div>
<!--Content(3rd Strip)-->
<div class = "footer-ctn">
<br>
<h3 class="text-center"><strong>Join us and explore more about the world of science!</strong></h3>
<img src="images/index-footer.jpg" class="img-fluid" alt="Responsive image" style="width: 100%;">
</div>
<!--Footer-->
<div class ="footer">
<br>Copyright © 2022 Lee Jia Ying Jess & Elluru Sree Harshini
<br>- All Rights Reserved.
</div>
<!--JavaScripts-->
<script src="js/account.js"></script>
<script src="js/script.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</body>
</html>