Happily Grey

header .flo-header.is-not-sticky{color:#000000;background-color:#ffffff}header .flo-header.is-not-sticky .flo-header__logo, header .flo-header.is-not-sticky .flo-header__menu > div > ul > .menu-item > a, header .flo-header.is-not-sticky .flo-header__menu-trigger, header .flo-header.is-not-sticky .flo-header__search-trigger, header .flo-header.is-not-sticky .flo-header__search-form-input{color:inherit}.flo-header--sticky .is-sticky .flo-header{background:rgba(255,255,255,1);color:#000000}.flo-header--sticky .is-sticky .flo-header__logo, .flo-header--sticky .is-sticky .flo-header__menu > div > ul > li, .flo-header--sticky .is-sticky .flo-header__menu-trigger, .flo-header--sticky .is-sticky .flo-header__search-trigger, .flo-header--sticky .is-sticky .flo-header__search-form-input, .flo-header--sticky .is-sticky .flo-header__search-form-submit, .flo-header--sticky .is-sticky .flo-header__lang-switch{color:inherit!important}.flo-header ul ul{background-color:#f8f8f8}.flo-header ul ul a{color:#000000!important}@media (min-width:768px) and (max-width:1024px){.flo-header__logo{max-width:23.125rem}}@media (min-width:1025px){.flo-header__logo{max-width:28.125rem}}

.flo-header__search-form-label{font-family:IvarDisplayCondensed-Light;font-size:1.625rem;letter-spacing:0.04em;word-spacing:0em;line-height:1.51em;text-transform:none;font-weight:normal}@media screen and (max-width:767px){.flo-header__search-form-label{font-size:1.5rem;line-height:1.51em}}.flo-header__search-form-input{font-family:adobe-caslon-pro_normal_400;font-size:1.125rem;letter-spacing:0em;word-spacing:0em;line-height:1.7em;text-transform:none;font-weight:normal}@media screen and (max-width:767px){.flo-header__search-form-input{font-size:0.75rem;line-height:1.7em}}

.flo-header-mobile__logo{max-width:22.5rem}.is-main.flo-header-mobile{background-color:#ffffff}.is-main.flo-header-mobile .flo-header-mobile__search-trigger, .is-main.flo-header-mobile .flo-header-mobile__menu-trigger, .is-main.flo-header-mobile .flo-header-mobile__logo, .is-main.flo-header-mobile .flo-header-mobile__menu{color:inherit}.is-main.flo-header-mobile{color:#000000!important}.is-main.flo-header-mobile .flo-header-mobile__menu{border-color:#000000}

.flo-block-slideshow-3__bottom-area{position:absolute;top:30%;left:50%;width:40rem;transform:translate(-50%,-30%);bottom:none;right:0;padding:1.5625rem 0}.flo-block-slideshow-3__title{position:absolute;left:50%;transform:translate(-50%,-50%);left:50%;top:50%;width:40rem}.flo-block-slideshow-3__title-area{bottom:calc(40% + 1.875rem)}.flo-block-slideshow-3__bottom-area{border-top:0}.flo-block-slideshow-3__arrows{display:none}.flo-block-slideshow-3__counter{display:none}@media (max-width:767px){.flo-block--6003{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--6003{margin-top:0rem;margin-bottom:0rem}}

.flo-block-slideshow-3--181 .flo-block-slideshow-3__counter{font-family:Mallory-Compact-Book;font-size:0.6875rem;letter-spacing:0.4em;word-spacing:0em;line-height:2.25em;text-transform:none;font-weight:normal}@media screen and (max-width:767px){.flo-block-slideshow-3--181 .flo-block-slideshow-3__counter{font-size:0.5rem;line-height:2.25em}}.flo-block-slideshow-3--181 .flo-block-slideshow-3__subtitle{font-family:Mallory-Compact-Book;font-size:0.6875rem;letter-spacing:0.4em;word-spacing:0em;line-height:2.25em;text-transform:none;font-weight:normal}@media screen and (max-width:767px){.flo-block-slideshow-3--181 .flo-block-slideshow-3__subtitle{font-size:0.5rem;line-height:2.25em}}.flo-block-slideshow-3--181 .flo-block-slideshow-3__title{font-family:RightGrotesk-CompactBold;font-size:5rem;letter-spacing:0.02em;word-spacing:0em;line-height:1.3em;text-transform:uppercase;font-weight:normal}@media screen and (max-width:767px){.flo-block-slideshow-3--181 .flo-block-slideshow-3__title{font-size:2.125rem;line-height:1.3em}}

–

@media (max-width:767px){.flo-block--2977 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--2977 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}

project

Client

Fashion and Lifestyle

Project Type

Full Website Redesign including post layout blocks

Photos and Content:

Happily Grey

Hero Image:

Happily Grey

Development:

Yannis Yannakopoulos

Overview

Website redesign for Happily Grey — the influential style website of founder, Mary Lawless. With over 1.3 million following, Mary offers a unique perspective and specialized style to both brands and readers. The goal of the redesign was to build a platform to highlight content and enhance the browsing experience with integrated shopping, modular post block types and the ability to easily search her highly anticipated travel content.

@media (max-width:767px){.flo-block--9717{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--9717{margin-top:-4.375rem;margin-bottom:0rem}}

.flo-divider--636 .flo-divider__line{width:80%;background-color:#e5e5e5}.flo-divider--636{background-color:transparent}@media (max-width:767px){.flo-divider--636{height:0.6875rem}.flo-divider--636 .flo-divider__line{width:80%}}@media (min-width:768px){.flo-divider--636{height:0.625rem}.flo-divider--636 .flo-divider__line{width:80%}}

@media (max-width:767px){.flo-block--9867 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--9867 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}

@media (max-width:767px){.flo-block--1283 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--1283 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}

Layered Image

Post Block Types:

Images side by side
Full Width Image with Text Overlay
Images with Shop Widget
Full Width Image with Caption
Images within Polaroid/Film Frames

@media (max-width:767px){.flo-block--5805 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--5805 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}

@media (max-width:767px){.flo-block--1368{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--1368{margin-top:0rem;margin-bottom:0rem}}

.flo-divider--743 .flo-divider__line{width:80%;background-color:#e5e5e5}.flo-divider--743{background-color:transparent}@media (max-width:767px){.flo-divider--743{height:1.9375rem}.flo-divider--743 .flo-divider__line{width:80%}}@media (min-width:768px){.flo-divider--743{height:3.75rem}.flo-divider--743 .flo-divider__line{width:80%}}

@media (max-width:767px){.flo-block--7705 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--7705 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}

@media (max-width:767px){.flo-block--807 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--807 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}

@media (max-width:767px){.flo-block--8294 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--8294 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}

@media (max-width:767px){.flo-block--5281{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--5281{margin-top:0rem;margin-bottom:0rem}}

.flo-text-block-1--44 .flo-text-block-1__title{font-family:IvarDisplayCondensed-Light;font-size:1.25rem;letter-spacing:0.04em;word-spacing:0em;line-height:1.5em;text-transform:none;font-weight:normal}@media screen and (max-width:767px){.flo-text-block-1--44 .flo-text-block-1__title{font-size:1.125rem;line-height:1.5em}}.flo-text-block-1--44{color:#000000;background-color:#ffffff}

About Page

Travel Page

Contact Page

@media (max-width:767px){.flo-block--8916{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--8916{margin-top:-3.4375rem;margin-bottom:0rem}}

.flo-text-block-1--839 .flo-text-block-1__title{font-family:IvarDisplayCondensed-Light;font-size:1.25rem;letter-spacing:0.04em;word-spacing:0em;line-height:1.5em;text-transform:none;font-weight:normal}@media screen and (max-width:767px){.flo-text-block-1--839 .flo-text-block-1__title{font-size:1.125rem;line-height:1.5em}}.flo-text-block-1--839{color:#000000;background-color:#ffffff}

Single City Guides

Dynamic Post Layout

@media (max-width:767px){.flo-block--5624{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--5624{margin-top:0rem;margin-bottom:0rem}}

.flo-divider--700 .flo-divider__line{width:80%;background-color:#e5e5e5}.flo-divider--700{background-color:transparent}@media (max-width:767px){.flo-divider--700{height:0.6875rem}.flo-divider--700 .flo-divider__line{width:80%}}@media (min-width:768px){.flo-divider--700{height:0.625rem}.flo-divider--700 .flo-divider__line{width:80%}}

.flo-featured-slideshow-1__slideshow{position:relative;width:100%;max-width:1600px;margin:0 auto}.flo-featured-slideshow-1__top-background{height:84%}.flo-featured-slideshow-1__title, .flo-featured-slideshow-1__arrow{margin-bottom:30px !important}.flo-featured-slideshow-1__arrow{font-size:60%}@media screen and (min-width:48em){.flo-featured-slideshow-1__arrows{top:2.34375rem}}@media screen and (max-width:28.125em){.flo-featured-slideshow-1__top-background{height:100%}@media (max-width:767px){.flo-block--8286{margin-top:1.25rem;margin-bottom:1.875rem}}@media (min-width:768px){.flo-block--8286{margin-top:0rem;margin-bottom:-6.25rem}}

.flo-featured-slideshow-1--584 .flo-featured-slideshow-1__title{font-family:Mallory-Compact-Book;font-size:0.6875rem;letter-spacing:0.27em;word-spacing:0em;line-height:1.4em;text-transform:uppercase;font-weight:normal}@media screen and (max-width:767px){.flo-featured-slideshow-1--584 .flo-featured-slideshow-1__title{font-size:0.6875rem;line-height:1.4em}}.flo-featured-slideshow-1--584 .flo-featured-slideshow-1__slide-pretitle{font-family:Mallory-Compact-Book;font-size:0.6875rem;letter-spacing:0.4em;word-spacing:0em;line-height:2.25em;text-transform:none;font-weight:normal}@media screen and (max-width:767px){.flo-featured-slideshow-1--584 .flo-featured-slideshow-1__slide-pretitle{font-size:0.75rem;line-height:2.25em}}.flo-featured-slideshow-1--584 .flo-featured-slideshow-1__slide-title{font-family:IvarDisplayCondensed-Light;font-size:1.4375rem;letter-spacing:0.04em;word-spacing:0em;line-height:1.3em;text-transform:none;font-weight:normal}@media screen and (max-width:767px){.flo-featured-slideshow-1--584 .flo-featured-slideshow-1__slide-title{font-size:1.25rem;line-height:1.3em}}.flo-featured-slideshow-1--584 .flo-featured-slideshow-1__title, .flo-featured-slideshow-1--584 .flo-featured-slideshow-1__arrow{color:#151515}.flo-featured-slideshow-1--584 .flo-featured-slideshow-1__top-background{background-color:#f1f0ee}.flo-featured-slideshow-1--584, .flo-featured-slideshow-1--584 .flo-featured-slideshow-1__slide-text-wrap{color:#ffffff;background-color:#ffffff}

More Featured Work

Digital Brand Architects

Primer

chloédigital

Dynamic Layouts

.flo-footer-type-c--975 .flo-footer-type-c__left-area-pretitle{font-family:IvarDisplayCondensed-Light;font-size:1.625rem;letter-spacing:0.04em;word-spacing:0em;line-height:1.51em;text-transform:none;font-weight:normal}@media screen and (max-width:767px){.flo-footer-type-c--975 .flo-footer-type-c__left-area-pretitle{font-size:1.5rem;line-height:1.51em}}.flo-footer-type-c--975 .flo-footer-type-c__left-area-title{font-family:RightGrotesk-CompactBold;font-size:5rem;letter-spacing:0.02em;word-spacing:0em;line-height:1.3em;text-transform:uppercase;font-weight:normal}@media screen and (max-width:767px){.flo-footer-type-c--975 .flo-footer-type-c__left-area-title{font-size:2.125rem;line-height:1.3em}}.flo-footer-type-c--975 .flo-footer-type-c__right-area-title{font-family:RightGrotesk-CompactBold;font-size:5rem;letter-spacing:0.02em;word-spacing:0em;line-height:1.3em;text-transform:uppercase;font-weight:normal}@media screen and (max-width:767px){.flo-footer-type-c--975 .flo-footer-type-c__right-area-title{font-size:2.125rem;line-height:1.3em}}.flo-footer-type-c--975 .flo-footer-type-c__right-area-text{font-family:adobe-caslon-pro_normal_400;font-size:1.125rem;letter-spacing:0em;word-spacing:0em;line-height:1.7em;text-transform:none;font-weight:normal}@media screen and (max-width:767px){.flo-footer-type-c--975 .flo-footer-type-c__right-area-text{font-size:0.75rem;line-height:1.7em}}.flo-footer-type-c--975 .flo-footer-type-c__right-area-link-label{font-family:Mallory-Compact-Book;font-size:0.6875rem;letter-spacing:0.5em;word-spacing:0em;line-height:2em;text-transform:none;font-weight:normal}@media screen and (max-width:767px){.flo-footer-type-c--975 .flo-footer-type-c__right-area-link-label{font-size:0.75rem;line-height:2em}}.flo-footer-type-c--975 .flo-footer-type-c__right-area-link{font-family:RightGrotesk-CompactBold;font-size:0.625rem;letter-spacing:0.19em;word-spacing:0em;line-height:1.8em;text-transform:uppercase;font-weight:normal}@media screen and (max-width:767px){.flo-footer-type-c--975 .flo-footer-type-c__right-area-link{font-size:0.625rem;line-height:1.8em}}.flo-footer-type-c--975 .flo-footer-type-c__copyright-notice{font-family:Mallory-Compact-Book;font-size:0.6875rem;letter-spacing:0.4em;word-spacing:0em;line-height:2.25em;text-transform:none;font-weight:normal}@media screen and (max-width:767px){.flo-footer-type-c--975 .flo-footer-type-c__copyright-notice{font-size:0.75rem;line-height:2.25em}}.flo-footer-type-c--975{color:#c2c2c2;background-color:#171b1a}.flo-footer-type-c--975 .flo-footer-type-c__left-area-image-wrap{color:#ffffff}

project

Client

Happily Grey

Category

Fashion and Lifestyle

Project Type

Full Website Redesign including post layout blocks

Happily Grey

Happily Grey

Yannis Yannakopoulos

Overview

About Page

Travel Page

Contact Page

Single City Guides

Dynamic Post Layout

More Featured Work

Digital Brand Architects

Primer

chloédigital

Dynamic Layouts