Created
April 9, 2015 23:35
-
-
Save zachdrago/c244aaa84c3a1c1da849 to your computer and use it in GitHub Desktop.
Riester Release Pool Party - source http://jsbin.com/rufocu
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> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background: #F7F7F7; | |
| } | |
| h1 { | |
| float: left; | |
| font-size: 32px; | |
| font-family: Gotham-Book; | |
| font-weight: 100; | |
| } | |
| hr { | |
| width: 90%; | |
| float: right; | |
| display: inline-block; | |
| margin-top: 22px; | |
| margin-left: 10px; | |
| margin-right: auto; | |
| border-style: solid; | |
| border-width: .5px; | |
| } | |
| .clientHeader { | |
| width: 100%; | |
| max-height: 645px; | |
| background: #8DB0A6 URL('http://i.imgur.com/NBkHpVC.gif'); | |
| background-position: bottom; | |
| background-size: 100%; | |
| background-repeat: no-repeat; | |
| } | |
| .stackBar { | |
| height: 40px; | |
| width: 100%; | |
| background: #F8F8F8 url('http://releasevip.com/assets/img/bg-upcoming-events.png') repeat top left; | |
| background-attachment: scroll; | |
| background-color: #F8F8F8; | |
| border-top: 3px solid #4A4A4A; | |
| border-bottom: thin solid #4A4A4A; | |
| } | |
| .clientLogo { | |
| position: absolute; | |
| top: 0; | |
| left: 60px; | |
| } | |
| .clientLogo img { | |
| width: 170px; | |
| } | |
| .about { | |
| font-family: Gotham-Book; | |
| font-size: 11pt; | |
| padding: 0px 0 0 8px; | |
| overflow: hidden; | |
| } | |
| .about li { | |
| /* width: 160px; */ | |
| float: left; | |
| vertical-align: middle; | |
| list-style: none; | |
| text-decoration: none; | |
| border-right: thin solid #92DFEF; | |
| color: #4A4A4A; | |
| /* margin-left: 40px; */ | |
| background-color: rgba(93, 212, 236, .7); | |
| line-height: 36px | |
| } | |
| .about li:hover { | |
| background-color: #26BDDE; | |
| } | |
| .about li a { | |
| text-decoration: none; | |
| color: #fff; | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| } | |
| .about li a:hover { | |
| color: #fff; | |
| cursor: auto; | |
| } | |
| .updates { | |
| width: 90%; | |
| height: 500px; | |
| overflow: hidden; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .upcoming { | |
| height: 420px; | |
| width: 550px; | |
| padding-top: 70px; | |
| /* border: thin solid black; | |
| background: #ccc; */ | |
| float: right; | |
| position: relative; | |
| } | |
| .cabana { | |
| height: 420px; | |
| width: 550px; | |
| padding-top: 70px; | |
| /* border: thin solid black; | |
| background: #ccc; */ | |
| float: left; | |
| position: relative; | |
| } | |
| .rent { | |
| width: 150px; | |
| height: 40px; | |
| position: absolute; | |
| margin-left: -75px; | |
| left: 50%; | |
| position: relative; | |
| background-color: #29CAE9; | |
| font-family: Gotham-Book; | |
| font-size: 14px; | |
| font-weight: bold; | |
| color: #fff; | |
| text-align: center; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .rent:hover { | |
| background-color: #F48C34; | |
| transition: .2s; | |
| } | |
| .social { | |
| width: 90%; | |
| padding-top: 10px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="clientHeader"> | |
| <img src="http://releasevip.com/assets/img/slider/Summer-Pool-Party-1800x649.jpg" style="width: 98%; visibility:hidden;" /> | |
| </div> | |
| <div class="clientLogo"> | |
| <a href="http://releasevip.com"> | |
| <img src="http://releasevip.com/assets/img/logo-release@2X.png" /> | |
| </a> | |
| </div> | |
| <div class="stackBar"> | |
| <ul class="about"> | |
| <li><a href="#">kale chips</a></li> | |
| <li><a href="#">chambray pork belly</a></li> | |
| <li><a href="#">denim swag</a></li> | |
| <li><a href="#">pop-up fap butcher</a></li> | |
| <li><a href="#">umami </a></li> | |
| <li style=margin-right: 40px;><a href="#">vlog</a></li> | |
| </ul> | |
| </div> | |
| <div class="updates"> | |
| <div class="upcoming"> | |
| <h1> | |
| Upcoming | |
| </h1> | |
| <hr style="width: 370px;"></hr> | |
| <img src="http://releasevip.com/assets/img/reviveSundays/reviveBanner.jpg" style="width: 100%; margin-top: 30px; margin-bottom: 10px;" /> | |
| <img src="https://stackla-web-assets.s3.amazonaws.com/riester-parkcity.stackla.com/media/images/customimages/2015-04/1428619587/Screen%20Shot%202015-04-09%20at%203.41.59%20PM.png" style="width: 100%; margin-top: 10px; margin-bottom: 20px;" /> | |
| <button class="rent">View All Events</button> | |
| </div> | |
| <div class="cabana"> | |
| <h1> | |
| Cabana/Canopy Daybed Rental | |
| </h1> | |
| <hr style="width: 35px;"></hr> | |
| <img src="http://releasevip.com/assets/img/cabanas.jpg" style="width: 100%; margin-top: 40px; margin-bottom: 20px;" /> | |
| <button class="rent">Cabana Rentals</button> | |
| </div> | |
| </div> | |
| <div class="updates" style="height: 80px; padding-top: 35px;"> | |
| <h1> | |
| Social | |
| </h1> | |
| <hr style=""></hr> | |
| </div> | |
| <div class="social"> | |
| <div class='stacklafw' data-id='3720' data-hash='5526e0739c36b' data-ct='' data-alias='riester-parkcity.stackla.com' data-ttl="30" ></div> | |
| <script type='text/javascript'> | |
| (function (d, id) { | |
| if (d.getElementById(id)) return; | |
| var t = d.createElement('script'); | |
| t.type = 'text/javascript'; | |
| t.src = '//assetscdn.stackla.com/media/js/widget/fluid-embed.js'; | |
| t.id = id; | |
| (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(t); | |
| }(document, 'stacklafw-js')); | |
| </script> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">* { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background: #F7F7F7; | |
| } | |
| h1 { | |
| float: left; | |
| font-size: 32px; | |
| font-family: Gotham-Book; | |
| font-weight: 100; | |
| } | |
| hr { | |
| width: 90%; | |
| float: right; | |
| display: inline-block; | |
| margin-top: 22px; | |
| margin-left: 10px; | |
| margin-right: auto; | |
| border-style: solid; | |
| border-width: .5px; | |
| } | |
| .clientHeader { | |
| width: 100%; | |
| max-height: 645px; | |
| background: #8DB0A6 URL('http://i.imgur.com/NBkHpVC.gif'); | |
| background-position: bottom; | |
| background-size: 100%; | |
| background-repeat: no-repeat; | |
| } | |
| .stackBar { | |
| height: 40px; | |
| width: 100%; | |
| background: #F8F8F8 url('http://releasevip.com/assets/img/bg-upcoming-events.png') repeat top left; | |
| background-attachment: scroll; | |
| background-color: #F8F8F8; | |
| border-top: 3px solid #4A4A4A; | |
| border-bottom: thin solid #4A4A4A; | |
| } | |
| .clientLogo { | |
| position: absolute; | |
| top: 0; | |
| left: 60px; | |
| } | |
| .clientLogo img { | |
| width: 170px; | |
| } | |
| .about { | |
| font-family: Gotham-Book; | |
| font-size: 11pt; | |
| padding: 0px 0 0 8px; | |
| overflow: hidden; | |
| } | |
| .about li { | |
| /* width: 160px; */ | |
| float: left; | |
| vertical-align: middle; | |
| list-style: none; | |
| text-decoration: none; | |
| border-right: thin solid #92DFEF; | |
| color: #4A4A4A; | |
| /* margin-left: 40px; */ | |
| background-color: rgba(93, 212, 236, .7); | |
| line-height: 36px | |
| } | |
| .about li:hover { | |
| background-color: #26BDDE; | |
| } | |
| .about li a { | |
| text-decoration: none; | |
| color: #fff; | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| } | |
| .about li a:hover { | |
| color: #fff; | |
| cursor: auto; | |
| } | |
| .updates { | |
| width: 90%; | |
| height: 500px; | |
| overflow: hidden; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .upcoming { | |
| height: 420px; | |
| width: 550px; | |
| padding-top: 70px; | |
| /* border: thin solid black; | |
| background: #ccc; */ | |
| float: right; | |
| position: relative; | |
| } | |
| .cabana { | |
| height: 420px; | |
| width: 550px; | |
| padding-top: 70px; | |
| /* border: thin solid black; | |
| background: #ccc; */ | |
| float: left; | |
| position: relative; | |
| } | |
| .rent { | |
| width: 150px; | |
| height: 40px; | |
| position: absolute; | |
| margin-left: -75px; | |
| left: 50%; | |
| position: relative; | |
| background-color: #29CAE9; | |
| font-family: Gotham-Book; | |
| font-size: 14px; | |
| font-weight: bold; | |
| color: #fff; | |
| text-align: center; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .rent:hover { | |
| background-color: #F48C34; | |
| transition: .2s; | |
| } | |
| .social { | |
| width: 90%; | |
| padding-top: 10px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| }</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
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background: #F7F7F7; | |
| } | |
| h1 { | |
| float: left; | |
| font-size: 32px; | |
| font-family: Gotham-Book; | |
| font-weight: 100; | |
| } | |
| hr { | |
| width: 90%; | |
| float: right; | |
| display: inline-block; | |
| margin-top: 22px; | |
| margin-left: 10px; | |
| margin-right: auto; | |
| border-style: solid; | |
| border-width: .5px; | |
| } | |
| .clientHeader { | |
| width: 100%; | |
| max-height: 645px; | |
| background: #8DB0A6 URL('http://i.imgur.com/NBkHpVC.gif'); | |
| background-position: bottom; | |
| background-size: 100%; | |
| background-repeat: no-repeat; | |
| } | |
| .stackBar { | |
| height: 40px; | |
| width: 100%; | |
| background: #F8F8F8 url('http://releasevip.com/assets/img/bg-upcoming-events.png') repeat top left; | |
| background-attachment: scroll; | |
| background-color: #F8F8F8; | |
| border-top: 3px solid #4A4A4A; | |
| border-bottom: thin solid #4A4A4A; | |
| } | |
| .clientLogo { | |
| position: absolute; | |
| top: 0; | |
| left: 60px; | |
| } | |
| .clientLogo img { | |
| width: 170px; | |
| } | |
| .about { | |
| font-family: Gotham-Book; | |
| font-size: 11pt; | |
| padding: 0px 0 0 8px; | |
| overflow: hidden; | |
| } | |
| .about li { | |
| /* width: 160px; */ | |
| float: left; | |
| vertical-align: middle; | |
| list-style: none; | |
| text-decoration: none; | |
| border-right: thin solid #92DFEF; | |
| color: #4A4A4A; | |
| /* margin-left: 40px; */ | |
| background-color: rgba(93, 212, 236, .7); | |
| line-height: 36px | |
| } | |
| .about li:hover { | |
| background-color: #26BDDE; | |
| } | |
| .about li a { | |
| text-decoration: none; | |
| color: #fff; | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| } | |
| .about li a:hover { | |
| color: #fff; | |
| cursor: auto; | |
| } | |
| .updates { | |
| width: 90%; | |
| height: 500px; | |
| overflow: hidden; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .upcoming { | |
| height: 420px; | |
| width: 550px; | |
| padding-top: 70px; | |
| /* border: thin solid black; | |
| background: #ccc; */ | |
| float: right; | |
| position: relative; | |
| } | |
| .cabana { | |
| height: 420px; | |
| width: 550px; | |
| padding-top: 70px; | |
| /* border: thin solid black; | |
| background: #ccc; */ | |
| float: left; | |
| position: relative; | |
| } | |
| .rent { | |
| width: 150px; | |
| height: 40px; | |
| position: absolute; | |
| margin-left: -75px; | |
| left: 50%; | |
| position: relative; | |
| background-color: #29CAE9; | |
| font-family: Gotham-Book; | |
| font-size: 14px; | |
| font-weight: bold; | |
| color: #fff; | |
| text-align: center; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .rent:hover { | |
| background-color: #F48C34; | |
| transition: .2s; | |
| } | |
| .social { | |
| width: 90%; | |
| padding-top: 10px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment