1-Discover-Backpacker

Developer
Kev Rousseau
Size
8,202 Kb
Views
34,408
  1. 1-Discover-Backpacker Previews
  2. 1-Discover-Backpacker HTML Codes
  3. 1-Discover-Backpacker CSS Codes
  4. 1-Discover-Backpacker JS Codes

How do I make an 1-discover-backpacker?

This is a design I took from: https://dribbble.com/shots/1149909-1-Discover-Backpacker/attachments/148605. What is a 1-discover-backpacker? How do you make a 1-discover-backpacker? This script and codes were developed by Kev Rousseau on 12 August 2022, Friday.

1-Discover-Backpacker Previews
IQ Test

1-Discover-Backpacker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>1-Discover-Backpacker</title> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
This is a design I took from:
https://dribbble.com/shots/1149909-1-Discover-Backpacker/attachments/148605
Just for fun and to stay sharp.
**FOR BETTER RESULTS PLEASE VIEW IN CHROME and FULLSCREEN**
Still a work in progress though.
-->
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">	<defs>	<g id="icon-search">	<path class="path1" d="M31.12 31.12c-1.174 1.174-3.077 1.174-4.25 0l-5.304-5.304c-2.18 1.399-4.758 2.232-7.541 2.232-7.745 0-14.024-6.278-14.024-14.024s6.279-14.024 14.024-14.024c7.746 0 14.024 6.278 14.024 14.024 0 2.782-0.834 5.361-2.232 7.542l5.304 5.304c1.174 1.174 1.174 3.076 0 4.249zM14.024 4.007c-5.532 0-10.017 4.484-10.017 10.017s4.485 10.017 10.017 10.017c5.533 0 10.017-4.484 10.017-10.017s-4.484-10.017-10.017-10.017z"></path>	</g>	</defs>	</svg>	<div class="wrapper">	<nav class="main">	<div class="searchBox">	<form action="">	<input type="text" id="search" class="search" placeholder="Search all...">	<label for="search">	<svg class="icon icon-search" viewBox="0 0 32 32"><use xlink:href="#icon-search"></use></svg></label>	</form>	</div>	<div class="main">	<h5>Main</h5>	<ul>	<li class="icon-discover selected"><a href="#">Discover</a></li>	<li class="icon-events"><a href="#">Events</a><span class="counter">5</span></li>	<li class="icon-friends"><a href="#">Friends</a></li>	<li class="icon-photos"><a href="#">Photos</a></li>	<li class="icon-videos"><a href="#">Videos</a></li>	</ul>	</div>	<div class="recent">	<h5>Recent</h5>	<ul>	<li class="icon-hotels"><a href="#">Hotels</a><span class="counter">3</span></li>	<li class="icon-vacations"><a href="#">Vacations</a></li>	<li class="icon-restaurents"><a href="#">Restaurents</a></li>	<li class="icon-cruises"><a href="#">Cruises</a></li>	</ul>	</div>	<div class="groups">	<h5>Groups</h5>	<ul>	<li class="icon-celebrities"><a href="#">Celebrities</a></li>	<li class="icon-designers"><a href="#">Designers</a></li>	<li class="icon-party"><a href="#">Party Trips</a></li>	</ul>	</div>	</nav>	<header>	<ul>	<li class="icon-convos"><a href="#"></a></li>	<li class="icon-notifs"><a href="#"></a><span class="counter">5</span></li>	<li class="icon-settings"><a href="#"></a></li>	<li class="post"><a href="#">+</a></li>	</ul>	</header>	<div class="mainContent">	<div class="post">	<textarea name="" id="" cols="58" rows="2" placeholder="Write Something..."></textarea>	<div class="tools">	<ul>	<li class="icon-addLocation"><a href="#"></a></li>	<li class="icon-addPhotos"><a href="#"></a></li>	<li class="icon-addDate"><a href="#"></a></li>	<li class="icon-addVideo"><a href="#"></a></li>	</ul>	<form action="">	<input type="submit" value="Send">	</form>	</div>	</div>	<div class="post">	<div class="hdr">	<div class="user-img icon-trent"></div>	<div class="user-info">	<div class="name">	<p><strong>Trent Walton</strong> created an event.</p>	</div>	<div class="location">	<p>Austin, USA</p>	</div>	</div>	<div class="post-info">	<div class="post-type icon-addDate"></div>	<div class="post-time">	<p>3 hours ago</p>	</div>	</div>	</div>	<div class="content">	<div class="info">	<div class="title">	<p>Birthday Party on my Yacht in New York.</p>	</div>	<div class="time">	<p>July 10 at 10:00pm</p>	</div>	<div class="location">	<p>New York, USA</p>	</div>	</div>	<div class="img">	<img src="http://i62.tinypic.com/29zso51.jpg" alt="">	</div>	<div class="people-invited">	<ul>	<li class="user1"><a href="#"></a></li>	<li class="user2"><a href="#"></a></li>	<li class="user3"><a href="#"></a></li>	<li class="user4"><a href="#"></a></li>	<li class="user5"><a href="#"></a></li>	<li class="user6"><a href="#"></a></li>	<li class="more"><a href="#">+26</a></li>	</ul>	</div>	<div class="actions">	<div class="action">	<p>	<a href="#">Admire</a> &bull; <a href="#">Comment</a>	</p>	<p class="admire"><strong>633</strong> People admire this.</p>	</div>	<textarea name="" id="" cols="58" rows="1" placeholder="Write a comment..."></textarea>	</div>	</div>	</div>	<div class="post">	<div class="hdr">	<div class="user-img icon-trent"></div>	<div class="user-info">	<div class="name">	<p><strong>Trent Walton</strong></p>	</div>	<div class="location">	<p>Austin, USA</p>	</div>	</div>	<div class="post-info">	<div class="post-type icon-boat"></div>	<div class="post-time">	<p>2 hours ago</p>	</div>	</div>	</div>	<div class="content">	<div class="img">	<img src="http://i60.tinypic.com/2zhjdrl.jpg" alt="">	</div>	<div class="actions">	<div class="action">	<p>	<a href="#">Admire</a> &bull; <a href="#">Comment</a>	</p>	<p class="admire"><strong>523</strong> People admire this.</p>	</div>	<textarea name="" id="" cols="58" rows="1" placeholder="Write a comment..."></textarea>	</div>	</div>	</div>	<div class="post">	<div class="hdr">	<div class="user-img icon-julien"></div>	<div class="user-info">	<div class="name">	<p><strong>Julien Renvoye</strong></p>	</div>	<div class="location">	<p>San Francisco, USA</p>	</div>	</div>	<div class="post-info">	<div class="post-type icon-hitchhike"></div>	<div class="post-time">	<p>3 hours ago</p>	</div>	</div>	</div>	<div class="content">	<div class="info">	<div class="text">	<p>Anyone here want to hitchhike in the Galaxy? I would love to be able to see the milkyway.</p>	</div>	</div>	<div class="actions">	<div class="action">	<p>	<a href="#">Admire</a> &bull; <a href="#">Comment</a>	</p>	<p class="admire"><strong>10</strong> People admire this.</p>	</div>	<div class="comment">	<div class="hdr">	<div class="user-img icon-victor"></div>	<div class="user-info">	<div class="name">	<p><strong>Victor Erixon</strong></p>	</div>	</div>	<div class="post-info">	<div class="post-time">	<p>5 hours ago</p>	</div>	</div>	</div>	<div class="content">	<div class="info">	<div class="text">	<p>I would love to join, but are you able to wait for a couple of weeks? Sounds cool.</p>	</div>	<div class="like"><a href="#">Like</a> &bull; 32</div>	</div>	<textarea name="" id="" cols="58" rows="1" placeholder="Write a comment..."></textarea>	</div>	</div>	</div>	</div>	</div>	<div class="post">	<div class="hdr">	<div class="user-img icon-dan"></div>	<div class="user-info">	<div class="name">	<p><strong>Dan Cederholm</strong></p>	</div>	<div class="location">	<p>Salem, USA</p>	</div>	</div>	<div class="post-info">	<div class="post-type icon-sun"></div>	<div class="post-time">	<p>5 hours ago</p>	</div>	</div>	</div>	<div class="content">	<div class="img">	<img src="http://i62.tinypic.com/2505747.jpg" alt="">	</div>	<div class="actions">	<div class="action">	<p>	<a href="#">Admire</a> &bull; <a href="#">Comment</a>	</p>	<p class="admire"><strong>213</strong> People admire this.</p>	</div>	<textarea name="" id="" cols="58" rows="1" placeholder="Write a comment..."></textarea>	</div>	</div>	</div>	</div>	<nav class="chat">	<div class="searchBox">	<form action="">	<input type="text" id="searchChat" class="search" placeholder="Chat with...">	<label for="searchChat">	<svg class="icon icon-search" viewBox="0 0 32 32"><use xlink:href="#icon-search"></use></svg>	</label>	</form>	</div>	<div class="online">	<h5>Online (10)</h5>	<ul>	<li class="icon-alex"><span class="user-img"></span><a href="#" class="online">Alex Pascal</a></li>	<li class="icon-benjamin"><span class="user-img"></span><a href="#" class="away">Benjamin De Cock</a></li>	<li class="icon-bill"><span class="user-img"></span><a href="#" class="online">Bill S Kenney</a></li>	<li class="icon-charlie"><span class="user-img"></span><a href="#" class="busy">Charlie Waite</a></li>	<li class="icon-dan"><span class="user-img"></span><a href="#" class="busy">Dan Cederholm</a></li>	<li class="icon-eddie"><span class="user-img"></span><a href="#" class="away">Eddie Lobanovs...</a></li>	<li class="icon-eric"><span class="user-img"></span><a href="#" class="online">Eric Hoffman</a></li>	<li class="icon-jeremy"><span class="user-img"></span><a href="#" class="online">Jeremy Sall&eacute;</a></li>	</ul>	</div>	<div class="offline">	<h5>Offline (232)</h5>	<ul>	<li class="icon-raquel"><span class="user-img"></span><a href="#">Raquel Parrado</a></li>	<li class="icon-rebecka"><span class="user-img"></span><a href="#">Rebecka Haglund</a></li>	<li class="icon-louise"><span class="user-img"></span><a href="#">Louise Östvik</a></li>	<li class="icon-meagan"><span class="user-img"></span><a href="#">Meagan Fisher</a></li>	<li class="icon-konst"><span class="user-img"></span><a href="#">Konstantin Datz</a></li>	<li class="icon-shaun"><span class="user-img"></span><a href="#">Shaun Moynihan</a></li>	<li class="icon-jessica"><span class="user-img"></span><a href="#">Jessica Hische</a></li>	<li class="icon-dana"><span class="user-img"></span><a href="#">Dana Tanamachi</a></li>	<li class="icon-jonathan"><span class="user-img"></span><a href="#">Jonathan Moerira</a></li>	<li class="icon-bobby"><span class="user-img"></span><a href="#">Bobby McKeena</a></li>	<li class="icon-claire"><span class="user-img"></span><a href="#">Claire Coullon</a></li>	<li class="icon-tobias"><span class="user-img"></span><a href="#">Tobias van Schn...</a></li>	<li class="icon-jon"><span class="user-img"></span><a href="#">Jon Contino</a></li>	<li class="icon-mikael"><span class="user-img"></span><a href="#">Mikael Eidenberg</a></li>	</ul>	</div>	</nav>	<footer></footer>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://code.jquery.com/ui/1.10.4/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

1-Discover-Backpacker - Script Codes CSS Codes

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {	display: block;
}
body {	line-height: 1;
}
ol, ul {	list-style: none;
}
blockquote, q {	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {	content: '';	content: none;
}
table {	border-collapse: collapse;	border-spacing: 0;
}
/*BASE CSS*/
html, body { width: 100%; min-height: 100%; height: 100%; }
a { text-decoration: none; }
* {	font-family: 'Source Sans Pro', sans-serif !important; }
/*MAIN CSS*/
.wrapper {	display: table;	max-width: 1300px;	width: 100%;	height: 100%;	margin: 0px auto;	box-sizing: border-box;	position: relative;
}
.icon-search { position: absolute; right: 25px; width: 16px; height: 16px; }
/*HEADER CSS*/
header {	float: left;	width: 84.65%;	height: 84px;	margin-left: 200px;	background-color: #161d20;	border-top-right-radius: 7px;
}
header ul { float: right; width: 320px; height: 100%; }
header ul li {	position: relative;	display: inline-table;	width: 70px;	height: 100%;	vertical-align: middle;	text-align: center;	-webkit-transition: all ease 0.3s;	-moz-transition: all ease 0.3s;	-o-transition: all ease 0.3s;	transition: all ease 0.3s;
}
header ul li.icon-convos { background: url("http://i57.tinypic.com/1zd55c4.png") no-repeat center; }
header ul li.icon-notifs { background: url("http://i62.tinypic.com/282fedu.png") no-repeat center; }
header ul li.icon-settings { background: url("http://i58.tinypic.com/zwi1k.png") no-repeat center; }
header ul li.icon-notifs .counter {	position: absolute;	top: 16px;	right: 12px;	padding: 3px 6px;	text-align: center;	border-radius: 10px;	color: #FFF;	cursor: pointer;	font-size: 14px;	font-weight: bold;	background-color: #2EB398;
}
header ul li.post { border-top-right-radius: 7px; background-color: #e76049; width: 100px; float: right; }
header ul li a { color: #FFF; height: 100%; width: 100%; display: table-cell; }
header ul li.post a { font-size: 45px; font-weight: bold; vertical-align: middle; }
#topNav { float: left; background-color: #4b6c8b; height: 70px; }
#topNav ul { height: 100%; display: inline-table; border: 1px solid #334c64; border-right: none; }
#topNav ul li {	float: left;	position: relative;	width: 78px;	height: 100%;	border: 1px solid #5d84a4;	border-right: 1px solid #334c64;	border-bottom:none;	text-align: center;	-webkit-transition: all ease 0.3s;	-moz-transition: all ease 0.3s;	-o-transition: all ease 0.3s;	transition: all ease 0.3s;
}
/*LEFT NAV CSS*/
nav.main {	position: absolute;	top: 0px;	bottom: -84px;	width: 200px;	min-height: 100%;	background-color: #1f282d;	border-top-left-radius: 7px;	border-bottom-left-radius: 7px;
}
nav.main > div { float: left; width: 100%; box-sizing: border-box; }
nav.main > div h5 { margin: 10px 0; color: #3c4d57; font-weight: bold; font-size: 14px; text-transform: uppercase; padding: 30px 30px 10px; }
nav.main > div > ul li {	height: 42px;	transition: all ease 0.3s;	box-sizing: border-box;	display: table;	width: 100%;	position: relative;
}
nav.main > div > ul li.selected {	background-color: #2f373c;	-webkit-transition: all ease 0.3s;	-moz-transition: all ease 0.3s;	-o-transition: all ease 0.3s;	transition: all ease 0.3s;
}
nav.main ul li:hover, header ul li:hover {	background-color: #2f373c !important;	-webkit-transition: all ease 0.3s;	-moz-transition: all ease 0.3s;	-o-transition: all ease 0.3s;	transition: all ease 0.3s;
}
nav.main ul li a {	color: #FFF;	width: 100%;	height: 100%;	font-size: 14px;	font-weight: bold;	padding-left: 70px;	display: table-cell;	vertical-align: middle;
}
nav.main ul li.icon-discover { background: url("http://i60.tinypic.com/4kel8y.png") no-repeat 32px center; }
nav.main ul li.icon-events { background: url("http://i61.tinypic.com/e8mln8.png") no-repeat 32px center; }
nav.main ul li.icon-friends { background: url("http://i58.tinypic.com/9u6vif.png") no-repeat 32px center; }
nav.main ul li.icon-photos { background: url("http://i58.tinypic.com/307xpud.png") no-repeat 32px center; }
nav.main ul li.icon-videos { background: url("http://i59.tinypic.com/14mvxbc.png") no-repeat 32px center; }
nav.main ul li.icon-hotels { background: url("http://i58.tinypic.com/bdsj7o.png") no-repeat 32px center; }
nav.main ul li.icon-vacations { background: url("http://i57.tinypic.com/2zjfl1w.png") no-repeat 32px center; }
nav.main ul li.icon-restaurents { background: url("http://i59.tinypic.com/6fyr08.png") no-repeat 32px center; }
nav.main ul li.icon-cruises { background: url("http://i57.tinypic.com/2mma8w5.png") no-repeat 32px center; }
nav.main .main .counter, nav.main .recent .counter {	position: absolute;	right: 30px;	padding: 3px 6px;	top: 12px;	text-align: center;	border-radius: 3px;	color: #FFF;	cursor: pointer;	font-size: 14px;	font-weight: bold;
}
nav.main .main .counter { background-color: #E76049; }
nav.main .recent .counter { background-color: #3b454b; }
nav.main .groups ul li:nth-child(1) a:before,
nav.main .groups ul li:nth-child(2) a:before,
nav.main .groups ul li:nth-child(3) a:before {	position: absolute;	content: "";	border-radius: 100%;	width: 15px;	height: 15px;	left: 32px;	top: 10px;
}
nav.main .groups ul li:nth-child(1) a:before { border: 3px solid #f6d346; }
nav.main .groups ul li:nth-child(2) a:before { border: 3px solid #e25e48; }
nav.main .groups ul li:nth-child(3) a:before { border: 3px solid #2eb398 }
nav.main .searchBox { width: 200px; height: 84px; background-color: #2eb398; display: table; padding: 25px; box-sizing: border-box; border-top-left-radius: 7px; font-size: 15px; float: left; }
nav.main .searchBox .icon-search { fill: #FFF; }
nav.main .searchBox form { display: table-cell; vertical-align: middle; }
nav.main .searchBox input.search { color: #FFF; font-style: italic; border: none; border-bottom: 2px solid #fff; background-color: transparent; width: 100%; float: left; padding-right: 30px; box-sizing: border-box; line-height: 12px; font-size: 14px; }
nav.main .searchBox input.search::-webkit-input-placeholder { /* WebKit browsers */ color: #edf0f2;
}
nav.main .searchBox input.search:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #edf0f2; opacity: 1;
}
nav.main .searchBox input.search::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #edf0f2; opacity: 1;
}
nav.main .searchBox input.search:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #edf0f2;
}
nav.main .searchBox input.search:active, nav.main .searchBox input.search:focus { outline: none; }
/*MAIN CONTENT CSS*/
.mainContent {	display: table;	width: 100%;	padding-top: 30px;	padding-left: 215px;	padding-right: 240px;	float: left;	box-sizing: border-box;
}
.mainContent .post {	border: 2px solid #eaedf1;	display: table-cell;	margin-right: 15px;	margin-left: 15px;	margin-bottom: 30px;	border-radius: 7px;	width: 390px;	font-size: 14px;
}
.mainContent .post:nth-child(odd) { margin-right: 0; float: left; }
.mainContent .post:nth-child(even) { margin-left: 0; float: right; }
.mainContent .post textarea { clear: both; float: left; border: none; resize: none; padding: 10px; font-size: 14px; }
.mainContent .post textarea:active, .mainContent .post textarea:focus { outline: none; }
.mainContent .post .tools { float: left; clear: both; width: 100%; height: 100%; background-color: #eaedf1; padding: 10px; box-sizing: border-box; }
.mainContent .post .tools ul li {	float: left;	width: 30px;	height: 30px;	margin-right: 10px;	-webkit-transition: all ease 0.3s;	-moz-transition: all ease 0.3s;	-o-transition: all ease 0.3s;	transition: all ease 0.3s;
}
.mainContent .post .tools ul li:hover {	background-color: #FFF !important;	-webkit-transition: all ease 0.3s;	-moz-transition: all ease 0.3s;	-o-transition: all ease 0.3s;	transition: all ease 0.3s;
}
.icon-addLocation { background: url(http://i58.tinypic.com/w9766h.png) no-repeat center; }
.icon-addPhotos { background: url(http://i57.tinypic.com/cp02b.png) no-repeat center; }
.icon-addDate { background: url(http://i61.tinypic.com/awx9j4.png) no-repeat center; }
.icon-addVideo { background: url(http://i62.tinypic.com/16hrzgl.png) no-repeat center; }
.icon-boat { background: url(http://i58.tinypic.com/wswcp5.png) no-repeat center; }
.icon-sun { background: url(http://i58.tinypic.com/o5p6w1.png) no-repeat center; }
.icon-hitchhike { background: url(http://i59.tinypic.com/2cf2kjp.png) no-repeat center; }
.mainContent .post .tools ul li a { float: left; width: 100%; height: 100%; }
.mainContent .post form { float: right; }
.mainContent .post form input[type=submit] {	background-color: #2eb398;	border: none;	font-weight: bold;	text-transform: uppercase;	color: #FFF;	padding: 5px 10px;	border-radius: 3px;	cursor: pointer;
}
.mainContent .post textarea::-webkit-input-placeholder { /* WebKit browsers */ color: #b4bdcb;
}
.mainContent .post textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #b4bdcb; opacity: 1;
}
.mainContent .post textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #b4bdcb; opacity: 1;
}
.mainContent .post textarea:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #b4bdcb;
}
.mainContent .post .hdr .icon-trent { background: url("http://i58.tinypic.com/sl18w7.png") no-repeat center; }
.mainContent .post .hdr .icon-julien { background: url("http://i59.tinypic.com/2s183ro.png") no-repeat center; }
.mainContent .post .hdr .icon-dan { background: url("http://i57.tinypic.com/nb29l1.png") no-repeat center; }
.mainContent .post .hdr .icon-victor { background: url("http://i60.tinypic.com/2d1ti09.png") no-repeat center; }
.mainContent .post .hdr .user-img { width: 36px; height: 36px; margin-right: 15px; }
.mainContent .post .content .info { border-bottom: 1px solid #eaedf1; }
.mainContent .post .hdr, .mainContent .post .content { display: table; width: 100%; padding: 15px; box-sizing: border-box; }
.mainContent .post .content { padding: 0; display: block; }
.mainContent .post .hdr .user-img,
.mainContent .post .hdr .user-info { display: table-cell; float: left; color: #40505a; font-size: 15px; }
.mainContent .post .hdr .user-info .name { margin-bottom: 5px; }
.mainContent .post .hdr .user-info .location { color: #89949b; font-size: 14px; }
.mainContent .post .hdr .post-info { float: right; }
.mainContent .post .hdr .post-info .post-type.icon-addDate,
.mainContent .post .hdr .post-info .post-type.icon-boat,
.mainContent .post .hdr .post-info .post-type.icon-sun,
.mainContent .post .hdr .post-info .post-type.icon-hitchhike {	width: 16px;	height: 21px;	float: right;
}
.mainContent .post .hdr .post-info .post-time { color: #89949b; font-size: 14px; font-weight: bold; float: right; clear: both; }
.mainContent .post .content .info > div { margin-bottom: 5px; color: #89949B; font-weight: bold; padding: 0 15px; }
.mainContent .post .content .info > div:last-child { margin-bottom: 20px; }
.mainContent .post .content .info .title { color: #2eb398; }
.mainContent .post .content .img { padding: 0; margin: 0; line-height: 0; }
.mainContent .post .content .img img { width: 100%; height: 100%; }
.mainContent .post .content .people-invited { margin: 0; float: left; width: 100%; box-sizing: border-box; }
.mainContent .post .content .people-invited ul { display: table; width: 100%; }
.mainContent .post .content .people-invited ul li {	width: 55px;	height: 52px;	display: table-cell;	float: left;
}
.mainContent .post .content .people-invited ul li a { float: left; width: 100%; height: 100%; }
.mainContent .post .content .people-invited ul li.user1 { background: url("http://i61.tinypic.com/wm1nbr.jpg") no-repeat center; background-size: 100%; }
.mainContent .post .content .people-invited ul li.user2 { background: url("http://i59.tinypic.com/2vw63o0.jpg") no-repeat center; background-size: 100%; }
.mainContent .post .content .people-invited ul li.user3 { background: url("http://i59.tinypic.com/16gg8kj.jpg") no-repeat center; background-size: 100%; }
.mainContent .post .content .people-invited ul li.user4 { background: url("http://i60.tinypic.com/2rcmqlz.jpg") no-repeat center; background-size: 100%; }
.mainContent .post .content .people-invited ul li.user5 { background: url("http://i62.tinypic.com/5p4xzl.jpg") no-repeat center; background-size: 100%; }
.mainContent .post .content .people-invited ul li.user6 { background: url("http://i60.tinypic.com/2cqeg3p.jpg") no-repeat center; background-size: 100%; }
.mainContent .post .content .people-invited ul li.more { cursor: pointer; display: inline-table; width: 60px; background-color: #2eb398; }
.mainContent .post .content .people-invited ul li.more a { float: none; color: #FFF; display: table-cell; vertical-align: middle; text-align: center; font-weight: bold; }
.mainContent .post .content .actions { color: #6a7686; float: left; width: 100%; }
.mainContent .post .content .actions .action { padding: 20px 15px; background-color: #eaedf1; float: left; width: 100%; box-sizing: border-box; }
.mainContent .post .content .actions .action p { float: left; }
.mainContent .post .content .actions .action p.admire { float: right; }
.mainContent .post .content .actions .action a,
.mainContent .post .content .like a, .mainContent .post .content .like { color: #6a7686; font-weight: bold; }
.mainContent .post .comment .hdr { padding-bottom:0; }
.mainContent .post .comment .hdr .user-img { width: 22px; height: 22px; margin-right: 15px; }
.mainContent .post .comment .content .info { padding-left: 37px; }
/*CHAT NAV*/
nav.chat {	position: absolute;	top: 84px;	right: 0;	width: 225px;	min-height: 100%;	float: right;	background-color: #eaedf1;	box-sizing: border-box;	border-bottom-right-radius: 7px;
}
nav.chat .searchBox { padding: 25px; }
nav.chat .searchBox .icon-search { fill: #b4bdcb; }
nav.chat .searchBox input.search { font-style: italic; border: none; border-bottom: 2px solid #b4bdcb; background-color: transparent; width: 100%; float: left; padding-right: 30px; margin-bottom: 20px; box-sizing: border-box; line-height: 12px; font-size: 14px; }
nav.chat .searchBox input.search::-webkit-input-placeholder { /* WebKit browsers */ color: #c4ccd8;
}
nav.chat .searchBox input.search:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #c4ccd8; opacity: 1;
}
nav.chat .searchBox input.search::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #c4ccd8; opacity: 1;
}
nav.chat .searchBox input.search:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #c4ccd8;
}
nav.chat .searchBox input.search:active, nav.chat .searchBox input.search:focus { outline: none; }
nav.chat h5 { outline: none;	position: relative;	text-align: right;	margin: 20px 0;	color: #3C4D57;	font-weight: bold;	font-size: 12px;	text-transform: uppercase;	padding: 2px 70px 0px;	width: 100%;	float: right;	clear: both;	cursor: pointer;	box-sizing: border-box;
}
nav.chat h5 span {	-webkit-transition: all ease 0.3s;	-moz-transition: all ease 0.3s;	-o-transition: all ease 0.3s;	transition: all ease 0.3s;
}
.icon-chat-status-open { background: url("http://i60.tinypic.com/s33us0.png") no-repeat center; width: 16px; height: 16px; position: absolute; right: 25px; top: 0px; }
.icon-chat-status-close { background: url("http://i58.tinypic.com/2gy0yrp.png") no-repeat center; width: 16px; height: 16px; position: absolute; right: 25px; top: 0px; }
nav.chat ul {	float: right;	width: 100%;	padding: 0;	box-sizing: border-box;
}
nav.chat ul li {	position: relative;	float: left;	clear: both;	padding: 10px 0;	width: 100%;	padding-left: 30px;	cursor: pointer;	box-sizing: border-box;	-webkit-transition: all ease 0.3s;	-moz-transition: all ease 0.3s;	-o-transition: all ease 0.3s;	transition: all ease 0.3s;
}
nav.chat ul li:hover {	background-color: #FFF !important;	-webkit-transition: all ease 0.3s;	-moz-transition: all ease 0.3s;	-o-transition: all ease 0.3s;	transition: all ease 0.3s;
}
nav.chat ul li a { color: #929ead; width: 65%; float: left; font-weight: bold; }
nav.chat ul li a.online:after,
nav.chat ul li a.away:after,
nav.chat ul li a.busy:after,
nav.chat .offline ul li a:after {	content: "";	position: absolute;	right: 25px;	border-radius: 100%;	width: 0px;	height: 0px;	top: 15px;
}
nav.chat ul li a.online:after { border: 4px solid #2eb398; }
nav.chat ul li a.away:after { border: 4px solid #f5b041; }
nav.chat ul li a.busy:after { border: 4px solid #e76049; }
nav.chat .offline ul li a:after { border: 4px solid #c4ccd8; }
nav.chat ul li .user-img { width: 22px; height: 22px; display: inline-block; float: left; margin-right: 10px; }
nav.chat ul li.icon-alex .user-img { background: url("http://i62.tinypic.com/vwzrif.jpg") no-repeat center; }
nav.chat ul li.icon-benjamin .user-img { background: url("http://i57.tinypic.com/14xcn02.jpg") no-repeat center; }
nav.chat ul li.icon-bill .user-img { background: url("http://i62.tinypic.com/9a1qbq.jpg") no-repeat center; }
nav.chat ul li.icon-charlie .user-img { background: url("http://i57.tinypic.com/2ducaad.jpg") no-repeat center; }
nav.chat ul li.icon-dan .user-img { background: url("http://i61.tinypic.com/2mycl79.jpg") no-repeat center; }
nav.chat ul li.icon-eddie .user-img { background: url("http://i59.tinypic.com/149w3uh.jpg") no-repeat center; }
nav.chat ul li.icon-eric .user-img { background: url("http://i61.tinypic.com/1444hab.jpg") no-repeat center; }
nav.chat ul li.icon-jeremy .user-img { background: url("http://i61.tinypic.com/2vc7sx2.jpg") no-repeat center; }
nav.chat ul li.icon-raquel .user-img { background: url("http://i62.tinypic.com/2eqbeid.jpg") no-repeat center; }
nav.chat ul li.icon-rebecka .user-img { background: url("http://i58.tinypic.com/b9aiwi.jpg") no-repeat center; }
nav.chat ul li.icon-louise .user-img { background: url("http://i60.tinypic.com/20sy39y.jpg") no-repeat center; }
nav.chat ul li.icon-meagan .user-img { background: url("http://i62.tinypic.com/sfkjrq.jpg") no-repeat center; }
nav.chat ul li.icon-konst .user-img { background: url("http://i61.tinypic.com/mahx1t.jpg") no-repeat center; }
nav.chat ul li.icon-shaun .user-img { background: url("http://i57.tinypic.com/fdhmip.jpg") no-repeat center; }
nav.chat ul li.icon-jessica .user-img { background: url("http://i60.tinypic.com/5ob0w1.jpg") no-repeat center; }
nav.chat ul li.icon-dana .user-img { background: url("http://i57.tinypic.com/sy5wuq.jpg") no-repeat center; }
nav.chat ul li.icon-jonathan .user-img { background: url("http://i59.tinypic.com/2u6fe2t.jpg") no-repeat center; }
nav.chat ul li.icon-bobby .user-img { background: url("http://i61.tinypic.com/adklyu.jpg") no-repeat center; }
nav.chat ul li.icon-claire .user-img { background: url("http://i58.tinypic.com/14sfaxg.jpg") no-repeat center; }
nav.chat ul li.icon-tobias .user-img { background: url("http://i60.tinypic.com/30rpunm.jpg") no-repeat center; }
nav.chat ul li.icon-jon .user-img { background: url("http://i58.tinypic.com/124ug7k.jpg") no-repeat center; }
nav.chat ul li.icon-mikael .user-img { background: url("http://i58.tinypic.com/2drx3pv.jpg") no-repeat center; }

1-Discover-Backpacker - Script Codes JS Codes

;(function ($, window, undefined) {	$(function() {	$("a, input[type=submit]").on("click", function(e) { e.preventDefault(); });	$("nav.main ul li").on("click", function() {	var $this = $(this),	$links = $("nav.main ul li");	$links.removeClass("selected");	$this.addClass("selected");	});	var icons = {	header: "icon-chat-status-close",	activeHeader: "icon-chat-status-open"	};	$("nav.chat .online, nav.chat .offline").accordion({	collapsible: true,	icons: icons	});	});
})(jQuery, this);
1-Discover-Backpacker - Script Codes
1-Discover-Backpacker - Script Codes
Home Page Home
Developer Kev Rousseau
Username kevrousso
Uploaded August 12, 2022
Rating 4
Size 8,202 Kb
Views 34,408
Do you need developer help for 1-Discover-Backpacker?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kev Rousseau (kevrousso) Script Codes
Name
Proxy Pattern
Invert Page
Fing needle in haystack by splicing array in half
Tutorial-Module
Base Class Proxy
Find needle in haystack by looping through each item one by one
Menu example 1
Centered label in td
Square animation on scroll with instant follow v2
Notifications
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!