-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
129 lines (129 loc) · 7.04 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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Manas Sarpatwar">
<meta name="author" content="Simonas Petkevicius">
<title>Sheffield Student's Union</title>
<meta name="viewport" content="width= device-width, initial-scale = 1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/smallMobile.css">
<link rel="stylesheet" href="css/largeScreen.css">
</head>
<body>
<header class="navigation-bar">
<div class="navMobDropdown">
<img id="hamburger" alt="dropdown menu button" src="images/Hamburger.png">
<div class="mobDropdown-content">
<a href="index.html">Home</a>
<a href="eating_options.html">Food @SU</a>
<a href="timeline.html">Typical Week in SU</a>
<a href="features.html">Other Places and Support</a>
<a href="contact.html">About Us</a>
</div>
</div>
<a href="index.html">
<img id="logo" alt="Students Union Logo" src="images/COM1008Logo.png">
</a>
<nav>
<div class="navDropdown">
<a href="#">More</a>
<div class="dropdown-content">
<a href="index.html">Home</a>
<a href="eating_options.html">Food @SU</a>
<a href="timeline.html">Typical Week in SU</a>
<a href="features.html">Other Places and Support</a>
</div>
</div>
<a href="contact.html">About</a>
</nav>
</header>
<div id="wrapperMain">
<div class="bg">
<p><span id="featured1">The #1 Students' Union in the UK since 2009.<br></span>
<span id="featured2">The complete Computer Science Undergraduate guide</span><br>
<span><a id="learnmore" href="#hangOut">Start Exploring</a></span>
</p>
</div>
<p id="hangOut">Why hang out at Students' Union?</p>
<div id="featuredIcons">
<div>
<h2>Great Place to Study</h2>
<a href="features.html#studyPlacesHeading"><img src="images/studying.png" alt="Round icon on studying" class = "centre"></a>
<p>There are plenty of study places to choose for solo and group learning.</p>
</div>
<div>
<h2>Great Place to Chill</h2>
<a href="features.html#suSocietiesHeading"><img src="images/leisure.png" alt="Round icon on leisure" class="centre"></a>
<p>Get a good relaxation time from the hard Computer Science studies. </p>
</div>
<div>
<h2>Place to Get Support</h2>
<a href="features.html#tagline"><img src="images/supportServices.png" alt="Round icon on support services" class="centre"></a>
<p>There are support services that will help you with any problem you might encounter.</p>
</div>
<div>
<h2>Great Place to Eat Out</h2>
<a href="eating_options.html"><img src="images/eatingOut.png" alt="Round icon on eating options" class="centre"></a>
<p>It does not matter if you are a vegan or omnivorous, you will find a place to eat.</p>
</div>
</div>
<div id="findUS">
<h2>How to Find Sheffield Student's Union</h2>
<!--The div element for the map -->
<div id="map">
<noscript>
<div id="noscript">
<p>*Image © 2018 Map Data: Google, DigitalGlobe<span><a href="https://www.google.com/intl/en-GB_US/help/terms_maps.html">Terms of use</a></span>*Best viewed with javascript on</p>
</div>
</noscript>
</div>
<script src="js/googleMap.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmaQud_gsQz8NOm1qYqeUbMMjRK_xHCpo&callback=initMap"></script>
</div>
<footer>
<!-- created flexbox for footer that it could be represented in column when screen is small and row when screen is big -->
<div id="flexSections">
<!-- first section of the footer others goes like second/third/fourth -->
<div id="footerFirst">
<h5> Icon Attribution: </h5>
<p><a href="https://www.iconfinder.com/iconsets/round-varieties
">Round Varieties</a> by Creaticca Ltd / <a href="http://creativecommons.org/licenses/by/3.0/">CC BY</a></p>
</div>
<div id="footerSecond">
<h5> Photo Attribution: </h5>
<a href="https://www.flickr.com/photos/electrolyte2006/6727441133/in/photostream/">SU Photo</a> by: <a href="https://www.simonbutlerphotography.com/">Simon Butler</a>
</div>
<div id="footerThird">
<h5> Social Media </h5>
<div id="socialMedia">
<a href="https://www.facebook.com/sheffieldstudentsunion"><img src="images/facebook.png" alt="facebook icon"></a>
<a href="https://twitter.com/SheffieldSU"><img src="images/twitter.png" alt="twitter icon"></a>
<a href="https://www.instagram.com/sheffieldsu/"><img src="images/instagram.png" alt="instagram icon"></a>
<a href="https://www.youtube.com/user/sheffieldunion"> <img src="images/youtube.png" alt="youtube icon"></a>
</div>
</div>
<div id="footerFourth">
<h5>Sitemap of the Website</h5>
<div id="sitemap">
<div class="sitemapColumn">
<a href="index.html">Home Page</a>
<a href="eating_options.html">Food Page</a>
<a href="timeline.html">Week in SU</a>
</div>
<div class="sitemapColumn">
<a href="contact.html">Contact Page</a>
<a href="features.html">Support&Features</a>
<a href="accessibility.html">Accessibility</a>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>