Skip to content

Instantly share code, notes, and snippets.

@gmacdougall

gmacdougall/index.html

Created May 5, 2020 23:24
Download ZIP

Revisions

  1. gmacdougall created this gist May 5, 2020.
    80 changes: 80 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    <html>
    <head>
    <style>
    .folder {
    display: flex;
    }

    .folder div {
    width: 100%;
    }

    h2 {
    padding: 0.5rem;
    margin: 0;
    }

    #home h2 {
    background-color: #eee
    }

    #home .contents {
    background-color: #f6f6f6;
    }

    #about h2, #about .expanding {
    background-color: #ffdab6;
    }

    #about .contents {
    background-color: #ffead3;
    }

    #work h2 {
    background-color: #fff1b6;
    }

    #work .contents {
    background-color: #fff6d2;
    }

    .contents {
    height: 800px;
    }
    </style>
    </head>
    <div class='folder'>
    <div id='home'>
    <h2>Home</h2>
    <div class='contents'></div>
    </div>
    <div id='about'>
    <h2>About</h2>
    <div class='expanding'></div>
    <div class='contents'></div>
    </div>
    <div id='work'>
    <h2>Work</h2>
    <div class='contents'></div>
    </div>
    </div>
    <script>
    const expanding = document.querySelector('#about .expanding');
    const contents = document.querySelector('#about .contents');

    const biggener = (height) => {
    expanding.style.height = height.toString() + "px";
    contents.style.height = (800 - height).toString() + "px";
    if (height < 800) {
    setTimeout(() => {
    height += 4;
    biggener(height);
    }, 1);
    }
    }

    document.querySelector('#about h2').onclick = () => {
    biggener(0)
    }
    </script>
    </html>