A Pen by Rodrigo Martinez

Thumbnail
This awesome code was written by napotopia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright napotopia ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Rodrigo Martinez</title>
  
  
  <link rel='stylesheet prefetch' href='https://mui.aws.manheim.com/0.29.0/man-customer/css/mui.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
    <div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi dolor, dapibus vitae felis ac, lacinia gravida urna. Cras vel ullamcorper ante. Praesent ut augue ut nisl laoreet eleifend. Ut vitae odio eu justo rhoncus pretium. Nunc efficitur eros et lorem tristique, nec elementum mi faucibus. Curabitur at nibh consectetur, pharetra risus id, venenatis enim. Duis quis purus molestie, luctus libero vitae, molestie nisi. Aliquam vel mollis ex. Aenean venenatis nulla vitae lacus scelerisque dictum.
</p>
<p>
Proin vehicula lectus non nibh euismod accumsan. Nullam vitae lectus commodo, luctus arcu eget, porttitor elit. Vestibulum consectetur dolor id enim egestas, sed posuere libero volutpat. Sed elementum urna sit amet nulla vehicula, accumsan ullamcorper nisl vestibulum. Mauris tempus mattis ante. Sed fermentum diam in orci gravida placerat. Ut vel nisl blandit eros placerat ullamcorper. Ut laoreet, arcu a vulputate bibendum, tellus diam congue urna, vitae fringilla diam ipsum non nisl. Curabitur vestibulum pharetra sapien, non sollicitudin nibh consequat quis. Sed pulvinar ultricies risus, ac maximus nibh fringilla vitae. Nullam nisl nibh, dapibus ac faucibus vel, facilisis ut ante. Sed blandit, elit ut dictum tincidunt, nisi mauris lobortis ex, nec rhoncus augue neque ut neque. Suspendisse id commodo leo, sit amet mollis enim. Aliquam in tortor lectus. Nulla sollicitudin congue placerat. Aliquam pulvinar est nisl, sit amet pulvinar augue mollis eu.
</p>
<p>
Vivamus ut ex ac elit scelerisque vulputate. Ut a luctus enim. Suspendisse eu dui eget tortor consequat placerat at ut est. Sed tincidunt massa in risus sodales suscipit. Nam varius, tellus id efficitur tincidunt, elit mauris finibus ipsum, nec hendrerit felis augue a purus. Vivamus lacinia orci tincidunt, vestibulum justo eu, mattis metus. Duis vitae tincidunt ex. Fusce dictum ex ante, ac sodales orci condimentum vel.
</p>
<p>
Donec vestibulum velit at odio fermentum feugiat. Proin commodo placerat finibus. Nam a gravida odio. Cras convallis neque at dui sodales egestas. Fusce cursus consectetur imperdiet. Sed a lacus sed diam lacinia bibendum non non lectus. Sed a fermentum ipsum. Etiam aliquet et diam et consequat. Aliquam ultrices neque arcu, ut porttitor nunc dignissim vehicula. Praesent est ante, ultrices consequat blandit vitae, finibus vitae justo. Maecenas mi est, ultricies eget tempor ut, sagittis ut mi.
</p>
<p>
Praesent eget arcu mollis, euismod tortor eget, lobortis urna. Nulla facilisis a nunc et ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce vel nulla et nisi auctor placerat at ac erat. Sed a viverra dolor, vel tristique magna. Mauris laoreet faucibus massa et euismod. Mauris id odio at dolor sollicitudin semper ut vitae ex. Nullam dictum ut justo non dignissim. Aenean vitae neque tincidunt felis porta laoreet. Donec sagittis, nunc sit amet varius vulputate, tortor ligula sodales nibh, a bibendum lectus velit pharetra massa. Etiam gravida placerat dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean lobortis porta maximus. Duis eget dui in tellus scelerisque mollis non eget lorem. Donec quis est vel metus efficitur elementum.
</p></div>
</div>
<div class="landing font--lato">
    <div class="landing--content">
        <div class="manheim-medallion">
       <svg style="height: 100%;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 226.52 226.61" id="Manheim_Logo">
       <title>Manheim</title>
        <defs>
            <style>.man-logo-cls-1{stroke:#9e6606;stroke-width:0.79px;fill:url(#ml-svg-linear-gradient);}.man-logo-cls-2{fill:#fffcdb;}.man-logo-cls-3{fill:url(#ml-svg-radial-gradient);}.man-logo-cls-4{fill:#003265;}.man-logo-cls-5{stroke:#65501b;stroke-width:1.44px;fill:url(#ml-svg-linear-gradient-2);}.man-logo-cls-6{fill:url(#ml-svg-linear-gradient-3);}.man-logo-cls-7{fill:url(#ml-svg-linear-gradient-4);}.man-logo-cls-8{fill:#ffe694;}.man-logo-cls-9{fill:#f7eab1;}.man-logo-cls-10{fill:#fffcd7;}.man-logo-cls-11{fill:#b38f19;}.man-logo-cls-12{stroke:#fed301;stroke-width:0.75px;fill:url(#ml-svg-linear-gradient-5);}.man-logo-cls-13{fill:url(#ml-svg-linear-gradient-6);}.man-logo-cls-14{fill:url(#ml-svg-linear-gradient-7);}.man-logo-cls-15{fill:url(#ml-svg-linear-gradient-8);}.man-logo-cls-16{fill:url(#ml-svg-linear-gradient-9);}.man-logo-cls-17{fill:url(#ml-svg-linear-gradient-10);}.man-logo-cls-18{fill:url(#ml-svg-linear-gradient-11);}.man-logo-cls-19{fill:url(#ml-svg-linear-gradient-12);}.man-logo-cls-20{fill:#9e6606;}.man-logo-cls-21{fill:#fffbca;}.man-logo-cls-22{fill:url(#ml-svg-linear-gradient-13);}
            </style>
            <linearGradient id="ml-svg-linear-gradient" x1="143.16" y1="1005.73" x2="83.53" y2="1213.83" gradientTransform="translate(0 -996.8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.01" stop-color="#916e18"/>
                <stop offset="0.04" stop-color="#ae8e30"/>
                <stop offset="0.08" stop-color="#c9ae4a"/>
                <stop offset="0.12" stop-color="#e0c962"/>
                <stop offset="0.17" stop-color="#f2df73"/>
                <stop offset="0.24" stop-color="#ffee7e"/>
                <stop offset="0.34" stop-color="#fff682"/>
                <stop offset="0.39" stop-color="#feeb7d"/>
                <stop offset="0.44" stop-color="#efd871"/>
                <stop offset="0.48" stop-color="#dabd5f"/>
                <stop offset="0.53" stop-color="#c09a46"/>
                <stop offset="0.58" stop-color="#a1732b"/>
                <stop offset="0.63" stop-color="#7f4b0f"/>
                <stop offset="0.63" stop-color="#7a460b"/>
                <stop offset="0.83" stop-color="#eac35c"/>
                <stop offset="1" stop-color="#a2761d"/>
            </linearGradient>
            <radialGradient id="ml-svg-radial-gradient" cx="-3177.06" cy="-2659.53" r="28.69" gradientTransform="translate(15541.77 13095.85) scale(4.86)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#003265"/>
                <stop offset="0.1" stop-color="#003568"/>
                <stop offset="0.24" stop-color="#003d6f"/>
                <stop offset="0.4" stop-color="#1f4c7c"/>
                <stop offset="0.57" stop-color="#43628f"/>
                <stop offset="0.76" stop-color="#6f85ac"/>
                <stop offset="0.95" stop-color="#aeb9d2"/>
                <stop offset="1" stop-color="#c4cbde"/>
            </radialGradient>
            <linearGradient id="ml-svg-linear-gradient-2" x1="47.38" y1="1177.64" x2="172" y2="1049.49" gradientTransform="translate(0 -996.8)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#ebd47a"/>
                <stop offset="0.1" stop-color="#fffde7"/>
                <stop offset="0.47" stop-color="#e6903b"/>
                <stop offset="0.74" stop-color="#fff4c1"/>
                <stop offset="1" stop-color="#b56324"/>
            </linearGradient>
            <linearGradient id="ml-svg-linear-gradient-3" x1="114.26" y1="1172.65" x2="114.26" y2="1098.71" gradientTransform="translate(0 -996.8)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#af8718"/>
                <stop offset="0.24" stop-color="#dbc142"/>
                <stop offset="0.58" stop-color="#f4d793"/>
                <stop offset="1" stop-color="#9a8016"/>
            </linearGradient>
            <linearGradient id="ml-svg-linear-gradient-4" x1="96.45" y1="1004.83" x2="134.59" y2="1231.51" gradientTransform="translate(0 -996.8)" gradientUnits="userSpaceOnUse">
                <stop offset="0.06" stop-color="#efbf5f"/>
                <stop offset="0.25" stop-color="#f4d767"/>
                <stop offset="0.47" stop-color="#dfad3f"/>
                <stop offset="0.65" stop-color="#bf851a"/>
                <stop offset="0.89" stop-color="#f6d459"/>
                <stop offset="1" stop-color="#c28031"/>
            </linearGradient>
            <linearGradient id="ml-svg-linear-gradient-5" x1="5.66" y1="1049.63" x2="232.28" y2="1177.55" gradientTransform="translate(0 -996.8)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#d09f43"/>
                <stop offset="0.21" stop-color="#fffabe"/>
                <stop offset="0.47" stop-color="#f0b944"/>
                <stop offset="0.74" stop-color="#fff9ba"/>
                <stop offset="1" stop-color="#d39542"/>
            </linearGradient>
            <linearGradient id="ml-svg-linear-gradient-6" x1="3.5" y1="1060.23" x2="109.47" y2="1060.23" gradientTransform="translate(0 -996.8)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#f3df80"/>
            <stop offset="0.02" stop-color="#f3e086"/>
            <stop offset="0.13" stop-color="#f7e9a9"/>
            <stop offset="0.24" stop-color="#faf0c5"/>
            <stop offset="0.35" stop-color="#fdf7da"/>
            <stop offset="0.44" stop-color="#fffce8"/>
            <stop offset="0.52" stop-color="#fffded"/>
            <stop offset="0.59" stop-color="#fffae7"/>
            <stop offset="0.67" stop-color="#fef3d8"/>
            <stop offset="0.76" stop-color="#fceac2"/>
            <stop offset="0.86" stop-color="#fadda3"/>
            <stop offset="0.96" stop-color="#f7ce7f"/>
            <stop offset="1" stop-color="#f6c76d"/>
        </linearGradient>
        <linearGradient id="ml-svg-linear-gradient-7" x1="-9029.73" y1="-8851.2" x2="-8933.54" y2="-8851.2" gradientTransform="translate(-8813.73 -8689.95) rotate(180)" xlink:href="#ml-svg-linear-gradient-6"/>
        <linearGradient id="ml-svg-linear-gradient-8" x1="119.56" y1="1162.09" x2="222.85" y2="1162.09" gradientTransform="translate(0 -996.8)" gradientUnits="userSpaceOnUse">
            <stop offset="0.1" stop-color="#f2df8a"/>
            <stop offset="0.47" stop-color="#a26611"/>
            <stop offset="1" stop-color="#f6c76d"/>
        </linearGradient>
        <linearGradient id="ml-svg-linear-gradient-9" x1="-8972.16" y1="840.06" x2="-8866.17" y2="840.06" gradientTransform="matrix(0.05, -1, 1, 0.05, -311.87, -8782.25)" xlink:href="#ml-svg-linear-gradient-6"/>
        <linearGradient id="ml-svg-linear-gradient-10" x1="-696.9" y1="-9209.77" x2="-609.11" y2="-9209.77" gradientTransform="translate(-9006.75 -965.45) rotate(100.45)" xlink:href="#ml-svg-linear-gradient-6"/>
        <linearGradient id="ml-svg-linear-gradient-11" x1="-8990.85" y1="880.86" x2="-8897.75" y2="880.86" gradientTransform="translate(128.96 -8821.76) rotate(-83.94)" xlink:href="#ml-svg-linear-gradient-8"/>
        <linearGradient id="ml-svg-linear-gradient-12" x1="-8985.54" y1="822.77" x2="-8882.74" y2="822.77" gradientTransform="matrix(0.02, -1, 1, 0.02, -453.57, -8894.87)" xlink:href="#ml-svg-linear-gradient-8"/>
        <linearGradient id="ml-svg-linear-gradient-13" x1="780.81" y1="-418.97" x2="876.64" y2="-418.97" gradientTransform="matrix(0.97, 0.25, -0.25, 0.97, -834.75, 254.87)" xlink:href="#ml-svg-linear-gradient-8"/>
        </defs>
        <path class="man-logo-cls-1" d="M113.26.46a112.85,112.85,0,1,0,112.8,112.8A112.8,112.8,0,0,0,113.26.46Zm0,212.1a99.3,99.3,0,1,1,99.3-99.3A99.35,99.35,0,0,1,113.26,212.56Z"/><path class="man-logo-cls-2" d="M171.86,56.56c14.6,14.6,25.8,34.1,25.8,56.4,0,14.5-8.9,29.9-15.5,41.7h0c6.6-11.8,13.6-27.7,13.6-42.2,0-22.3-11.2-41.7-25.8-56.4Z"/><path class="man-logo-cls-2" d="M159.86,179.46s-2.5,1.5-2.4,1.9c-12.9,8.6-26.6,12-43.3,12h0c22.2,2,37.3-5.9,41.1-8.8S159.86,179.46,159.86,179.46Z"/><path class="man-logo-cls-3" d="M113.06,188.16a75.75,75.75,0,1,1,0-151.5c37.9,0,76.5,35.9,76.5,75.7C189.56,160.76,146.36,188.16,113.06,188.16Z"/><path class="man-logo-cls-4" d="M186.36,93.26a77,77,0,0,0-13.1-26.8,75.25,75.25,0,0,0-60.2-29.8,75.73,75.73,0,0,0-75.8,75.7,76.48,76.48,0,0,0,5.3,27.9A76.14,76.14,0,0,1,63,67c-3.3,20.7-11,90.2-11,90.2s15.8,17.1,26.2,22.5v.3c.9-15.6,5.79-70.5,5.79-70.5l25.71,76.7h16.8c15.7-46,26-95.3,26-95.3l6.91,81.86s21.29-23.46,26.39-35.66c-2.4-25.7-7.2-57.9-7.2-57.9A72.75,72.75,0,0,1,186.36,93.26Zm-67.5,21.5S110,87,100.16,47.16a68.33,68.33,0,0,1,15.8-1.8,74.48,74.48,0,0,1,20.7,2.9C126.86,87.46,118.86,114.76,118.86,114.76Z"/><path class="man-logo-cls-5" d="M113.06,12.66a100.65,100.65,0,1,0,100.7,100.6C213.76,59.76,164.66,12.66,113.06,12.66Zm0,175.5a75.75,75.75,0,1,1,0-151.5c38,0,76.2,33.3,76.5,75.7C189.86,160.86,146.46,188.16,113.06,188.16Z"/><path class="man-logo-cls-6" d="M124,183.26c12-35.5,27.8-93.9,27.8-93.9,6.4,58.9,8.5,100,8.5,100l21.8-34.7c.3-5.1.9-9.4.9-9.4-2.6-24.3-6.1-59.2-8.8-75.7,0,0-4-10.4-5-13.6-2-6.1,1.3-9.3,1.3-9.3l-29.8-17.1c-12,48.3-23.4,83-23.4,83s-10.4-30.5-21.5-73.3l-4.3-4.4-30.3,11s-11.4,56.8-15.6,113.5l23.5,20.4,4.33-1.89c1-15.9,3.87-48.51,8.37-89.51,0,0,12.6,59.1,24.7,94.6Z"/><path class="man-logo-cls-7" d="M114.06,15.46a97,97,0,1,0,97,97C211.06,60.86,163.76,15.46,114.06,15.46Zm81.7,97c0,14.4-7,30.4-13.6,42.2-.1-.6-.7,2.1-.8,1.6-3.2-37.4-9.7-82.6-13-101.5C182.29,63.29,195.76,90.16,195.76,112.46Zm-56.9-77c-13.2,43.1-24.2,81.5-24.2,81.5s-11.6-37-23.2-82.2a80.67,80.67,0,0,1,22.6-3.2C134.29,32.63,138.86,35.46,138.86,35.46Zm-79.8,18.3c-3.3,19.2-10.6,64.1-13.8,102.2-6.6-11.7-12.1-29.1-12.1-43.5C33.16,73.46,59.06,53.76,59.06,53.76Zm100.8,125.6s-23.57,13.9-45.7,13.9a79.65,79.65,0,0,1-45-13.6c.9-14.3,3.7-52.8,8.5-97,0,0,18.3,62.1,30.3,97.5h14c15.4-48.3,29.2-96.7,29.2-96.7"/><g id="highlights"><path class="man-logo-cls-8" d="M45.26,156c4.1-41.4,11.5-86.6,13.8-102.2l-2.68,7.17c-3.2,18.7-8.89,53.29-12,85.29Z"/><path class="man-logo-cls-9" d="M77.66,82.66s18.2,62.1,30.2,97.5l-1.4,2.7c-8.7-25.6-20.1-64.3-25.8-83.8-1.2-4.9-2.1-9.5-2.1-9.5Z"/><path class="man-logo-cls-8" d="M114.66,117s12.1-37.1,24.2-81.5l-3.5,4.6c-8.4,32.2-16.3,57.3-19.6,67.5Z"/><path class="man-logo-cls-8" d="M151.16,83.56c4.8,44.3,7.8,81.6,8.7,95.9,0,0-6.1-48.6-9.7-83.4Z"/></g><path class="man-logo-cls-10" d="M138.86,35.46c-5.3-2.5-13.9-5.3-25.8-4.9-7.9.3-13.2.9-21.6,4.2h0a80.67,80.67,0,0,1,22.6-3.2,96.62,96.62,0,0,1,24.8,3.9Z"/><path class="man-logo-cls-2" d="M47.06,151.66l-1.8,4.3c4.1-41.4,11.5-86.6,13.8-102.2C59.06,53.76,55.66,87.46,47.06,151.66Z"/><path class="man-logo-cls-2" d="M77.66,82.66S88.5,120.44,94.9,140.71c.87,2.75,13,39.78,13,39.78C102.13,149.39,77.66,82.66,77.66,82.66Z"/><path class="man-logo-cls-2" d="M151.21,84c3.2,33,8.65,95.46,8.65,95.46C161.76,139.56,151.21,84,151.21,84Z"/><path class="man-logo-cls-2" d="M52.27,37.73c-13.48,11.9-28.4,28.73-31.86,49.52C26.91,68.39,38.38,50.63,52.27,37.73Z"/><path class="man-logo-cls-2" d="M138.86,35.46c-2.9,24-24.2,81.5-24.2,81.5Z"/><path class="man-logo-cls-11" d="M69.16,179.66c1.9-29.7,8.5-97,8.5-97A652.93,652.93,0,0,0,69.16,179.66Z"/><path class="man-logo-cls-11" d="M181.36,156.26c-5.07-59.8-12.88-100.83-12.88-100.83s9.15,77.33,9.08,84.13C178.46,145.76,181.36,156.26,181.36,156.26Z"/><path class="man-logo-cls-11" d="M122,180.26c6.2-18.4,28.11-93,28.11-93C132.37,136.65,122,180.26,122,180.26Z"/><path class="man-logo-cls-12" d="M113.26,3.36c-60.5,0-109.5,49.3-109.5,110.2s49,110.2,109.5,110.2,109.5-49.3,109.5-110.2S173.66,3.36,113.26,3.36Zm0,213.2c-56.6,0-102.4-46.1-102.4-103.1s45.8-103.1,102.4-103.1,102.4,46.1,102.4,103.1S169.76,216.56,113.26,216.56Z"/><path class="man-logo-cls-13" d="M107.66,2.56A110.44,110.44,0,0,0,31,40.46,109.7,109.7,0,0,0,3.56,121c0,.3.5,3.4.8,3.4s.2-2.2.2-2.5A111.36,111.36,0,0,1,32,41.26C51.46,19,78.26,5,107.66,3.06c.3,0,1.9,0,1.8-.3S108,2.56,107.66,2.56Z"/><path class="man-logo-cls-14" d="M121.46,216.36A100.47,100.47,0,0,0,190.86,182c17.8-20.4,26.79-45.7,25.09-72.8,0-.3-.4-3.1-.8-3.1s-.2,2-.1,2.3A100.14,100.14,0,0,1,190,181.16c-17.6,20.2-42,33-68.6,34.71-.3,0-1.7,0-1.7.3C119.86,216.56,121.16,216.46,121.46,216.36Z"/><path class="man-logo-cls-15" d="M222.46,106.66c-.4,0-.4.9-.4,1.2,1.8,28.9-8.3,56.8-27.4,78.5s-45.3,34.87-74.2,36.67c-.3,0-.9.2-.9.5s.4.4.8.4A109.45,109.45,0,0,0,223,107.66C222.86,107.26,222.76,106.66,222.46,106.66Z"/><path class="man-logo-cls-16" d="M3.36,114.06a110.44,110.44,0,0,0,33.8,78.6,109.77,109.77,0,0,0,79,31.6c.3,0,3.5-.3,3.4-.7s-2.2-.3-2.5-.3a111.1,111.1,0,0,1-79-31.5c-21.3-20.7-33.9-48.2-34.2-77.7,0-.4.1-1.9-.2-1.9S3.26,113.66,3.36,114.06Z"/><path class="man-logo-cls-17" d="M215.76,113.56a100.47,100.47,0,0,0-22.5-65,103.17,103.17,0,0,0-68.5-38.2c-.3,0-3.2-.1-3.2.2s1.9.5,2.3.6a103.68,103.68,0,0,1,68.5,38.1c15.1,18.8,23.4,41.7,22.8,65.2C215.16,117.36,215.66,116.86,215.76,113.56Z"/><path class="man-logo-cls-18" d="M11.66,113.36a97.35,97.35,0,0,0,26.4,71.5,98.88,98.88,0,0,0,69.8,32.3c.3,0,3.1-.1,3.1-.4s-1.9-.4-2.3-.4a100.89,100.89,0,0,1-69.8-32.3c-18.1-19.7-28.3-44.1-27.2-70.7Z"/><path class="man-logo-cls-19" d="M107.86,3c0,.3.9.4,1.2.4a108.67,108.67,0,0,1,112.7,103.8c0,.3.2.9.5.9s.4-.4.4-.8a108.64,108.64,0,0,0-34.9-76.1c-21.5-19.9-49.8-29.7-79-28.6C108.46,2.66,107.86,2.66,107.86,3Z"/><path class="man-logo-cls-20" d="M97.66,215.16c-54.2-8.3-91.6-63.1-83.2-117.3s60.4-94.8,114.6-86.5c-55.9-8.6-108.2,30-116.9,86.3S41.76,206.56,97.66,215.16Z"/><path class="man-logo-cls-21" d="M214.56,129.06c8.7-56.2-29.6-108.8-85.5-117.4,54.2,8.3,91.6,62.7,83.3,116.9s-60.4,95.2-114.6,86.8C153.56,224,205.86,185.36,214.56,129.06Z"/><path class="man-logo-cls-22" d="M130.16,11.56a99.53,99.53,0,0,0-75.6,16.1,99.36,99.36,0,0,0-42,64.4c-.1.3-.3,3.1,0,3.2s.7-1.9.7-2.2a100.44,100.44,0,0,1,42-64.5c21.9-15.2,48.6-21.5,74.8-16.5.3.1,1.6.4,1.7.1S130.46,11.66,130.16,11.56Z"/></svg>
</div>
        <h1>Welcome</h1>
        <h4>Please wait while we get your Inventory ready...</h4>
    </div>
</div>

<button class="fade">Fade</button>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/napotopia/a-pen-by-rodrigo-martinez-mBBorQ */
html,
html body {
    overflow: hidden;
}

body {
    padding: 0;
    margin: 0;
}

.container {
    height: 1000px;
    width: 100%;
}

.landing {
    position: fixed;
    background: #fff;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    padding: 2rem;
    opacity: 1;
}

.landing--content {
    position: relative;
    top: 50%;
    //transform: translate3d(0, -50%, 0);
}

.manheim-medallion {
    width: 125px;
    display: inline-block;
}

.fadeout {
    -webkit-animation: 1s fadeout forwards;
            animation: 1s fadeout forwards;
}

button.fade {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
}

@-webkit-keyframes fadeout {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes fadeout {
    to {
        opacity: 0;
        visibility: hidden;
    }
}


.hide {
  display:none;  
}

/*Downloaded from https://www.codeseek.co/napotopia/a-pen-by-rodrigo-martinez-mBBorQ */
var landingContent = document.querySelector('.landing--content');
var landing = document.querySelector('.landing');
var button = document.querySelector('button.fade');

var fadeLandingContent = function fadeLandingContent() {
    landingContent.classList.add('fadeout');
};

var hide = function hide(event) {
    event.target.classList.add('hide');
};

var fadeLanding = function fadeLanding() {
    landing.classList.add('fadeout');
};

// landingContent.addEventListener("webkitAnimationEnd", fadeLanding);

// landing.addEventListener("webkitAnimationEnd", hide);


var animEvents = ['animationend', 'webkitAnimationEnd'];

animEvents.map(function (e) {
    landingContent.addEventListener(e, fadeLanding);
});

animEvents.map(function (e) {
    landing.addEventListener(e, hide);
});

button.addEventListener('click', fadeLandingContent);

Comments