Thank you for puchasing our template. If you need assistance beyond the scope of this document, please contact us via themeforest user contact form. We'll get back you within 24 hours. Also as you are reading this documentation, we expect you have basic knowledge on html, css and javascript. For basic questions, you may google or visit w3school website.
Best regards
Thunder-Team
Follow the simple steps below to get started with Friend Finder.
HTML Folder whence you will find all the template filesHTML/css Stylesheet folderHTML/images Images FolderHTML/fonts Font FolderHTML/js Javascript FolderHTML/videos Video FolderHTML/index.html index/homepage FileHTML structure of friend finder is very simple and it is based on responsive bootstrap.
The header contains logo, navigation & page links (dropdowns). For homepage header, we included class .lazy-load so the header appears on scroll.
<header id="header">
<nav class="navbar navbar-default navbar-fixed-top menu">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right main-menu">
<li class="dropdown"><a href="index.html">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Newsfeed <span><img src="images/down-arrow.png" alt="" /></span></a>
<ul class="dropdown-menu newsfeed-home">
<li><a href="newsfeed.html">Newsfeed</a></li>
<li><a href="newsfeed-people-nearby.html">Poeple Nearly</a></li>
<li><a href="newsfeed-friends.html">My friends</a></li>
<li><a href="newsfeed-messages.html">Chatroom</a></li>
<li><a href="newsfeed-images.html">Images</a></li>
<li><a href="newsfeed-videos.html">Videos</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Timeline <span><img src="images/down-arrow.png" alt="" /></span></a>
<ul class="dropdown-menu login">
<li><a href="timeline.html">Timeline</a></li>
<li><a href="timeline-about.html">Timeline About</a></li>
<li><a href="timeline-album.html">Timeline Album</a></li>
<li><a href="timeline-friends.html">Timeline Friends</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle pages" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">All Pages <span><img src="images/down-arrow.png" alt="" /></span></a>
<ul class="dropdown-menu page-list">
<li><a href="index.html">Landing Page</a></li>
<li><a href="newsfeed.html">Newsfeed</a></li>
<li><a href="newsfeed-people-nearby.html">Poeple Nearly</a></li>
<li><a href="newsfeed-friends.html">My friends</a></li>
<li><a href="newsfeed-messages.html">Chatroom</a></li>
<li><a href="newsfeed-images.html">Images</a></li>
<li><a href="newsfeed-videos.html">Videos</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="timeline-about.html">Timeline About</a></li>
<li><a href="timeline-album.html">Timeline Album</a></li>
<li><a href="timeline-friends.html">Timeline Friends</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</li>
<li class="dropdown"><a href="contact.html">Contact</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<i class="icon ion-android-search"></i>
<input type="text" class="form-control" placeholder="Search friends, photos, videos">
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</header>
.navbar-header has logo inside of it, .main-menu contains all the menus (notifications, messages and pages) and .navbar-form is the search form.
Footer comes with logo, social links, site map and contact information. Each has its own class.
<footer id="footer">
<div class="container">
<div class="row">
<div class="footer-wrapper">
<div class="col-md-3 col-sm-3">
<a href=""><img src="images/logo-black.png" alt="" class="footer-logo" /></a>
<ul class="list-inline social-icons">
<li><a href="#"><i class="icon ion-social-facebook"></i></a></li>
<li><a href="#"><i class="icon ion-social-twitter"></i></a></li>
<li><a href="#"><i class="icon ion-social-googleplus"></i></a></li>
<li><a href="#"><i class="icon ion-social-pinterest"></i></a></li>
<li><a href="#"><i class="icon ion-social-linkedin"></i></a></li>
</ul>
</div>
<div class="col-md-2 col-sm-2">
<h6>For individuals</h6>
<ul class="footer-links">
<li><a href="">Signup</a></li>
<li><a href="">login</a></li>
<li><a href="">Explore</a></li>
<li><a href="">Finder app</a></li>
<li><a href="">Features</a></li>
<li><a href="">Language settings</a></li>
</ul>
</div>
<div class="col-md-2 col-sm-2">
<h6>For businesses</h6>
<ul class="footer-links">
<li><a href="">Business signup</a></li>
<li><a href="">Business login</a></li>
<li><a href="">Benefits</a></li>
<li><a href="">Resources</a></li>
<li><a href="">Advertise</a></li>
<li><a href="">Setup</a></li>
</ul>
</div>
<div class="col-md-2 col-sm-2">
<h6>About</h6>
<ul class="footer-links">
<li><a href="">About us</a></li>
<li><a href="">Contact us</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Terms</a></li>
<li><a href="">Help</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-3">
<h6>Contact Us</h6>
<ul class="contact">
<li><i class="icon ion-ios-telephone-outline"></i>+1 (234) 222 0754</li>
<li><i class="icon ion-ios-email-outline"></i>razor@exabytelab.com</li>
<li><i class="icon ion-ios-location-outline"></i>228 Park Ave S NY, USA</li>
</ul>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>Thunder Team © 2016. All rights reserved</p>
</div>
</footer>
.social-icons links to your social pages, .footer-links is for sitemap links and .contact for contact information
The landing page is divided into sections and each section has same basic structure as below:
<section id="section-id">
<div class="container wrapper">
<h1 class="section-title">download</h1>
...
</div>
</section>
Upon Clients' request, we have designed a second Landing Page that offers register and login options. The page has a basic structure as below
<div id="lp-register">
<div class="container wrapper">
...
</div>
</div>
Newsfeed page templates have the following basic structure:
<header id="header">...</header>
<div id="page-contents">
<div class="container">...</div>
</div>
<footer id="footer">...</footer>
Basic structure for timeline pages is:
<header id="header">...</div>
<div class="container">
<div class="timeline">...</div>
<div id="page-contents">...</div>
</div>
<footer id="footer">...</footer>
In this section, you will find all the html elements that were used to create the template.
Newsfeed right sider contains 3 elements that include Profile Card, Nav and Chat Online.
Profile Card has the following set of codes
<div class="profile-card">
<img src="images/users/user-1.jpg" alt="user" class="profile-photo" />
<h5><a href="timeline.html" class="text-white">Sarah Cruiz</a></h5>
<a href="#" class="text-white"><i class="ion ion-android-person-add"></i> 1,299 followers</a>
</div>
Newfeed nav that links to other sections of the newsfeed like images, videos, people etc
<ul class="nav-news-feed">
<li><i class="icon ion-ios-paper"></i><div><a href="newsfeed.html">My Newsfeed</a></div></li>
<li><i class="icon ion-ios-people"></i><div><a href="newsfeed-people-nearby.html">People Nearby</a></div></li>
<li><i class="icon ion-ios-people-outline"></i><div><a href="newsfeed-friends.html">Friends</a></div></li>
<li><i class="icon ion-chatboxes"></i><div><a href="newsfeed-messages.html">Messages</a></div></li>
<li><i class="icon ion-images"></i><div><a href="newsfeed-images.html">Images</a></div></li>
<li><i class="icon ion-ios-videocam"></i><div><a href="newsfeed-videos.html">Videos</a></div></li>
</ul>
The following code is for online chat block which enables user to chat with friends
<div id="chat-block">
<div class="title">Chat online</div>
<ul class="online-users list-inline">
<li><a href="newsfeed-messages.html" title="Linda Lohan"><img src="images/users/user-2.jpg" alt="user" class="img-responsive profile-photo" /><span class="online-dot"></span></a></li>
<li><a href="newsfeed-messages.html" title="Sophia Lee"><img src="images/users/user-3.jpg" alt="user" class="img-responsive profile-photo" /><span class="online-dot"></span></a></li>
<li><a href="newsfeed-messages.html" title="John Doe"><img src="images/users/user-4.jpg" alt="user" class="img-responsive profile-photo" /><span class="online-dot"></span></a></li>
<li><a href="newsfeed-messages.html" title="Alexis Clark"><img src="images/users/user-5.jpg" alt="user" class="img-responsive profile-photo" /><span class="online-dot"></span></a></li>
<li><a href="newsfeed-messages.html" title="James Carter"><img src="images/users/user-6.jpg" alt="user" class="img-responsive profile-photo" /><span class="online-dot"></span></a></li>
<li><a href="newsfeed-messages.html" title="Robert Cook"><img src="images/users/user-7.jpg" alt="user" class="img-responsive profile-photo" /><span class="online-dot"></span></a></li>
<li><a href="newsfeed-messages.html" title="Richard Bell"><img src="images/users/user-8.jpg" alt="user" class="img-responsive profile-photo" /><span class="online-dot"></span></a></li>
<li><a href="newsfeed-messages.html" title="Anna Young"><img src="images/users/user-9.jpg" alt="user" class="img-responsive profile-photo" /><span class="online-dot"></span></a></li>
<li><a href="newsfeed-messages.html" title="Julia Cox"><img src="images/users/user-10.jpg" alt="user" class="img-responsive profile-photo" /><span class="online-dot"></span></a></li>
</ul>
</div>
This sidebar is showed off as a right sidebar on the newsfeed page and has following code. .sticky-sidebarallows this div to scroll then fixed in the browser.
<div class="col-md-2 static">
<div class="suggestions" id="sticky-sidebar">
<h4 class="grey">Who to Follow</h4>
<div class="follow-user">
<img src="images/users/user-11.jpg" alt="" class="profile-photo-sm pull-left" />
<div>
<h5><a href="timeline.html">Diana Amber</a></h5>
<a href="#" class="text-green">Add friend</a>
</div>
</div>
<div class="follow-user">
<img src="images/users/user-12.jpg" alt="" class="profile-photo-sm pull-left" />
<div>
<h5><a href="timeline.html">Cris Haris</a></h5>
<a href="#" class="text-green">Add friend</a>
</div>
</div>
<div class="follow-user">
<img src="images/users/user-13.jpg" alt="" class="profile-photo-sm pull-left" />
<div>
<h5><a href="timeline.html">Brian Walton</a></h5>
<a href="#" class="text-green">Add friend</a>
</div>
</div>
<div class="follow-user">
<img src="images/users/user-14.jpg" alt="" class="profile-photo-sm pull-left" />
<div>
<h5><a href="timeline.html">Olivia Steward</a></h5>
<a href="#" class="text-green">Add friend</a>
</div>
</div>
<div class="follow-user">
<img src="images/users/user-15.jpg" alt="" class="profile-photo-sm pull-left" />
<div>
<h5><a href="timeline.html">Sophia Page</a></h5>
<a href="#" class="text-green">Add friend</a>
</div>
</div>
</div>
</div>
User's recent activity has been displayed on the landing page life feed section and also as a sidebar on the timeline page. It has the following code
<div class="feed-item">
<div class="live-activity">
<p><a href="#" class="profile-link">Sarah</a> Commended on a Photo</p>
<p class="text-grey">5 mins ago</p>
</div>
</div>
User will use this box to create post. It comes with the following set of codes:
<div class="create-post">
<div class="row">
<div class="col-md-7 col-sm-7">
<div class="form-group">
<img src="images/users/user-1.jpg" alt="" class="profile-photo-md" />
<textarea name="texts" id="exampleTextarea" cols="30" rows="1" class="form-control" placeholder="Write what you wish"></textarea>
</div>
</div>
<div class="col-md-5 col-sm-5">
<div class="tools">
<ul class="publishing-tools list-inline">
<li><a href="#"><i class="ion-compose"></i></a></li>
<li><a href="#"><i class="ion-images"></i></a></li>
<li><a href="#"><i class="ion-ios-videocam"></i></a></li>
<li><a href="#"><i class="ion-map"></i></a></li>
</ul>
<button class="btn btn-primary pull-right">Publish</button>
</div>
</div>
</div>
</div>
You can inset images, texts, videos and maps to a post. See below for sample post contents.
<div class="post-content">
<img src="images/post-images/1.jpg" alt="post-image" class="img-responsive post-image" />
<div class="post-container">
<img src="images/users/user-5.jpg" alt="user" class="profile-photo-md pull-left" />
<div class="post-detail">
<div class="user-info">
<h5><a href="timeline.html" class="profile-link">Alexis Clark</a> <span class="following">following</span></h5>
<p class="text-muted">Published a photo about 3 mins ago</p>
</div>
<div class="reaction">
<a class="btn text-green"><i class="icon ion-thumbsup"></i> 13</a>
<a class="btn text-red"><i class="fa fa-thumbs-down"></i> 0</a>
</div>
<div class="line-divider"></div>
<div class="post-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <i class="em em-anguished"></i> <i class="em em-anguished"></i> <i class="em em-anguished"></i></p>
</div>
<div class="line-divider"></div>
<div class="post-comment">
<img src="images/users/user-11.jpg" alt="" class="profile-photo-sm" />
<p><a href="timeline.html" class="profile-link">Diana </a><i class="em em-laughing"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
</div>
<div class="post-comment">
<img src="images/users/user-4.jpg" alt="" class="profile-photo-sm" />
<p><a href="timeline.html" class="profile-link">John</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
</div>
<div class="post-comment">
<img src="images/users/user-1.jpg" alt="" class="profile-photo-sm" />
<input type="text" class="form-control" placeholder="Post a comment">
</div>
</div>
</div>
</div>
Nearby user list has the following code. .nearby-user represents each nearby user.
<div class="people-nearby">
<div class="google-maps">
<iframe class="map" src="http://maps.google.com/maps?q=12.927923,77.627108&z=15&output=embed"></iframe>
</div>
<div class="nearby-user">
<div class="row">
<div class="col-md-2 col-sm-2">
<img src="images/users/user-15.jpg" alt="user" class="profile-photo-lg" />
</div>
<div class="col-md-7 col-sm-7">
<h5><a href="#" class="profile-link">Sophia Page</a></h5>
<p>Software Engineer</p>
<p class="text-muted">500m away</p>
</div>
<div class="col-md-3 col-sm-3">
<button class="btn btn-primary pull-right">Add Friend</button>
</div>
</div>
</div>
<div class="nearby-user">
<div class="row">
<div class="col-md-2 col-sm-2">
<img src="images/users/user-16.jpg" alt="user" class="profile-photo-lg" />
</div>
<div class="col-md-7 col-sm-7">
<h5><a href="#" class="profile-link">Emma Johnson</a></h5>
<p>Model at Fashion</p>
<p class="text-muted">800m away</p>
</div>
<div class="col-md-3 col-sm-3">
<button class="btn btn-primary pull-right">Add Friend</button>
</div>
</div>
</div>
</div>
.friend-list represents the entire friend list. We divided the list in 2 columns. You may want more columns you can do so by simply adding bootstrap grid classes. Each item has .friend-card class.
<div class="friend-list">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="friend-card">
<img src="images/covers/1.jpg" alt="profile-cover" class="img-responsive cover" />
<div class="card-info">
<img src="images/users/user-3.jpg" alt="user" class="profile-photo-lg" />
<div class="friend-info">
<a href="#" class="pull-right text-green">My Friend</a>
<h5><a href="timeline.html" class="profile-link">Sophia Lee</a></h5>
<p>Student at Harvard</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="friend-card">
<img src="images/covers/3.jpg" alt="profile-cover" class="img-responsive cover" />
<div class="card-info">
<img src="images/users/user-4.jpg" alt="user" class="profile-photo-lg" />
<div class="friend-info">
<a href="#" class="pull-right text-green">My Friend</a>
<h5><a href="timeline.html" class="profile-link">John Doe</a></h5>
<p>Traveler</p>
</div>
</div>
</div>
</div>
</div>
</div>
.chat-room represents the entire chat room. ul.contact-list is contact list and .tab-content is where we put the chat body messages which have a class .chat-body
<div class="chat-room">
<div class="row">
<div class="col-md-5">
<!-- Contact List in Left-->
<ul class="nav nav-tabs contact-list scrollbar-wrapper scrollbar-outer">
<li class="active">
<a href="#contact-1" data-toggle="tab">
<div class="contact">
<img src="images/users/user-2.jpg" alt="" class="profile-photo-sm pull-left"/>
<div class="msg-preview">
<h6>Linda Lohan</h6>
<p class="text-muted">Hi there, how are you</p>
<small class="text-muted">a min ago</small>
<div class="chat-alert">1</div>
</div>
</div>
</a>
</li>
</ul><!--Contact List in Left End-->
</div>
<div class="col-md-7">
<!--Chat Messages in Right-->
<div class="tab-content scrollbar-wrapper wrapper scrollbar-outer">
<div class="tab-pane active" id="contact-1">
<div class="chat-body">
<ul class="chat-message">
<li class="left">
<img src="images/users/user-2.jpg" alt="" class="profile-photo-sm pull-left" />
<div class="chat-item">
<div class="chat-item-header">
<h5>Linda Lohan</h5>
<small class="text-muted">3 days ago</small>
</div>
<p>Hi honey, how are you doing???? Long time no see. Where have you been?</p>
</div>
</li>
<li class="right">
<img src="images/users/user-1.jpg" alt="" class="profile-photo-sm pull-right" />
<div class="chat-item">
<div class="chat-item-header">
<h5>Sarah Cruiz</h5>
<small class="text-muted">3 days ago</small>
</div>
<p>I have been on vacation</p>
</div>
</li>
<li class="right">
<img src="images/users/user-1.jpg" alt="" class="profile-photo-sm pull-right" />
<div class="chat-item">
<div class="chat-item-header">
<h5>Sarah Cruiz</h5>
<small class="text-muted">3 days ago</small>
</div>
<p>it was a great time for me. we had a lot of fun <i class="em em-blush"></i></p>
</div>
</li>
<li class="left">
<img src="images/users/user-2.jpg" alt="" class="profile-photo-sm pull-left" />
<div class="chat-item">
<div class="chat-item-header">
<h5>Linda Lohan</h5>
<small class="text-muted">3 days ago</small>
</div>
<p>that's cool I wish I were you <i class="em em-expressionless"></i></p>
</div>
</li>
<li class="right">
<img src="images/users/user-1.jpg" alt="" class="profile-photo-sm pull-right" />
<div class="chat-item">
<div class="chat-item-header">
<h5>Sarah Cruiz</h5>
<small class="text-muted">3 days ago</small>
</div>
<p><i class="em em-hand"></i></p>
</div>
</li>
<li class="left">
<img src="images/users/user-2.jpg" alt="" class="profile-photo-sm pull-left" />
<div class="chat-item">
<div class="chat-item-header">
<h5>Linda Lohan</h5>
<small class="text-muted">a min ago</small>
</div>
<p>Hi there, how are you</p>
</div>
</li>
</ul>
</div>
</div>
</div><!--Chat Messages in Right End-->
<div class="send-message">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type your message">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send</button>
</span>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
We created two separate pages for images and videos so that user can view images and videos separately. .media represents entire media contents. We divided media contents in 2 columns. The columns have a .img-wrapper class inside it. Insert image or video into this class. Clicking on .img-wrapper opens a modal whence we display detailed post contents with the class .post-contents. Sample code here:
<div class="media">
<div class="row js-masonry" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": ".grid-sizer", "percentPosition": true }'>
<div class="grid-sizer col-md-6 col-sm-6"></div>
<div class="grid-item col-md-6 col-sm-6">
<div class="media-grid">
<div class="img-wrapper" data-toggle="modal" data-target=".modal-1">
<img src="images/post-images/6.jpg" alt="" class="img-responsive post-image" />
</div>
<div class="media-info">
<div class="reaction">
<a class="btn text-green"><i class="fa fa-thumbs-up"></i> 63</a>
<a class="btn text-red"><i class="fa fa-thumbs-down"></i> 12</a>
</div>
<div class="user-info">
<img src="images/users/user-8.jpg" alt="" class="profile-photo-sm pull-left" />
<div class="user">
<h6><a href="#" class="profile-link">Richard Bell</a></h6>
<a class="text-green" href="#">Friend</a>
</div>
</div>
</div>
<!--Popup-->
<div class="modal fade modal-1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="post-content">
<img src="images/post-images/1.jpg" alt="post-image" class="img-responsive post-image" />
<div class="post-container">
<img src="images/users/user-5.jpg" alt="user" class="profile-photo-md pull-left" />
<div class="post-detail">
<div class="user-info">
<h5><a href="timeline.html" class="profile-link">Alexis Clark</a> <span class="following">following</span></h5>
<p class="text-muted">Published a photo about 3 mins ago</p>
</div>
<div class="reaction">
<a class="btn text-green"><i class="icon ion-thumbsup"></i> 13</a>
<a class="btn text-red"><i class="fa fa-thumbs-down"></i> 0</a>
</div>
<div class="line-divider"></div>
<div class="post-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <i class="em em-anguished"></i> <i class="em em-anguished"></i> <i class="em em-anguished"></i></p>
</div>
<div class="line-divider"></div>
<div class="post-comment">
<img src="images/users/user-11.jpg" alt="" class="profile-photo-sm" />
<p><a href="timeline.html" class="profile-link">Diana </a><i class="em em-laughing"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
</div>
<div class="post-comment">
<img src="images/users/user-4.jpg" alt="" class="profile-photo-sm" />
<p><a href="timeline.html" class="profile-link">John</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
</div>
<div class="post-comment">
<img src="images/users/user-1.jpg" alt="" class="profile-photo-sm" />
<input type="text" class="form-control" placeholder="Post a comment">
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--Popup End-->
</div>
</div>
<div class="grid-item col-md-6 col-sm-6">
<div class="media-grid">
<div class="img-wrapper" data-toggle="modal" data-target=".modal-2">
<img src="images/post-images/3.jpg" alt="" class="img-responsive post-image" />
</div>
<div class="media-info">
<div class="reaction">
<a class="btn text-green"><i class="fa fa-thumbs-up"></i> 100</a>
<a class="btn text-red"><i class="fa fa-thumbs-down"></i> 99</a>
</div>
<div class="user-info">
<img src="images/users/user-5.jpg" alt="" class="profile-photo-sm pull-left" />
<div class="user">
<h6><a href="#" class="profile-link">Sarah Cruiz</a></h6>
<a class="text-green" href="#">Friend</a>
</div>
</div>
</div>
<!--Popup-->
<div class="modal fade modal-2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="post-content">
<img src="images/post-images/1.jpg" alt="post-image" class="img-responsive post-image" />
<div class="post-container">
<img src="images/users/user-5.jpg" alt="user" class="profile-photo-md pull-left" />
<div class="post-detail">
<div class="user-info">
<h5><a href="timeline.html" class="profile-link">Alexis Clark</a> <span class="following">following</span></h5>
<p class="text-muted">Published a photo about 3 mins ago</p>
</div>
<div class="reaction">
<a class="btn text-green"><i class="icon ion-thumbsup"></i> 13</a>
<a class="btn text-red"><i class="fa fa-thumbs-down"></i> 0</a>
</div>
<div class="line-divider"></div>
<div class="post-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <i class="em em-anguished"></i> <i class="em em-anguished"></i> <i class="em em-anguished"></i></p>
</div>
<div class="line-divider"></div>
<div class="post-comment">
<img src="images/users/user-11.jpg" alt="" class="profile-photo-sm" />
<p><a href="timeline.html" class="profile-link">Diana </a><i class="em em-laughing"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
</div>
<div class="post-comment">
<img src="images/users/user-4.jpg" alt="" class="profile-photo-sm" />
<p><a href="timeline.html" class="profile-link">John</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
</div>
<div class="post-comment">
<img src="images/users/user-1.jpg" alt="" class="profile-photo-sm" />
<input type="text" class="form-control" placeholder="Post a comment">
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--Popup End-->
</div>
</div>
</div>
</div>
The following code represents timeline cover and menus. We created two separate menus: .timeline-nav-bar for larger screens and .navbar-mobile for smaller screens such as mobile.
<div class="timeline-cover">
<!--Timeline Menu for Large Screens-->
<div class="timeline-nav-bar hidden-sm hidden-xs">
<div class="row">
<div class="col-md-3">
<div class="profile-info">
<img src="images/users/user-1.jpg" alt="" class="img-responsive profile-photo" />
<h3>Sarah Cruiz</h3>
<p class="text-muted">Creative Director</p>
</div>
</div>
<div class="col-md-9">
<ul class="list-inline profile-menu">
<li><a href="timeline.html" class="active">Timeline</a></li>
<li><a href="timeline-about.html">About</a></li>
<li><a href="timeline-album.html">Album</a></li>
<li><a href="timeline-friends.html">Friends</a></li>
</ul>
<ul class="follow-me list-inline">
<li>1,299 people following her</li>
<li><button class="btn-primary">Add Friend</button></li>
</ul>
</div>
</div>
</div><!--Timeline Menu for Large Screens End-->
<!--Timeline Menu for Small Screens-->
<div class="navbar-mobile hidden-lg hidden-md">
<div class="profile-info">
<img src="images/users/user-1.jpg" alt="" class="img-responsive profile-photo" />
<h4>Sarah Cruiz</h4>
<p class="text-muted">Creative Director</p>
</div>
<div class="mobile-menu">
<ul class="list-inline">
<li><a href="timline.html" class="active">Timeline</a></li>
<li><a href="timeline-about.html">About</a></li>
<li><a href="timeline-album.html">Album</a></li>
<li><a href="timeline-friends.html">Friends</a></li>
</ul>
<button class="btn-primary">Add Friend</button>
</div>
</div><!--Timeline Menu for Small Screens End-->
</div>
.about-profile has .about-content-block within it. We inserted contents such as personal info, work experiences etc into separate .about-content-block classes
<div class="about-profile">
<div class="about-content-block">
<h4 class="grey"><i class="ion-ios-information-outline icon-in-title"></i>Personal Information</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur</p>
</div>
</div>
The ul class .album-photos contains all the list items with photos. Modal has been added to display large photos.
<ul class="album-photos">
<li>
<div class="img-wrapper" data-toggle="modal" data-target=".photo-1">
<img src="images/album/1.jpg" alt="photo" />
</div>
<div class="modal fade photo-1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<img src="images/album/1.jpg" alt="photo" />
</div>
</div>
</div>
</li>
</ul>
Following set of codes represents the contact us form
<form class="contact-form">
<div class="form-group">
<i class="icon ion-person"></i>
<input id="contact-name" type="text" name="name" class="form-control" placeholder="Enter your name *" required="required" data-error="Name is required.">
</div>
<div class="form-group">
<i class="icon ion-email"></i>
<input id="contact-email" type="text" name="email" class="form-control" placeholder="Enter your email *" required="required" data-error="Email is required.">
</div>
<div class="form-group">
<i class="icon ion-android-call"></i>
<input id="contact-phone" type="text" name="phone" class="form-control" placeholder="Enter your phone *" required="required" data-error="Phone is required.">
</div>
<div class="form-group">
<textarea id="form-message" name="message" class="form-control" placeholder="Leave a message for us *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
</div>
</form>
For google map, use the code below
<div class="google-maps">
<div id="map" class="map"></div>
</div>
All CSS files can be found in HTML/css folder. Each file has been well commented so that you feel comfortable working with them. The files contains some general stylings like anchor tags, buttons etc so keep in mind that overriting those may change stylings somewhere else also. Below are the CSS files used in the template:
style.css - main css file. You should be working on this filebootstrap.min.css - framework css file. We do not recommend to edit itionicons.min.css - Ion Icons CSS filefont-awesome.min.css - Font Awesome CSS fileemoji.css - CSS file for Emojis. For full emoji list, go to https://afeld.github.io/emoji-css/jquery.mCustomScrollbar.css, jquery.scrollbar.css - custom scrollbar cssYou may either edit style.css or create a new css and link it to html file
All .js files are located in the HTML/js folder. You do not need to edit these files.
jquery-3.1.1.min.js - jQuery Localbootstrap.min.js - Bootsrap framework js filejquery.incremental-counter.js - counter used on the homepagescript.js - multiple scriptjquery.scrollbar.min.js - custom scrollbar used in the chatroomjquery.appear.min.js - For 'appear'/'disappear' eventsjquery.sticky-kit.min.js - JS file for Sticky Sidebarsmasonry.pkgd.min.js - Masonry LayoutIn this section, we will learn the fonts we used to create this template.
ionicons.min.css files to the page head to get icons work. .section-title and .sub-title<link href='https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i' rel='stylesheet' type='text/css'>https://www.pexels.com/
https://pixabay.com/
http://www.freepik.com/
http://www.flaticon.com/
https://afeld.github.io/emoji-css/