Showcase 1 Gallery

Developer
Calvin
Size
6,969 Kb
Views
22,264
  1. Showcase 1 Gallery Previews
  2. Showcase 1 Gallery HTML Codes
  3. Showcase 1 Gallery CSS Codes
  4. Showcase 1 Gallery JS Codes

How do I make an showcase 1 gallery?

What is a showcase 1 gallery? How do you make a showcase 1 gallery? This script and codes were developed by Calvin on 11 August 2022, Thursday.

Showcase 1 Gallery Previews
IQ Test

Showcase 1 Gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Showcase 1 Gallery</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <meta name="viewport" content="width=device-width" />
</head>
<body> <div id="nav_wrapper"> <div class="feed_brand"> <span4>TEMPO</span4> <span3>There is an element to design, it's rhythm</span3> <div class="feed_nav"> <a href=""><i class="fa fa-behance"></i></a> <a href=""><i class="fa fa-twitter"></i></a> <a href=""><i class="fa fa-instagram"></i></a> <a href=""><i class="fa fa-pinterest-p"></i></a> </div> </div> </div> <div id="content_container"> <div class="entry"> <div class="project_title"> <a href="http://imgur.com/DHENatd">FEATURED</a> </div> <img src="http://placehold.it/905x420" height='400px' width='100%' /> <div class="project_caption">Kif might! Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat. Bender, this is Fry's decision… and he made it wrong. So it's time for us to interfere in his life. I daresay that Fry has discovered the smelliest object in the known universe! No! Don't jump! This is the worst kind of discrimination: the kind against me! </div> </div> <div id="content_container"> <div class="entry"> <div class="ml"> <!-- start masonry--> <div class="ml-pnl ml-pnl--fcs"> <div class="ml-pnl"> <div class="ml-pnl__cntnt tx--white bg--blue"> <p><img src="http://placehold.it/350x250"></p> </div> </div> <div class="ml__fcs-crtn"></div>
</div> <div class="ml-pnl ml-pnl--fcs"> <div class="ml-pnl"> <div class="ml-pnl__cntnt tx--white bg--blue"> <p><img src="http://placehold.it/350x150"></p> </div> </div> <div class="ml__fcs-crtn"></div>
</div> <div class="ml-pnl ml-pnl--fcs"> <div class="ml-pnl__cntnt tx--white bg--blue"> <p><img src="http://placehold.it/350x150"></p> </div> </div> <div class="ml__fcs-crtn"></div>
<!-- end masonry--> <!-- start masonry--> <div class="ml-pnl ml-pnl--fcs"> <div class="ml-pnl"> <div class="ml-pnl__cntnt tx--white bg--blue"> <p><img src="http://placehold.it/350x150"></p> </div> </div> <div class="ml__fcs-crtn"></div>
</div> <div class="ml-pnl ml-pnl--fcs"> <div class="ml-pnl"> <div class="ml-pnl__cntnt tx--white bg--blue"> <p><img src="http://placehold.it/350x200"></p> </div> </div> <div class="ml__fcs-crtn"></div>
</div> <div class="ml-pnl ml-pnl--fcs"> <div class="ml-pnl__cntnt tx--white bg--blue"> <p><img src="http://placehold.it/350x200"></p> </div> </div> <div class="ml__fcs-crtn"></div>
<!-- end masonry--> <!-- start masonry--> <div class="ml-pnl ml-pnl--fcs"> <div class="ml-pnl"> <div class="ml-pnl__cntnt tx--white bg--blue"> <p><img src="http://placehold.it/350x200"></p> </div> </div> <div class="ml__fcs-crtn"></div>
</div> <div class="ml-pnl ml-pnl--fcs"> <div class="ml-pnl"> <div class="ml-pnl__cntnt tx--white bg--blue"> <p><img src="http://placehold.it/350x150"></p> </div> </div> <div class="ml__fcs-crtn"></div>
</div> <div class="ml-pnl ml-pnl--fcs"> <div class="ml-pnl__cntnt tx--white bg--blue"> <p><img src="http://placehold.it/350x200"></p> </div> </div> <div class="ml__fcs-crtn"></div>
<!-- end masonry--> </div> </div> <!--
<div id="content_container">	<div class="entry"><div class="project_title"><a href="http://imgur.com/DHENatd">relax</a>
</div>	<img src="http://i.imgur.com/DHENatd.jpg">
<div class="project_caption">Kif might! Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat. Bender, this is Fry's decision… and he made it wrong. So it's time for us to interfere in his life. I daresay that Fry has discovered the smelliest object in the known universe! No! Don't jump! This is the worst kind of discrimination: the kind against me!
</div>	</div>
<div id="content_container">	<div class="entry"><div class="project_title"><a href="http://imgur.com/DHENatd">Zeff</a>
</div>	<img src="http://i.imgur.com/DHENatd.jpg" >
<div class="project_caption">Kif might! Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat. Bender, this is Fry's decision… and he made it wrong. So it's time for us to interfere in his life. I daresay that Fry has discovered the smelliest object in the known universe! No! Don't jump! This is the worst kind of discrimination: the kind against me!
</div>	</div> <div id="content_container">	<div class="entry"><div class="project_title"><a href="http://imgur.com/DHENatd">The Dying Alien</a>
</div>	<img src="http://i.imgur.com/DHENatd.jpg">
<div class="project_caption">Kif might! Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat. Bender, this is Fry's decision… and he made it wrong. So it's time for us to interfere in his life. I daresay that Fry has discovered the smelliest object in the known universe! No! Don't jump! This is the worst kind of discrimination: the kind against me!
</div>--> </div> <div class="cf"></div> <div class="cf"></div> <div class="footer full"> <div class="socials-footer"> <div class="title"> <h5>Connect with me</h5> </div> <ul class="sharing-links"> <li><a id="b" class="share-1" href="http://www.facebook.com/Muuto" target="_blank"><i class="fa fa-behance" aria-hidden="true"></i></a></li> <li><a id="b" class="share-1" href="http://www.facebook.com/Muuto" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a id="" class="share-1" href="http://instagram.com/muutodesign" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> <li><a id="" class="share-1" href="http://www.pinterest.com/muuto/" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li> </ul> <hr3></hr3><BR> </div> <div class="cf"></div> <div class="footer-cols full border-left-0 border-right-0"> <div class="one-third"> <p>Information</p> <ul> <li><a title="About" href="/about-us/about-us" target="_self">About</a></li> <li><a title="Contact Muuto" href="/customer-service/contact/" target="_self">Contact</a></li> </ul> </div> <div class="left one-third"> <p>Downloads</p> <ul> <li><a title="Muuto Catalogue - Autumn 2015" href="http://ipaper.ipapercms.dk/Muuto/MuutoCatalogue/" target="_blank">Catalogue</a></li> <li><a title="Muuto Catalogue - Autumn 2015" href="http://ipaper.ipapercms.dk/Muuto/MuutoCatalogue/" target="_blank">Wallpapers</a></li> </ul> </div> <div class="left one-third "> <p>Shop</p> <ul> <li><a href="/store-locator/overview/">Prints</a></li> <li><a href="/store-locator/">Originals</a></li> <li><a href="/store-locator/">Commisions</a></li> </ul> </div> <div class="cf"></div> </div> <div class="cf"></div> <hr> <div class="cf"></div> <address class="copyright"><strong>Calvin Morett<br></strong>
Print & Web Designer,<br>
Front-End Developer, Visual Artist <BR><hr2> </address> <a href="#" class="back-to-top" style="display: inline;"> <i class="fa fa-angle-up"></i> </a>
</body>
<link href='http://fonts.googleapis.com/css?family=Yantramanav:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'> <script src="js/index.js"></script>
</body>
</html>

Showcase 1 Gallery - Script Codes CSS Codes

/* #D4D5D1 = rgba(169,171,163,.5) */
* { margin: 0;
}
p{ font-family: 'Lora', serif; letter-spacing:.123em;
}
body { background: rgba(25, 55, 55, 0.45); background: rgb(211, 215, 210); color: #000000; font-size: 8em; font-size: 14px; line-height: 1.5; margin: 50px 0 0 0;
}
a { color: #000; text-decoration: none;
}
a:hover {}
a:focus {}
ol,
ul { list-style: none; margin: 0; padding: 0;
}
a,
button { -ms-touch-action: manipulation; touch-action: manipulation;
}
p:empty { display: none;
}
#nav_wrapper { background: #97a4a4; background: rgb(211, 215, 210); height: 50px; position: fixed; left: 0; right: 0; padding-top: 32px; top: 0px; z-index: 1000;
}
#nav_wrapper span4 { font-size: 22px; background: transparent; padding: 10px 15px; border: 1px solid rgba(0, 0, 0, .00); letter-spacing: -.125em; color: rgba(10, 61, 57, .50); font-family: 'Arial', sans-serif; text-transform: uppercase; font-weight: 800; line-height: 50px;
}
#nav_wrapper span3 { background: -moz-linear-gradient(left, rgba(174, 255, 0, 0) 0%, rgba(255, 255, 255, .15) 50%, rgba(0, 0, 0, 0) 100%); background: -webkit-linear-gradient(left, rgba(174, 255, 0, 0) 0%, rgba(255, 255, 255, .15) 50%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to right, rgba(174, 255, 0, 0) 0%, rgba(255, 255, 255, .15) 50%, rgba(0, 0, 0, 0) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#00000000', GradientType=1); padding: 7px 8px 5px; font-size: 7.75pt; font-weight: 400; letter-spacing: .225em; color: rgba(10, 61, 57, .50); font-family: 'Arial', sans-serif; font-weight: 300; vertical-align: super; line-height: 25px;
}
/* dd */
.feed_brand { left: -2px; border-bottom: 4px solid rgba(10, 61, 57, .50); text-rendering: optimizeLegibility; font-family: 'Yantramanav', sans-serif; text-transform: uppercase; font-size: 10px; height: 50px; margin: 0 auto 0 auto; padding: 0 35px 0 35px; position: relative; width: 905px; z-index: 999;
}
.feed_nav { float: right; text-transform: uppercase; text-transform: uppercase; font-size: 10px; height: 50px; line-height: 33px; margin: 0 auto 0 auto; padding: 0 35px 0 35px; position: relative; z-index: 999;
}
.feed_nav i { position: relative; top: -31px; color: rgba(10, 61, 57, .65); transition: background 0.35s ease; font-size: 13px; line-height: 100px; text-indent: 10px; width: 30px; height: 61px; padding: 10px 7px; text-align:left; border-bottom: 4px solid rgba(0, 0, 0, .00); transition: padding 0.25s ease; background: rgba(10, 61, 57, 0.00);
}
.feed_nav i:hover { transition: padding 0.35s ease .25s; padding: 10px 20px; border-bottom: 4px solid rgba(255, 255, 255, 1); color: #fff; background: rgba(10, 61, 57, .95); background: #919F9F; background: #d3d7d2;
}
#content_container { text-align: left; clear: both; margin: 0 auto; position: relative; width: 980px; z-index: 999;
}
.entry { z-index: 5; background: transparent; border-bottom: 0px solid #cccccc; clear: both; padding: 0 35px 65px 35px; margin: 0 0px 0px 0; width: 905px; border-bottom: 4px double rgba(0, 0, 0, .2);
}
.entry img { border: 0px solid #999; background: #79852E; -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -webkit-filter: grayscale(100%); filter: grayscale(100%);
}
.entry img:hover { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -webkit-filter: grayscale(0%); filter: grayscale(0%);
}
.project_title { text-align: left; font-size: 12px; font-style: italic; font-weight: 400; letter-spacing: 2px; line-height: 50px; padding: 55px 0 20px 0; text-rendering: optimizeLegibility; text-transform: uppercase; width: 905px; text-decoration: none; transition: all 0.2s linear;
}
.project_title a { color: #000; vertical-align: baseline; padding: 5px; font-size: 25px; text-decoration: none; background: none; transition: all 0.2s linear; background: rgba(10, 61, 57, 0.00); border-bottom:4px solid rgba(10, 61, 57, 0.05);
}
.project_title a:hover { transition: all 0.2s linear; padding: 5px; color:rgba(10, 61, 57, .25); border-bottom:4px solid rgba(10, 61, 57, .25);
}
.project_caption { margin: 0 auto; padding: 15px;
}
.back-to-top { background: none; margin: 0; position: fixed; bottom: 0; right: 0; width: 70px; height: 70px; z-index: 100; display: none; text-decoration: none;
}
.back-to-top i { font-size: 60px; color: rgba(0, 0, 0, .25); transition: opacity 0.2s linear;
}
.back-to-top i:hover { color: rgba(0, 0, 0, 1);
}
/** * driveway.css - pure CSS masonry layouts aid.
*/
.ml { cursor:crosshair; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; position: relative; margin: 0; margin-top: 100px;
}
.ml--fcs .ml-pnl { position: relative;
}
.ml--fcs .ml-pnl:hover { z-index: 3;
}
.ml--fcs .ml-pnl:hover ~ .ml__fcs-crtn { display: block;
}
.ml__fcs-crtn { background-color: #000; background: rgb(211, 215, 210); bottom: 0; display: none; left: 0; opacity: 1; position: fixed; right: 0; top: 0; z-index: 2;
}
.ml * { -webkit-box-sizing: border-box; box-sizing: border-box;
}
@media (max-width: 400px){
.entry { z-index: 5; background: transparent; border-bottom: 0px solid #cccccc; clear: both; padding:0; margin:0; width: 350px; border-bottom: 2px solid #a9aca8;
}
}
@media (min-width: 768px) { .ml { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
}
@media (min-width: 1200px) {
#nav_wrapper { background: #97a4a4; background: rgb(211, 215, 210); height:3.25rem; position: fixed; left: 0; right: 0; top: 0px; z-index: 1000;
} .ml { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
}
.ml-pnl { margin: 0; padding: 0;
}
.ml-pnl--fcs { position: relative;
}
.ml-pnl--fcs:hover { z-index: 3;
}
.ml-pnl--fcs:hover ~ .ml__fcs-crtn { display: block;
}
.ml-pnl--pls { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000; perspective: 1000; -webkit-transition: -webkit-transform 0.25s ease 0s; transition: -webkit-transform 0.25s ease 0s; transition: transform 0.25s ease 0s; transition: transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s;
}
.ml-pnl--pls:hover { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02);
}
@media (min-width: 768px) { .ml-pnl { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
}
.ml-pnl__cntnt { border-radius: 0; overflow: hidden; padding: 10px; width: 100%; border: 1px solid transparent;
}
.ml-pnl__cntnt--img { max-width: 100%; padding: 0;
}
.ml-flp { -webkit-perspective: 1000; perspective: 1000;
}
.ml-flp:hover .ml-flp__cntnt { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.ml-flp--md { height: 300px;
}
.ml-flp__pnl { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 0px; height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%;
}
.ml-flp__pnl--frnt { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); z-index: 2;
}
.ml-flp__pnl--bck { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.ml-flp__cntnt { height: 100%; overflow: visible; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: 0.25s; transition: 0.25s;
}
.ml-clstr { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0;
}
.ml-clstr--vrt { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}
@media (min-width: 768px) { .ml-clstr--vrt { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; }
}
.ml-clstr--hrz { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}
.ml-clstr__sgmnt { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto;
}
.ml-clstr__sgmnt--rw { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}
@media (min-width: 768px) { .ml-clstr__sgmnt--rw { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; }
}
.ml-clstr__sgmnt--clmn { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}
@media (min-width: 768px) { .ml-clstr__sgmnt--hlf { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .ml-clstr__sgmnt--qrt { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; }
}
/** * Color styles
*/
.tx--white { color: #fff;
}
.bg--red { background-color: #e74c3c; background: rgba(25, 55, 55, 0.45);
}
.bg--green { background-color: #26a65b; background: rgba(25, 55, 55, 0.45);
}
.bg--clear { background-color: #333; background: rgba(25, 55, 55, 0.45);
}
.bg--purple { background-color: #8e44ad; background: rgba(25, 55, 55, 0.45); background: rgba(0, 0, 0, 0);
}
.bg--blue { background-color: #1e8bc3; background: rgba(0, 0, 0, 0);
}
img { background: rgba(0, 0, 0, 0); max-width: 100%; height: auto; border: none; outline: none;
}
/* muuto codes */
.cf:before,
.cf:after { content: ""; display: table;
}
.cf:after { clear: both;
}
.cf {}
hr { height: 1px; background: rgba(0, 0, 0, .2); width: 100%; float: left; clear: both; margin-bottom: 15px; border: 0 none;
}
hr2 { height: 4px; background: rgba(0, 0, 0, .2); width: 100%; float: left; clear: both; margin: 10px 0; border: 0 none;
}
hr3 { height: 1px; background: rgba(0, 0, 0, .05); width: 100%; float: left; clear: both; margin: 35px 0 0; border: 0 none;
}
.border-10 { border: 10px solid transparent;
}
.border-10 { border: 0;
}
.border-20 { border: 20px solid transparent
}
.border-30 { border: 30px solid transparent
}
.border-40 { border: 40px solid transparent
}
.border-50 { border: 50px solid transparent
}
.border-60 { border: 60px solid transparent
}
.border-70 { border: 70px solid transparent
}
.border-80 { border: 80px solid transparent
}
.border-90 { border: 90px solid transparent
}
.border-100 { border: 100px solid transparent
}
.border-right-10 { border-right: 10px solid transparent
}
.border-right-20 { border-right: 20px solid transparent
}
.border-right-30 { border-right: 30px solid transparent
}
.border-right-40 { border-right: 40px solid transparent
}
.border-right-50 { border-right: 50px solid transparent
}
.border-right-60 { border-right: 60px solid transparent
}
.border-right-70 { border-right: 70px solid transparent
}
.border-right-80 { border-right: 80px solid transparent
}
.border-right-90 { border-right: 90px solid transparent
}
.border-right-100 { border-right: 100px solid transparent
}
.border-left-0,.border-right-0{margin:0;padding:0;}
.border-left-10 { border-left: 10px solid transparent
}
.border-left-20 { border-left: 20px solid transparent
}
.border-left-30 { border-left: 30px solid transparent
}
.border-left-40 { border-left: 40px solid transparent
}
.border-left-50 { border-left: 50px solid transparent
}
.border-left-60 { border-left: 60px solid transparent
}
.border-left-70 { border-left: 70px solid transparent
}
.border-left-80 { border-left: 80px solid transparent
}
.border-left-90 { border-left: 90px solid transparent
}
.border-left-90 { border-left: 100px solid transparent
}
.border-top-5 { border-top: 5px solid transparent
}
.border-top-10 { border-top: 10px solid transparent
}
.border-top-15 { border-top: 15px solid transparent
}
.border-top-20 { border-top: 20px solid transparent
}
.border-top-30 { border-top: 30px solid transparent
}
.border-top-40 { border-top: 40px solid transparent
}
.border-top-50 { border-top: 50px solid transparent
}
.border-top-60 { border-top: 60px solid transparent
}
.border-top-70 { border-top: 70px solid transparent
}
.border-top-80 { border-top: 80px solid transparent
}
.border-top-90 { border-top: 90px solid transparent
}
.border-top-100 { border-top: 100px solid transparent
}
.border-bottom-5 { border-bottom: 5px solid transparent
}
.border-bottom-10 { border-bottom: 10px solid transparent
}
.border-bottom-15 { border-bottom: 15px solid transparent
}
.border-bottom-20 { border-bottom: 20px solid transparent
}
.border-bottom-30 { border-bottom: 30px solid transparent
}
.border-bottom-40 { border-bottom: 40px solid transparent
}
.border-bottom-50 { border-bottom: 50px solid transparent
}
.border-bottom-60 { border-bottom: 0px solid transparent
}
.full { width: 100%;
}
.hide { display: none;
}
.one-fourth { float: left; width: 25%;
}
.one-third { float: left; width: 27.333333333333333%; padding:3%;
}
.one-third-col { margin-right: 2.22222%; width: 31.851852%;
}
.grid--max-3-col > .one-third-col:nth-child(3n) { margin-right: 0!important;
}
.two-third { float: left; width: 66.666666666666666%;
}
.one-sixth { width: 16.66666666666667%; float: left;
}
.one-fifth { float: left; width: 20%;
}
.two-fifth { width: 40%; float: left;
}
.three-fifth { width: 60%; float: left;
}
.four-fifth { width: 80%; float: left;
}
.three-fourth { width: 75%; float: left;
}
.half { float: left; width: 50%;
}
.full { width: 100%;
}
.fortyfive { float: left; width: 45%;
}
.fiftyfive { float: left; width: 55%;
}
img.align-middle { margin-top: -75%;
}
/* -------------------------------------------- * * Footer */
.share-1{ background:rgba(255,255,255,.25); color:#666; padding:5px; transition: all 0.2s linear; border-radius:25px;
}
.share-1
.footer-cols ul { margin: 15px 0px 45px;
}
.footer-cols li { margin-bottom: 3px
}
.footer-cols li a { color: #666; margin-right: 0px; border-bottom:4px solid rgba(0, 0, 0, .2); transition: all 0.2s linear;
}
.socials-footer { margin: 45px 0px; display: block; text-align: center;
}
.socials-footer .title { margin-right: 1.1%;
}
.socials-footer .title,
.socials-footer .sharing-links { display: inline-flex; vertical-align:middle; height: auto; line-height:27px;
}
.socials-footer h5 { float: right; margin: 0; letter-spacing: 0.075em; font-size:11px; font-weight:100; padding:5px 10px; /* background: rgb(255, 183, 16); */ color: #999; border:1px solid #999; background:rgba(255,255,255,.25); text-align:middle; vertical-align:middle;
font-family: 'Lora', serif; text-align: -webkit-center;
}
.footer-container { padding-top: 0px;
}
/* -------------------------------------------- */
.sharing-links:after { content: ''; display: table; clear: both;
}
.sharing-links li { float: left; padding: 0px 14px 0px 0px;
}
.sharing-links a { color:#999; display: block; width: 27px; height: auto; line-height:27px; border-radius:0; border:1px solid #999;
}
.sharing-links a:hover { opacity: 1; background: rgb(255, 183, 16); color: #333; border:1px solid #333; transition: color 0.23s linear; background: -moz-linear-gradient(left, rgba(174, 255, 0, 0) 0%, rgba(255, 255, 255, .25) 50%, rgba(0, 0, 0, 0) 100%); background: -webkit-linear-gradient(left, rgba(174, 255, 0, 0) 0%, rgba(255, 255, 255, .25) 50%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to right, rgba(174, 255, 0, 0) 0%, rgba(255, 255, 255, .25) 50%, rgba(0, 0, 0, 0) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#00000000', GradientType=1);
}
.sharing-links a.link-wishlist { background-position: 0px -225px;
}
.sharing-links a.link-compare { background-position: 0px -250px;
}
.sharing-links a.link-email-friend { background-position: center -1270px;
}
.sharing-links a.link-facebook { background-position: center 0px;
}
.sharing-links a.link-twitter { background-position: center -75px;
}
.sharing-links a.bookmark-instagram { background-position: center -300px;
}
.sharing-links a.bookmark-linkedin { background-position: center -225px;
}
.sharing-links a { background-repeat: no-repeat; background-position: center 0px;
}
.sharing-links a.bookmark-twitter { background-position: center -75px;
}
.sharing-links a.bookmark-instagram { background-position: center -300px;
}
.sharing-links a.bookmark-pintrest { background-position: center -150px;
}
.sharing-links a.bookmark-email { background-position: center -1270px; width: 32px;
}
.time { color: rgba(0, 0, 0, .25); font-size: 10px;
}
.footer-cols li a { color: #666; padding:0px; font-size:12px; margin-right: 0px; font-family: 'Arial', sans-serif; border-bottom:4px solid rgba(0, 0, 0, 0); transition: background 0.2s linear;
}
.footer-cols li a:hover{ cursor:none; border-bottom:4px solid rgba(0, 0, 0, .2); transition: all 0.2s linear;
}
.footer-cols li { margin:5px 0px; padding:1px;
}

Showcase 1 Gallery - Script Codes JS Codes

jQuery(document).ready(function() { var offset = 250; var duration = 300; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({ scrollTop: 0 }, duration); return false; })
});
var today = new Date();
document.getElementById('time').innerHTML = today;
Showcase 1 Gallery - Script Codes
Showcase 1 Gallery - Script Codes
Home Page Home
Developer Calvin
Username CalvinMorett
Uploaded August 11, 2022
Rating 3
Size 6,969 Kb
Views 22,264
Do you need developer help for Showcase 1 Gallery?

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!

Calvin (CalvinMorett) Script Codes
Name
IDEA BLOCKS
CLG Web Design Concept
A Pen by Calvin
Particle Web
Horizontal Scrolling Theme
PORTFOLIO - CEMENT
Postcard Contact Form
Staff
Portfolio Idea
Portfolio Base
Create amazing art & images 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!