A Pen by Chris Barr

Thumbnail
This awesome code was written by chrismbarr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrismbarr ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Chris Barr</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

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

  
</head>

<body>

    <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h4 class="feature-title">Added Security</h4>
        <div class="feature-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150" preserveAspectRatio="xMidYMid meet" id="svg-icon-keys">
            <g id="left-key">
              <path class="key" d="M32.7,135.74a1.6,1.6,0,0,1-.56-.1,1,1,0,0,1-.54-1.4L55.45,88.73l-.35-.18L32,132.73a1,1,0,0,1-.89.54H31a1,1,0,0,1-.87-.65l-2.94-8a1.23,1.23,0,0,1,.8-1.64l3.52-1.1a1.44,1.44,0,0,0,.95-1.81l-1.77-5.65a1.36,1.36,0,0,1,.89-1.7l5-1.56a1.45,1.45,0,0,0,.95-1.81l-1.33-4.26a1.36,1.36,0,0,1,.89-1.7L41.34,102a1.44,1.44,0,0,0,.95-1.81l-1.36-2.74a1,1,0,0,1-.09-.3,1.35,1.35,0,0,1,.94-1.5l2-.51v0l.93-1.79c.54-1,1.08-2.11,1.35-2.58l0,0,0,0c-.11,0-.41-.19-.8-.39a6,6,0,0,1-2.52-2A2.6,2.6,0,0,1,43,85.8l1.86-3.54a3.85,3.85,0,0,0,.23-2.61h0c-.06-.11-6.07-11.11-.3-22.11a22.05,22.05,0,0,1,7.4-8.13,1,1,0,0,1,1.07,0C57,51.7,61,54,64.86,55.9a1,1,0,0,1,.51,1.17,5.21,5.21,0,0,0,2.58,6.06,5.12,5.12,0,0,0,2.4.59,5.22,5.22,0,0,0,3.44-1.29,1,1,0,0,1,1.14-.12c.71.39,1.43.82,2.17,1.25,3.33,1.95,6.77,4,10.19,4a1.09,1.09,0,0,1,1.1,1,21.34,21.34,0,0,1-2.45,10.18,21.57,21.57,0,0,1-2.85,4.16c-6.22,7.77-15.75,8.4-15.84,8.41h0a5.62,5.62,0,0,1-1.25.12c-1.13.05-2.38.11-2.62.57L42.87,131a3.38,3.38,0,0,1-2,1.52l-7.78,3.11a1,1,0,0,1-.3.07Z"/>
              <path class="outline" d="M52.7,50.23c3.9,2.4,8,4.68,11.7,6.56a6.2,6.2,0,0,0,10,6.4c4,2.2,8.36,5.33,12.84,5.33h.1A20.45,20.45,0,0,1,82.32,82.2c-5.94,7.43-15,8.06-15.14,8.06H67l-.12,0a8.81,8.81,0,0,1-1,.08c-1.53.07-2.93.13-3.44,1.11L42,130.57a2.44,2.44,0,0,1-1.32,1l-.11,0-7.82,3.13h0a.62.62,0,0,1-.21,0L56.8,88.31,54.68,87.2,31.07,132.26l-2.94-8a.27.27,0,0,1,0-.21.25.25,0,0,1,.16-.13l3.52-1.1a2.44,2.44,0,0,0,1.6-3.06l-1.77-5.65a.36.36,0,0,1,.24-.45l5-1.56a2.45,2.45,0,0,0,1.6-3.06l-1.33-4.26a.36.36,0,0,1,.24-.45L41.64,103a2.45,2.45,0,0,0,1.6-3.06l0-.1L41.83,97a.36.36,0,0,1,.25-.4l2.4-.6.22-.41.93-1.8c.5-1,1.06-2.07,1.33-2.55l.57-1-1.05-.47c-.09,0-.38-.17-.74-.36a5.28,5.28,0,0,1-2.06-1.5,1.64,1.64,0,0,1,.2-1.69l1.86-3.54a4.83,4.83,0,0,0,.3-3.37l0-.12-.06-.11c-.06-.1-5.75-10.67-.27-21.13a20.92,20.92,0,0,1,7.07-7.76m0-2a2,2,0,0,0-1.1.33,23,23,0,0,0-7.74,8.5c-5.68,10.84-.43,21.64.26,23a2.89,2.89,0,0,1-.18,1.77l-1.86,3.54a3.57,3.57,0,0,0-.27,3.39c.13.3.5,1.19,2.92,2.46l-.81,1.58-.08.15-.72,1.4-1.53.38-.11,0a2.35,2.35,0,0,0-1.63,2.6,2,2,0,0,0,.19.6l1.31,2.64a.44.44,0,0,1-.3.5l-4.26,1.33a2.36,2.36,0,0,0-1.55,3l1.33,4.26a.45.45,0,0,1-.29.55l-5,1.56a2.37,2.37,0,0,0-1.55,3l1.77,5.65a.44.44,0,0,1-.29.55L27.69,122a2.23,2.23,0,0,0-1.42,3l2.92,8a2,2,0,0,0,1.36,1.24,2,2,0,0,0,1.24,2.38,2.6,2.6,0,0,0,.91.17h.19a2,2,0,0,0,.59-.14l7.7-3.08a4.4,4.4,0,0,0,2.57-2l20.4-38.93A9.49,9.49,0,0,1,66,92.38a7.55,7.55,0,0,0,1.41-.14c1.14-.1,10.32-1.14,16.45-8.77a22.56,22.56,0,0,0,3-4.33A22.33,22.33,0,0,0,89.38,68.5a2,2,0,0,0-2-2h-.1c-3.15,0-6.47-1.94-9.69-3.82-.74-.43-1.47-.86-2.19-1.26a2,2,0,0,0-2.29.25,4.22,4.22,0,0,1-2.78,1,4.13,4.13,0,0,1-1.94-.48,4.21,4.21,0,0,1-2.08-4.9,2,2,0,0,0-1-2.35c-3.81-1.93-7.8-4.17-11.56-6.48a2,2,0,0,0-1-.3Z"/>
            </g>
            <path class="key-ring-shape" d="M98.13,43.73c-.27.33-.57.64-.87,1A22.5,22.5,0,0,1,94.67,47a28.68,28.68,0,0,1-8,4.25,3.22,3.22,0,0,0-2,3.82l0,.17a3.25,3.25,0,0,0,4.26,2.25,33.7,33.7,0,0,0,12.41-7.63,28,28,0,0,0,2.58-2.9l0-.05Zm-.87,1c-.23.24-.47.49-.72.72C96.79,45.17,97,44.93,97.26,44.69Z"/>
            <g id="right-key">
              <path class="key" d="M114.65,135.74h-.21a1,1,0,0,1-.29-.09L106.6,132h0a3.37,3.37,0,0,1-1.85-1.64L86.83,90c-.21-.48-1.46-.62-2.56-.74A5.69,5.69,0,0,1,83,89.1h0a22.52,22.52,0,0,1-5.09-1.47,1,1,0,0,1-.59-.68c-2.13-8.46-1.88-17.28-1.63-25.81l0-1.69a1,1,0,0,1,1.85-.49A5.23,5.23,0,0,0,82,61.43a5.2,5.2,0,0,0,4.75-7.31,5.2,5.2,0,0,0-9.09-.75,1,1,0,0,1-1.84-.55c0-2.13-.06-4-.16-5.76a1,1,0,0,1,.55-1q.53-.26,1.07-.51a23.16,23.16,0,0,1,9.45-2A22.73,22.73,0,0,1,107.64,56.9c5,11.35-1.67,21.94-1.74,22h0a3.85,3.85,0,0,0,.06,2.62l1.62,3.66a2.6,2.6,0,0,1,.07,2.55A6,6,0,0,1,105,89.61c-.4.18-.71.29-.81.33l-.06,0,0,0c.23.48.7,1.56,1.12,2.53l.06.13.81,1.85h0l1.93.62a1.38,1.38,0,0,1,.89,1.58,1,1,0,0,1-.11.29l-1.53,2.63,0,0a1.44,1.44,0,0,0,.84,1.83l4.16,1.6a1.36,1.36,0,0,1,.78,1.76l-1.6,4.16a1.45,1.45,0,0,0,.83,1.87l4.88,1.88a1.36,1.36,0,0,1,.78,1.76l-2.13,5.53a1.44,1.44,0,0,0,.83,1.87l3.44,1.33a1.25,1.25,0,0,1,.72.7,1.26,1.26,0,0,1,0,1l-3.45,7.8a1,1,0,0,1-.91.6h0a1,1,0,0,1-.91-.59L95.28,87.18l-.36.16,20.82,47a1,1,0,0,1-.63,1.36A1.62,1.62,0,0,1,114.65,135.74Z"/>
              <path class="outline" d="M86.75,44.59a21.78,21.78,0,0,1,20,12.71c4.79,10.8-1.59,21-1.65,21.07l-.07.1,0,.12A4.83,4.83,0,0,0,105,82l1.62,3.66a1.64,1.64,0,0,1,.09,1.7,5.28,5.28,0,0,1-2.16,1.36c-.38.17-.67.28-.77.31l-1.08.4.5,1c.24.5.73,1.63,1.16,2.63l.81,1.86.19.42,2.35.76a.36.36,0,0,1,.22.41l-1.56,2.69,0,.1a2.45,2.45,0,0,0,1.4,3.16l4.16,1.6a.36.36,0,0,1,.21.46l-1.61,4.16a2.45,2.45,0,0,0,1.4,3.16l4.88,1.88a.36.36,0,0,1,.21.46l-2.13,5.53a2.44,2.44,0,0,0,1.4,3.16l3.45,1.33a.25.25,0,0,1,.15.14.27.27,0,0,1,0,.21l-3.46,7.82L95.79,85.86l-2.19,1,21.23,47.88-.18,0h-.07l-7.6-3.63-.1,0a2.44,2.44,0,0,1-1.25-1.1L87.74,89.64c-.45-1-1.84-1.16-3.36-1.33a8.8,8.8,0,0,1-1-.15l-.12,0-.13,0a21.49,21.49,0,0,1-4.83-1.41c-2.24-8.87-1.8-18.11-1.55-27.22a6.2,6.2,0,1,0,.11-6.66c0-2,0-3.9-.16-5.82q.51-.25,1-.49a22.26,22.26,0,0,1,9-1.92m0-2a24.16,24.16,0,0,0-9.85,2.09q-.57.25-1.12.53a2,2,0,0,0-1.1,1.91c.11,1.74.16,3.6.16,5.7a2,2,0,0,0,3.67,1.1A4.2,4.2,0,1,1,82,60.43a4.23,4.23,0,0,1-3.58-2,2,2,0,0,0-3.7,1l0,1.69c-.25,8.6-.51,17.49,1.66,26.08a2,2,0,0,0,1.18,1.36,24,24,0,0,0,5.24,1.53,7.47,7.47,0,0,0,1.38.23,9.6,9.6,0,0,1,1.84.31l17.81,40.18a4.4,4.4,0,0,0,2.44,2.18l7.49,3.58a2,2,0,0,0,.58.18l.35,0a2.62,2.62,0,0,0,.75-.11,2,2,0,0,0,1.39-2.29,2,2,0,0,0,1.44-1.15l3.46-7.82a2.22,2.22,0,0,0,.06-1.74,2.27,2.27,0,0,0-1.3-1.28L117,121a.44.44,0,0,1-.25-.57l2.13-5.53a2.36,2.36,0,0,0-1.34-3L112.65,110a.45.45,0,0,1-.25-.57l1.61-4.16a2.36,2.36,0,0,0-1.35-3l-4.16-1.6a.44.44,0,0,1-.27-.52l1.48-2.55a2,2,0,0,0,.23-.58,2.35,2.35,0,0,0-1.46-2.7l-.11,0-1.5-.48-.63-1.45-.06-.14-.71-1.64c2.49-1.12,2.93-2,3.07-2.26a3.57,3.57,0,0,0,0-3.41l-1.62-3.66a2.89,2.89,0,0,1-.07-1.78c.77-1.26,6.72-11.7,1.76-22.89a23.73,23.73,0,0,0-21.8-13.9Z"/>
            </g>
            <g id="key-ring">
              <path class="outline" d="M39.81,34.12C39.81,48.9,54.63,61,73.54,61.54h.58a5.07,5.07,0,0,0-.28-10.13C60.47,51.13,50,43.52,50,34.12H48.18c0,10.38,11.27,18.76,25.67,19.07A3.3,3.3,0,0,1,74,59.78H73.6c-18-.56-32-11.83-32-25.65Z"/>
              <path class="key-ring-shape" d="M108.36,34.12C108.36,20,93.38,8.44,75,8.44S41.58,20,41.58,34.12c0,13.82,14.06,25.09,32,25.65H74a3.3,3.3,0,0,0-.18-6.59c-14.39-.32-25.67-8.7-25.67-19.07S60.2,15,75,15s26.79,8.56,26.79,19.08a14.86,14.86,0,0,1-3.62,9.61l5.79,3.17A21,21,0,0,0,108.36,34.12Z"/>
            </g>
            <g id="front-key">
              <path class="key" d="M76,142.3a1,1,0,0,1-1-1V89.92h-.39V139.8a1,1,0,0,1-1.67.74l-6.33-5.75a1.23,1.23,0,0,1-.06-1.82l2.61-2.61a1.44,1.44,0,0,0,0-2L65,124.13a1.36,1.36,0,0,1,0-1.92l3.7-3.7a1.45,1.45,0,0,0,0-2l-3.15-3.15a1.36,1.36,0,0,1,0-1.92l3.15-3.15a1.44,1.44,0,0,0,0-2l-2.47-1.8a1,1,0,0,1-.22-.22,1.35,1.35,0,0,1,.14-1.76L67.67,101v0c0-.52,0-1.26,0-2v-.17c0-1.06,0-2.22,0-2.75v0h0c-.14,0-.47,0-.89,0a6,6,0,0,1-3.16-.6,2.61,2.61,0,0,1-1-2.36v-4a3.85,3.85,0,0,0-1-2.42h0C61.46,86.63,51,80.1,51,67.71a23,23,0,0,1,2.9-11.17,1,1,0,0,1,1.35-.39,41.2,41.2,0,0,0,16.59,4.74,1,1,0,0,1,.3.07,5.11,5.11,0,0,0,1.92.37,5.16,5.16,0,1,0-2.4-9.72,1,1,0,0,1-.47.12h-.1a32.71,32.71,0,0,1-8.61-2.07,1,1,0,0,1-.14-1.79A23,23,0,0,1,97.15,67.71c0,12.52-10.43,18.92-10.54,19h0a5.8,5.8,0,0,1-1.07.7c-1,.56-2,1.19-2,1.71v44.12a3.38,3.38,0,0,1-1.05,2.27L77,141.87a1,1,0,0,1-.23.2,1.6,1.6,0,0,1-.64.22Z"/>
              <path class="outline" d="M74.09,45.65A22.09,22.09,0,0,1,96.15,67.71c0,11.94-10,18.06-10.05,18.13L86,85.9l-.09.09a8.8,8.8,0,0,1-.87.55c-1.32.77-2.53,1.48-2.53,2.58v44.12a2.44,2.44,0,0,1-.7,1.51l-.08.07-5.48,6.4a.6.6,0,0,1-.24.08V88.92H73.61V139.8l-6.33-5.75a.27.27,0,0,1-.1-.19.25.25,0,0,1,.08-.19l2.61-2.61a2.44,2.44,0,0,0,0-3.45l-4.19-4.19a.36.36,0,0,1,0-.51l3.7-3.7a2.45,2.45,0,0,0,0-3.45l-3.15-3.15a.36.36,0,0,1,0-.51L69.38,109a2.45,2.45,0,0,0,0-3.45l-.08-.07-2.51-1.82a.36.36,0,0,1,0-.47l1.84-1.64V101c0-.52,0-1.27,0-2,0-1.09,0-2.32,0-2.88l0-1.15L67.54,95c-.1,0-.41,0-.83,0a5.28,5.28,0,0,1-2.53-.37,1.64,1.64,0,0,1-.61-1.58v-4A4.83,4.83,0,0,0,62.28,86l-.09-.09-.11-.06C62,85.78,52,79.52,52,67.71A22,22,0,0,1,54.8,57a42.17,42.17,0,0,0,17,4.86,6.16,6.16,0,1,0-.58-11.16,31.69,31.69,0,0,1-8.35-2,22,22,0,0,1,11.21-3.07m0-2A24,24,0,0,0,61.86,47a2,2,0,0,0,.29,3.58A33.71,33.71,0,0,0,71,52.71h.21a2,2,0,0,0,.94-.23A4.16,4.16,0,1,1,72.54,60a2,2,0,0,0-.6-.14,40.19,40.19,0,0,1-16.19-4.62,2,2,0,0,0-2.71.78,24,24,0,0,0-3,11.65c0,12.23,9.72,19,10.9,19.76a2.9,2.9,0,0,1,.65,1.65v4a3.57,3.57,0,0,0,1.34,3.13c.25.2,1,.82,3.73.83,0,.53,0,1.16,0,1.77V99c0,.56,0,1.12,0,1.58l-1.18,1.05-.08.08a2.35,2.35,0,0,0-.24,3.06,2,2,0,0,0,.44.44L68,107a.44.44,0,0,1,0,.58l-3.15,3.15a2.36,2.36,0,0,0,0,3.34L68,117.18a.45.45,0,0,1,0,.63l-3.69,3.69a2.37,2.37,0,0,0,0,3.34L68.46,129a.44.44,0,0,1,0,.63l-2.61,2.61a2.23,2.23,0,0,0,.12,3.3l6.29,5.72a2,2,0,0,0,1.78.47A2,2,0,0,0,76,143.3l.25,0a2.61,2.61,0,0,0,1-.37,2,2,0,0,0,.46-.4l5.39-6.3a4.4,4.4,0,0,0,1.34-3V89.29a9.49,9.49,0,0,1,1.54-1,7.55,7.55,0,0,0,1.19-.78c1.1-.71,10.93-7.37,10.93-19.78A24.09,24.09,0,0,0,74.09,43.65Z"/>
            </g>
          </svg>
        </div>
        <p class="feature-description">Two-factor authentication will greatly increase the security on your account!</p>
      </div>
      <div class="col-md-4">
        <h4 class="feature-title">Get Notified</h4>
        <div class="feature-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150" preserveAspectRatio="xMidYMid meet" id="svg-icon-notifications">
            <path id="notifications-envelope" d="M82.09,95.52a10,10,0,0,1-14.18,0l-16.7-16.7-28.1,28.1v.51a4.32,4.32,0,0,0,4.32,4.32h95.14a4.32,4.32,0,0,0,4.32-4.32v-.5L98.79,78.82Zm-59-44.79V99.28L47.39,75Zm99.46-12.48H27.43a4.32,4.32,0,0,0-4.32,4.32v.51L71.73,91.7a4.63,4.63,0,0,0,6.54,0l48.62-48.62v-.51A4.32,4.32,0,0,0,122.57,38.24Zm4.32,61V50.72L102.61,75Z"/>
            <g id="notifications-badge">
              <circle id="notifications-badge-circle" cx="126.45" cy="40.66" r="13.55"/>
              <path id="notifications-badge-number" d="M122.26,45.9a6.87,6.87,0,0,0,3.37,1c2.64,0,3.46-1.68,3.44-2.95,0-2.13-1.94-3-3.93-3H124V39.33h1.15c1.5,0,3.39-.77,3.39-2.57,0-1.22-.77-2.29-2.67-2.29a5.58,5.58,0,0,0-3,1l-.54-1.5a7.23,7.23,0,0,1,4-1.17c3,0,4.35,1.78,4.35,3.63A3.77,3.77,0,0,1,127.8,40v0A4,4,0,0,1,131.19,44c0,2.43-1.89,4.56-5.54,4.56a7.73,7.73,0,0,1-4-1Z"/>
            </g>
          </svg>  
        </div>
        <p class="feature-description">Receive email notifications for suspicious account activity & security alerts.</p>
      </div>
      <div class="col-md-4">
        <h4 class="feature-title">Trust Devices</h4>
        <div class="feature-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150" preserveAspectRatio="xMidYMid meet" id="svg-icon-devices">
            <defs>
              <style>
                .wallpaper-phone  { fill: url(#linear-gradient); }
                .wallpaper-tablet { fill: url(#linear-gradient-2); }
                .wallpaper-laptop { fill: url(#linear-gradient-3); }
              </style>
              <linearGradient id="linear-gradient" x1="93.59" y1="105.1" x2="117.61" y2="129.12" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#2f7ad4"/>
                <stop offset="1" stop-color="#00ab98"/>
              </linearGradient>
              <linearGradient id="linear-gradient-2" x1="35.29" y1="92.47" x2="70.23" y2="127.41" xlink:href="#linear-gradient"/>
              <linearGradient id="linear-gradient-3" x1="43.24" y1="8.56" x2="106.77" y2="72.09" xlink:href="#linear-gradient"/>
            </defs>
            <g id="phone">
              <rect class="wallpaper wallpaper-phone" x="95.82" y="102.86" width="19.56" height="28.49"/>
              <circle class="device home-button" cx="105.6" cy="134.16" r="0.81"/>
              <path class="device" d="M106.9,134.16a1.3,1.3,0,1,0-1.3,1.31A1.3,1.3,0,0,0,106.9,134.16Zm7.47-31.3H96.82a1,1,0,0,0-1,1v26.48a1,1,0,0,0,1,1h17.55a1,1,0,0,0,1-1V103.87A1,1,0,0,0,114.37,102.86ZM96.9,100.47H114.3a2.15,2.15,0,0,1,2.2,2.09v31.68a2.15,2.15,0,0,1-2.2,2.09H96.9a2.15,2.15,0,0,1-2.2-2.09V102.57A2.15,2.15,0,0,1,96.9,100.47Z"/>
              <rect class="phone-speaker" x="103.1" y="101.48" width="5" height="0.46" rx="0.23" ry="0.23"/>
            </g>
            <g id="tablet">
              <rect class="wallpaper wallpaper-tablet" x="36.4" y="91.37" width="32.73" height="37.15"/>
              <path class="device" d="M54.51,131.84a1.75,1.75,0,1,0-1.75,1.75A1.75,1.75,0,0,0,54.51,131.84Zm15.38,4.5H35.64A2.28,2.28,0,0,1,33.47,134V90.55a2.28,2.28,0,0,1,2.17-2.38H69.89a2.28,2.28,0,0,1,2.17,2.38V134A2.28,2.28,0,0,1,69.89,136.34Zm-.76-8.72V92.27a.9.9,0,0,0-.9-.9H37.3a.9.9,0,0,0-.9.9v35.35a.9.9,0,0,0,.9.9H68.23A.9.9,0,0,0,69.13,127.62Z"/>
              <circle class="device home-button"  cx="52.76" cy="131.84" r="1.12"/>
            </g>
            <g id="laptop">
              <rect class="wallpaper wallpaper-laptop" x="36.73" y="15.07" width="76.55" height="50.52"/>
              <path class="device laptop-screen" d="M33.47,11.51h83.08V69.15H33.47Zm79.81,54.08V15.07H36.73V65.59Z"/>
              <polygon class="device laptop-keyboard" points="94.17 75.9 55.84 75.9 28.37 75.9 33.47 71.18 75 71.18 116.55 71.18 121.63 75.9 94.17 75.9"/>
              <path class="device laptop-bottom" d="M28.37,76.8h93.26v.46c0,1.14-1.59,2.07-3.57,2.07H31.94c-2,0-3.57-.93-3.57-2.07Z"/>
            </g>
          </svg>
        </div>
        <p class="feature-description">View important details related to the devices which access the portal.</p>
      </div>
    </div>
  </div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrismbarr/a-pen-by-chris-barr-LzzVzy */
body {
  max-width: 970px;
  margin: 20px auto 0 auto;
}

.feature-icon {
  border: 2px solid #868E96;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
}
.feature-icon svg {
  display: block;
  width: 100%;
  height: 200px;
  box-sizing: border-box;
}

.feature-description {
  color: #868E96;
  font-size: 13px;
}


/*================== Keys */
#svg-icon-keys,
#svg-icon-keys g {
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
#svg-icon-keys {
  -webkit-animation-name: anim-keys-drop;
          animation-name: anim-keys-drop;
  -webkit-animation-duration: 250ms;
          animation-duration: 250ms;
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}
#svg-icon-keys g {
  -webkit-animation-duration: 250ms;
          animation-duration: 250ms;
  -webkit-animation-delay: 750ms;
          animation-delay: 750ms;
}
#svg-icon-keys .outline {
  fill: #FFF;
}
#svg-icon-keys .key-ring-shape {
  fill: #8C8C8C;
}
#svg-icon-keys #left-key .key,
#svg-icon-keys #right-key .key {
  fill: #545454;
}
#svg-icon-keys #front-key .key {
  fill: #333;
}
body:not(#browser-ie) #svg-icon-keys #left-key {
  -webkit-animation-name: anim-left-key;
          animation-name: anim-left-key;
  -webkit-transform-origin: 61% 2%;
          transform-origin: 61% 2%;
  -moz-transform-origin: 42% 30%
}
body:not(#browser-ie) #svg-icon-keys #right-key {
  -webkit-animation-name: anim-right-key;
          animation-name: anim-right-key;
  -webkit-transform-origin: 8% -8%;
          transform-origin: 8% -8%;
  -moz-transform-origin: 57% 17%;
}
@-webkit-keyframes anim-keys-drop{
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes anim-keys-drop{
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@-webkit-keyframes anim-left-key{
  0% {
    opacity: 0;
    -webkit-transform: rotate(-27deg);
            transform: rotate(-27deg);
  }
  5% {
    opacity: 1;
  }
}
@keyframes anim-left-key{
  0% {
    opacity: 0;
    -webkit-transform: rotate(-27deg);
            transform: rotate(-27deg);
  }
  5% {
    opacity: 1;
  }
}
@-webkit-keyframes anim-right-key{
  0% {
    opacity: 0;
    -webkit-transform: rotate(22deg);
            transform: rotate(22deg);
  }
  5% {
    opacity: 1;
  }
}
@keyframes anim-right-key{
  0% {
    opacity: 0;
    -webkit-transform: rotate(22deg);
            transform: rotate(22deg);
  }
  5% {
    opacity: 1;
  }
}

/*================== Notifications */
#svg-icon-notifications,
#notifications-badge {
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
#svg-icon-notifications {
  -webkit-animation-name: anim-drop-up;
          animation-name: anim-drop-up;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 900ms;
          animation-delay: 900ms;
}
#notifications-envelope {
  fill: #333;
}
body:not(#browser-ie) #notifications-badge {
  -webkit-transform-origin: 45% 35%;
          transform-origin: 45% 35%;
  -moz-transform-origin: 82% 25%;
  -webkit-animation-name: anim-scale-up;
          animation-name: anim-scale-up;
  -webkit-animation-duration: 150ms;
          animation-duration: 150ms;
  -webkit-animation-delay: 1200ms;
          animation-delay: 1200ms;
}
#browser-ie #notifications-badge {
  -webkit-animation-name: anim-fade-in;
          animation-name: anim-fade-in;
  -webkit-animation-duration: 150ms;
          animation-duration: 150ms;
  -webkit-animation-delay: 1200ms;
          animation-delay: 1200ms;
}
#notifications-badge-circle {
  fill: #FE311D;
}
#notifications-badge-number {
  fill: #FFF;
}
body:not(#browser-ie) #notifications-badge-number {
  -webkit-animation: anim-fade-in 250ms 1000ms backwards;
          animation: anim-fade-in 250ms 1000ms backwards;
}
@-webkit-keyframes anim-drop-up {
  0% {
    -webkit-transform: translateY(90%);
            transform: translateY(90%);
  }
}
@keyframes anim-drop-up {
  0% {
    -webkit-transform: translateY(90%);
            transform: translateY(90%);
  }
}
@-webkit-keyframes anim-scale-up {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
@keyframes anim-scale-up {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
@-webkit-keyframes anim-fade-in {
  0% {
    opacity: 0;
  }
}
@keyframes anim-fade-in {
  0% {
    opacity: 0;
  }
}


/*================== Devices Animation*/
#svg-icon-devices .device {
  fill: #333;
}
#svg-icon-devices g {
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
#svg-icon-devices #laptop,
#svg-icon-devices #tablet,
#svg-icon-devices #phone {
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
}
#svg-icon-devices #laptop {
  -webkit-animation-name: anim-device-from-top;
          animation-name: anim-device-from-top;
  -webkit-animation-delay: 1300ms;
          animation-delay: 1300ms;
}
#svg-icon-devices #tablet {
  -webkit-animation-name: anim-device-from-left;
          animation-name: anim-device-from-left;
  -webkit-animation-delay: 1500ms;
          animation-delay: 1500ms;
}
#svg-icon-devices #phone {
  -webkit-animation-name: anim-device-from-bottom;
          animation-name: anim-device-from-bottom;
  -webkit-animation-delay: 1700ms;
          animation-delay: 1700ms;
}
@-webkit-keyframes anim-device-from-top {
  from {
    opacity: 0;
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
}
@keyframes anim-device-from-top {
  from {
    opacity: 0;
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
}
@-webkit-keyframes anim-device-from-left {
  from {
    opacity: 0;
    -webkit-transform: translateX(25%);
            transform: translateX(25%);
  }
}
@keyframes anim-device-from-left {
  from {
    opacity: 0;
    -webkit-transform: translateX(25%);
            transform: translateX(25%);
  }
}
@-webkit-keyframes anim-device-from-bottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(25%);
            transform: translateY(25%);
  }
}
@keyframes anim-device-from-bottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(25%);
            transform: translateY(25%);
  }
}

/*Downloaded from https://www.codeseek.co/chrismbarr/a-pen-by-chris-barr-LzzVzy */
document.addEventListener('DOMContentLoaded', function () {
  //Detect IE so we can make some CSS style tweaks
  if (/MSIE|Trident\/|Edge\//.test(navigator.userAgent)) {
    document.body.setAttribute("id", "browser-ie");
  }
}, false);

Comments