A Pen by Mighty Shaban on CodePen.
Created
June 30, 2015 07:40
-
-
Save patilswapnilv/8411d534b152a87fd390 to your computer and use it in GitHub Desktop.
Balkan Style - Portfolio Gallery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> | |
| <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'> | |
| <header> | |
| <h1>Balkan Style <br> <span>[ Portfolio Gallery ]</span></h1> | |
| <p>Dribbble stuff by <a href="http://dribbble.com/JeremiahBritton" target="_blank">Jeremiah Britton</a></p> | |
| </header> | |
| <div id="top"></div> | |
| <section class="gallery"> | |
| <div class="row"> | |
| <ul> | |
| <a href="#" class="close"></a> | |
| <li> | |
| <a href="#item02"> | |
| <img src="http://d13yacurqjgara.cloudfront.net/users/22177/screenshots/1474358/respecthustle-bearfight-jeremiahbritton-.png" alt=""> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#item02"> | |
| <img src="https://d13yacurqjgara.cloudfront.net/users/22177/screenshots/1514374/essentialswallpaperdribbble-jeremiahbritton.jpg" alt=""> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#item02"> | |
| <img src="https://d13yacurqjgara.cloudfront.net/users/22177/screenshots/1502114/upatnight-city-jb.png" alt=""> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="image" href="#item01"> | |
| <img src="http://d13yacurqjgara.cloudfront.net/users/22177/screenshots/1483213/dog-jeremiahbritton.jpg" alt=""> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="image" href="#item02"> | |
| <img src="http://d13yacurqjgara.cloudfront.net/users/22177/screenshots/1147375/dwyl-circle-jb.png" alt=""> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="image" href="#item01"> | |
| <img src="http://d13yacurqjgara.cloudfront.net/users/22177/screenshots/1139662/libertytorch-jeremiahbritton.png" alt=""> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="image" href="#item01"> | |
| <img src="https://d13yacurqjgara.cloudfront.net/users/22177/screenshots/1484728/essentials-jeremiahbritton-dribbble.jpg" alt=""> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="image" href="#item01"> | |
| <img src="https://d13yacurqjgara.cloudfront.net/users/22177/screenshots/1425556/draftdrawcoasters-jeremiahbritton.png" alt=""> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> <!-- / row --> | |
| <!-- Item 01 --> | |
| <div id="item01" class="port"> | |
| <div class="row"> | |
| <div class="description"> | |
| <h1>Item 01</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p> | |
| </div> | |
| <img src="http://d13yacurqjgara.cloudfront.net/users/22177/screenshots/1379781/winterletters-jeremiahbritton-dribbble.png" alt=""> | |
| </div> | |
| </div> <!-- / row --> | |
| </div> <!-- / Item 02 --> | |
| <!-- Item 02 --> | |
| <div id="item02" class="port"> | |
| <div class="row"> | |
| <div class="description"> | |
| <h1>Item 02</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p> | |
| </div> | |
| <img src="http://d13yacurqjgara.cloudfront.net/users/22177/screenshots/404704/wontstopblue-womens-jeremiahbritton.jpg" alt=""> | |
| </div> <!-- / row --> | |
| </div> <!-- / Item 02 --> | |
| </section> <!-- / projects --> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // portfolio | |
| $('.gallery ul li a').click(function() { | |
| var itemID = $(this).attr('href'); | |
| $('.gallery ul').addClass('item_open'); | |
| $(itemID).addClass('item_open'); | |
| return false; | |
| }); | |
| $('.close').click(function() { | |
| $('.port, .gallery ul').removeClass('item_open'); | |
| return false; | |
| }); | |
| $(".gallery ul li a").click(function() { | |
| $('html, body').animate({ | |
| scrollTop: parseInt($("#top").offset().top) | |
| }, 400); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| =transition($transition-property, $transition-time, $method) | |
| -webkit-transition: $transition-property $transition-time $method | |
| -moz-transition: $transition-property $transition-time $method | |
| transition: $transition-property $transition-time $method | |
| * | |
| -webkit-box-sizing: border-box | |
| -moz-box-sizing: border-box | |
| box-sizing: border-box | |
| &:before, &:after | |
| -webkit-box-sizing: border-box | |
| -moz-box-sizing: border-box | |
| box-sizing: border-box | |
| body | |
| font-family: 'Lato', sans-serif | |
| font-weight: 300 | |
| line-height: 1.5 | |
| color: #333 | |
| a | |
| color: #fff | |
| .row | |
| width: 100% | |
| max-width: 1170px | |
| margin: 0 auto | |
| padding: 0 | |
| clear: both | |
| img | |
| max-width: 100% | |
| height: auto | |
| padding: 0 | |
| margin: 0 | |
| %col | |
| float: left | |
| margin: 0 0.8771929824561403% | |
| // HEADER | |
| header | |
| background-color: #84b4b1 | |
| color: #fff | |
| text-align: center | |
| padding: 30px 0 120px | |
| h1 | |
| text-align: center | |
| text-transform: uppercase | |
| font-size: 65px | |
| font-weight: 400 | |
| letter-spacing: 3px | |
| line-height: .8 | |
| padding-top: 50px | |
| font-family: 'Montserrat', sans-serif | |
| span | |
| text-transform: uppercase | |
| letter-spacing: 7px | |
| font-size: 25px | |
| line-height: 1 | |
| p | |
| padding-top: 30px | |
| // PROJECTS | |
| .gallery | |
| padding: 40px 0 300px | |
| position: relative | |
| overflow: hidden | |
| ul | |
| padding-top: 50px | |
| position: relative | |
| li | |
| @extend %col | |
| margin-bottom: 20px | |
| width: 23.24561403508772% | |
| position: relative | |
| a | |
| display: block | |
| position: relative | |
| width: 100% | |
| height: 100% | |
| margin: 0 | |
| padding: 0 | |
| line-height: 0 | |
| &:before | |
| position: absolute | |
| width: 32px | |
| height: 32px | |
| top: 40% | |
| left: 50% | |
| margin: -14px 0 0 -16px | |
| background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%20inkscape%3Aversion%3D%220.48.4%20r9939%22%20sodipodi%3Adocname%3D%22icon-fullscreen.svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20960%20560%22%0A%09%20enable-background%3D%22new%200%200%20960%20560%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Csodipodi%3Anamedview%20%20borderopacity%3D%221%22%20pagecolor%3D%22%23ffffff%22%20bordercolor%3D%22%23666666%22%20objecttolerance%3D%2210%22%20gridtolerance%3D%2210%22%20guidetolerance%3D%2210%22%20showgrid%3D%22false%22%20fit-margin-top%3D%220%22%20fit-margin-left%3D%220%22%20inkscape%3Azoom%3D%227.375%22%20inkscape%3Acx%3D%22-5.1525424%22%20inkscape%3Acy%3D%2216%22%20id%3D%22namedview11%22%20inkscape%3Awindow-x%3D%22-8%22%20inkscape%3Awindow-y%3D%22-8%22%20fit-margin-right%3D%220%22%20inkscape%3Apageopacity%3D%220%22%20fit-margin-bottom%3D%220%22%20inkscape%3Awindow-width%3D%221366%22%20inkscape%3Awindow-height%3D%22706%22%20inkscape%3Awindow-maximized%3D%221%22%20inkscape%3Apageshadow%3D%222%22%20inkscape%3Acurrent-layer%3D%22svg2%22%3E%0A%09%3C/sodipodi%3Anamedview%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22220%22%20y%3D%22260%22%20fill%3D%22%23FFFFFF%22%20width%3D%22536%22%20height%3D%2224%22/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22476%22%20y%3D%224%22%20fill%3D%22%23FFFFFF%22%20width%3D%2224%22%20height%3D%22556%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A) no-repeat | |
| content: '' | |
| opacity: 0 | |
| z-index: 1 | |
| @include transition(all, 0.3s, linear) | |
| &:hover:before | |
| top: 50% | |
| opacity: 1 | |
| &:after | |
| position: absolute | |
| width: 100% | |
| top: 0 | |
| bottom: 0 | |
| background: rgba(0, 0, 0, 0.3) | |
| content: '' | |
| opacity: 0 | |
| @include transition(all, 0.3s, linear) | |
| &:hover:after | |
| opacity: 1 | |
| // PORT | |
| .port | |
| position: absolute | |
| width: 100% | |
| height: 100% | |
| top: 0 | |
| left: 0 | |
| padding-top: 100px | |
| background: #ffffff | |
| background-color: #fafafa | |
| z-index: 103 | |
| visibility: hidden | |
| -webkit-transform: translateY(-100%) | |
| transform: translateY(-100%) | |
| border-bottom: 1px solid #d0d0d0 | |
| +transition(all, 0.5s, ease-in-out) | |
| img | |
| width: 50% | |
| .description | |
| float: left | |
| width: 50% | |
| max-height: 100% | |
| padding: 0 40px 40px | |
| overflow: auto | |
| h1 | |
| font-size: 35px | |
| line-height: 2.3 | |
| padding: 0 | |
| >* | |
| opacity: 0 | |
| +transition(all, 0.5s, linear) | |
| &.item_open | |
| visibility: visible | |
| -webkit-transform: translateY(0%) | |
| transform: translateY(0%) | |
| +transition(all, 0.4s, ease-in-out) | |
| > * | |
| opacity: 1 | |
| -webkit-transition-delay: 0.5s | |
| transition-delay: 0.5s | |
| .close | |
| width: 21px | |
| height: 21px | |
| background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2021%2021%22%0A%09%20enable-background%3D%22new%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%280%2C-1031.3622%29%22%3E%0A%09%3Cpath%20id%3D%22path2987%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M0%2C1031.4l21%2C21%22/%3E%0A%09%3Cpath%20id%3D%22path2989%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M21%2C1031.4l-21%2C21%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A%0A) no-repeat | |
| position: absolute | |
| right: 10px | |
| top: -121px | |
| opacity: 1 | |
| z-index: 1004 | |
| +transition(all, 0.1s, ease-in-out) | |
| .item_open & | |
| opacity: 1 | |
| top: 0px | |
| +transition(all, 0.3s, ease-in-out) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment