SOCIAL BANG

Size
8,251 Kb
Views
66,792

How do I make an social bang?

What is a social bang? How do you make a social bang? This script and codes were developed by Rıza Selçuk Saydam on 02 August 2022, Tuesday.

SOCIAL BANG Previews

SOCIAL BANG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SOCIAL BANG</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://bigbangburger.com/css/fonts.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* Global */
body {	font-family: 'Open Sans', sans-serif;	font-weight: 400;	font-size: 1em;	color: #fff;	background-color: #61bb46;	background-image: url('http://bigbangburger.com/images/icons.gif');	color: #000;
}
img {	max-width: 100%;
}
a:link {	color: #61bb46;	text-decoration: none;
}
a:hover {	color: #61bb46;	text-decoration: none;
}
a:visited {	color: #61bb46;	text-decoration: none;
}
.dn {	display: none;
}
* { background-clip: padding-box;
}
/* General Slides */
.content
{ width:720px; margin:0 auto;
}
.slide {	background-attachment: fixed;	width: 100%;	height: auto;	position: relative;
}
/* Slide 2 */
#slide2 {	overflow: hidden;	position: relative;
}
#slide2 h2 {	font-size: 4em;	letter-spacing: -2px;	line-height: 1em;	color: #fff;	font-weight: 400;	text-shadow: 0 1px 1px rgba(0,0,0,6);	text-align: center;	display: block; margin:10px 0;
}
#slide2 h2 span {	font-weight: 700;
}
#slide2 {
}
#socialmediacontainer {	position: relative;	overflow: hidden;	-webkit-mask-image: -webkit-gradient(linear,left 80%,left bottom,from(black),to(rgba(0,0,0,0)));	-webkit-mask-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(5%,black),color-stop(85%,black),color-stop(100%,rgba(0,0,0,0)));
}
#socialmediahover {	position: absolute;	top: 0;	left: 0;
}
.socialmediascroller {	width: 100%; min-width:960px;	margin: 0 auto;	transition: all .2s ease-in;
}
.socialmediascroller .sociamediaitem {	float: left;	width: 220px;	margin: 10px;	background: white;	text-align: left;	border-radius: 4px;	box-shadow: 0 1px 5px rgba(0,0,0,0.24); display:block;
}
.socialmediascroller .sociamediaitem blockquote {	margin: 10px;	padding: 0;
}
.socialmediascroller .sociamediaitem {	text-align: left;
}
.socialmediascroller .sociamediaitem blockquote .author .avatar {	float: left;	margin: 2px 10px 0 0;
}
.socialmediascroller .sociamediaitem blockquote .author .avatar .photo {	width: 32px;	height: 32px;	border-radius: 4px;
}
.socialmediascroller .sociamediaitem blockquote .author .fn {	display: block;	font-size: 15px;	line-height: 18.75px;	color: #333333 !important;	font-weight: bold;
}
.socialmediascroller .sociamediaitem blockquote .author .nickname {	font-size: 13px;	color: #a8a8a8 !important;	text-decoration: none !important;
}
.socialmediascroller .sociamediaitem blockquote .entry-content {	font-size: 15px;	line-height: 20px;
}
.entry-content img {	margin-top: 5px;	margin-bottom: -5px;
}
.socialmediascroller .sociamediaitem blockquote .footer a {	font-size: 13px;	line-height: 16.25px;	color: #a8a8a8;	text-decoration: none;
}
.sourceofitem {	float: right;	font-size: 18px;
}
.sourceofitem.icon-twitter {	color: #00a0d1;
}
.sourceofitem.icon-facebook-2 {	color: #3b5998;
}
.sourceofitem.icon-instagram {	color: #634d40;
}
.sourceofitem.icon-foursquare {	color: #25a0ca;
}
.sourceofitem.icon-tumblr {	color: #34526f;
}
.sourceofitem.icon-pinterest {	color: #c8232c;
}
/* Social Buttons */
.social-buttons {	text-align: center;	margin-top: 10px;	display: block;	text-shadow: 0 1px 1px rgba(0,0,0,6);
}
.social-button {	height: 3em;	width: 3em;	cursor: pointer;	line-height: normal;	display: inline-block;	text-align: left;	vertical-align: top;	margin-right: .5em;
}
.social-button:hover {	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";	filter: alpha(opacity=90);	opacity: 0.9;
}
.social-button .social-icon {	display: inline;	float: left;	height: 3em;	width: 3em;	border-radius: .3em;	overflow: hidden;
}
#fb-icon {	background: rgb(65,99,174);	background: url(data: image/svg+xml;	base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);	background: linear-gradient(top, rgba(65,99,174,1) 0%, rgba(50,84,163,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4163ae', endColorstr='#3254a3',GradientType=0 );	position: relative;
}
#fb-icon .line {	z-index: 1;	position: absolute;	background: #7389b7;	border-radius: 0 0 2px 2px;	overflow: hidden;	width: 2.8em;	height: .5em;	top: 2.3em;	left: .1em;
}
#fb-icon .icon-facebook-2 {	z-index: 2;	position: relative;	color: #fff;	font-size: 2.5em;	text-align: right;	margin: .1em 0 0 .3em;	display: block;
}
#tw-icon {	background: rgb(44,163,214);	background: url(data: image/svg+xml;	base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);	background: linear-gradient(top, rgba(44,163,214,1) 0%, rgba(31,123,164,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ca3d6', endColorstr='#1f7ba4',GradientType=0 );	position: relative;
}
#tw-icon .icon-twitter {	color: #fff;	text-align: center;	font-size: 2.5em;	margin-top: .1em;
}
#pt-icon {	background: rgb(214,45,47);	background: url(data: image/svg+xml;	base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);	background: linear-gradient(top, rgba(214,45,47,1) 0%, rgba(164,31,34,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d62d2f', endColorstr='#a41f22',GradientType=0 );
}
#pt-icon .icon-pinterest {	color: #fff;	text-align: center;	font-size: 2.5em;	margin-top: .1em;
}
#instagram-button {	border-radius: .2em;	background: rgb(81,127,164);	background: linear-gradient(top, rgba(81,127,164,1) 0%, rgba(48,96,136,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#517fa4', endColorstr='#306088',GradientType=0 );
}
#instagram-button .icon-instagram {	display: block;	margin-top: -0.07em;	color: #fff;	text-align: center;	font-size: 2.4em;	text-shadow: 0 1px 1px #1c5380;	margin-top: .07em;
}
#foursquare-button {	background: rgb(156,228,253);	background: linear-gradient(top, rgba(156,228,253,1) 0%, rgba(0,133,192,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ce4fd', endColorstr='#0085c0',GradientType=0 );	border: 1px solid #0167ba;	border-radius: .3em;
}
#foursquare-button .icon-foursquare {	display: block;	margin-top: -0.07em;	color: #fff;	text-align: center;	font-size: 3em;	text-shadow: 0 1px 1px #1c5380;
}
/**** Transitions ****/
.masonry,.masonry .masonry-brick {	transition-duration: 0.7s;
}
.masonry {	transition-property: height, width;
}
.masonry .masonry-brick {	transition-property: left, right, top;
}
#socialmediacontainer
{ height:400px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">	<div class="container clearfix">	<div class="content">	<h2><span>SOCIAL</span> BANG</h2>	<div class="social-buttons">	<a href="https://www.facebook.com/rssems" title="Facebook" target="_blank" id="fb-button" class="social-button"> <div id="fb-icon" class="social-icon">	<div class="line"></div>	<div class="icon-facebook-2"></div> </div> </a>	<a href="https://twitter.com/rssems" title="Twitter" target="_blank" id="tw-button" class="social-button"> <div id="tw-icon" class="social-icon">	<div class="icon-twitter"></div> </div> </a>	<a href="http://pinterest.com/rssems" title="" target="_blank" id="pt-button" class="social-button"> <div id="pt-icon" class="social-icon">	<div class="icon-pinterest"></div>	</div> </a>	<!--	<a href="#" title="" target="_blank" id="instagram-button" class="social-button"> <div id="instagram-icon" class="social-icon">	<div class="icon-instagram"></div>	</div> </a>	<a href="#" title="" target="_blank" id="foursquare-button" class="social-button"> <div id="foursquare-icon" class="social-icon">	<div class="icon-foursquare"></div>	</div> </a> -->	</div>	<!-- social media -->	<div id="socialmediacontainer">	<div class="socialmediascroller" id="socialmediahover">	<!-- oge --> <div class="sociamediaitem"> <blockquote> <div class="vcard author"> <a class="screen-name url" href="https://twitter.com/BigBangBurger" title="Big Bang Burger">	<div class="sourceofitem icon-twitter"></div> <span class="avatar">	<img src="https://si0.twimg.com/profile_images/2742870397/fe0c38fd480dec8833826d1257be6e72_normal.png" class="photo" alt="Big Bang Burger"/> </span>	<span class="fn">Big Bang Burger</span> </a> <a class="nickname" href="https://twitter.com/BigBangBurger" title="Big Bang Burger"><span>@BigBangBurger</span></a>	</div> <div class="entry-content">	<img src="https://pbs.twimg.com/media/BICsRh-CEAASwgK.jpg" alt="Burnunuza güzel kokular geliyor mu? Foursquare check-in yapıp bir menü seçtiğinizde, Americano kahve ikram ediyoruz!"/>	<p class="entry-title">Burnunuza güzel kokular geliyor mu? Foursquare check-in yapıp bir menü seçtiğinizde, Americano kahve ikram ediyoruz!</p> </div> <div class="footer">	<a class="view-details" href="https://twitter.com/BigBangBurger/status/324448590342787072" title="Big Bang Burger">12:05 - 17 Nisan 13</a> </div> </blockquote> </div>	<!-- /oge -->	<!-- oge --> <div class="sociamediaitem"> <blockquote> <div class="vcard author"> <a class="screen-name url" href="https://twitter.com/BigBangBurger" title="Big Bang Burger">	<div class="sourceofitem icon-twitter"></div> <span class="avatar">	<img src="https://si0.twimg.com/profile_images/2742870397/fe0c38fd480dec8833826d1257be6e72_normal.png" class="photo" alt=""/> </span>	<span class="fn">Big Bang Burger</span> </a> <a class="nickname" href="https://twitter.com/BigBangBurger" title="Big Bang Burger"><span>@BigBangBurger</span></a>	</div> <div class="entry-content">	<img src="https://pbs.twimg.com/media/BCbwDIjCcAEbW9y.jpg" alt="Bambaşka bir BBQ burger deneyimi: Smoke Bang!"/>	<p class="entry-title">Bambaşka bir BBQ burger deneyimi: Smoke Bang!</p> </div> <div class="footer">	<a class="view-details" href="https://twitter.com/BigBangBurger/status/299190361887240192" title="Big Bang Burger">18:18 - 6 Şubat 13</a> </div> </blockquote> </div>	<!-- /oge -->	<!-- oge --> <div class="sociamediaitem"> <blockquote> <div class="vcard author"> <a class="screen-name url" href="https://foursquare.com/zulalates/" title="Big Bang Burger">	<div class="sourceofitem icon-foursquare"></div> <span class="avatar">	<img src="https://irs3.4sqi.net/img/user/64x64/BVIUFGSGGUKOI4Y3.jpg" class="photo" alt="Z"/> </span>	<span class="fn">Zülal Ateş</span> </a> <a class="nickname" href="https://twitter.com/zulalates" title="Big Bang Burger"><span>@zulalates</span></a>	</div> <div class="entry-content">	<img src="https://irs0.4sqi.net/img/general/680x680/9570920_x6gvmHq5bzTglKoweNdgRoQmDcp9QI16MZq5442Hhvk.jpg" alt="Tartışmasız şehrin en iyi burgerini yapıyorlar!"/>	<p class="entry-title">Tartışmasız şehrin en iyi burgerini yapıyorlar!</p> </div> <div class="footer">	<a class="view-details" href="https://foursquare.com/zulalates/checkin/5159a19be4b0b5f7deedbbf5" title="Big Bang Burger">18:02 - 1 Nisan 13</a> </div> </blockquote> </div>	<!-- /oge -->	<!-- oge --> <div class="sociamediaitem"> <blockquote> <div class="vcard author"> <a class="screen-name url" href="https://foursquare.com/merkanizm" title="Big Bang Burger">	<div class="sourceofitem icon-foursquare"></div> <span class="avatar">	<img src="https://irs0.4sqi.net/img/user/64x64/PORLO5AQBSO05YQ5.jpg" class="photo" alt="Meral Akkuş"/> </span>	<span class="fn">Meral Akkuş</span> </a> <a class="nickname" href="https://foursquare.com/merkanizm" title="Big Bang Burger"><span>@merkanizm</span></a>	</div> <div class="entry-content">	<p class="entry-title">Burnumuzun dibinde hamburger krallığı varmış da haberimiz yokmuş</p> </div> <div class="footer">	<a class="view-details" href="https://foursquare.com/merkanizm/checkin/5157253fe4b0008687cdac61" title="Big Bang Burger">19:47 - 30 Mart 13</a> </div> </blockquote> </div>	<!-- /oge -->	<!-- oge --> <div class="sociamediaitem"> <blockquote> <div class="vcard author"> <a class="screen-name url" href="http://instagram.com/grace_stalker/" title="Big Bang Burger">	<div class="sourceofitem icon-instagram"></div> <span class="avatar">	<img src="http://images.ak.instagram.com/profiles/profile_2920593_75sq_1325655438.jpg" class="photo" alt="grace_stalker"/> </span>	<span class="fn">grace_stalker</span> </a> <a class="nickname" href="http://instagram.com/grace_stalker/" title="grace_stalker"><span>@grace_stalker</span></a>	</div> <div class="entry-content">	<img src="http://distilleryimage4.ak.instagram.com/1b937d94a4d411e2a03a22000aaa0517_7.jpg" alt="grace_stalker"/>	<p class="entry-title">#bigbangburger#breakfast</p> </div> <div class="footer">	<a class="view-details" href="http://instagram.com/p/YE51QqCUhs/" title="Big Bang Burger">23:14 - 14 Nisan 13</a> </div> </blockquote> </div>	<!-- /oge -->	<!-- oge --> <div class="sociamediaitem"> <blockquote> <div class="vcard author"> <a class="screen-name url" href="https://foursquare.com/allegrande" title="Big Bang Burger">	<div class="sourceofitem icon-foursquare"></div> <span class="avatar">	<img src="https://irs3.4sqi.net/img/user/64x64/RXDS51VM5JOAVBAV.jpg" class="photo" alt="H. Gökçe B."/> </span>	<span class="fn">H. Gökçe B.</span> </a> <a class="nickname" href="https://foursquare.com/allegrande" title="Big Bang Burger"><span>@merkanizm</span></a>	</div> <div class="entry-content">	<p class="entry-title">Çok fena reklamını yapıyorum, 10 numara bir hamburgerci hem de fiyatlar super!</p> </div> <div class="footer">	<a class="view-details" href="https://foursquare.com/allegrande/checkin/514f13f6e4b08d281fab77bc" title="Big Bang Burger">16:55 - 24 Mart 13</a> </div> </blockquote> </div>	<!-- /oge -->	<!-- oge --> <div class="sociamediaitem"> <blockquote> <div class="vcard author"> <a class="screen-name url" href="http://instagram.com/memnonzk/" title="Big Bang Burger">	<div class="sourceofitem icon-instagram"></div> <span class="avatar">	<img src="http://images.ak.instagram.com/profiles/profile_217343284_75sq_1362419917.jpg" class="photo" alt="memnonzk"/> </span>	<span class="fn">memnonzk</span> </a> <a class="nickname" href="http://instagram.com/memnonzk/" title="memnonzk"><span>@memnonzk</span></a>	</div> <div class="entry-content">	<img src="http://distilleryimage0.ak.instagram.com/ebe2c8f0745111e2b45022000a1fb3cd_7.jpg" alt="memnonzk"/>	<p class="entry-title">#BigBangBurger delicious New York hotdog menu. Lovely</p> </div> <div class="footer">	<a class="view-details" href="http://instagram.com/p/Vl82p6M1eA/" title="Big Bang Burger">13:50 - 11 Şubat 13</a> </div> </blockquote> </div>	<!-- /oge -->	<!-- oge --> <div class="sociamediaitem"> <blockquote> <div class="vcard author"> <a class="screen-name url" href="http://instagram.com/memnonzk/" title="Big Bang Burger">	<div class="sourceofitem icon-instagram"></div> <span class="avatar">	<img src="http://images.ak.instagram.com/profiles/profile_217343284_75sq_1362419917.jpg" class="photo" alt="memnonzk"/> </span>	<span class="fn">memnonzk</span> </a> <a class="nickname" href="http://instagram.com/memnonzk/" title="memnonzk"><span>@memnonzk</span></a>	</div> <div class="entry-content">	<img src="http://distilleryimage3.ak.instagram.com/6061dcc66fc411e2bf5322000a9f38c3_7.jpg" alt="memnonzk"/>	<p class="entry-title">Ankara #BigBangBurger arizona sandviç Sosisli sandviç - Kıymalı sos ve cheddarli... Enfesss</p> </div> <div class="footer">	<a class="view-details" href="http://instagram.com/p/VXCCiEM1Qr/" title="Big Bang Burger">18:46 - 05 Şubat 13</a> </div> </blockquote> </div>	<!-- /oge -->	<!-- oge --> <div class="sociamediaitem"> <blockquote> <div class="vcard author"> <a class="screen-name url" href="http://instagram.com/kelebekdiyeti/" title="Big Bang Burger">	<div class="sourceofitem icon-instagram"></div> <span class="avatar">	<img src="http://images.ak.instagram.com/profiles/profile_240735806_75sq_1351548842.jpg" class="photo" alt="kelebekdiyeti"/> </span>	<span class="fn">Kelebek Diyeti</span> </a> <a class="nickname" href="http://instagram.com/kelebekdiyeti/" title="kelebekdiyeti"><span>@kelebekdiyeti</span></a>	</div> <div class="entry-content">	<img src="http://distilleryimage11.ak.instagram.com/d47022c02b7d11e28d0622000a9e13b7_7.jpg" alt="kelebekdiyeti"/>	<p class="entry-title">#bigbangburger #buger #foodie #foodpic hafif ve lezzetli...</p> </div> <div class="footer">	<a class="view-details" href="http://instagram.com/p/R3TnTrjJ7r/" title="Big Bang Burger">21:31 - 10 Kasım 12</a> </div> </blockquote> </div>	<!-- /oge -->	<!-- oge --> <div class="sociamediaitem"> <blockquote> <div class="vcard author"> <a class="screen-name url" href="http://pinterest.com/oburcan/" title="Big Bang Burger">	<div class="sourceofitem icon-pinterest"></div> <span class="avatar">	<img src="http://media-cache-ec0.pinimg.com/avatars/oburcan_1337206015_75.jpg" class="photo" alt="oburcan"/> </span>	<span class="fn">Oburcan</span> </a> <a class="nickname" href="http://pinterest.com/oburcan/" title="oburcan"><span>@oburcan</span></a>	</div> <div class="entry-content">	<img src="http://media-cache-ak1.pinimg.com/736x/5c/14/9d/5c149d0b96fef3b7715742cbb61cb85c.jpg" alt="kelebekdiyeti"/>	<p class="entry-title">BIG BANG BURGER – ANKARA</p> </div> <div class="footer">	<a class="view-details" href="http://pinterest.com/pin/180355160049927127/" title="Big Bang Burger">Mart 13</a> </div> </blockquote> </div>	<!-- /oge -->	<!-- oge --> <div class="sociamediaitem"> <blockquote> <div class="vcard author"> <a class="screen-name url" href="https://facebook.com/BigBangBurger" title="Big Bang Burger">	<div class="sourceofitem icon-facebook-2"></div> <span class="avatar">	<img src="https://si0.twimg.com/profile_images/2742870397/fe0c38fd480dec8833826d1257be6e72_normal.png" class="photo" alt="Big Bang Burger"/> </span>	<span class="fn">Big Bang Burger</span> </a> <a class="nickname" href="https://facebook.com/BigBangBurger" title="Big Bang Burger"><span>@BigBangBurger</span></a>	</div> <div class="entry-content">	<img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/531513_344657328987889_958678200_n.jpg" alt="Yeni haftaya lezzetli bir başlangıç yapmak iyi fikir değil mi?"/>	<p class="entry-title">Yeni haftaya lezzetli bir başlangıç yapmak iyi fikir değil mi?</p> </div> <div class="footer">	<a class="view-details" href="https://www.facebook.com/photo.php?fbid=344657328987889" title="Big Bang Burger">18 Mart 13</a> </div> </blockquote> </div>	<!-- /oge -->	<!-- oge --> <div class="sociamediaitem"> <blockquote> <div class="vcard author"> <a class="screen-name url" href="https://facebook.com/BigBangBurger" title="Big Bang Burger">	<div class="sourceofitem icon-facebook-2"></div> <span class="avatar">	<img src="https://si0.twimg.com/profile_images/2742870397/fe0c38fd480dec8833826d1257be6e72_normal.png" class="photo" alt="Big Bang Burger"/> </span>	<span class="fn">Big Bang Burger</span> </a> <a class="nickname" href="https://facebook.com/BigBangBurger" title="Big Bang Burger"><span>@BigBangBurger</span></a>	</div> <div class="entry-content">	<img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash3/321093_307836519336637_859539671_n.jpg" alt="Güne güzel başlamanız için her sabah 07'de özel hazırlanan kahve çeşitlerimiz sıcacık bir 'Günaydın' eşliğinde hazır!"/>	<p class="entry-title">Güne güzel başlamanız için her sabah 07'de özel hazırlanan kahve çeşitlerimiz sıcacık bir 'Günaydın' eşliğinde hazır!</p> </div> <div class="footer">	<a class="view-details" href="https://www.facebook.com/photo.php?fbid=307836519336637" title="Big Bang Burger">16 Ocak 13</a> </div> </blockquote> </div>	<!-- /oge --> </div>	</div>	<!-- /social media -->	</div>	</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/masonry/3.0.0/masonry.pkgd.js'></script> <script src="js/index.js"></script>
</body>
</html>

SOCIAL BANG - Script Codes CSS Codes

/* Global */
body {	font-family: 'Open Sans', sans-serif;	font-weight: 400;	font-size: 1em;	color: #fff;	background-color: #61bb46;	background-image: url('http://bigbangburger.com/images/icons.gif');	color: #000;
}
img {	max-width: 100%;
}
a:link {	color: #61bb46;	text-decoration: none;
}
a:hover {	color: #61bb46;	text-decoration: none;
}
a:visited {	color: #61bb46;	text-decoration: none;
}
.dn {	display: none;
}
* { background-clip: padding-box;
}
/* General Slides */
.content
{ width:720px; margin:0 auto;
}
.slide {	background-attachment: fixed;	width: 100%;	height: auto;	position: relative;
}
/* Slide 2 */
#slide2 {	overflow: hidden;	position: relative;
}
#slide2 h2 {	font-size: 4em;	letter-spacing: -2px;	line-height: 1em;	color: #fff;	font-weight: 400;	text-shadow: 0 1px 1px rgba(0,0,0,6);	text-align: center;	display: block; margin:10px 0;
}
#slide2 h2 span {	font-weight: 700;
}
#slide2 {
}
#socialmediacontainer {	position: relative;	overflow: hidden;	-webkit-mask-image: -webkit-gradient(linear,left 80%,left bottom,from(black),to(rgba(0,0,0,0)));	-webkit-mask-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(5%,black),color-stop(85%,black),color-stop(100%,rgba(0,0,0,0)));
}
#socialmediahover {	position: absolute;	top: 0;	left: 0;
}
.socialmediascroller {	width: 100%; min-width:960px;	margin: 0 auto;	transition: all .2s ease-in;
}
.socialmediascroller .sociamediaitem {	float: left;	width: 220px;	margin: 10px;	background: white;	text-align: left;	border-radius: 4px;	box-shadow: 0 1px 5px rgba(0,0,0,0.24); display:block;
}
.socialmediascroller .sociamediaitem blockquote {	margin: 10px;	padding: 0;
}
.socialmediascroller .sociamediaitem {	text-align: left;
}
.socialmediascroller .sociamediaitem blockquote .author .avatar {	float: left;	margin: 2px 10px 0 0;
}
.socialmediascroller .sociamediaitem blockquote .author .avatar .photo {	width: 32px;	height: 32px;	border-radius: 4px;
}
.socialmediascroller .sociamediaitem blockquote .author .fn {	display: block;	font-size: 15px;	line-height: 18.75px;	color: #333333 !important;	font-weight: bold;
}
.socialmediascroller .sociamediaitem blockquote .author .nickname {	font-size: 13px;	color: #a8a8a8 !important;	text-decoration: none !important;
}
.socialmediascroller .sociamediaitem blockquote .entry-content {	font-size: 15px;	line-height: 20px;
}
.entry-content img {	margin-top: 5px;	margin-bottom: -5px;
}
.socialmediascroller .sociamediaitem blockquote .footer a {	font-size: 13px;	line-height: 16.25px;	color: #a8a8a8;	text-decoration: none;
}
.sourceofitem {	float: right;	font-size: 18px;
}
.sourceofitem.icon-twitter {	color: #00a0d1;
}
.sourceofitem.icon-facebook-2 {	color: #3b5998;
}
.sourceofitem.icon-instagram {	color: #634d40;
}
.sourceofitem.icon-foursquare {	color: #25a0ca;
}
.sourceofitem.icon-tumblr {	color: #34526f;
}
.sourceofitem.icon-pinterest {	color: #c8232c;
}
/* Social Buttons */
.social-buttons {	text-align: center;	margin-top: 10px;	display: block;	text-shadow: 0 1px 1px rgba(0,0,0,6);
}
.social-button {	height: 3em;	width: 3em;	cursor: pointer;	line-height: normal;	display: inline-block;	text-align: left;	vertical-align: top;	margin-right: .5em;
}
.social-button:hover {	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";	filter: alpha(opacity=90);	opacity: 0.9;
}
.social-button .social-icon {	display: inline;	float: left;	height: 3em;	width: 3em;	border-radius: .3em;	overflow: hidden;
}
#fb-icon {	background: rgb(65,99,174);	background: url(data: image/svg+xml;	base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);	background: linear-gradient(top, rgba(65,99,174,1) 0%, rgba(50,84,163,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4163ae', endColorstr='#3254a3',GradientType=0 );	position: relative;
}
#fb-icon .line {	z-index: 1;	position: absolute;	background: #7389b7;	border-radius: 0 0 2px 2px;	overflow: hidden;	width: 2.8em;	height: .5em;	top: 2.3em;	left: .1em;
}
#fb-icon .icon-facebook-2 {	z-index: 2;	position: relative;	color: #fff;	font-size: 2.5em;	text-align: right;	margin: .1em 0 0 .3em;	display: block;
}
#tw-icon {	background: rgb(44,163,214);	background: url(data: image/svg+xml;	base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);	background: linear-gradient(top, rgba(44,163,214,1) 0%, rgba(31,123,164,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ca3d6', endColorstr='#1f7ba4',GradientType=0 );	position: relative;
}
#tw-icon .icon-twitter {	color: #fff;	text-align: center;	font-size: 2.5em;	margin-top: .1em;
}
#pt-icon {	background: rgb(214,45,47);	background: url(data: image/svg+xml;	base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);	background: linear-gradient(top, rgba(214,45,47,1) 0%, rgba(164,31,34,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d62d2f', endColorstr='#a41f22',GradientType=0 );
}
#pt-icon .icon-pinterest {	color: #fff;	text-align: center;	font-size: 2.5em;	margin-top: .1em;
}
#instagram-button {	border-radius: .2em;	background: rgb(81,127,164);	background: linear-gradient(top, rgba(81,127,164,1) 0%, rgba(48,96,136,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#517fa4', endColorstr='#306088',GradientType=0 );
}
#instagram-button .icon-instagram {	display: block;	margin-top: -0.07em;	color: #fff;	text-align: center;	font-size: 2.4em;	text-shadow: 0 1px 1px #1c5380;	margin-top: .07em;
}
#foursquare-button {	background: rgb(156,228,253);	background: linear-gradient(top, rgba(156,228,253,1) 0%, rgba(0,133,192,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ce4fd', endColorstr='#0085c0',GradientType=0 );	border: 1px solid #0167ba;	border-radius: .3em;
}
#foursquare-button .icon-foursquare {	display: block;	margin-top: -0.07em;	color: #fff;	text-align: center;	font-size: 3em;	text-shadow: 0 1px 1px #1c5380;
}
/**** Transitions ****/
.masonry,.masonry .masonry-brick {	transition-duration: 0.7s;
}
.masonry {	transition-property: height, width;
}
.masonry .masonry-brick {	transition-property: left, right, top;
}
#socialmediacontainer
{ height:400px;
}

SOCIAL BANG - Script Codes JS Codes

$(document).ready(function() {
// masonry $(function(){ $('.socialmediascroller').masonry({ itemSelector: '.sociamediaitem', isAnimated: true, columnWidth: 240, animationOptions: { duration: 750, easing: 'linear' } }); }); // hover animation $("#socialmediacontainer").hover(function() { $("#socialmediahover").animate({top: '-=1000px'}, 20000); }, function() { $("#socialmediahover").stop(); });
});
SOCIAL BANG - Script Codes
SOCIAL BANG - Script Codes
Home Page Home
Developer Rıza Selçuk Saydam
Username rss
Uploaded August 02, 2022
Rating 3
Size 8,251 Kb
Views 66,792
Do you need developer help for SOCIAL BANG?

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!

Rıza Selçuk Saydam (rss) Script Codes
Create amazing Facebook ads 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!