index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css"/>
    <script src="script.js" defer></script>
</head>
<body>
    <header class="header">
        <div class="logo" id="scrollPercentage">Logical</div>
        <div class="logo2">Logo</div>
    </header>
    <div class="imgs">
        <img src="imgs/img-1.png" data-img id="img-1" class="top-section-img show"/>
        <img src="imgs/img-2.png" data-img id="img-2"/>
        <img src="imgs/img-3.png" data-img id="img-3"/>
    </div>
    <section class="top-section full-screen-section">
        <div class="left">
            <!-- <div class="header">
                <div class="title">Logical</div>
                <div>Icon</div>
            </div> -->
            <h1>Build Better Backends</h1>
            <p class="sub-text">
                The only platform that gives AI the ability to 
                autonomously build web services.
            </p>
        </div>
        <div class="right"></div>
    </section>
    <section class="full-screen-section first-main-section">
        <h1>Completly Visual</h1>
        <p>
            Never touch the command line, from provision to
            production.
        </p>
        <div data-img-to-show="#img-1"></div>
    </section>
    <section class="full-screen-section">
        <h1>Full Stack</h1>
        <p>
            Never manage infrastructure again. One click gets you: a
            database, APIs,
            deployments, hosting, etc.
        </p>
        <div data-img-to-show="#img-2"></div>
    </section>

    <section class="full-screen-section">
        <h1>Launch Faster</h1>
        <p>Logical can get systems to makert in minutes instead of weeks.</p>
        <div data-img-to-show="#img-3"></div>
    </section>
</body>
</html>