Created
November 23, 2016 17:07
-
-
Save anonymous/264d6fe221600dc1290c655a6d6a0375 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/tifuqa
This file contains hidden or 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"> | |
| <meta name="viewport" content="width=device-width"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .bw-banner { | |
| position: absolute; | |
| bottom: 0; | |
| width: 100%; | |
| background-color: #000; | |
| font-family: sans-serif; | |
| height: 60px; | |
| transform: translateY(60px); | |
| transition: transform .3s ease-in-out; | |
| z-index: 999999; | |
| padding: 0 15px; | |
| } | |
| .bw-banner-left, | |
| .bw-banner-right { | |
| display: inline-block; | |
| width: 50%; | |
| max-height: 60px; | |
| vertical-align: top; | |
| padding: .5rem; | |
| } | |
| .bw-banner-left { | |
| position: relative; | |
| background: #73be50; | |
| display: inline-block; | |
| font-weight: 600; | |
| font-size: .8rem; | |
| height: 60px; | |
| color: #fff; | |
| width: 50%; | |
| margin-left: -15px; | |
| } | |
| .bw-banner-left:after { | |
| left: 100%; | |
| top: 50%; | |
| border: solid transparent; | |
| content: " "; | |
| height: 0; | |
| width: 0; | |
| position: absolute; | |
| pointer-events: none; | |
| border-color: rgba(136, 183, 213, 0); | |
| border-left-color: #73be50; | |
| border-width: 30px; | |
| margin-top: -30px; | |
| } | |
| .bw-banner-content { | |
| max-width: 200px; | |
| float: right; | |
| } | |
| .bw-banner-call { | |
| font-size: 1.2rem; | |
| margin-bottom: .25rem; | |
| } | |
| .bw-banner-logo { | |
| width: 100px; | |
| margin-left: 30px; | |
| } | |
| .bw-banner-button { | |
| display: inline-block; | |
| background: #73be50; | |
| border-radius: 4px; | |
| padding: .7rem .5rem; | |
| vertical-align: top; | |
| border: 0; | |
| color: #fff; | |
| margin-left: 1rem; | |
| font-weight: 100; | |
| } | |
| @media (max-width: 600px) { | |
| .bw-banner-button { | |
| display: none; | |
| } | |
| .bw-banner-left { | |
| width: 55%; | |
| } | |
| .bw-banner-right { | |
| width: 45%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bw-banner"> | |
| <div class="bw-banner-left"> | |
| <div class="bw-banner-content"> | |
| <div class="bw-banner-call">Valendoooo!</div> | |
| <div class="bw-banner-day"></div> | |
| </div> | |
| </div> | |
| <div class="bw-banner-right"> | |
| <img src="https://cloud.githubusercontent.com/assets/15933/20497640/18df35ba-b011-11e6-9451-e3614306d722.png" alt="" class="bw-banner-logo"> | |
| <button class="bw-banner-button">Ver Ofertas</button> | |
| </div> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| (function () { | |
| var SUN_TEXT = 'Últimas horas, aproveite!'; | |
| var SAT_TEXT = 'Hoje e amanhã!'; | |
| var FRI_TEXT = 'Hoje, amanhã e domingo!'; | |
| function slideUp() { | |
| var banner = document.querySelector('.bw-banner'); | |
| setTimeout(function () { | |
| banner.style.transform = 'translateY(0px)'; | |
| }); | |
| } | |
| function getTextForToday() { | |
| var day = new Date().getDay(); | |
| if (day === 0) { | |
| return SUNDAY_TEXT; | |
| } else if (day === 6) { | |
| return SAT_TEXT; | |
| } else { | |
| return FRI_TEXT; | |
| } | |
| } | |
| function updateDateText() { | |
| var dayText = document.querySelector('.bw-banner-day'); | |
| dayText.innerText = getTextForToday(); | |
| } | |
| updateDateText(); | |
| slideUp(); | |
| })(); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">* { | |
| box-sizing: border-box; | |
| } | |
| .bw-banner { | |
| position: absolute; | |
| bottom: 0; | |
| width: 100%; | |
| background-color: #000; | |
| font-family: sans-serif; | |
| height: 60px; | |
| transform: translateY(60px); | |
| transition: transform .3s ease-in-out; | |
| z-index: 999999; | |
| padding: 0 15px; | |
| } | |
| .bw-banner-left, | |
| .bw-banner-right { | |
| display: inline-block; | |
| width: 50%; | |
| max-height: 60px; | |
| vertical-align: top; | |
| padding: .5rem; | |
| } | |
| .bw-banner-left { | |
| position: relative; | |
| background: #73be50; | |
| display: inline-block; | |
| font-weight: 600; | |
| font-size: .8rem; | |
| height: 60px; | |
| color: #fff; | |
| width: 50%; | |
| margin-left: -15px; | |
| } | |
| .bw-banner-left:after { | |
| left: 100%; | |
| top: 50%; | |
| border: solid transparent; | |
| content: " "; | |
| height: 0; | |
| width: 0; | |
| position: absolute; | |
| pointer-events: none; | |
| border-color: rgba(136, 183, 213, 0); | |
| border-left-color: #73be50; | |
| border-width: 30px; | |
| margin-top: -30px; | |
| } | |
| .bw-banner-content { | |
| max-width: 200px; | |
| float: right; | |
| } | |
| .bw-banner-call { | |
| font-size: 1.2rem; | |
| margin-bottom: .25rem; | |
| } | |
| .bw-banner-logo { | |
| width: 100px; | |
| margin-left: 30px; | |
| } | |
| .bw-banner-button { | |
| display: inline-block; | |
| background: #73be50; | |
| border-radius: 4px; | |
| padding: .7rem .5rem; | |
| vertical-align: top; | |
| border: 0; | |
| color: #fff; | |
| margin-left: 1rem; | |
| font-weight: 100; | |
| } | |
| @media (max-width: 600px) { | |
| .bw-banner-button { | |
| display: none; | |
| } | |
| .bw-banner-left { | |
| width: 55%; | |
| } | |
| .bw-banner-right { | |
| width: 45%; | |
| } | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">(function () { | |
| var SUN_TEXT = 'Últimas horas, aproveite!'; | |
| var SAT_TEXT = 'Hoje e amanhã!'; | |
| var FRI_TEXT = 'Hoje, amanhã e domingo!'; | |
| function slideUp() { | |
| var banner = document.querySelector('.bw-banner'); | |
| setTimeout(function () { | |
| banner.style.transform = 'translateY(0px)'; | |
| }); | |
| } | |
| function getTextForToday() { | |
| var day = new Date().getDay(); | |
| if (day === 0) { | |
| return SUNDAY_TEXT; | |
| } else if (day === 6) { | |
| return SAT_TEXT; | |
| } else { | |
| return FRI_TEXT; | |
| } | |
| } | |
| function updateDateText() { | |
| var dayText = document.querySelector('.bw-banner-day'); | |
| dayText.innerText = getTextForToday(); | |
| } | |
| updateDateText(); | |
| slideUp(); | |
| })();</script></body> | |
| </html> |
This file contains hidden or 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; | |
| } | |
| .bw-banner { | |
| position: absolute; | |
| bottom: 0; | |
| width: 100%; | |
| background-color: #000; | |
| font-family: sans-serif; | |
| height: 60px; | |
| transform: translateY(60px); | |
| transition: transform .3s ease-in-out; | |
| z-index: 999999; | |
| padding: 0 15px; | |
| } | |
| .bw-banner-left, | |
| .bw-banner-right { | |
| display: inline-block; | |
| width: 50%; | |
| max-height: 60px; | |
| vertical-align: top; | |
| padding: .5rem; | |
| } | |
| .bw-banner-left { | |
| position: relative; | |
| background: #73be50; | |
| display: inline-block; | |
| font-weight: 600; | |
| font-size: .8rem; | |
| height: 60px; | |
| color: #fff; | |
| width: 50%; | |
| margin-left: -15px; | |
| } | |
| .bw-banner-left:after { | |
| left: 100%; | |
| top: 50%; | |
| border: solid transparent; | |
| content: " "; | |
| height: 0; | |
| width: 0; | |
| position: absolute; | |
| pointer-events: none; | |
| border-color: rgba(136, 183, 213, 0); | |
| border-left-color: #73be50; | |
| border-width: 30px; | |
| margin-top: -30px; | |
| } | |
| .bw-banner-content { | |
| max-width: 200px; | |
| float: right; | |
| } | |
| .bw-banner-call { | |
| font-size: 1.2rem; | |
| margin-bottom: .25rem; | |
| } | |
| .bw-banner-logo { | |
| width: 100px; | |
| margin-left: 30px; | |
| } | |
| .bw-banner-button { | |
| display: inline-block; | |
| background: #73be50; | |
| border-radius: 4px; | |
| padding: .7rem .5rem; | |
| vertical-align: top; | |
| border: 0; | |
| color: #fff; | |
| margin-left: 1rem; | |
| font-weight: 100; | |
| } | |
| @media (max-width: 600px) { | |
| .bw-banner-button { | |
| display: none; | |
| } | |
| .bw-banner-left { | |
| width: 55%; | |
| } | |
| .bw-banner-right { | |
| width: 45%; | |
| } | |
| } |
This file contains hidden or 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
| (function () { | |
| var SUN_TEXT = 'Últimas horas, aproveite!'; | |
| var SAT_TEXT = 'Hoje e amanhã!'; | |
| var FRI_TEXT = 'Hoje, amanhã e domingo!'; | |
| function slideUp() { | |
| var banner = document.querySelector('.bw-banner'); | |
| setTimeout(function () { | |
| banner.style.transform = 'translateY(0px)'; | |
| }); | |
| } | |
| function getTextForToday() { | |
| var day = new Date().getDay(); | |
| if (day === 0) { | |
| return SUNDAY_TEXT; | |
| } else if (day === 6) { | |
| return SAT_TEXT; | |
| } else { | |
| return FRI_TEXT; | |
| } | |
| } | |
| function updateDateText() { | |
| var dayText = document.querySelector('.bw-banner-day'); | |
| dayText.innerText = getTextForToday(); | |
| } | |
| updateDateText(); | |
| slideUp(); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment