Skip to content

Instantly share code, notes, and snippets.

@guillaumecabanel

guillaumecabanel/index.html

Created August 21, 2017 13:53
Show Gist options
  • Save guillaumecabanel/f574ad7322b51562f8078031caa912ad to your computer and use it in GitHub Desktop.
Save guillaumecabanel/f574ad7322b51562f8078031caa912ad to your computer and use it in GitHub Desktop.
Download ZIP
Sticky side map
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="col m9">
<h2>Les plats</h2>
<div class="row">
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://lorempixel.com/640/480/food">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://lorempixel.com/640/480/food">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://lorempixel.com/640/480/food">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://lorempixel.com/640/480/food">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://lorempixel.com/640/480/food">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://lorempixel.com/640/480/food">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
</div>
<div class="col m3">
<h1>&nbsp;</h1>
<div class="sticky">
<img id="map" src="http://via.placeholder.com/477x600">
</div>
</div>
</div>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
</body>
</html>
Raw
style.css
.sticky{
position: relative;
height: 100vh;
}
#map{
position: sticky;
top: 70px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment