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

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

–

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

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

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

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

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

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

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

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

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

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

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

About Page

Travel Page

Contact Page

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

Single City Guides

Dynamic Post Layout

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

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

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