Skip to content

Instantly share code, notes, and snippets.

@illyShelly

illyShelly/black-white-challenge.markdown

Created March 23, 2017 22:47
Show Gist options
  • Save illyShelly/22962a6930ca6f0ea498a7cc05609000 to your computer and use it in GitHub Desktop.
Save illyShelly/22962a6930ca6f0ea498a7cc05609000 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. illyShelly created this gist Mar 23, 2017.
    7 changes: 7 additions & 0 deletions black-white-challenge.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Black & White Challenge
    -----------------------


    A [Pen](https://codepen.io/illyShelly/pen/LWQdGg) by [Illy](http://codepen.io/illyShelly) on [CodePen](http://codepen.io/).

    [License](https://codepen.io/illyShelly/pen/LWQdGg/license).
    26 changes: 26 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    <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">&amp;</span>&amp;
    </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>
    92 changes: 92 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,92 @@
    @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;
    }