SOCIAL BANG
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 - 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(); });
});
Developer | Rıza Selçuk Saydam |
Username | rss |
Uploaded | August 02, 2022 |
Rating | 3 |
Size | 8,251 Kb |
Views | 66,792 |
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!
Name | Size |
Contact Page CSS3 Transation | 6,686 Kb |
CSS3 Loading Animation | 5,219 Kb |
CSS3 Loader Animation - Peeek | 3,854 Kb |
How a Text Gradient is Made | 4,908 Kb |
Flutterby | 3,799 Kb |
Sticky footer - adjustPusher | 2,127 Kb |
Pokemon Icon | 2,655 Kb |
Flat iOS 7 Safari Icon | 3,332 Kb |
Loader Animation | 2,761 Kb |
Star Wars Toggle Icon Animation | 3,180 Kb |
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!
Name | Username | Size |
Draggables in pure angular | Rlo206 | 5,167 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
Slick Slider | Wearebold | 5,913 Kb |
TweetBox with React JS | J0zelito | 3,325 Kb |
GLSL Hills | Ykob | 6,991 Kb |
Content Changer | Cliffpyles | 4,538 Kb |
Gradients | Karpovsystems | 2,394 Kb |
Cloud upload | Jaflo | 2,774 Kb |
CSS3 Form | Tusharbandal | 1,836 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!