This is an example from the blog article The complete guide to centering a div at http://www.tipue.com/blog/center-a-div/
A Pen by Captain Anonymous on CodePen.
Created
November 8, 2017 08:49
-
-
Save anonymous/872c962ea44279fd8519c765f5725fe6 to your computer and use it in GitHub Desktop.
Responsive Banner 16:9 - Bait & Call to action button
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
| <!-- Responsive Banner 16:9 - Bait & Call to action button --> | |
| <!-- Hire me: marconatolli@gmail.com --> | |
| <center> | |
| Any previous contentent here!<br> | |
| Any previous contentent here!<br> | |
| Any previous contentent here!<br> | |
| Any previous contentent here!<br> | |
| Any previous contentent here!<br> | |
| Any previous contentent here!<br> | |
| </center> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto:900&subset=cyrillic-ext" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> | |
| <div class="sfondo"> | |
| <div class="promo"> | |
| BLACK FRIDAY<br> | |
| SALE<br> | |
| 15<span style="color:#d6a845">%</span> OFF<br> | |
| <button class="buttonx">CALL TO ACTION</button> | |
| </div> | |
| </div> | |
| <center> | |
| Any following contentent here!<br> | |
| Any following contentent here!<br> | |
| Any following contentent here!<br> | |
| Any following contentent here!<br> | |
| Any following contentent here!<br> | |
| Any following contentent here!<br> | |
| </center> |
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
| .sfondo { | |
| display: inline; | |
| float: left; | |
| margin: 0; | |
| text-align: left; | |
| width: 100vw; | |
| height: 0px; | |
| padding-top: 56.25%; | |
| background-image: url('http://test.originalmuranoglass.com/images/blackfryday.jpg'); | |
| background-position:50% 50%; | |
| background-size:cover; | |
| font-family: 'Roboto', sans-serif; | |
| font-size: 7vw; | |
| line-height: 8vw; | |
| } | |
| .promo {position: relative; float: left; bottom: 46.25vw; left: 2vw;} | |
| .buttonx { | |
| margin-top: 4vw; | |
| padding-top: 2vw; | |
| padding-bottom: 2vw; | |
| padding-left: 2vw; | |
| padding-right: 2vw; | |
| font-family: 'Nunito'; | |
| font-size: 3vw; | |
| font-weight: bold; | |
| background-color: #000000 !important; | |
| border: 1px solid; | |
| border-color: #000000; | |
| border-radius:100px; | |
| color: #ffffff !important; | |
| transition: all 0s; | |
| } | |
| .buttonx:hover { | |
| background-color: #ffffff !important; | |
| border: 1px solid; | |
| border-color: #000000; | |
| border-radius:100px; | |
| color: #000000 !important; | |
| transition: all 0s; | |
| } | |
| .buttonx:active { | |
| background-color: #9c9c9c !important; | |
| border: 1px solid; | |
| border-color: #9c9c9c; | |
| border-radius:100px; | |
| color: #ffffff !important; | |
| transition: all 0s; | |
| } | |
| .buttonx:focus { | |
| outline: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment