<html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    
    .first-screen{
        background-image: url("../populator/images/background.png");
        /* background-repeat: no-repeat;         */
        position: relative;        
        width: 100%;            
        height: 600px;       
        margin-left: auto;      
        margin-right: auto;  
    }
    .logo{
        display: inline-block;
        width: 20%;
        height: 20%;
        margin-top: 2%;
        MARGIN-left: 5%;
        background-image: url("../populator/images/countly-logo-dark-bg.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left center;
    }
    .title{
        background-color: #fff0;
        top: 235px;
        height: auto;
        width: 715px;
        position: absolute;
        margin: 0;
        left: 6%;
        font-family: 'San Francisco',Helvetica,Arial,serif;
        font-size: 69.0px;
        color: #fff;
        text-align: left;
        letter-spacing: 2.16px;
        line-height: 63.0px;
    }

    .desc{
        background-color: #fff0;
        top: 389px;
        height: auto;
        width: 610px;
        position: absolute;
        margin: 0;
        left: 6%;
        font-family: 'AppleSystemUIFont',Helvetica,Arial,serif;
        font-size: 19.0px;
        color: #fff;
        text-align: left;
        letter-spacing: .59px;
        line-height: 26.0px;
    }

    body {
        margin:0;
    }

    .hearder-button{
        cursor: pointer;
        float: right;    
        margin-right: 2%;
        margin-top: 2%;
        background-color: #2EB52B; 
        color: #FFFFFF;
        box-shadow: inset 0 0 0 1px #2EB52B;
        text-align: center;
        padding: 12px;
        width: 150px;
        font: 12px Ubuntu,Helvetica,sans-serif;
        border-radius: 4px;
        font-size: 14.0px; 
    }

    .rectangle {
        background-color: #fff;
        top: 515px;
        height: 2px;
        width: 108px;
        position: absolute;
        margin: 0;
        left:6%;
    }

    .second-screen{
        margin-top:5%;
    }
    .row{
        width:90%;
        height:500px;
        margin-left: auto;
        margin-right: auto; 
    }
    .left{
        display: inline-block;
        width:50%;
        float: left;
    }
    .left img{
        max-width:100%;
        max-height:100%;
        float: right;    
    }

    .right {
        float: left;
        width:50%;
        display: inline-block;
    }

    .right img{
        max-width:100%;
        max-height:100%;    
    }


    .row-title {
        padding:10px 10px 10px 10px;
        font-size: 40px;
        font-weight: bold;
    }
    .row-content {
        padding:10px 10px 10px 10px;
        font-size: 24px;
    }
    .row-button{
        cursor: pointer;
        float: left;     
        background-color: #2EB52B; 
        color: #FFFFFF;
        box-shadow: inset 0 0 0 1px #2EB52B;
        text-align: center;
        padding: 12px;
        width: 150px;
        font: 12px Ubuntu,Helvetica,sans-serif;
        border-radius: 4px;
        font-size: 14.0px; 
        padding:10px 10px 10px 10px;

    }


    .third-screen {
        background-color: #f4f4f6;
    }
    .third-top-title{
        text-align: center;
        padding: 100px 10px 10px 10px;
        font-size: 40px;
        font-weight: bold;
        margin-left:auto;
        margin-right:auto;
    }

    .third-top-content{
        text-align: center;
        padding: 10px 10px 10px 10px;
        font-size: 24px;
        width: 70%;
        margin-left:auto;
        margin-right:auto;
    }
    .third-top-button{
        margin-left:auto;
        margin-right:auto;
        cursor: pointer;
        background-color: #2EB52B; 
        color: #FFFFFF;
        box-shadow: inset 0 0 0 1px #2EB52B;
        text-align: center;
        padding: 12px;
        width: 150px;
        font: 12px Ubuntu,Helvetica,sans-serif;
        border-radius: 4px;
        font-size: 14.0px; 
        padding:10px 10px 10px 10px;
        margin-bottom: 100px;
    }
    * {
        box-sizing: border-box;
      }
    </style>
    <!-- https://launchpad.animaapp.com/preview/7mYIZ6X/page -->
<body>
    
    <div class="first-screen">
        <div>
            <div class="logo"></div>
            <div class="hearder-button">Et aut temprotibus</div>
        </div>
        <div class="title">
                Itaque earum rerum tenetur a sapiente
        </div>
        <div class="desc">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</div>
        <div class="rectangle"></div>
    </div>
    <div class="second-screen" >
        <div class="row">
            <div class="left">
                <div class="row-title">QUOD MAXIME PLACEAT FACERE POSSIMUS.</div>
                <div class="row-content">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</div>
                <div class="row-button">Et aut temprotibus</div>
            </div>
            <div class="right">
                <image src="../populator/images/p1.png"   ></image>
            </div>
        </div> 


         <div class="row">
            <div class="left">
                <image src="../populator/images/p2.png" width="600" height="400" ></image>
            </div>
            <div class="right" >
                    <div class="row-title">AT VERO EOS ET ACCUSA FACILIS SOLUTA.</div>
                    <div class="row-content">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id</div>
            </div>
        </div>


        <div class="row">
                <div class="left" >
                        <div class="row-title">QUOD MAXIME PLACEEAT FACERE POSSIMUS.</div>
                        <div class="row-content">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</div>
                        <div class="row-content">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</div>
                </div>
                <div class="right">
                    <image src="../populator/images/p3.png" width="600" height="400" ></image>
                </div>
                
            </div>  
    </div>
  
    <div class="third-screen">
        <div class="third-top-title">Itaque earum rerum tenetur a sapiente</div>
        <div class="third-top-content">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</div>
        <div class="third-top-button" > Et aut temprotibus </div>
        
        <div class="row">
            <div class="left">
                <image src="../populator/images/p4.png" width="600" height="400" ></image>
            </div>
            <div class="right" >
                    <div class="row-title">AT VERO EOS ET ACCUSA FACILIS SOLUTA.</div>
                    <div class="row-content">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id</div>
            </div>
        </div>
        <div class="row">
            <div class="left">
                <div class="row-title">QUOD MAXIME PLACEAT FACERE POSSIMUS.</div>
                <div class="row-content">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</div>
            </div>
            <div class="right">
                <image src="../populator/images/p5.png"   ></image>
            </div>
        </div> 
    

    </div>  

    <div style="text-align:center;padding:10px;margin-bottom:7px;">All Rights Reserved. (c) Countly, 2018</div>
    <script type='text/javascript'>
    // Some default pre init
    var Countly = Countly || {};
    Countly.q = Countly.q || [];

    // Provide your app key that you retrieved from Countly dashboard
    Countly.app_key = document.location.href.split("/")[3];

    // Provide your server IP or name. Use try.count.ly for EE trial server.
    // If you use your own server, make sure you have https enabled if you use
    // https below.
    Countly.url = window.location.origin;
    
    // Load countly script asynchronously
    (function() {
      var cly = document.createElement('script'); cly.type = 'text/javascript'; 
      cly.async = true;
      // Enter url of script here (see below for other option)
      cly.src = '/sdk/web/countly.js';
      cly.onload = function(){Countly.init()};
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cly, s);
    })();
    </script>
</body>
</html>