Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&amp;display=swap">

    <title>Document</title>
</head>

<body>
<header>
    <nav>
        <ul role="list" class="nav-links">
            <li><a href="#">Features</a></li>
            <li><a href="#">How it's work</a></li>
            <li><a href="#">Prices</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <ul role="list" class="nav-user">
            <li><a href="#">Log in</a></li>
            <li class="last-li"><a href="#">Sign up</a></li>
        </ul>
    </nav>
</header>

<main>
    <section class="first-section">
        <h1>Finbest is a clean, easy to use, finance app.</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        <div class="first-section-btns">
            <a class="mobile" href="#"><i class="fa-brands fa-apple"></i> Download for iOS</a>
            <a class="mobile" href="#"><i class="fa-brands fa-android"></i> Download for Android</a>
        </div>
    </section>

    <section class="second-section">
        <div>
            <p class="numbers">200k</p>
            <p class="second-section-content">Lorem ipsum dolor sit ametconsectetur adipiscing</p>
        </div>
        <div>
            <p class="numbers">$3,5 billions</p>
            <p class="second-section-content">Lorem ipsum dolor sit ametconsectetur adipiscing</p>
        </div>
        <div>
            <p class="numbers">10.000 +</p>
            <p class="second-section-content">Lorem ipsum dolor sit ametconsectetur adipiscing</p>
        </div>
    </section>

    <section class="phone">
        <div class="phone-img">
            <img src="images/group%201277.svg" alt="phone image">
        </div>

        <div class="phone-content">
            <h2>Everything you get with Finbest</h2>
            <p><strong>Lorem ipsum dolor sit amet, consectetur</strong></p>
            <p class="phone-content-second-p">Sed do eiusmod tempor incididunt ut labore et dolore magna aliquat enim ad minim veniam, quis nostrud</p>
            <p><strong>Lorem ipsum dolor sit amet, consectetur</strong></p>
            <p class="phone-content-second-p">Sed do eiusmod tempor incididunt ut labore et dolore</p>
            <a href="#">Explore pricing plans <i class="fa-solid fa-arrow-right"></i></a>
        </div>
    </section>

    <section class="pricing">
        <a href="#">Pricing plans</a>
        <h2>No setup cost or hidden fees.</h2>
    </section>

    <section class="offers">
        <div class="offer-prices">
            <div class="card">
                <h3>Standard</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit.</p>
                <h2>Free</h2>
                <div class="underline"></div>
                <p><i class="fa-solid fa-check"></i> Sed ut perspiciatis unde</p>
                <p><i class="fa-solid fa-check"></i> Quis nostrud exercitation ulla</p>
                <p><i class="fa-solid fa-check"></i> Duis aute irure dolor intuit</p>
                <p><i class="fa-solid fa-check"></i> Voluptas sit aspernatur aut odit</p>
                <p><i class="fa-solid fa-check"></i> Corporis suscipit laboriosam</p>
                <a href="#">Get Standard</a>
            </div>
            <div class="card middle">
                <h3>Plus</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit.</p>
                <h2>$8 /month</h2>
                <div class="underline"></div>
                <p><i class="fa-solid fa-check"></i> Sed ut perspiciatis unde</p>
                <p><i class="fa-solid fa-check"></i> Quis nostrud exercitation ulla</p>
                <p><i class="fa-solid fa-check"></i> Duis aute irure dolor intuit</p>
                <p><i class="fa-solid fa-check"></i> Voluptas sit aspernatur aut odit</p>
                <p><i class="fa-solid fa-check"></i> Corporis suscipit laboriosam</p>
                <a class="get-plus" href="#">Get Plus</a>
            </div>
            <div class="card">
                <h3>Premium</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit.</p>
                <h2>$16 /month</h2>
                <div class="underline"></div>
                <p><i class="fa-solid fa-check"></i> Sed ut perspiciatis unde</p>
                <p><i class="fa-solid fa-check"></i> Quis nostrud exercitation ulla</p>
                <p><i class="fa-solid fa-check"></i> Duis aute irure dolor intuit</p>
                <p><i class="fa-solid fa-check"></i> Voluptas sit aspernatur aut odit</p>
                <p><i class="fa-solid fa-check"></i> Corporis suscipit laboriosam</p>
                <a href="#">Get Premium</a>
            </div>
        </div>
        <div class="offers-content">
            <h4>Expand</h4>
            <p class="bold-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            <p><i class="fa-solid fa-check"></i> Sed ut perspiciatis unde</p>
            <p><i class="fa-solid fa-check"></i> Sed ut perspiciatis unde</p>
            <p><i class="fa-solid fa-check"></i> Duis aute irure dolor intuit</p>
            <a href="#">Contact us</a>
        </div>
    </section>

    <section class="get-started">
        <div class="get-started-content">
            <h2>Get started with finbest now!</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore magna.</p>
        </div>
        <div class="first-section-btns">
            <a class="mobile" href="#"><i class="fa-brands fa-apple"></i> Download for iOS</a>
            <a class="mobile" href="#"><i class="fa-brands fa-android"></i> Download for Android</a>
        </div>
    </section>

    <footer>
        <p>© 2023, All Rights Reserved.</p>
        <ul role="list">
            <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
        </ul>
    </footer>
</main>


</body>