index.html

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Freelancer</title>
    <link rel="stylesheet" href="css/font-awesome.css" />
    <link rel="stylesheet" href="css/main.css" />
</head>

<body>
    <!-- Header: Navbar & Showcase -->
    <header id="showcase">
        <div class="container">
            <div id="navbar">
                <span class="logo">
                    <h3>Freelancer<span class="dot">.</span></h3>
                </span>
                <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-facebook"></i>
                </ul>
            </div>

            <div class="showcase-content">
                <div class="content">
                    <h1>Intellegence <br />is nothing without <br />ambition<span class="dot">.</span></span></h1>
                    <p>We're small but impressive creative agency</p>
                    <a href="#" class="btn btn-primary">Read more</a>
                </div>
            </div>
        </div>
    </header>

    <!-- Section: Boxes -->
    <section id="section-box" class="py-3">
        <div class="container">
            <div class="box-content">
                <div class="box">
                    <h2 class="mb-1">
                        Peace<br />
                        of mind<span class="dot">.</span>
                    </h2>
                    <p>
                        You're safe with us. The privacy and security of your financial
                        information is our top priority
                    </p>
                    <a href="#">More <i class="fa fa-arrow-right"></i></a>
                </div>
                <div class="box">
                    <h2 class="mb-1">
                        Free<br />
                        actually free<span class="dot">.</span>
                    </h2>
                    <p>
                        No more pricing grids. No more fine print. Sending and receiving
                        cash is free without gimmicks.
                    </p>
                    <a href="#">More <i class="fa fa-arrow-right"></i></a>
                </div>
                <div class="box">
                    <h2 class="mb-1">
                        Peace<br />
                        Simple payments<span class="dot">.</span>
                    </h2>
                    <p>
                        The same debut card you use to buy coffee lets deposit money
                        straight to your bank account
                    </p>
                    <a href="#">More <i class="fa fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

    <div class="container" id="hr">
        <div class="hr"></div>
    </div>


    <!-- Section: Portfolio -->
    <section id="section-portfolio" class="py-4">
        <div class="container">
            <div class="portfolio-content">
                <div class="img-content">
                    <img src="img/macbook.png" alt="">
                </div>
                <div class="text-content">
                    <h1>Portfolio<span class="dot">.</span></h1>
                    <p class="mb-1">We are small, but strong team</p>
                    <p>No more pricing grids, No more fine print.<br> Sending and receiving
                        cash is free without gimmicks.</p>
                    <p>The same debit card you use to buy coffee lets<br> desposit money straight to your bank account
                    </p>
                    <a href="#">More <i class="fa fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

    <div class="container" id="hr">
        <div class="hr"></div>
    </div>


    <!-- Section: Our Team -->
    <section id="section-team" class="py-3">
        <div class="container">
            <h1>Our Team<span class="dot">.</span></h1>
            <p>They are big but still friendly.</p>
            <div class="team-content">
                <div class="team-box">
                    <img src="img/team1.png" alt="">
                    <div class="text-content">
                        <h2>Joey</h2>
                        <p>Web developer</p>
                        <p>Coffee lover. Always<br> on bike iPhone fan.</p>
                    </div>
                </div>
                <div class="team-box">
                    <img src="img/team2.png" alt="">
                    <div class="text-content">
                        <h2>Matt</h2>
                        <p>Web designer</p>
                        <p>MTB Biker. Photoshop<br> Master. Loving Father</p>
                    </div>

                </div>
                <div class="team-box">
                    <img src="img/team3.png" alt="">
                    <div class="text-content">
                        <h2>Mike</h2>
                        <p>Copywriter</p>
                        <p>Drummer. Soup lover.<br> Beer Drinker. Cyclist</p>
                    </div>
                </div>

            </div>
            <div class="link">
                <a href="#">More<i class="fa fa-arrow-right"></i></a>
            </div>
        </div>
    </section>

    <div class="container">
        <div class="hr mb-2"></div>
    </div>

    <!-- Footer -->
    <footer id="main-footer">
        <ul>
            <li>
                <a href="#"><i class="fa fa-twitter"></i></a>
            </li>
            <li>
                <a href="#"><i class="fa fa-instagram"></i></a>
            </li>
            <li>
                <a href="#"><i class="fa fa-facebook"></i></a>
            </li>
            <li>
                <a href="#"><i class="fa fa-google-plus"></i></a>
            </li>
        </ul>
        <div>
            <p>&copy; Freelancer - Designed by Wojtek Kwiatkowski</p>
        </div>
    </footer>
</body>

</html>