Created
March 23, 2017 22:47
-
-
Save illyShelly/22962a6930ca6f0ea498a7cc05609000 to your computer and use it in GitHub Desktop.
Black & White Challenge
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
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> | |
| <title>Hard challenge Typography</title> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <section class="section-one"> | |
| <p class="try">Try to keep your</p> | |
| <p class="mind">Mind Open</p> | |
| <p class="possibility">To possibilities</p> | |
| </section> | |
| <section class="sign"> | |
| <span class="double">&</span>& | |
| </section> | |
| <section class="section-two"> | |
| <p class="your">Your</p> | |
| <p class="mouth">Mouth Closed</p> | |
| <p class="matter">on matters that<br>you don't know <br>about.</p> | |
| </section> | |
| </div> | |
| </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
| @import url(https://fonts.googleapis.com/css?family=Abril+Fatface); | |
| body { | |
| background: ; | |
| font-family: 'Abril Fatface', cursive; | |
| } | |
| p { | |
| margin: 0; | |
| } | |
| .wrapper { | |
| width: 1200px; | |
| height: 800px; | |
| } | |
| .section-one { | |
| background: #ffffff; | |
| color: #1a1a1a; | |
| width: 1200px; | |
| height: 200px; | |
| padding: 50px 0px 10px 70px; | |
| } | |
| .try { | |
| font-size: 30px; | |
| text-transform: uppercase; | |
| margin: 0px 0px -20px; | |
| } | |
| .mind { | |
| font-size: 120px; | |
| line-height: 120px; | |
| margin: 0px 0px -10px; | |
| } | |
| .possibility { | |
| font-size: 30px; | |
| text-transform: uppercase; | |
| padding-left: 120px; | |
| } | |
| .sign { | |
| font-size: 120px; | |
| color: #ffffff; | |
| text-transform: capitalize; | |
| line-height: 120px; | |
| position: relative; | |
| padding: 0px 0px 0px 70px; | |
| margin-bottom: -80px; /***when -px sign moves and covers section two **/ | |
| } | |
| .double { | |
| color: #1a1a1a; | |
| height: 50%; | |
| position: absolute; | |
| padding-top: 0px; /**when -px black shadow move down from the sign**/ | |
| overflow: hidden; | |
| } | |
| .section-two { | |
| background: #1a1a1a; | |
| color: #ffffff; | |
| float: left; | |
| clear: both; | |
| height: 250px; | |
| width: 1200px; | |
| padding: 90px 0px 10px 70px; | |
| margin: 20px 0px 0px 0px; | |
| } | |
| .your { | |
| font-size: 36px; | |
| text-transform: uppercase; | |
| margin-top: 20px; | |
| } | |
| .mouth { | |
| font-size: 120px; | |
| margin: -42px 20px 0px 0px; | |
| float: left; | |
| } | |
| .matter { | |
| font-size: 36px; | |
| line-height: 36px; | |
| margin: -20px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment