mrumel/WMU-Iclub-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sticky footer now

Browse source 
Doesn't work in ie, so that may be a problem. But it seems to work in all of the other browsers so that's fine.
Also added all of the social media icons to the footers on all the pages
This commit is contained in:
Maxunm 2017-06-13 10:59:10 -04:00
parent 9b0a5533d8
commit 4cd3a8b6ef
4 changed files with 106 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

34
about/index.html
View file

@ -5,6 +5,10 @@
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="../css/materialize.min.css" media="screen,projection"/>
<!--Import icons-->
<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
<!--My css file-->
<link rel="stylesheet" href="../css/keepFoot.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>About Innovation Club</title>
@ -31,7 +35,7 @@
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
</head>
<body>
<main>
<nav class="grey darken-2" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="" class="brand-logo"> <img class="responsive-img" src="../logo.png" width="100"> </a>
@ -56,5 +60,31 @@
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/materialize.min.js"></script>
<script type="text/javascript" src="../js/SideNav.js"></script>
</body>
</main>
<footer class="page-footer grey darken-2">
<div class="container">
<div class="row">
<div class="col s6">
<h5 class="white-text">Innovation club</h5>
<p class="grey-text text-lighten-4">We are a growing club that strives to provide you with the best options for bringing your ideas into the real world. Share this page to help us out greatly!</p>
</div>
<div class="col s6 right-align">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="https://www.instagram.com/iclubwmu/?hl=en">Instagram <i class="fa fa-instagram"></i> </a></li>
<li><a class="white-text" href="https://www.linkedin.com/in/innovation-club-b71903118/">LinkedIn <i class="fa fa-linkedin-square"></i> </a></li>
<li><a class="white-text" href="https://www.facebook.com/people/Innovation-Club/100010691314678">Facebook <i class="fa fa-facebook-official"></i> </a></li>
<li><a class="white-text" href="https://twitter.com/iclubwmu">Twitter <i class="fa fa-twitter-square"></i> </a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made with <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
</html>

9
css/keepFoot.css Normal file
View file

@ -0,0 +1,9 @@
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}

35
donate/index.html
View file

@ -8,7 +8,10 @@
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Innovation Club donation page</title>
<!--Import icons-->
<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
<!--My css file-->
<link rel="stylesheet" href="../css/keepFoot.css">
<!--Add the icon to the tab and add icons for all formats-->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../apple-touch-icon-114x114.png" />
@ -32,7 +35,7 @@
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
</head>
<body>
<main>
<nav class="grey darken-2" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="" class="brand-logo"> <img class="responsive-img" src="../logo.png" width="100"> </a>
@ -55,5 +58,31 @@
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/materialize.min.js"></script>
<script type="text/javascript" src="../js/SideNav.js"></script>
</body>
</main>
<footer class="page-footer grey darken-2">
<div class="container">
<div class="row">
<div class="col s6">
<h5 class="white-text">Innovation club</h5>
<p class="grey-text text-lighten-4">We are a growing club that strives to provide you with the best options for bringing your ideas into the real world. Share this page to help us out greatly!</p>
</div>
<div class="col s6 right-align">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="https://www.instagram.com/iclubwmu/?hl=en">Instagram <i class="fa fa-instagram"></i> </a></li>
<li><a class="white-text" href="https://www.linkedin.com/in/innovation-club-b71903118/">LinkedIn <i class="fa fa-linkedin-square"></i> </a></li>
<li><a class="white-text" href="https://www.facebook.com/people/Innovation-Club/100010691314678">Facebook <i class="fa fa-facebook-official"></i> </a></li>
<li><a class="white-text" href="https://twitter.com/iclubwmu">Twitter <i class="fa fa-twitter-square"></i> </a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made with <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
</html>

33
index.html
View file

@ -7,6 +7,8 @@
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Import icons-->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<!--My css file-->
<link rel="stylesheet" href="css/keepFoot.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Add the icon to the tab and add icons for all formats-->
@ -33,7 +35,7 @@
</head>
<title> Innovation Club </title>
<body>
<main>
<nav class="grey darken-2" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="" class="brand-logo"> <img class="responsive-img" src="logo.png" width="100"> </a>
@ -75,9 +77,9 @@
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center yellow-text text-darken-1"><i class="material-icons">flash_on</i></h2>
<h5 class="center">Something about fast?</h5>
<h5 class="center">Rapid prototyping (?)</h5>
<p class="light">This is placeholder text for when we have something to put here</p>
<p class="light">With rapid prototyping we can have a physical prototype in record time. This will allow you to go through as many iterations to make your idea perfect.</p>
</div>
</div>
@ -110,26 +112,23 @@
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/SideNav.js"></script>
</main>
<footer class="page-footer grey darken-2">
<div class="container">
<div class="row">
<div class="col l6 s12">
<div class="col s6">
<h5 class="white-text">Innovation club</h5>
<p class="grey-text text-lighten-4">We are a growing club that strives to provide you with the best options for bringing your ideas into the real world. Share this page to help us out greatly!</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<div class="col s6 right-align">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="https://www.instagram.com/iclubwmu/?hl=en">Instagram <i class="fa fa-instagram"></i> </a></li>
@ -146,11 +145,5 @@
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/SideNav.js"></script>
</body>
</html>