Created
April 29, 2017 23:39
-
-
Save edprince/ac966e09fd4665e7dfadbad991c6a3d0 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/lagiwizebo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css" rel="stylesheet" type="text/css" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet" type="text/css" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> | |
| <link href="https://fonts.googleapis.com/css?family=Lato:100, 300, 400, 700" rel="stylesheet"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| #donwhillans { | |
| width: 100%; | |
| height: 300px; | |
| background-size: cover; | |
| background-image: url('http://www.donwhillanshut.co.uk/image/263'); | |
| position: relative; | |
| margin-bottom: .5em; | |
| } | |
| .blue.logo { | |
| color: #008cba; | |
| } | |
| .logo { | |
| line-height: 0.8em; | |
| //font-weight: bold; | |
| } | |
| html { | |
| font-family: 'Lato', sans-serif; | |
| //color: #a0a0a0; | |
| } | |
| .title { | |
| line-height: .9; | |
| margin-bottom: 0; | |
| font-weight: 700; | |
| } | |
| nav { | |
| padding: .5em; | |
| } | |
| span { | |
| font-family: 'Lato', sans-serif; | |
| color: #484848; | |
| } | |
| .white { | |
| color: white; | |
| } | |
| i { | |
| color: #a6a7a8; | |
| font-size: 20px; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Lato', sans-serif; | |
| color: #484848; | |
| } | |
| nav { | |
| color: #484848; | |
| font-family: 'Lato', sans-serif; | |
| } | |
| nav span { | |
| margin-right: 1em; | |
| } | |
| .italic { | |
| font-style: italic; | |
| } | |
| .bold { | |
| font-weight: 700; | |
| } | |
| .center { | |
| margin: 0 auto; | |
| display: block; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| nav.border { | |
| border-top: solid 1px #e7e7e7; | |
| border-bottom: solid 1px #e7e7e7; | |
| padding-top: .5em; | |
| padding-bottom: .5em; | |
| text-align: center; | |
| } | |
| nav.margin-top { | |
| margin-top: 1em; | |
| margin-bottom: 1em; | |
| } | |
| p, li { | |
| line-height: 1.8em; | |
| color: #484848; | |
| font-family: 'Lato', sans-serif; | |
| text-align: justify; | |
| } | |
| .static { | |
| position: absolute; | |
| } | |
| .static.bottom-left { | |
| background-color: rgba(0,0,0,.7); | |
| color: white; | |
| padding: 1em 2em 1em 2em; | |
| } | |
| button { | |
| margin-top: 1em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class='row'> | |
| <div class='large-12 columns'> | |
| <h1 class='title'>mountain huts</h1> | |
| <span class='logo blue'>Your home in the hills</span> | |
| </div> | |
| </nav> | |
| <div class='container'> | |
| <div id='donwhillans'> | |
| <div class='row'> | |
| <div class='small-6 medium-6 large-4 columns'> | |
| <div class='static bottom-left row'> | |
| <span class='white'><b>£7</b> per night</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class='text-center'> | |
| <span>○</span> | |
| <span>○</span> | |
| <span>●</span> | |
| <span>○</span> | |
| </nav> | |
| <div class='row'> | |
| <div class='large-12 columns'> | |
| <h2>Don Whillans Memorial Hut</h2> | |
| <span class='italic'>Peak District - The Roaches</span> | |
| </div> | |
| </div> | |
| <div class='row'> | |
| <div class='columns'> | |
| <nav class='margin-top border'> | |
| <span>15 beds</span> | |
| <span>showering facilities</span> | |
| <span>electricity</span> | |
| <span>kitchen</span> | |
| </nav> | |
| </div> | |
| </div> | |
| <div class='row'> | |
| <div class='large-12 columns'> | |
| <h3 class='bold'>About the hut</h3> | |
| <p>The Don Whillans hut is located in the Peak District | |
| Roaches area, with easy access to the crags, and the pub. The Don Whillans hut is located in the Peak District | |
| Roaches area, with easy access to the crags, and the pub. The Don Whillans hut is located in the Peak District | |
| Roaches area, with easy access to the crags, and the pub.</p> | |
| <h3 class='bold'>Hut rules</h3> | |
| <ul> | |
| <li>Check out 10am on final day</li> | |
| <li>Hut must be left as found</li> | |
| </ul> | |
| <span>Contact: 07929014171</span> | |
| </div> | |
| <button class='center'>Go to website to book</button> | |
| </div> | |
| </div> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css" rel="stylesheet" type="text/css" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet" type="text/css" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"><\/script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"><\/script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"><\/script> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> | |
| <link href="https://fonts.googleapis.com/css?family=Lato:100, 300, 400, 700" rel="stylesheet"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <nav class='row'> | |
| <div class='large-12 columns'> | |
| <h1 class='title'>mountain huts</h1> | |
| <span class='logo blue'>Your home in the hills</span> | |
| </div> | |
| </nav> | |
| <div class='container'> | |
| <div id='donwhillans'> | |
| <div class='row'> | |
| <div class='small-6 medium-6 large-4 columns'> | |
| <div class='static bottom-left row'> | |
| <span class='white'><b>£7</b> per night</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class='text-center'> | |
| <span>○</span> | |
| <span>○</span> | |
| <span>●</span> | |
| <span>○</span> | |
| </nav> | |
| <div class='row'> | |
| <div class='large-12 columns'> | |
| <h2>Don Whillans Memorial Hut</h2> | |
| <span class='italic'>Peak District - The Roaches</span> | |
| </div> | |
| </div> | |
| <div class='row'> | |
| <div class='columns'> | |
| <nav class='margin-top border'> | |
| <span>15 beds</span> | |
| <span>showering facilities</span> | |
| <span>electricity</span> | |
| <span>kitchen</span> | |
| </nav> | |
| </div> | |
| </div> | |
| <div class='row'> | |
| <div class='large-12 columns'> | |
| <h3 class='bold'>About the hut</h3> | |
| <p>The Don Whillans hut is located in the Peak District | |
| Roaches area, with easy access to the crags, and the pub. The Don Whillans hut is located in the Peak District | |
| Roaches area, with easy access to the crags, and the pub. The Don Whillans hut is located in the Peak District | |
| Roaches area, with easy access to the crags, and the pub.</p> | |
| <h3 class='bold'>Hut rules</h3> | |
| <ul> | |
| <li>Check out 10am on final day</li> | |
| <li>Hut must be left as found</li> | |
| </ul> | |
| <span>Contact: 07929014171</span> | |
| </div> | |
| <button class='center'>Go to website to book</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">#donwhillans { | |
| width: 100%; | |
| height: 300px; | |
| background-size: cover; | |
| background-image: url('http://www.donwhillanshut.co.uk/image/263'); | |
| position: relative; | |
| margin-bottom: .5em; | |
| } | |
| .blue.logo { | |
| color: #008cba; | |
| } | |
| .logo { | |
| line-height: 0.8em; | |
| //font-weight: bold; | |
| } | |
| html { | |
| font-family: 'Lato', sans-serif; | |
| //color: #a0a0a0; | |
| } | |
| .title { | |
| line-height: .9; | |
| margin-bottom: 0; | |
| font-weight: 700; | |
| } | |
| nav { | |
| padding: .5em; | |
| } | |
| span { | |
| font-family: 'Lato', sans-serif; | |
| color: #484848; | |
| } | |
| .white { | |
| color: white; | |
| } | |
| i { | |
| color: #a6a7a8; | |
| font-size: 20px; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Lato', sans-serif; | |
| color: #484848; | |
| } | |
| nav { | |
| color: #484848; | |
| font-family: 'Lato', sans-serif; | |
| } | |
| nav span { | |
| margin-right: 1em; | |
| } | |
| .italic { | |
| font-style: italic; | |
| } | |
| .bold { | |
| font-weight: 700; | |
| } | |
| .center { | |
| margin: 0 auto; | |
| display: block; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| nav.border { | |
| border-top: solid 1px #e7e7e7; | |
| border-bottom: solid 1px #e7e7e7; | |
| padding-top: .5em; | |
| padding-bottom: .5em; | |
| text-align: center; | |
| } | |
| nav.margin-top { | |
| margin-top: 1em; | |
| margin-bottom: 1em; | |
| } | |
| p, li { | |
| line-height: 1.8em; | |
| color: #484848; | |
| font-family: 'Lato', sans-serif; | |
| text-align: justify; | |
| } | |
| .static { | |
| position: absolute; | |
| } | |
| .static.bottom-left { | |
| background-color: rgba(0,0,0,.7); | |
| color: white; | |
| padding: 1em 2em 1em 2em; | |
| } | |
| button { | |
| margin-top: 1em; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #donwhillans { | |
| width: 100%; | |
| height: 300px; | |
| background-size: cover; | |
| background-image: url('http://www.donwhillanshut.co.uk/image/263'); | |
| position: relative; | |
| margin-bottom: .5em; | |
| } | |
| .blue.logo { | |
| color: #008cba; | |
| } | |
| .logo { | |
| line-height: 0.8em; | |
| //font-weight: bold; | |
| } | |
| html { | |
| font-family: 'Lato', sans-serif; | |
| //color: #a0a0a0; | |
| } | |
| .title { | |
| line-height: .9; | |
| margin-bottom: 0; | |
| font-weight: 700; | |
| } | |
| nav { | |
| padding: .5em; | |
| } | |
| span { | |
| font-family: 'Lato', sans-serif; | |
| color: #484848; | |
| } | |
| .white { | |
| color: white; | |
| } | |
| i { | |
| color: #a6a7a8; | |
| font-size: 20px; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Lato', sans-serif; | |
| color: #484848; | |
| } | |
| nav { | |
| color: #484848; | |
| font-family: 'Lato', sans-serif; | |
| } | |
| nav span { | |
| margin-right: 1em; | |
| } | |
| .italic { | |
| font-style: italic; | |
| } | |
| .bold { | |
| font-weight: 700; | |
| } | |
| .center { | |
| margin: 0 auto; | |
| display: block; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| nav.border { | |
| border-top: solid 1px #e7e7e7; | |
| border-bottom: solid 1px #e7e7e7; | |
| padding-top: .5em; | |
| padding-bottom: .5em; | |
| text-align: center; | |
| } | |
| nav.margin-top { | |
| margin-top: 1em; | |
| margin-bottom: 1em; | |
| } | |
| p, li { | |
| line-height: 1.8em; | |
| color: #484848; | |
| font-family: 'Lato', sans-serif; | |
| text-align: justify; | |
| } | |
| .static { | |
| position: absolute; | |
| } | |
| .static.bottom-left { | |
| background-color: rgba(0,0,0,.7); | |
| color: white; | |
| padding: 1em 2em 1em 2em; | |
| } | |
| button { | |
| margin-top: 1em; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment