CodePen Embed - RwrQJVJ

<!-------Intro------------------->
<h2>Smart Home Access</h2>
<p>With Hugolog, you are always in control of your doors, no matter where you are, right from your phone. Our products help you keep the bad guys out and let your friends and family in.</p>
<!-----------Intro Ends------------------------------> <br> <br> <br> <!----------The App-------------------->
<h2>The Hugolog App</h2>
<div class="app container">
<div class="screen">
<img class="screenshot fade" id="Remote-Unlock-screen" alt="remote-unlock-app-screen" src="https://cdn.shopify.com/s/files/1/0270/0106/1420/files/remote-unlock-app-screen_e143b5b6-64bb-4b4c-96db-f4a6506d6f4e.jpg?v=1593200340"> <img width="" height="" class="screenshot fade" alt="set-up-password-screen" src="https://cdn.shopify.com/s/files/1/0270/0106/1420/files/setup-password.jpg?v=1593200363"> <img width="" height="" class="screenshot fade" id="guest-access-screen" alt="guest-access-app-screen" src="https://cdn.shopify.com/s/files/1/0270/0106/1420/files/guest-access-screen.jpg?v=1593200357"> <img width="" height="" class="screenshot fade" id="visitor-log-screen" alt="lock-activity-app-screen" src="https://cdn.shopify.com/s/files/1/0270/0106/1420/files/lock-activity-history.jpg?v=1593200349">
</div>
<div class="feature-explanation">
<!---------------Remote Unlock----------------------> <img class="mobile-view-screen" alt="remote-unlock-app-screen" src="https://cdn.shopify.com/s/files/1/0270/0106/1420/files/remote-unlock-app-screen_e143b5b6-64bb-4b4c-96db-f4a6506d6f4e.jpg?v=1593200340">
<div class="appFunctionDescription" onclick="currentSlide(1)">
<img width="" height="" class="app-function-icon" alt="remote-unlock-icon" src="https://cdn.shopify.com/s/files/1/0270/0106/1420/files/remote-unlock-icon-100.jpg?v=1593200660">
<div class="app-function-text">
<h3>Remote Unlock</h3>
<p>Use your mobile phone to unlock the door for your friends and family when you are away from home.</p>
</div>
</div>
<!---------------PINs Setup----------------------> <img class="mobile-view-screen" src="https://cdn.shopify.com/s/files/1/0270/0106/1420/files/setup-password.jpg?v=1593200363">
<div class="appFunctionDescription" onclick="currentSlide(2)">
<img width="" height="" class="app-function-icon" alt="setup-multiple-keys-icon" src="https://cdn.shopify.com/s/files/1/0270/0106/1420/files/setup-multiple-pin-icon-100.jpg?v=1593200666">
<div class="app-function-text">
<h3>Setup PINs for the Whole Family</h3>
<p>Assign access pins to up to 20 different users. Enough access pins for one big family.</p>
</div>
</div>
<!---------------Guest Access----------------------> <img class="mobile-view-screen" src="https://cdn.shopify.com/s/files/1/0270/0106/1420/files/guest-access-screen.jpg?v=1593200357">
<div class="appFunctionDescription" onclick="currentSlide(3)">
<img width="" height="" class="app-function-icon" alt="temporary-guest-access-icon" src="https://cdn.shopify.com/s/files/1/0270/0106/1420/files/guest-access-icon-100.jpg?v=1593200647">
<div class="app-function-text">
<h3>Guest Access</h3>
<p>Setup temporary access pins for nanny, cleaners or delivery person. PINs automatically expire after pre-conigured time period.</p>
</div>
</div>
<!---------------lock history----------------------> <img class="mobile-view-screen" src="https://cdn.shopify.com/s/files/1/0270/0106/1420/files/lock-activity-history.jpg?v=1593200349">
<div class="appFunctionDescription" onclick="currentSlide(4)">
<img width="" height="" class="app-function-icon" alt="lock-activity-icon" src="https://cdn.shopify.com/s/files/1/0270/0106/1420/files/lock-history-icon-100.jpg?v=1593200654">
<div class="app-function-text">
<h3>Keep Track of Lock Activity</h3>
<p>Review the history of who opens your door and when in the visitor/activity log</p>
</div>
</div>
</div>
</div>
<!----------------LOCK SECTION---------------------------->
<h2>How Can Smart Lock Help</h2>
<div class="lockFeature">
<div class="featureMedia"><iframe width="560" height="315" src="https://www.youtube.com/embed/da3Cn2Iicc0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="lockFeatureDescription">
<h3>Lock and Unlock by Phone</h3>
<p>No need to give the dog-walker or nanny keys to your home anymore. You can lock and unlock your door on your phone any time, anywhere.</p>
</div>
</div>
<div class="lockFeature">
<div class="lockFeatureDescription">
<h3>Anti-peek Pin</h3>
<p>Don't worry about stalkers find out your access code, or signs show on frequentely pressed keys. Our smart lock allows you to input any random numbers and will still let you in as long as the correct PIN is included in the input numbers.</p>
</div>
<div class="featureMedia"><iframe width="560" height="315" src="https://www.youtube.com/embed/m7Gp1WC2NTw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>
<div class="lockFeature">
<div class="featureMedia"><iframe width="560" height="315" src="https://www.youtube.com/embed/jA2Qn9qyiLA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="lockFeatureDescription">
<h3>Auto-lock in a Moment</h3>
<p>Say bye bye to "shoot-did-I-lock-my-door" or "I-hope-my-kid-remembers-to-lock-the-door" type of anxiety. Simply setup auto-lock in the app, and our smart lock will lock the door in 10 to 30 seconds after some one exits your home.</p>
</div>
</div>
<div class="lockFeature">
<div class="featureMedia"><img width="" height="" alt="multiple-access-option" src="https://cdn.shopify.com/s/files/1/0270/0106/1420/files/multiple-access-methods.jpg?v=1593477008"></div>
<div class="lockFeatureDescription">
<h3>Multiple Access Options</h3>
<p>If your phone dies, you can unlock the door by punching in the PINs. For the forgetful type, you can still get in your home with a physical key.</p>
</div>
</div>
<!------------------------------------->

<style><!--
*
      {box-sizing: border-box}

      body
      {margin:0}

      .container{
        max-width: 100%;
        margin: auto;
        display:flex;
        flex-wrap:wrap;
        justify-content: flex-start;
        align-items: center;
      }

      .screen{
        width:42%;
      }

      .mobile-view-screen{
        display: none;
      }

      .screenshot{
        display: none;
        width:100%;
      }


      .feature-explanation{
        width:57%;
        margin-top:-26px;
      }

      /* The bullets point block */
      .appFunctionDescription{
        width:100%;
        margin-bottom: 20px;
        margin-top:30px;
        padding: 6px;
        cursor: pointer;
        transition: background-color 0.6s ease;

        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .app-function-icon{
        width:16%;
        height:16% ! important;
        padding: 5px;
        margin-right: 20px;
      }

      .appFunctionDescription h3{
        font-weight: 800;
        font-size:1.2em;
      }

      .app-function-text{
        width:83%;
      }

      .active, .appFunctionDescription:hover {
        border-bottom: 4px #f7f6f2 solid;
      }


      /* Fading animation */
      .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
      }

      @-webkit-keyframes fade {
        from {opacity: .4}
        to {opacity: 1}
      }

      @keyframes fade {
        from {opacity: .4}
        to {opacity: 1}
      }

/*---------------------LOCK SECTION--------------------------*/
    .lockFeature{
      display:flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 50px;
    }

    .featureMedia{
      width:55%;
      padding: 26px;
    }

    .lockFeatureDescription{
      width:40%;
      padding:12px;
    }

    .lockFeatureDescription h3{
      font-weight: 800;
    }


        /*-------Responsive Design-----------*/

      @media screen and (max-width: 800px) {

       .screen{
          display: none;
        }

        .mobile-view-screen{
          display: block;
          width:100%;
        }

        .feature-explanation{
          width:100%;
          margin-top:-16px;
        }

        .appFunctionDescription{
          display: block;
        }

        .app-function-icon{
          width:25%;
        }

        .app-function-text{
          width:100%;
        }


    /*---------------------LOCK SECTION--------------------------*/
       .featureMedia, .lockFeatureDescription{
        width:100%;
      }


      }
--></style>

<script>// <![CDATA[
var slideIndex = 1;
      showSlides(slideIndex);

      function plusSlides(n) {
        showSlides(slideIndex += n);
      }

      function currentSlide(n) {
        showSlides(slideIndex = n);
      }

      function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("screenshot");
        var dots = document.getElementsByClassName("appFunctionDescription");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
      }
// ]]></script>

This Pen is owned by Wei on CodePen.

See more by @WeiTan on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.