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--3095{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--3095{margin-top:0rem;margin-bottom:0rem}}

.flo-block-slideshow-3--12 .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--12 .flo-block-slideshow-3__counter{font-size:0.5rem;line-height:2.25em}}.flo-block-slideshow-3--12 .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--12 .flo-block-slideshow-3__subtitle{font-size:0.5rem;line-height:2.25em}}.flo-block-slideshow-3--12 .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--12 .flo-block-slideshow-3__title{font-size:2.125rem;line-height:1.3em}}

–

@media (max-width:767px){.flo-block--9299 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--9299 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--9947{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--9947{margin-top:-4.375rem;margin-bottom:0rem}}

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

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

@media (max-width:767px){.flo-block--6216 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--6216 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--5496 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}@media (min-width:768px){.flo-block--5496 flo-block--dev-block{margin-top:0rem;margin-bottom:0rem}}

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

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

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

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

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

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

.flo-text-block-1--412 .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--412 .flo-text-block-1__title{font-size:1.125rem;line-height:1.5em}}.flo-text-block-1--412{color:#000000;background-color:#ffffff}

About Page

Travel Page

Contact Page

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

.flo-text-block-1--294 .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--294 .flo-text-block-1__title{font-size:1.125rem;line-height:1.5em}}.flo-text-block-1--294{color:#000000;background-color:#ffffff}

Single City Guides

Dynamic Post Layout

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

.flo-divider--73 .flo-divider__line{width:80%;background-color:#e5e5e5}.flo-divider--73{background-color:transparent}@media (max-width:767px){.flo-divider--73{height:0.6875rem}.flo-divider--73 .flo-divider__line{width:80%}}@media (min-width:768px){.flo-divider--73{height:0.625rem}.flo-divider--73 .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--5937{margin-top:1.25rem;margin-bottom:1.875rem}}@media (min-width:768px){.flo-block--5937{margin-top:0rem;margin-bottom:-6.25rem}}

.flo-featured-slideshow-1--691 .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--691 .flo-featured-slideshow-1__title{font-size:0.6875rem;line-height:1.4em}}.flo-featured-slideshow-1--691 .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--691 .flo-featured-slideshow-1__slide-pretitle{font-size:0.75rem;line-height:2.25em}}.flo-featured-slideshow-1--691 .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--691 .flo-featured-slideshow-1__slide-title{font-size:1.25rem;line-height:1.3em}}.flo-featured-slideshow-1--691 .flo-featured-slideshow-1__title, .flo-featured-slideshow-1--691 .flo-featured-slideshow-1__arrow{color:#151515}.flo-featured-slideshow-1--691 .flo-featured-slideshow-1__top-background{background-color:#f1f0ee}.flo-featured-slideshow-1--691, .flo-featured-slideshow-1--691 .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--902 .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--902 .flo-footer-type-c__left-area-pretitle{font-size:1.5rem;line-height:1.51em}}.flo-footer-type-c--902 .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--902 .flo-footer-type-c__left-area-title{font-size:2.125rem;line-height:1.3em}}.flo-footer-type-c--902 .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--902 .flo-footer-type-c__right-area-title{font-size:2.125rem;line-height:1.3em}}.flo-footer-type-c--902 .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--902 .flo-footer-type-c__right-area-text{font-size:0.75rem;line-height:1.7em}}.flo-footer-type-c--902 .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--902 .flo-footer-type-c__right-area-link-label{font-size:0.75rem;line-height:2em}}.flo-footer-type-c--902 .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--902 .flo-footer-type-c__right-area-link{font-size:0.625rem;line-height:1.8em}}.flo-footer-type-c--902 .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--902 .flo-footer-type-c__copyright-notice{font-size:0.75rem;line-height:2.25em}}.flo-footer-type-c--902{color:#c2c2c2;background-color:#171b1a}.flo-footer-type-c--902 .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