Added some parallax to the footer - the footer now gets revealed as you scroll down instead of moving with the page
This commit is contained in:
parent
1904e631e6
commit
4abc629afa
@ -10,6 +10,7 @@
|
||||
<script src="/assets/scripts/varrock.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<header id="header-box">
|
||||
<div id="header-logo">
|
||||
<h1>Bit Goblin</h1>
|
||||
@ -32,6 +33,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer id="footer">
|
||||
<div class="row">
|
||||
|
@ -5,6 +5,7 @@ body
|
||||
font-family: "Gill Sans", sans-serif
|
||||
font-size: 2rem
|
||||
margin: 0
|
||||
padding-bottom: 125px
|
||||
|
||||
a
|
||||
color: #1e76d1
|
||||
@ -21,8 +22,19 @@ hr
|
||||
.u-text-center
|
||||
text-align: center
|
||||
|
||||
// this wrapper is only used to hide the footer
|
||||
#wrapper
|
||||
position: relative
|
||||
z-index: 10
|
||||
width: 100%
|
||||
height: 100%
|
||||
margin: 0
|
||||
padding: 0
|
||||
background: white
|
||||
|
||||
#header-box
|
||||
position: relative
|
||||
z-index: 2
|
||||
height: 500px
|
||||
background:
|
||||
image: url(/assets/images/bg-banner.jpg)
|
||||
@ -113,7 +125,12 @@ hr
|
||||
// footer section
|
||||
|
||||
#footer
|
||||
position: fixed
|
||||
z-index: -1
|
||||
bottom: 0
|
||||
width: 100%
|
||||
margin-top: 25px
|
||||
padding-top: 15px
|
||||
background: #212121
|
||||
border-top: 2px solid #999
|
||||
color: white
|
||||
|
Loading…
Reference in New Issue
Block a user