SociFly

Multipurpose Social Network HTML5 Template

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form. Thank you so much!

How to get help:

We run support 24/7. You can expect a response within 24 hours.

[Note: Need Some Premium Customization Done. Contact Us Via Our User Page Contact Form. ]

INTRODUCTION

SociFly is a Multipurpose Social Network HTML5 Template designed to build any kinds of Social Networking Website. It's an HTML5 template based on latest stable Bootstrap 3.3.7. Anyone can easily update/edit this plugin to follow our Well Sorted Documentation.

Main Features of "SociFly":

FILE & FOLDER STRUCTURE

── /main-files/html-template/

File & Folder Structure

HTML STRUCTURE

The "SociFly" template is a responsive HTML template based on Bootstrap 3.3.7. The structure based on a flexible grid that lets you change HTML pages quickly and logically with a nestable system.

If you would like to edit the layout of any elements in whole template, you would do the following:

Open any '.html' or, '.css', so that is extremely easy to change any html markup and css attributes. Simply find the related and commented heading in the html or, css file and make your magic.

CSS FILES AND STRUCTURE

"SociFly" using the following CSS files:

css/bootstrap.min.css Bootstrap 3 Framework
css/font-awesome.min.css Font Awesome
css/owl.carousel.min.css Owl Carousel Plugin
css/magnific-popup.min.css Magnific Popup Plugin
plugins.min.css Plugins Bundle
style.css
style.min.css		 Template Main Styles
css/responsive-style.css
responsive-style.min.css		 Template Responsive Styles
css/colors/theme-color-1.css Template Color Scheme Styles
css/custom.css Template Custom Styles

JAVASCRIPT

js/jquery-3.2.1.min.js jQuery Library
js/bootstrap.min.js Bootstrap 3 Framework
js/owl.carousel.min.js Owl Carousel Plugin
js/jquery.magnific-popup.min.js Magnific Popup Plugin
js/jquery.validate.min.js Validation Plugin
js/isotope.min.js Isotope Plugin
js/jquery.sticky.min.js Sticky Plugin
js/jquery.waypoints.min.js Waypoints Plugin
js/jquery.counterup.min.js Count-Up Plugin
js/custom-select-menu.jquery.min.js Custom Select Menu Plugin
js/resizesensor.min.js Resize Sensor Plugin
js/theia-sticky-sidebar.min.js Theia Sticky Sidebar Plugin
js/jquery.zoom.min.js Zoom Plugin
js/jquery.spinner.min.js Spinner Plugin
js/jquery.countdown.min.js Countdown Plugin
js/scrollreveal.min.js Scroll Reveal Plugin
js/retina.min.js RetinaJS Plugin
plugins.min.js Plugins Bundle
js/main.js
js/main.min.js		 Template Main Scripts

INSTALLATION

Via FTP:

1. Open up your 'FTP Software' of choice and connect to your hosting

2. Browse to required directory (Normally: ./public_html)

3. Unzip the 'main_files.zip' and choose which templates to upload.

4. Upload the template to the server.

FAQ

Once you finished setup successfully, you can customize it as you want. Below are some common frequently asked questions.

Q. How To Change Default Color Schemes?

Q. How To Remove Preloader?

Q. How To Change Topbar Text and Links?

Q. How To Change Header Logo?

Q. How To Change Header Menu Links?

Q. How To Change Banner Text?

Q. How To Change Banner Background Image?

Q. How To Change Banner Slider Speed?

Q. How To Change Features Text?

Q. How To Change Info Item Text and Icon?

Q. How To Change Box Item Contents?

Q. How To Change Member Item Contents?

Q. How To Change Testimonial Item Contents?

Q. How To Change Video Popup Poster and Links?

Q. How To Change FAQ Item Contents?

Q. How To Change Download Block Contents?

Q. How To Change Contact Page Map?

Q. How To Change Contact Info?

Q. How To Setup Contact Form?

Q. How To Setup Footer Newsletter Widget?

Q. How To Setup Footer Copyright Text?

Q. How To Change Coming Soon Page Countdown?

VIDEO POPUP STYLES

SociFly Supports 2 Different Video Popup Styles.

  • Video Popup Style 01
  • Video Popup Style 02

Video Popup Style 01:

<!-- Video Popup Start -->
<div class="video--popup style--1" data-overlay="0.3">
	<img src="img/why-choose-us-img/video-poster-1.jpg" alt="">

	<a href="https://www.youtube.com/watch?v=YE7VzlLtp-4" class="btn-link" data-trigger="video_popup">
		<span><i class="fa fa-play"></i></span>
	</a>
</div>
<!-- Video Popup End -->

Video Popup Style 02:

<!-- Video Popup Start -->
<div class="video--popup style--2" data-overlay="0.3">
	<img src="img/why-choose-us-img/video-poster-2.jpg" alt="">

	<a href="https://www.youtube.com/watch?v=YE7VzlLtp-4" data-overlay="0.5" data-overlay-color="primary" data-trigger="video_popup">
		<i class="fa fa-play"></i>
	</a>
</div>
<!-- Video Popup End -->

FOOTER STYLES

SociFly Supports 2 Different FAQ Styles.

  • FAQ Style 01
  • FAQ Style 02

FAQ Style 01:

<!-- FAQ Items Start -->
<div class="faq--items" id="faqItems" data-scroll-reveal="group">
	<div class="title pb--20">
		<h2 class="h2 fw--600">Frequently Asked Question</h2>
	</div>

	<!-- FAQ Item Start -->
	<div class="faq--item style--1 panel">
		<div class="title">
			<h3 class="h6 fw--700 text-darker">
				<a href="#faqItem01" data-parent="#faqItems" data-toggle="collapse" class="collapsed">
					<span>How can I register?</span>
				</a>
			</h3>
		</div>

		<div id="faqItem01" class="content collapse">
			<div class="content--inner">
				<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words even slightly believable.</p>
			</div>
		</div>
	</div>
	<!-- FAQ Item End -->

	<!-- FAQ Item Start -->
	<div class="faq--item style--1 panel">
		<div class="title">
			<h3 class="h6 fw--700 text-darker">
				<a href="#faqItem02" data-parent="#faqItems" data-toggle="collapse" class="collapsed">
					<span>What are the benefits of premium plans?</span>
				</a>
			</h3>
		</div>

		<div id="faqItem02" class="content collapse">
			<div class="content--inner">
				<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words even slightly believable.</p>
			</div>
		</div>
	</div>
	<!-- FAQ Item End -->

	<!-- FAQ Item Start -->
	<div class="faq--item style--1 panel">
		<div class="title">
			<h3 class="h6 fw--700 text-darker">
				<a href="#faqItem03" data-parent="#faqItems" data-toggle="collapse" class="collapsed">
					<span>How can I renew my plan?</span>
				</a>
			</h3>
		</div>

		<div id="faqItem03" class="content collapse">
			<div class="content--inner">
				<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words even slightly believable.</p>
			</div>
		</div>
	</div>
	<!-- FAQ Item End -->
</div>
<!-- FAQ Items End -->

FAQ Style 02:

<!-- FAQ Items Start -->
<div class="faq--items" id="faqItems" data-scroll-reveal="group">
	<!-- FAQ Item Start -->
	<div class="faq--item style--2 panel">
		<div class="title">
			<h3 class="h6">
				<a href="#faqItem01" data-parent="#faqItems" data-toggle="collapse" class="collapsed">
					<span>What is Social Media?</span>
				</a>
			</h3>
		</div>

		<div id="faqItem01" class="content collapse">
			<div class="content--inner">
				<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words even slightly believable.</p>
			</div>
		</div>
	</div>
	<!-- FAQ Item End -->

	<!-- FAQ Item Start -->
	<div class="faq--item style--2 panel">
		<div class="title">
			<h3 class="h6">
				<a href="#faqItem02" data-parent="#faqItems" data-toggle="collapse" class="collapsed">
					<span>Do I really Need Social Media?</span>
				</a>
			</h3>
		</div>

		<div id="faqItem02" class="content collapse">
			<div class="content--inner">
				<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words even slightly believable.</p>
			</div>
		</div>
	</div>
	<!-- FAQ Item End -->

	<!-- FAQ Item Start -->
	<div class="faq--item style--2 panel">
		<div class="title">
			<h3 class="h6">
				<a href="#faqItem03" data-parent="#faqItems" data-toggle="collapse" class="collapsed">
					<span>What Should I Post?</span>
				</a>
			</h3>
		</div>

		<div id="faqItem03" class="content collapse">
			<div class="content--inner">
				<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words even slightly believable.</p>
			</div>
		</div>
	</div>
	<!-- FAQ Item End -->

	<!-- FAQ Item Start -->
	<div class="faq--item style--2 panel">
		<div class="title">
			<h3 class="h6">
				<a href="#faqItem04" data-parent="#faqItems" data-toggle="collapse" class="collapsed">
					<span>How Often Should I Post?</span>
				</a>
			</h3>
		</div>

		<div id="faqItem04" class="content collapse">
			<div class="content--inner">
				<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words even slightly believable.</p>
			</div>
		</div>
	</div>
	<!-- FAQ Item End -->

	<!-- FAQ Item Start -->
	<div class="faq--item style--2 panel">
		<div class="title">
			<h3 class="h6">
				<a href="#faqItem05" data-parent="#faqItems" data-toggle="collapse" class="collapsed">
					<span>How To Handle Negative Nomments On Social Media?</span>
				</a>
			</h3>
		</div>

		<div id="faqItem05" class="content collapse">
			<div class="content--inner">
				<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words even slightly believable.</p>
			</div>
		</div>
	</div>
	<!-- FAQ Item End -->
</div>
<!-- FAQ Items End -->

FOOTER STYLES

SociFly Supports 2 Different Footer Styles.

  • Footer Style 01
  • Footer Style 02

Footer Style 01:

<!-- Footer Section Start -->
<footer class="footer--section">
	<!-- Footer Widgets Start -->
	<div class="footer--widgets pt--70 pb--20 bg-lightdark" data-bg-img="img/footer-img/footer-widgets-bg.png">
		<div class="container">
			<div class="row AdjustRow">
				<div class="col-md-3 col-xs-6 col-xxs-12 pb--60">
					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">About Us</h2>

						<!-- Text Widget Start -->
						<div class="text--widget">
							<p>Ipsum is simply dummy text of the printing indusLorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

							<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
						</div>
						<!-- Text Widget End -->
					</div>
					<!-- Widget End -->

					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">Subscribe To Our Newsletter</h2>

						<!-- Newsletter Widget Start -->
						<div class="newsletter--widget style--1" data-form="validate">
							<form action="https://themelooks.us13.list-manage.com/subscribe/post?u=79f0b132ec25ee223bb41835f&id=f4e0e93d1d" method="post" name="mc-embedded-subscribe-form" target="_blank">
								<div class="input-group">
									<input type="email" name="EMAIL" placeholder="Enter your emil address" class="form-control" autocomplete="off" required>

									<div class="input-group-btn">
										<button type="submit" class="btn-link"><i class="fa fa-send-o"></i></button>
									</div>
								</div>
							</form>
						</div>
						<!-- Newsletter Widget End -->
					</div>
					<!-- Widget End -->
				</div>

				<div class="col-md-3 col-xs-6 col-xxs-12 pb--60">
					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">Recent Post</h2>

						<!-- Recent Posts Widget Start -->
						<div class="recent-posts--widget">
							<ul class="nav">
								<li>
									<p class="date fw--300">
										<a href="#"><i class="fa mr--8 fa-file-text-o"></i>19 Jan 2017</a>
									</p>
									<p class="title fw--700">
										<a href="blog-details.html">I look at you and see the rest of my life in front</a>
									</p>
								</li>
								<li>
									<p class="date fw--300">
										<a href="#"><i class="fa mr--8 fa-file-text-o"></i>19 Jan 2017</a>
									</p>
									<p class="title fw--700">
										<a href="blog-details.html">If I know what love is, it is because of you</a>
									</p>
								</li>
								<li>
									<p class="date fw--300">
										<a href="#"><i class="fa mr--8 fa-file-text-o"></i>19 Jan 2017</a>
									</p>
									<p class="title fw--700">
										<a href="blog-details.html">At the touch of love everyone becomes a poet</a>
									</p>
								</li>
							</ul>
						</div>
						<!-- Recent Posts Widget End -->
					</div>
					<!-- Widget End -->

					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">Tags</h2>

						<!-- Tags Widget Start -->
						<div class="tags--widget">
							<ul class="nav">
								<li><a href="#">BuddyPress</a></li>
								<li><a href="#">HTML</a></li>
								<li><a href="#">Music</a></li>
								<li><a href="#">Technology</a></li>
								<li><a href="#">Movies</a></li>
								<li><a href="#">Photography</a></li>
								<li><a href="#">WordPress</a></li>
							</ul>
						</div>
						<!-- Tags Widget End -->
					</div>
					<!-- Widget End -->
				</div>

				<div class="col-md-3 col-xs-6 col-xxs-12 pb--60">
					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">Some of Catagories</h2>

						<!-- Nav Widget Start -->
						<div class="nav--widget">
							<ul class="nav">
								<li>
									<a href="#">
										<i class="fa fa-folder-o"></i>
										<span class="text">Social Media</span>
										<span class="count">(26)</span>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-folder-o"></i>
										<span class="text">Business Studies</span>
										<span class="count">(06)</span>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-folder-o"></i>
										<span class="text">Technology</span>
										<span class="count">(34)</span>
									</a>
								</li>
							</ul>
						</div>
						<!-- Nav Widget End -->
					</div>
					<!-- Widget End -->

					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">From Archives</h2>

						<!-- Nav Widget Start -->
						<div class="nav--widget">
							<ul class="nav">
								<li>
									<a href="#">
										<i class="fa fa-calendar-o"></i>
										<span class="text">Jan - July 2017</span>
										<span class="count">(86)</span>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-calendar-o"></i>
										<span class="text">Jan - Dce 2016</span>
										<span class="count">(328)</span>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-calendar-o"></i>
										<span class="text">Jan - Dec 2015</span>
										<span class="count">(427)</span>
									</a>
								</li>
							</ul>
						</div>
						<!-- Nav Widget End -->
					</div>
					<!-- Widget End -->
				</div>

				<div class="col-md-3 col-xs-6 col-xxs-12 pb--60">
					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">Forums</h2>

						<!-- Links Widget Start -->
						<div class="links--widget">
							<ul class="nav">
								<li><a href="sub-forums.html">User Interface Design</a></li>
								<li><a href="sub-forums.html">Front-End Engineering</a></li>
								<li><a href="sub-forums.html">Web Development</a></li>
								<li><a href="sub-forums.html">Social Media Marketing</a></li>
								<li><a href="sub-forums.html">Content Marketing</a></li>
							</ul>
						</div>
						<!-- Links Widget End -->
					</div>
					<!-- Widget End -->

					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">Useful Links</h2>

						<!-- Links Widget Start -->
						<div class="links--widget">
							<ul class="nav">
								<li><a href="#">Register</a></li>
								<li><a href="#">Login</a></li>
								<li><a href="#">Membership Levels</a></li>
								<li><a href="#">Shop</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>
						<!-- Links Widget End -->
					</div>
					<!-- Widget End -->
				</div>
			</div>
		</div>
	</div>
	<!-- Footer Widgets End -->

	<!-- Footer Extra Start -->
	<div class="footer--extra bg-darker pt--30 pb--40 text-center">
		<div class="container">
			<!-- Widget Start -->
			<div class="widget">
				<h2 class="h4 fw--700 widget--title">Recent Active Members</h2>

				<!-- Recent Active Members Widget Start -->
				<div class="recent-active-members--widget style--2">
					<div class="owl-carousel" data-owl-items="12" data-owl-nav="true" data-owl-speed="1200" data-owl-responsive='{"0": {"items": "3"}, "481": {"items": "6"}, "768": {"items": "8"}, "992": {"items": "12"}}'>
						<div class="img">
							<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/01.jpg" alt=""></a>
						</div>

						<div class="img">
							<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/02.jpg" alt=""></a>
						</div>

						<div class="img">
							<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/03.jpg" alt=""></a>
						</div>

						<div class="img">
							<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/04.jpg" alt=""></a>
						</div>

						<div class="img">
							<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/05.jpg" alt=""></a>
						</div>

						<div class="img">
							<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/06.jpg" alt=""></a>
						</div>

						<div class="img">
							<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/07.jpg" alt=""></a>
						</div>

						<div class="img">
							<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/08.jpg" alt=""></a>
						</div>

						<div class="img">
							<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/09.jpg" alt=""></a>
						</div>

						<div class="img">
							<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/10.jpg" alt=""></a>
						</div>

						<div class="img">
							<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/11.jpg" alt=""></a>
						</div>

						<div class="img">
							<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/12.jpg" alt=""></a>
						</div>

						<div class="img">
							<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/13.jpg" alt=""></a>
						</div>
					</div>
				</div>
				<!-- Recent Active Members Widget End -->
			</div>
			<!-- Widget End -->
		</div>
	</div>
	<!-- Footer Extra End -->

	<!-- Footer Copyright Start -->
	<div class="footer--copyright pt--30 pb--30 bg-darkest">
		<div class="container">
			<div class="text fw--500 fs--14 text-center">
				<p>Copyright © Soci<span>fly</span>. All Rights Reserved.</p>
			</div>
		</div>
	</div>
	<!-- Footer Copyright End -->
</footer>
<!-- Footer Section End -->

Footer Style 02:

<!-- Footer Section Start -->
<footer class="footer--section">
	<!-- Footer Widgets Start -->
	<div class="footer--widgets pt--70 pb--20 bg-lightdark" data-bg-img="img/footer-img/footer-widgets-bg.png">
		<div class="container">
			<div class="row AdjustRow">
				<div class="col-md-3 col-xs-6 col-xxs-12 pb--60">
					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">About Us</h2>

						<!-- Text Widget Start -->
						<div class="text--widget">
							<p>Ipsum is simply dummy text of the printing printing and typesetting industry.</p>

							<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered believable.</p>
						</div>
						<!-- Text Widget End -->
					</div>
					<!-- Widget End -->

					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">Subscribe To Our Newsletter</h2>

						<!-- Newsletter Widget Start -->
						<div class="newsletter--widget style--2" data-form="validate">
							<p>Ipsum is simply dummy text of the printing printing and typesetting industry.</p>

							<form action="https://themelooks.us13.list-manage.com/subscribe/post?u=79f0b132ec25ee223bb41835f&id=f4e0e93d1d" method="post" name="mc-embedded-subscribe-form" target="_blank">
								<div class="input-group">
									<input type="email" name="EMAIL" placeholder="Enter your emil address" class="form-control" autocomplete="off" required>

									<div class="input-group-btn">
										<button type="submit" class="btn btn-primary"><i class="fa fa-send-o"></i></button>
									</div>
								</div>
							</form>
						</div>
						<!-- Newsletter Widget End -->
					</div>
					<!-- Widget End -->
				</div>

				<div class="col-md-3 col-xs-6 col-xxs-12 pb--60">
					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">Recent Post</h2>

						<!-- Recent Posts Widget Start -->
						<div class="recent-posts--widget">
							<ul class="nav">
								<li>
									<p class="date fw--300">
										<a href="#"><i class="fa mr--8 fa-file-text-o"></i>19 Jan 2017</a>
									</p>
									<p class="title fw--700">
										<a href="blog-details.html">I look at you and see the rest of my life in front</a>
									</p>
								</li>
								<li>
									<p class="date fw--300">
										<a href="#"><i class="fa mr--8 fa-file-text-o"></i>19 Jan 2017</a>
									</p>
									<p class="title fw--700">
										<a href="blog-details.html">If I know what love is, it is because of you</a>
									</p>
								</li>
							</ul>
						</div>
						<!-- Recent Posts Widget End -->
					</div>
					<!-- Widget End -->

					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">Catagories</h2>

						<!-- Nav Widget Start -->
						<div class="nav--widget">
							<ul class="nav fw--700">
								<li>
									<a href="#">
										<i class="fa fa-folder-o"></i>
										<span class="text">Social Media</span>
										<span class="count">(26)</span>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-folder-o"></i>
										<span class="text">Business Studies</span>
										<span class="count">(06)</span>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-folder-o"></i>
										<span class="text">Technology</span>
										<span class="count">(34)</span>
									</a>
								</li>
							</ul>
						</div>
						<!-- Nav Widget End -->
					</div>
					<!-- Widget End -->
				</div>

				<div class="col-md-3 col-xs-6 col-xxs-12 pb--60">
					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">Recent Active Members</h2>

						<!-- Recent Active Members Widget Start -->
						<div class="recent-active-members--widget style--1">
							<div class="img">
								<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/01.jpg" alt=""></a>
							</div>

							<div class="img">
								<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/02.jpg" alt=""></a>
							</div>

							<div class="img">
								<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/03.jpg" alt=""></a>
							</div>

							<div class="img">
								<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/04.jpg" alt=""></a>
							</div>

							<div class="img">
								<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/05.jpg" alt=""></a>
							</div>

							<div class="img">
								<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/06.jpg" alt=""></a>
							</div>

							<div class="img">
								<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/07.jpg" alt=""></a>
							</div>

							<div class="img">
								<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/08.jpg" alt=""></a>
							</div>

							<div class="img">
								<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/09.jpg" alt=""></a>
							</div>

							<div class="img">
								<a href="member-activity-personal.html"><img src="img/widgets-img/recent-active-members/10.jpg" alt=""></a>
							</div>
						</div>
						<!-- Recent Active Members Widget End -->
					</div>
					<!-- Widget End -->

					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">Useful Links</h2>

						<!-- Links Widget Start -->
						<div class="links--widget">
							<ul class="nav">
								<li><a href="#">Register</a></li>
								<li><a href="#">Login</a></li>
								<li><a href="#">Membership Levels</a></li>
								<li><a href="#">Shop</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>
						<!-- Links Widget End -->
					</div>
					<!-- Widget End -->
				</div>

				<div class="col-md-3 col-xs-6 col-xxs-12 pb--60">
					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">Forums</h2>

						<!-- Links Widget Start -->
						<div class="links--widget">
							<ul class="nav">
								<li><a href="sub-forums.html">User Interface Design</a></li>
								<li><a href="sub-forums.html">Front-End Engineering</a></li>
								<li><a href="sub-forums.html">Web Development</a></li>
								<li><a href="sub-forums.html">Social Media Marketing</a></li>
								<li><a href="sub-forums.html">Content Marketing</a></li>
							</ul>
						</div>
						<!-- Links Widget End -->
					</div>
					<!-- Widget End -->

					<!-- Widget Start -->
					<div class="widget">
						<h2 class="h4 fw--700 widget--title">Tags</h2>

						<!-- Tags Widget Start -->
						<div class="tags--widget">
							<ul class="nav">
								<li><a href="#">BuddyPress</a></li>
								<li><a href="#">HTML</a></li>
								<li><a href="#">Music</a></li>
								<li><a href="#">Technology</a></li>
								<li><a href="#">Movies</a></li>
								<li><a href="#">Photography</a></li>
								<li><a href="#">WordPress</a></li>
							</ul>
						</div>
						<!-- Tags Widget End -->
					</div>
					<!-- Widget End -->
				</div>
			</div>
		</div>
	</div>
	<!-- Footer Widgets End -->

	<!-- Footer Copyright Start -->
	<div class="footer--copyright pt--30 pb--30 bg-darkest">
		<div class="container">
			<div class="text fw--500 fs--14 float--left">
				<p>Copyright © Soci<span>fly</span>. All Rights Reserved.</p>
				<p>Design and Developed with <i class="fa fa-heart text-primary"></i> by <a href="https://themeforest.net/user/themelooks">ThemeLooks</a></p>
			</div>

			<div class="social float--right">
				<ul class="nav">
					<li><a href="#"><i class="fa fa-facebook"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter"></i></a></li>
					<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
					<li><a href="#"><i class="fa fa-rss"></i></a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- Footer Copyright End -->
</footer>
<!-- Footer Section End -->

SOURCE AND CREADITS

Photos:

Fonts Used:

Frameworks / Libraries:

Plugins Used: