Skip to content

Instantly share code, notes, and snippets.

@cluzier

cluzier/earth-pure-css.markdown

Created December 12, 2018 00:24
Show Gist options
  • Save cluzier/0a7b8d9225c9435e204a2a712bbea876 to your computer and use it in GitHub Desktop.
Save cluzier/0a7b8d9225c9435e204a2a712bbea876 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cluzier created this gist Dec 12, 2018.
    7 changes: 7 additions & 0 deletions earth-pure-css.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Earth Pure CSS
    --------------
    _Created for the [December 2018 CodePen Challenge](https://codepen.io/challenges/2018/December)_

    A [Pen](https://codepen.io/cluzier/pen/XyQNEM) by [Conner](https://codepen.io/cluzier) on [CodePen](https://codepen.io).

    [License](https://codepen.io/cluzier/pen/XyQNEM/license).
    15 changes: 15 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    <a href="https://youtu.be/xCk8ijTyw40"><h2>Watch me code this!</h2></a>
    <div class="wrapper">
    <div id="earth">
    <div class="shadow"></div>
    <div id="face">
    <div class="eyes"></div>
    <div class="eyes2"></div>
    <div class="mouth"></div>
    <div class="dimples"></div>
    <div class="dimples2"></div>
    </div>
    <div class="land"></div>
    <div class="land2"></div>
    </div>
    </div>
    135 changes: 135 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,135 @@
    body {
    background: rgb(35,41,47);
    overflow: hidden;
    animation: fadeIn 2s ease-in-out;
    }
    .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    margin: 0;
    min-height: 50em;
    }
    h2 {
    position: absolute;
    font-size: 2vmin;
    float: right;
    color: white;
    font-family: 'Roboto', sans-serif;
    }

    /*start earth*/

    #earth {
    flex: none;
    height: 50vmin;
    width: 50vmin;
    background: #18ABF2;
    border-radius: 100%;
    overflow: hidden;
    z-index: 1;
    }
    #earth .shadow {
    position: relative;
    right: 5vmin;
    bottom: 3vmin;
    height: 50vmin;
    width: 50vmin;
    background: #30EAC9;
    border-radius: 100%;
    opacity: .3;
    z-index: 2;
    overflow: hidden;
    }
    #earth #face {
    position: relative;
    left: 13vmin;
    bottom: 33vmin;
    height: 20vmin;
    width: 25vmin;
    z-index: 1;
    overflow: hidden;
    }
    #earth #face .eyes {
    position: relative;
    left: 6vmin;
    top: 5vmin;
    height: 2.5vmin;
    width: 2.5vmin;
    border-radius: 100%;
    background: black;
    }
    #earth #face .eyes2 {
    position: relative;
    left: 15vmin;
    top: 2.5vmin;
    height: 2.5vmin;
    width: 2.5vmin;
    border-radius: 100%;
    background: black;
    }
    #earth #face .mouth {
    position: relative;
    top: 4vmin;
    left: 10vmin;
    width: 4vmin;
    height: 2vmin;
    margin-left: -1vmin;
    border-bottom: 1vmin solid black;
    border-left: 1vmin solid black;
    border-right: 1vmin solid black;
    border-radius: 0 0 10vmin 10vmin;
    }
    #earth #face .dimples {
    position: relative;
    left: 4vmin;
    top: 1vmin;
    height: 2.5vmin;
    width: 2.5vmin;
    border-radius: 100%;
    background: grey;
    opacity: .5;
    }
    #earth #face .dimples2 {
    position: relative;
    left: 17vmin;
    bottom: 1.5vmin;
    height: 2.5vmin;
    width: 2.5vmin;
    border-radius: 100%;
    background: grey;
    opacity: .5;
    }
    #earth .land {
    position: relative;
    right: 8vmin;
    bottom: 52vmin;
    height: 20vmin;
    width: 20vmin;
    border-radius: 23%;
    border: .5vmin solid black;
    transform: rotate(25deg);
    background: #0FAD2E;
    }
    #earth .land2 {
    content: "";
    position: relative;
    left: 40vmin;
    bottom: 85vmin;
    height: 20vmin;
    width: 20vmin;
    border-radius: 23%;
    border: .5vmin solid black;
    transform: rotate(45deg);
    background: #0FAD2E;
    }

    @keyframes fadeIn {
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    }
    }