Summary:
As one of the first Adobe projects I worked on and it was a lot of fun to program an enterprise level company's project. Flexbox plays a large role in the project. This project was organized to feature artists from Adobe Stock to help build awareness and show the creativity behind the work that goes into the stock photography on Adobe Stock. With filtering functionality and unique responsive styles this microsite provides an easy way to see beautiful content in a new way that is unique to Adobe and it's Adobe Stock brand.
View DemojQuery / JavaScript
var currentItem = $( '.filter-list .list-item .item.active' ).text(),
output = $( '.list-container .output-container' );
output.html( currentItem );
// slide toggle for selector menu
$( '.list-container' ).on('click', function() {
$('.filter-list').slideToggle();
$( this ).toggleClass( 'open' );
});
var results = false;
if( $('#filtered-content' ).children('.results') ) {
var results = true;
}
$( '.filter-list' ).on('click', '.item', function(e, results) {
e.preventDefault();
var $this = $(this),
selectedValue = $this.text(),
item = $( '.list-item .item.active' );
item.removeClass( 'active' );
$this.addClass( 'active' );
$( '.output-container' ).text( selectedValue );
if( selectedValue === 'All' ) {
$( '.rendered' ).css( 'top', '50px' ).fadeIn(100).animate( {
left: '0px',
opacity: 1,
top: 0
} );
$( '.easier-searching' ).fadeOut();
$( '.find-inspiration' ).fadeIn();
} else {
$( '.rendered' ).animate( {
position: 'relative',
opacity: 0
}, 600 ).fadeOut();
$( '.find-inspiration' ).fadeOut();
}
$.getJSON( './assets/js/data/data.json', function( data ) {
var contribItems = [],
visualItems = [],
inputValue = $( '.output-container' ).text();
$.each( data.response.post, function( data_key, data_value ) {
if( data_value.category === 'Contributor Spotlight' ) {
var contribBlock = htmlString;
contribItems.push( contribBlock );
}
if( data_value.category === 'Visual Trend' ) {
var visualBlock = htmlString;
visualItems.push( visualBlock );
}
});
if( $( '#filtered-content' ).children( '.results' ) ) {
$( '.results' ).animate( {
opacity: 0
}, 100 )
.remove();
$( this ).removeClass( 'visible' );
}
if( inputValue === 'Contributor Spotlight' ) {
$( "", {
"class": "post-table clearfix results",
html: contribItems
}).appendTo( '#filtered-content.post-table' );
$( '#filtered-content' ).addClass( 'visible' );
$( '.results' ).css( 'display', 'flex' )
.animate( {
opacity: 1,
top: 0
}, 600 ).fadeIn();
$( '.easier-searching' ).fadeIn();
$( '.shareCustomLogo' ).each( function() {
$( this ).jsSocials( {
showLabel: false,
showCount: false,
shares: [
{
share: 'twitter',
url: $( this ).data( 'href' ),
},
{
share: 'linkedin',
url: $( this ).data( 'href' ),
},
{
share: 'facebook',
url: $( this ).data( 'href' ),
},
]
} );
} );
$( '.fa-twitter' ).append( svg1 );
$( '.fa-facebook' ).append( svg2 );
$( '.fa-linkedin' ).append( svg3 );
}
if( inputValue === 'Visual Trend' ) {
$( "", {
"class": "post-table clearfix results",
html: visualItems
}).appendTo( '#filtered-content.post-table' );
$( '#filtered-content' ).addClass( 'visible' );
$( '.results' ).css( 'display', 'flex' )
.animate( {
opacity: 1,
top: 0
}, 600 ).fadeIn();
$( '.easier-searching' ).fadeIn();
$( '.shareCustomLogo' ).each( function() {
$( this ).jsSocials( {
showLabel: false,
showCount: false,
shares: [
{
share: 'twitter',
url: $( this ).data( 'href' ),
},
{
share: 'linkedin',
url: $( this ).data( 'href' ),
},
{
share: 'facebook',
url: $( this ).data( 'href' ),
},
]
} );
} );
$( '.fa-twitter' ).append( svg1 );
$( '.fa-facebook' ).append( svg2 );
$( '.fa-linkedin' ).append( svg3 );
}
});
});
SCSS / CSS
// HEADER
#header {
.wrap {
@include media( 975px ) {
padding: 10px 25px 45px;
}
.logo-container {
@include media( 850px ) {
float: none;
margin: 0 auto;
}
}
}
}
.header-cta.trends-central {
max-width: 495px;
width: 100%;
@include clearfix;
@include media( 850px ) {
max-width: 320px;
margin: 0 auto;
text-align: center;
float: none;
}
.list-container.active {
box-shadow: 0px 4px 10px rgba( 0,0,0,.16);
.filter-list {
box-shadow: 0px 0px 3px rgba( 0,0,0,.16);
background-color: $white;
.list-item {
.item.active {
font-weight: bold;
font-family: $bold;
}
}
}
}
.list-container {
cursor: pointer;
position: relative;
top: -55px;
padding: 60px 15px 0;
max-width: 231px;
width: 100%;
float: left;
transition: ease-in-out .25s;
@include media( 850px ) {
float: none;
text-align: left;
margin: 0 auto;
}
.output-outer-container {
position: relative;
font-family: $bold;
font-weight: bold;
cursor: pointer;
padding: 10px 0px 25px;
width: 100%;
&:after {
position: absolute;
bottom: 32px;
right: 0px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0px 10px;
border-color: #000 transparent transparent transparent;
transform: rotate( 0deg );
}
.output-container {
font-family: $light;
margin-left: 5px;
}
}
}
.list-container.open {
box-shadow: 0px 3px 6px rgba( 0, 0, 0, 0.06 );
.output-outer-container {
&:after {
transform: rotate( 180deg );
}
}
.filter-list {
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.06);
}
}
.filter-list {
display: none;
position: absolute;
background-color: $white;
width: 100%;
left:0;
padding: 0px 8px 10px;
z-index: 3;
transition: background ease-in-out .25s;
.list-item {
padding: 5px 0;
a {
color: $black;
font-size: 1.188rem;
display: block;
width: 100%;
}
.active {
font-weight: bold;
font-family: $bold;
}
}
}
.button {
float: right;
@include media( 850px ) {
float: none;
}
}
}
.trend-central {
font-size: 2.625rem;
margin-bottom: 45px;
@include media( 345px ) {
font-size: 2.025rem;
}
}
#filtered-content {
display: none;
opacity: 0;
transition: ease-in-out .25s;
}
#filtered-content.visible {
display: block;
opacity: 1;
.results {
display: flex !important;
opacity: 0;
top: 50px;
.container {
&:hover {
background-color: $lightGray;
box-shadow: 0px 0px 49px rgba(0, 0, 0, 0.29);
}
}
}
}
.post-table.results {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.container {
display: block;
width: 49%;
margin: 0px 6px 40px !important;
flex-grow: 1;
}
}
.post-table.rendered.visible {
left: 0px;
position: relative;
opacity: 1;
}
.post-table {
position: relative;
max-width: 1365px;
margin: 0 auto;
width: 100%;
padding-top: 30px;
}
.title-container {
background-color: $bannertitle;
padding: 10px 35px;
color: $white;
text-align: center;
font-family: $bold;
max-width: 325px;
margin: 0 auto -42px;
position: relative;
z-index: 3;
clear: both;
.banner-title {
margin: 0px;
text-transform: uppercase;
}
@include media( 936px ) {
max-width: 100%;
margin: 0 auto;
padding: 14px 40px;
}
}
.container {
@include flexbox;
@include justify-content( center );
@include align-content( space-between );
margin-bottom: 40px;
position: relative;
box-shadow: 0px 0px 10px rgba( 0,0,0,.16 );
&:hover .content-container:after {
opacity: 0.0;
}
@include media( 936px ) {
@include flex-direction( column );
margin-bottom: 0px;
box-shadow: none;
}
.bg-container {
height: 535px;
width: 100%;
z-index: 0;
background-size: cover !important;
flex-shrink: 0;
@include media( 480px ) {
height: 350px;
}
@include media( 320px ) {
height: 255px;
}
}
.no-man-post {
background: transparent url( ../../images/nomanisanisland-thumbnail-adobe-stock-visual-trend.png ) no-repeat center center;
}
.tiny-atlas-post {
background: transparent url( ../../images/tinyatlasquarterly-adobe-stock-contributor-spotlight.png ) no-repeat center center;
}
.female-creator {
background: transparent url( ../../images/adobestock-thefemalecreator.png ) no-repeat center center;
}
.helen-fields {
background: transparent url( ../../images/adobe-stock-photography-helenfieldsvirtualreality.jpg ) no-repeat center center;
}
.view-from-above {
background: transparent url( ../../images/adobestockphotography-viewfromabove.png ) no-repeat center center;
}
.ryan-longnecker {
background: transparent url( ../../images/adobestock-ryanlongneckerspotlight.png ) no-repeat center center;
}
.digital-art {
background: transparent url( ../../images/adobestock-digitalartgetsdelicate.png ) no-repeat center center;
}
.natalia-hubbert {
background: transparent url( ../../images/adobestock-nataliahubbertspotlight.jpg ) no-repeat center center;
}
.left {
.content-container {
&:after {
content: '';
position: absolute;
top: 70px;
right: 0;
bottom: 70px;
background-color: $border;
width: 1px;
@include transition( ease-in-out .25s );
}
}
}
.left,
.right {
width: 50%;
&:hover {
background-color: $postfill;
box-shadow: 0px 0px 49px rgba( 0,0,0,.29 );
}
@include media( 936px ) {
width: 100%;
}
}
a {
color: $bannertitle;
}
.trend {
color: $bannertitle !important;
@include flexbox;
@include flex-direction( column );
@include align-content( space-between );
}
.content-container {
position: relative;
text-align: left;
padding: 70px 60px 95px;
flex-grow: 1;
@include media( 480px ) {
padding: 70px 30px 95px;
}
@include media( 320px ) {
padding: 40px 30px 55px;
}
.category-title {
font-size: 1rem;
text-transform: uppercase;
font-family: $bold;
margin-bottom: 0px;
@include media( 400px ) {
font-size:0.875rem;
}
}
.post-title {
font-size: 2.375rem;
font-weight: lighter;
margin-top: 0px;
@include media( 400px ) {
font-size: 1.875rem;
}
}
.excerpt {
font-size: 1.313rem;
padding-right: 42px;
@include media( 400px ) {
font-size:1.125rem;
}
}
.cta-container {
.flex {
@include align-items( center );
@include media( 416px ) {
display: block;
padding-top: 15px;
.button {
width: 85%;
text-align: center;
margin: 20px 0px;
padding: 10px 45px;
}
.shareCustomLogo {
margin-top: 30px;
}
}
}
}
}
}
.results {
.container {
display: block;
.trend {
color: $bannertitle;
@include flexbox;
@include flex-direction( column );
@include align-content( space-between );
}
.spotlight {
color: $bannertitle;
@include flexbox;
@include flex-direction( column );
@include align-content( space-between );
}
}
}
.page-title.trend-central {
margin-bottom: 15px;
@include media( 767px ) {
line-height: 1em;
}
}
.find-inspiration {
background: $white url( ../../images/fresh-inspiration-ad-adobe-stock-photography.png ) no-repeat center center;
background-size: cover;
color: $white;
height: 675px;
margin-bottom: 50px;
padding: 0px 60px;
@include media( 480px ) {
padding: 0px 30px;
height: 540px;
}
@include media( 320px ) {
height: auto;
padding: 60px 30px;
}
.wrap {
@include flexbox;
@include flex-direction( column );
@include justify-content( center );
@include align-content( center );
max-width: 575px;
height: 100%;
margin: 0 auto;
text-align: center;
}
.page-title {
margin: 0px 0px 40px;
}
.button {
margin: 25px auto 0px;
}
}
.trends-cta {
@include flexbox;
@include justify-content( center );
@include align-content( center );
@include flex-direction( column );
text-align: center;
.wrap {
margin: 0 auto;
@include media( 768px ) {
padding: 0px 60px;
}
@include media( 480px ) {
padding: 0px;
}
}
}
.easier-searching,
.content-with-altitude {
color: $white;
height: auto;
width: 100%;
max-width: 1365px;
margin: 0 auto 50px;
.wrap {
@include flexbox;
@include flex-direction( row );
@include justify-content( center );
@include align-items( center );
max-width: 100%;
width: 100%;
height: 100%;
@include media( 860px ) {
@include flex-direction( column );
}
}
.left-column {
padding-left: 60px;
width: 60%;
@include media( 936px ) {
margin-bottom: 30px;
width: 100%;
padding-left: 0px;
}
}
.right-column {
width: 40%;
padding-right: 60px;
@include media( 936px ) {
width: 100%;
padding-right: 0px;
}
}
.page-title {
text-align: left !important;
@include media( 936px ) {
text-align: center !important;
}
}
.page-subtitle {
text-align: left !important;
margin: 0px;
@include media( 936px ) {
text-align: center !important;
}
}
.hollow-button {
font-size: 1.188rem;
padding: 8px 20px;
border-radius: 50px;
font-family: $bold;
@include media( 936px ) {
margin: 0 auto;
}
}
}
.easier-searching {
display: none;
background: $black url( ../../images/adobestockphotography-easiersearching.png ) no-repeat left center;
background-size: cover;
.wrap {
padding: 15px 0px 25px;
@include media( 970px ) {
display: block;
text-align: center;
padding: 15px 25px 38px;
}
}
.page-title {
@include media( 970px ) {
text-align: center !important;
}
@include media( 575px ) {
font-size: 6.5vw;
}
}
.page-subtitle {
@include media( 970px ) {
text-align: center !important;
}
@include media( 575px ) {
font-size: 4vw;
}
}
.left-column {
@include media( 970px ) {
width: 100%;
text-align: center;
padding-left: 0px;
}
}
.right-column {
text-align: right;
@include media( 970px ) {
text-align: center;
width: 100%;
padding-right: 0px;
}
}
}
.content-with-altitude {
background: transparent url( ../../images/adobestockphotography-content-with-altitude.png ) no-repeat left top;
background-size: cover;
padding: 0px;
margin: 8px auto 19px;
.wrap {
padding: 15px 0px 25px;
@include media( 970px ) {
display: block;
text-align: center;
padding: 15px 25px 38px;
}
}
.page-title {
@include media( 970px ) {
text-align: center !important;
}
@include media( 575px ) {
font-size: 6.5vw;
}
}
.page-subtitle {
@include media( 970px ) {
text-align: center !important;
}
@include media( 575px ) {
font-size: 4vw;
}
}
.left-column {
@include media( 970px ) {
width: 100%;
text-align: center;
padding-left: 0px;
}
}
.right-column {
text-align: right;
@include media( 970px ) {
text-align: center;
width: 100%;
padding-right: 0px;
}
}
}
.pre-footer-section {
text-align: center;
height: 465px;
@include media( 480px ) {
height: auto;
padding: 25px 0 50px;
}
.wrap {
@include flexbox;
@include flex-direction( column );
@include justify-content( center );
@include align-content( center );
height: 100%;
text-align: center;
@include media( 480px ) {
padding: 0px 60px;
}
}
.page-title {
margin-bottom: 20px;
@include media( 480px ) {
font-size: 7vw;
}
}
.light-section-title {
margin: 0 0 45px;
@include media( 480px ) {
font-size: 5.5vw;
}
}
.button {
margin: 0px auto 0px;
}
}