Skip to content

Instantly share code, notes, and snippets.

@theamanjs

theamanjs/index.html

Last active July 28, 2019 12:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save theamanjs/159a8deca26fa0f35fc543da1bdf255f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save theamanjs/159a8deca26fa0f35fc543da1bdf255f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. theamanjs revised this gist Jul 28, 2019. No changes.
  2. theamanjs created this gist Jul 28, 2019.
    8 changes: 8 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <div class="logo">
    <div class="netflix">
    <span></span>
    <span></span>
    <span></span>
    </div>
    <h3 class="heading">Netflix</h3>
    </div>
    7 changes: 7 additions & 0 deletions netflix-logo.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Netflix Logo
    ------------


    A [Pen](https://codepen.io/theamanjs/pen/jgVRrm) by [AMANJOT SINGH](https://codepen.io/theamanjs) on [CodePen](https://codepen.io).

    [License](https://codepen.io/theamanjs/pen/jgVRrm/license).
    91 changes: 91 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,91 @@
    body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    background: #000;
    }


    .netflix{
    position: relative;
    width: 360px;
    height: 520px;
    overflow: hidden;
    transform: scale(.7);
    }

    .netflix:before{
    content: '';
    position: absolute;
    bottom: -100px;
    z-index: 2;
    width: 100%;
    height: 120px;
    background: #000;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    transform: scaleX(1.5);
    }
    .netflix:after, .heading:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, transparent, #000, #000);
    z-index:3;
    animation: animate 2s linear forwards;
    }
    @keyframes animate{
    0%{
    right: 0;
    }
    100%{
    right: -200%;
    }
    }

    .netflix span{
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    background: #fff;
    }

    .netflix span:nth-child(1){
    background: #b00612;
    left: 0;
    }

    .netflix span:nth-child(2){
    background: #e50815;
    left: 0;
    z-index: 1;
    transform-origin: top left;
    transform: skewX(24.8deg);
    box-shadow: 0 0 20px rgba(0, 0, 0, 1);
    }

    .netflix span:nth-child(3){
    background: #b00612;
    right: 0;
    }

    .heading{
    color: #fff;
    text-transform: uppercase;
    position: relative;
    top: -50px;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: arial;
    font-size: 45px;
    letter-spacing: 10px;
    }