-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
115 lines (79 loc) · 4.45 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
<!-- index -->
<!doctype html>
<html lang="en" style="height:100%">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!--CSS Link-->
<link rel="stylesheet" type="text/css" href="./static/styles.css">
<!-- Animate Link -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<title>2021 Olympics Data</title>
<link rel="shortcut icon" type="image/jpg" href="./static/olympic_favicon.png"/>
</head>
<!-- Jumbotron Banner -->
<body class="background d-flex flex-column h-100">
<div class="jumbotron jumbotron-fluid" style="background-color: rgb(28, 37, 153); color: white; padding-top: 0px; padding-bottom: 2px; text-align: center;">
<div class="container">
<h1 class="display-4" style="color: rgb(252, 208, 88)"> <img src="./static/olympic_logo.png" alt="logo" width="100"> 2021 Olympics</h1>
<span class="animated bounce"></span>
</div>
</div>
<div class="container-fluid">
<div class= "row">
<div class="col-12 col-md-12 col-lg-6">
<div class="jumbotron jumbotron-fluid" style="color: rgb(255, 255, 255); margin-top: 5%; margin-left: 10%; margin-bottom: 11%; text-align: left;">
<div class="container">
<h2 class="display-4">Olympic Games Data </h2>
<h4><i>Click an icon below to explore the data</i></h4>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-lg-6">
<!-- Leave this column empty -->
</div>
<div class="row justify-content-md-center">
<div class="col-6-center col-sm-6 col-md-3 col-lg-3">
<a style="text-decoration: none;" href="athletes.html">
<h4 class="landing">Athletes</h4>
</a>
<a href="athletes.html">
<img class="panel" src="./static/athlete.png" alt = "athletes" >
</a>
</div>
<div class="col-6-center col-sm-6 col-md-3 col-lg-3">
<a style="text-decoration: none;" href="medals.html">
<h4 class="landing">Medals</h4>
</a>
<a href="medals.html">
<img class="panel" src="./static/medal.png" alt="medals">
</a>
</div>
<div class="col-6-center col-sm-6 col-md-3 col-lg-3">
<a style="text-decoration: none;" href="facts.html">
<h4 class="landing">Fun Facts</h4>
</a>
<a href="facts.html">
<img class="panel" src="./static/brain.png" alt="fun facts">
</a>
</div>
</div>
</div> <!--end row-->
</div> <!--end container-->
<!-- Copyright Information -->
<!-- <div class="container footer navbar-fixed-bottom">
Icons made by <a href="https://www.flaticon.com/authors/photo3idea-studio" title="photo3idea_studio">photo3idea_studio</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</div> -->
<!-- JavaScript: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<main class="flex-fill"></main>
<footer class="footer">
<div class="container-fluid opacity-50" style="background-color:rgb(0, 0, 0)">
<div style="color:rgb(255, 255, 255); text-align:center"><b>CREATED BY:</b> <a href="https://github.com/brbbrb" style="color:rgb(81, 166, 177)">Bradley Barker</a> • <a href="https://github.com/Connelito" style="color:rgb(253, 178, 96)">Darryl Connelly II</a> • <a href="https://github.com/uchenna23"style="color:rgb(114, 180, 139)">Uchenna Nwagbara</a> • <a href="https://github.com/Yingying-Li-Data"style="color:rgb(242, 97, 94)">Yingying Li</a></div>
</div>
</footer>
</body>
</html>