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"> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css--> <!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="../css/materialize.min.css" media="screen,projection"/> <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--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>About Innovation Club</title> <title>About Innovation Club</title>
@ -31,7 +35,7 @@
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" /> <meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" /> <meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
</head> </head>
<body> <main>
<nav class="grey darken-2" role="navigation"> <nav class="grey darken-2" role="navigation">
<div class="nav-wrapper container"> <div class="nav-wrapper container">
<a id="logo-container" href="" class="brand-logo"> <img class="responsive-img" src="../logo.png" width="100"> </a> <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="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/materialize.min.js"></script>
<script type="text/javascript" src="../js/SideNav.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> </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--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Innovation Club donation page</title> <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--> <!--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="57x57" href="../apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../apple-touch-icon-114x114.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" /> <meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
</head> </head>
<body> <main>
<nav class="grey darken-2" role="navigation"> <nav class="grey darken-2" role="navigation">
<div class="nav-wrapper container"> <div class="nav-wrapper container">
<a id="logo-container" href="" class="brand-logo"> <img class="responsive-img" src="../logo.png" width="100"> </a> <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="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/materialize.min.js"></script>
<script type="text/javascript" src="../js/SideNav.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> </html>

33
index.html
View file

@ -7,6 +7,8 @@
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Import icons--> <!--Import icons-->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <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--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Add the icon to the tab and add icons for all formats--> <!--Add the icon to the tab and add icons for all formats-->
@ -33,7 +35,7 @@
</head> </head>
<title> Innovation Club </title> <title> Innovation Club </title>
<body> <main>
<nav class="grey darken-2" role="navigation"> <nav class="grey darken-2" role="navigation">
<div class="nav-wrapper container"> <div class="nav-wrapper container">
<a id="logo-container" href="" class="brand-logo"> <img class="responsive-img" src="logo.png" width="100"> </a> <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="col s12 m4">
<div class="icon-block"> <div class="icon-block">
<h2 class="center yellow-text text-darken-1"><i class="material-icons">flash_on</i></h2> <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>
</div> </div>
@ -110,26 +112,23 @@
</div> </div>
</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"> <footer class="page-footer grey darken-2">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col l6 s12"> <div class="col s6">
<h5 class="white-text">Innovation club</h5> <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> <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>
<div class="col l3 s12"> <div class="col s6 right-align">
<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">
<h5 class="white-text">Connect</h5> <h5 class="white-text">Connect</h5>
<ul> <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.instagram.com/iclubwmu/?hl=en">Instagram <i class="fa fa-instagram"></i> </a></li>
@ -146,11 +145,5 @@
</div> </div>
</div> </div>
</footer> </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> </html>