Skip to content

Instantly share code, notes, and snippets.

@alexvas123

alexvas123/Portfolio Grid

Created July 9, 2016 10:08
Show Gist options
  • Save alexvas123/cd2ae54a2af683bbed97edfeb6bc4803 to your computer and use it in GitHub Desktop.
Save alexvas123/cd2ae54a2af683bbed97edfeb6bc4803 to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio Grid
Raw
Portfolio Grid
// HTML
<section id="portfolio" class="s-portfolio bg-dark">
<div class="section-header">
<h2>Портфолио</h2>
<div class="s-descr-wrap">
<h6>Мои последние работы</h6>
</div>
</div>
<div class="section-content">
<div class="filter-div controls">
<ul>
<li class="filter active" data-filter="all">Все работы</li>
<li class="filter" data-filter=".category-1">Сайты</li>
<li class="filter" data-filter=".category-2">Айдентика</li>
<li class="filter" data-filter=".category-3">Логотипы</li>
</ul>
</div>
<div class="portfolio-grid">
<div class="mix portfolio-item category-1" data-myorder="1">
<img src="img/1.jpg" alt="alt">
<div class="port-item-cont">
<h5>Заголовок работы</h5>
<h6>Описание работы</h6>
<a href="#" class="popup-content">Посмотреть</a>
</div>
<div class="hidden">
<div class="port-descr">
<div class="modal-box-content">
<button class="mfp-close" type="button" title="Close (Esc)">×</button>
<h5>Заголовок работы</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, temporibus.</p>
<img src="img/1.jpg" alt="alt">
</div>
</div>
</div>
</div>
<div class="mix portfolio-item category-1" data-myorder="1">
<img src="img/2.jpg" alt="alt">
<div class="port-item-cont">
<h5>Заголовок работы</h5>
<h6>Описание работы</h6>
<a href="#" class="popup-content">Посмотреть</a>
</div>
<div class="hidden">
<div class="port-descr">
<div class="modal-box-content">
<button class="mfp-close" type="button" title="Close (Esc)">×</button>
<h5>Заголовок работы</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, temporibus.</p>
<img src="img/2.jpg" alt="alt">
</div>
</div>
</div>
</div>
<div class="mix portfolio-item category-1" data-myorder="1">
<img src="img/3.jpg" alt="alt">
<div class="port-item-cont">
<h5>Заголовок работы</h5>
<h6>Описание работы</h6>
<a href="#" class="popup-content">Посмотреть</a>
</div>
<div class="hidden">
<div class="port-descr">
<div class="modal-box-content">
<button class="mfp-close" type="button" title="Close (Esc)">×</button>
<h5>Заголовок работы</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, temporibus.</p>
<img src="img/3.jpg" alt="alt">
</div>
</div>
</div>
</div>
<div class="mix portfolio-item category-2" data-myorder="2">
<img src="img/4.jpg" alt="alt">
<div class="port-item-cont">
<h5>Заголовок работы</h5>
<h6>Описание работы</h6>
<a href="#" class="popup-content">Посмотреть</a>
</div>
<div class="hidden">
<div class="port-descr">
<div class="modal-box-content">
<button class="mfp-close" type="button" title="Close (Esc)">×</button>
<h5>Заголовок работы</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, temporibus.</p>
<img src="img/4.jpg" alt="alt">
</div>
</div>
</div>
</div>
<div class="mix portfolio-item category-2" data-myorder="2">
<img src="img/5.jpg" alt="alt">
<div class="port-item-cont">
<h5>Заголовок работы</h5>
<h6>Описание работы</h6>
<a href="#" class="popup-content">Посмотреть</a>
</div>
<div class="hidden">
<div class="port-descr">
<div class="modal-box-content">
<button class="mfp-close" type="button" title="Close (Esc)">×</button>
<h5>Заголовок работы</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, temporibus.</p>
<img src="img/5.jpg" alt="alt">
</div>
</div>
</div>
</div>
<div class="mix portfolio-item category-2" data-myorder="2">
<img src="img/6.jpg" alt="alt">
<div class="port-item-cont">
<h5>Заголовок работы</h5>
<h6>Описание работы</h6>
<a href="#" class="popup-content">Посмотреть</a>
</div>
<div class="hidden">
<div class="port-descr">
<div class="modal-box-content">
<button class="mfp-close" type="button" title="Close (Esc)">×</button>
<h5>Заголовок работы</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, temporibus.</p>
<img src="img/6.jpg" alt="alt">
</div>
</div>
</div>
</div>
<div class="mix portfolio-item category-3" data-myorder="3">
<img src="img/1.jpg" alt="alt">
<div class="port-item-cont">
<h5>Заголовок работы</h5>
<h6>Описание работы</h6>
<a href="#" class="popup-content">Посмотреть</a>
</div>
<div class="hidden">
<div class="port-descr">
<div class="modal-box-content">
<button class="mfp-close" type="button" title="Close (Esc)">×</button>
<h5>Заголовок работы</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, temporibus.</p>
<img src="img/1.jpg" alt="alt">
</div>
</div>
</div>
</div>
<div class="mix portfolio-item category-3" data-myorder="3">
<img src="img/2.jpg" alt="alt">
<div class="port-item-cont">
<h5>Заголовок работы</h5>
<h6>Описание работы</h6>
<a href="#" class="popup-content">Посмотреть</a>
</div>
<div class="hidden">
<div class="port-descr">
<div class="modal-box-content">
<button class="mfp-close" type="button" title="Close (Esc)">×</button>
<h5>Заголовок работы</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, temporibus.</p>
<img src="img/2.jpg" alt="alt">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
// Javascript
// Requires MixItUp and Magnific-Popup plugins
$('.portfolio-grid').mixItUp();
$('.s-portfolio li').click(function () {
$('.s-portfolio li').removeClass('active');
$(this).addClass('active');
});
$('.portfolio-item').each(function (i) {
$(this).find("a").attr("href", "#work-" + i);
$(this).find(".port-descr").attr("id", "work-" + i);
});
$('.popup-content').magnificPopup({
type: 'inline',
closeBtnInside: true
});
// CSS
.s-portfolio
ul, li
margin: 0
padding: 0
li
cursor: pointer
display: inline-block
letter-spacing: rem(1.5)
line-height: 2
margin: 0 rem(10)
text-transform: uppercase
font-size: .8rem
ul
margin-bottom: rem(20)
.portfolio-grid
+display(flex)
+flex-wrap(wrap)
.portfolio-item
display: none
padding: 0
position: relative
width: 25%
img
width: 100%
.port-item-cont
background-color: rgba(0,0,0,.8)
height: 100%
left: 0
opacity: 0
padding-top: 15%
position: absolute
text-align: center
top: 0
+transition(all .5s ease)
width: 100%
&:hover
opacity: 1
padding-top: 20%
a
background-color: transparent
border: rem(1) solid #fff
cursor: pointer
display: inline-block
font-size: 1rem
letter-spacing: rem(1.5)
padding: rem(2) rem(10)
.hidden
display: none
.port-descr
background-color: #fff
margin: auto
max-width: rem(500)
p
padding: 0 rem(10)
h5
letter-spacing: rem(1.5)
padding-top: rem(10)
text-transform: uppercase
img
width: 100%
.modal-box-content
position: relative
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment