Forked from Mark Murray's Pen Flex Projects.
Forked from dale hudson's Pen Flex Projects.
Forked from Secret Sam's Pen Flex Projects.
A Pen by dale hudson on CodePen.
Created
July 6, 2014 16:51
-
-
Save dalecreativ/98dafee4f5f95dc940ba to your computer and use it in GitHub Desktop.
A Pen by dale hudson.
This file contains 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
| .container | |
| %section | |
| .info | |
| %h1 Project Title | |
| %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias vero perferendis tenetur quaerat illo ex iste velit similique mollitia harum tempora inventore omnis architecto perspiciatis laboriosam ducimus optio repudiandae ipsum. | |
| .images | |
| %figure.large{"style"=>"background-image: url(http://www.markmurray.co/images/stock/65.jpg)"} | |
| %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/64.jpg)"} | |
| %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/63.jpg)"} | |
| %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/62.jpg)"} | |
| %section | |
| .info | |
| %h1 Project Title | |
| %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias vero perferendis tenetur quaerat illo ex iste velit similique mollitia harum tempora inventore omnis architecto perspiciatis laboriosam ducimus optio repudiandae ipsum. | |
| .images | |
| %figure.large{"style"=>"background-image: url(http://www.markmurray.co/images/stock/30.jpg)"} | |
| %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/31.jpg)"}> | |
| %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/32.jpg)"}> | |
| %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/33.jpg)"}> | |
| %section | |
| .info | |
| %h1 Project Title | |
| %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias vero perferendis tenetur quaerat illo ex iste velit similique mollitia harum tempora inventore omnis architecto perspiciatis laboriosam ducimus optio repudiandae ipsum. | |
| .images | |
| %figure.large{"style"=>"background-image: url(http://www.markmurray.co/images/stock/69.jpg)"} | |
| %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/70.jpg)"} | |
| %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/71.jpg)"} | |
| %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/72.jpg)"} | |
| %section | |
| .info | |
| %h1 Project Title | |
| %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias vero perferendis tenetur quaerat illo ex iste velit similique mollitia harum tempora inventore omnis architecto perspiciatis laboriosam ducimus optio repudiandae ipsum. | |
| .images | |
| %figure.large{"style"=>"background-image: url(http://www.markmurray.co/images/stock/73.jpg)"} | |
| %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/74.jpg)"} | |
| %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/75.jpg)"} | |
| %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/76.jpg)"} | |
This file contains 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
| $('.small').click(function(){ | |
| $(this).css({ | |
| flex-grow: 1, | |
| order: 0 | |
| }); | |
| $('.large').css( | |
| ); | |
| clicked_image_url = $(this).css('background-image').replace('url(','').replace(')',''); | |
| lrg_image_url = $('.large').css('background-image').replace('url(','').replace(')',''); | |
| //alert(clicked_image_url); | |
| //alert(lrg_image_url); | |
| }); |
This file contains 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
| @import "compass/css3"; | |
| @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,800|Satisfy); | |
| *, *:before, *:after { @include box-sizing(border-box) } | |
| html, body { | |
| background: #eff0f1; | |
| font-family: Source Sans Pro, sans-serif; | |
| counter-reset: section; | |
| margin:0;padding:0; | |
| } | |
| span.name { | |
| text-align: center; | |
| display: inline-block; | |
| margin: 3em auto; | |
| font-family: Satisfy, cursive; | |
| color: #9f9f9f; | |
| background: #eff0f1; | |
| font-size: 2em; | |
| @include transform(rotate(-10deg)); | |
| position: relative; | |
| z-index: 10; | |
| display: none; | |
| &:before { | |
| content: ''; | |
| position: absolute; | |
| width: 120px; height: 120px; | |
| background: transparent; | |
| border: 4px solid #9f9f9f; | |
| border-radius: 50%; | |
| top: -100%; left: 0; | |
| z-index: 1; | |
| } | |
| } | |
| .container { | |
| display:flex; | |
| flex-direction:column; | |
| justify-content:space-between; | |
| max-width: 90vw; | |
| margin: 0 auto; | |
| } | |
| section { | |
| background: white; | |
| display:flex; | |
| flex:1; | |
| margin-top:1em; | |
| @include box-shadow(1px 1px 1px 0px rgba(black, 0.1)); | |
| &:hover:before { background: rgba(#1abc9c, 1); transition: background-color 0.5s linear; } | |
| &:before { | |
| counter-increment: section; | |
| content: counter(section); | |
| background: rgba(#1abc9c, 0.3); | |
| color: white; | |
| padding: 1em; | |
| line-height: 2; | |
| } | |
| &:nth-child(2n):before{ | |
| background: rgba(#e74c3c, 0.3); | |
| } | |
| &:nth-child(2n):hover:before { | |
| background: rgba(#e74c3c, 1)!important; | |
| } | |
| .info { | |
| flex: 1; | |
| padding: 1em; | |
| h1 { | |
| font-weight: 700; | |
| margin-bottom: 1em; | |
| font-size: 2em; | |
| } | |
| p { | |
| font-weight: 300; | |
| font-style: italic; | |
| color: #555; | |
| line-height: 1.5; | |
| font-size: 0.9em; | |
| } | |
| } | |
| .images { | |
| display:flex; | |
| flex-direction:row; | |
| flex-wrap:wrap; | |
| justify-content:space-between; | |
| flex: 3; | |
| padding: 1em; | |
| figure { | |
| @include background-size(cover); | |
| background-position: center center; | |
| cursor: pointer; | |
| @include transition(all 300ms ease); | |
| min-height:100px; | |
| &:hover { | |
| @include filter(grayscale(1)); | |
| } | |
| } | |
| .large { | |
| flex-basis:100%; | |
| margin-bottom: 0.75em; | |
| height:66vh; | |
| } | |
| .small { | |
| //flex: 1; | |
| min-width:calc(100% / 3 - 0.5em); | |
| max-height:33vh; | |
| } | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| section { | |
| flex-direction: column!important; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| section { | |
| flex-direction: column!important; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment