index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Tutangle </title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="css/reset.css" rel="stylesheet" />
  <link href="css/layout.css" rel="stylesheet" />
    <link href="css/responsive.css" rel="stylesheet" />
</head>
<body>
  <header>
    <div class="top-header-wrapper">
      <div class="container ">
        <div class="top-header-container clearfix">
          <div class="left top-header-left">
            <div class="logo-wrapper left">
              <img src="images/logo.png" alt="tutangle">
            </div>
            <div class="search-wrapper left">
              <form action="#">
                <div class="search-box left">
                  <input type="text" placeholder="Search by Term, Member, or Entry Title" />

                </div>
                <div class="search-button left">
                  <a href="#">Search</a>
                </div>
              </form>
            </div>
            <div class="mobile-menu right">
              <img src="images/burger-header-menu.png" alt="burger-menu">
                <ul class="mobile-menu-list">
                  <li><a href="#">Create New Entry </a></li>
                  <li><a href="#">My Topic Boxes </a></li>
                  <li><a href="#">Friends</a></li>
                  <li><a href="#">Invite New Friends </a></li>
                  <li><a href="#">Home </a></li>
                  <li><a href="#">Setting</a></li>
                  <li><a href="#">Logout </a></li>
                </ul>


            </div>
          </div>
          <div class="right top-header-right">
            <div class="user-wrapper">
              <strong>joe barns</strong>
            </div>
            <div class="user-nav-wrapper">
              <ul>
                <li><a href="#">Home </a></li>
                <li><a href="#">Setting</a></li>
                <li><a href="#">Logout </a></li>
              </ul>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="bottom-header-wrapper">
      <div class="container">
        <div class="bottom-header-container  clearfix">
          <div class="user-navbar left">
            <ul>
              <li><a href="#">Create New Entry </a></li>
              <li><a href="#">My Topic Boxes </a></li>
              <li><a href="#">Friends</a></li>
              <li><a href="#">Invite New Friends </a></li>
            </ul>
          </div>
          <div class="user-notification right">
            <ul>
              <li class="active"><a href="#">Topic Boxes Invite - <span>2</span> </a></li>
              <li class=""><a href="#">Friend Request - <span>0</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </header>
  <section class="main-container">
    <div class="container clearfix">
      <div class="left">
        <div class="main-container-left clearfix">
          <div class="left-sidebar-wrapper left">
            <div class="left-sidebar">
              <div class="sidebar-title">Recent Searches</div>
              <div class="sidebar-content clearfix">
                <ul>
                  <li><a href="#">Nick Cave and the Bad Seeds</a><a href="#">  <span><img src="images/download.png" alt="download"></span></a></li>
                  <li><a href="#">African Animals</a> <a href="#"> <span><img src="images/download.png" alt="download"></span></a> </li>
                </ul>
              </div>
            </div>

            <div class="left-sidebar">
              <div class="sidebar-title">Recent Searches</div>
              <div class="sidebar-content clearfix">
                <ul>
                  <li><a href="#"> Different versions of the Tristan and Isolde Prelude</a>  <a href="#"><span><img src="images/burger-menu.png" alt="burger-icon"> </span> </a>  </li>
                  <li><a href="#"> Music</a>  <a href="#"><span><img src="images/burger-menu.png" alt="burger-icon"> </span> </a> </li>
                  <li><a href="#"> Guitar</a>  <a href="#"><span><img src="images/burger-menu.png" alt="burger-icon"> </span> </a> </li>
                  <li><a href="#"> Bob cohen</a> <a href="#"> <span><img src="images/burger-menu.png" alt="burger-icon"> </span> </a> </li>
                  <li><a href="#"> Mark schnack</a> <a href="#"> <span><img src="images/burger-menu.png" alt="burger-icon"> </span> </a> </li>
                  <li><a href="#"> Jefferson Dickey</a> <a href="#"> <span><img src="images/burger-menu.png" alt="burger-icon"> </span> </a> </li>

                </ul>
              </div>
            </div>
          </div>

          <div class="entries-wrapper right">
            <div class="entries-title">Entries</div>
            <div class="entries-tab-wrapper clearfix">
              <div class="all-entries-wrapper left">
                <div class="tab-title">
                  All entires
                </div>
                <div class="tab-wrapper">
                  <ul>
                    <li class="tab-active"><a href="#">All Members</a></li>
                    <li><a href="#">Friends</a></li>
                  </ul>
                </div>
              </div>
              <div class="all-entries-wrapper right">
                <div class="tab-title">
                  Subscribed
                </div>
                <div class="tab-wrapper">
                  <ul>
                    <li><a href="#">New Entry</a></li>
                    <li><a href="#">New Comment</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="tab-wrapper-border-line"><img src="images/tab-wrapper-border-line.png" alt="tab-divider"></div>
            <div class="entries-blog">
              <ul>
                <li class="clearfix">

                    <span class="user-photo-wrapper left">
                      <span class="frame">
                        <img src="images/user.png" alt="user-img">
                      </span>
                      <span class="user-photo">
                        <img src="images/user-photo.jpg" alt="user-photo">
                      </span>
                    </span>
                    <div class="user-post-info right">
                      <span class="entry-status">NEW ENTRY!</span>
                      <h2> <a href="#">Day for Night by Francois Truffaut, a ground breaking film</a> </h2>
                        <span class="user-entry-name"> by <a href="#">Alan Coe </a> </span>
                        <span class="entry-date">February 10, 2012 </span>
                        <span class="sub-status"><a href="#">Subscribed</a></span>
                      <p> From Topic Box: <span class="favourties"><a href="#">My Favorite Movies </a></span> </p>
                    </div>

                </li>
                <li class="clearfix">

                    <span class="user-photo-wrapper left">
                      <span class="frame">
                        <img src="images/user.png" alt="user-img">
                      </span>
                      <span class="user-photo">
                        <img src="images/user-photo.jpg" alt="user-photo">
                      </span>
                    </span>
                    <div class="user-post-info right">
                      <span class="entry-status">NEW ENTRY!</span>
                      <h2> <a href="#">Day for Night by Francois Truffaut, a ground breaking film</a> </h2>
                        <span class="user-entry-name"> by <a href="#">Alan Coe </a> </span>
                        <span class="entry-date">February 10, 2012 </span>
                        <span class="sub-status"><a href="#">Subscribed</a></span>
                      <p> From Topic Box: <span class="favourties"><a href="#">My Favorite Movies </a></span> </p>
                    </div>

                </li>
                <li class="clearfix">

                    <span class="user-photo-wrapper left">
                      <span class="frame">
                        <img src="images/user.png" alt="user-img">
                      </span>
                      <span class="user-photo">
                        <img src="images/user-photo.jpg" alt="user-photo">
                      </span>
                    </span>
                    <div class="user-post-info right">
                      <span class="entry-status">NEW ENTRY!</span>
                      <h2> <a href="#">Day for Night by Francois Truffaut, a ground breaking film</a> </h2>
                        <span class="user-entry-name"> by <a href="#">Alan Coe </a> </span>
                        <span class="entry-date">February 10, 2012 </span>
                        <span class="sub-status"><a href="#">Subscribed</a></span>
                      <p> From Topic Box: <span class="favourties"><a href="#">My Favorite Movies </a></span> </p>
                    </div>

                </li>
                <li class="clearfix">

                    <span class="user-photo-wrapper left">
                      <span class="frame">
                        <img src="images/user.png" alt="user-img">
                      </span>
                      <span class="user-photo">
                        <img src="images/user-photo.jpg" alt="user-photo">
                      </span>
                    </span>
                    <div class="user-post-info right">
                      <span class="entry-status">NEW ENTRY!</span>
                      <h2> <a href="#">Day for Night by Francois Truffaut, a ground breaking film</a> </h2>
                        <span class="user-entry-name"> by <a href="#">Alan Coe </a> </span>
                        <span class="entry-date">February 10, 2012 </span>
                        <span class="sub-status"><a href="#">Subscribed</a></span>
                      <p> From Topic Box: <span class="favourties"><a href="#">My Favorite Movies </a></span> </p>
                    </div>

                </li>
                <li class="clearfix">

                    <span class="user-photo-wrapper left">
                      <span class="frame">
                        <img src="images/user.png" alt="user-img">
                      </span>
                      <span class="user-photo">
                        <img src="images/user-photo.jpg" alt="user-photo">
                      </span>
                    </span>
                    <div class="user-post-info right">
                      <span class="entry-status">NEW ENTRY!</span>
                      <h2> <a href="#">Day for Night by Francois Truffaut, a ground breaking film</a> </h2>
                        <span class="user-entry-name"> by <a href="#">Alan Coe </a> </span>
                        <span class="entry-date">February 10, 2012 </span>
                        <span class="sub-status"><a href="#">Subscribed</a></span>
                      <p> From Topic Box: <span class="favourties"><a href="#">My Favorite Movies </a></span> </p>
                    </div>

                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="right-sidebar-wrapper">
          <div class="right-sidebar">
            <div class="sidebar-title">Video Tutorial</div>
            <div class="sidebar-content">
              <ul>
                <li><a href="#"> Overview Of TuTangle </a></li>
                <li><a href="#"> Searching the Site </a></li>
                <li><a href="#"> Previous & Saved Searches </a></li>
                <li><a href="#"> The Topic Box Page </a></li>
                <li><a href="#"> Creating a Topic Box </a></li>
                <li><a href="#"> View Topic Box Entries </a></li>
                <li><a href="#"> Creating an Entry</a></li>
                <li><a href="#"> Privacy Settings </a></li>
                <li><a href="#"> Co-Authoring </a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <footer>
    <div class="container">
      <div class="footer-container-wrapper clearfix">
        <div class="footer-nav left">
          <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Term of Use</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Feedback</a></li>
          </ul>
        </div>
        <div class="copyright right">© TuTangle 2013</div>
      </div>


    </div>
  </footer>
</body>
</html>