twitter.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Twitter profile page</title>
    <link rel="stylesheet" href="css/twitter.css">
</head>
<body>
<nav class="top-nav">
    <ul class="nav">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Moments</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Notifications</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
    </ul>
</nav>
<header>
    <section class="profile">
        <div class="profile-header">
            <img class="img-circle profile-image" src="https://randomuser.me/api/portraits/men/12.jpg" alt="user">
        </div>
        <div class="profile-form">
            <form action="#" class="text-right">
                <button class="btn btn-large">Edit profile</button>
            </form>
        </div>
    </section>
</header>
<div class="container">
    <aside class="profile-details">
        <h3>
            Elliot Alderson
            <small class="text-muted">@fsociety</small>
        </h3>

        <p>Regular twitter user | ¯\_(ツ)_/¯</p>

        <ul class="profile-items">
            <li class="profile-entry"><a href="#">San Antonio, TX</a></li>
            <li class="profile-entry"><a href="#">codeup.com</a></li>
            <li class="text-muted profile-entry">Joined June 2011</li>
        </ul>
    </aside>
    <main class="timeline">
        <div class="media">
            <img class="media-image img-circle" src="https://randomuser.me/api/portraits/women/18.jpg" alt="Random user">
            <div class="media-body">
                <h4 class="tweet-user">Safia Abdalla <span class="text-muted">@captainsafia</span></h4>
                Unit tests are an important part of self-care.
            </div>
        </div>
        <div class=media>
            <img class="media-image img-circle" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Random user">
            <div class="media-body">
                <h4 class="tweet-user">Little Idea <span class="text-muted">@littleidea</span></h4>
                <p>I've only seen one thing produce software quality... conscientious people with quality as a high
                    priority.</p>
                <p>Often those people should have prioritized 'valuable'.</p>
                <p>Live and learn. Live and learn.</p>
            </div>
        </div>
    </main>
    <aside class="who-to-follow">
        <div class="media">
            <h3>Who to follow</h3>
            <img class="media-image img-circle" src="https://randomuser.me/api/portraits/men/25.jpg" alt="Random user">
            <div class="media-body">
                <h4>wozgeass
                    <small class="text-muted">@lelouch_linux</small>
                </h4>
                <button class="btn">Follow</button>
            </div>
        </div>
        <div class="media">
            <img class="media-image img-circle" src="https://randomuser.me/api/portraits/women/11.jpg" alt="Random user">
            <div class="media-body">
                <h4>Łukasz Gruszka
                    <small class="text-muted">@lukgru</small>
                </h4>
                <button class="btn">Follow</button>
            </div>
        </div>
        <div class="media">
            <img class="media-image img-circle" src="https://randomuser.me/api/portraits/women/31.jpg" alt="Random user">
            <div class="media-body">
                <h4>Huertito
                    <small class="text-muted">@huertitoDA</small>
                </h4>
                <button class="btn">Follow</button>
            </div>
        </div>
    </aside>
</div>
</body>
</html>