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

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

–

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

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

@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}}

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

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

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

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

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

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

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

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

About Page

Travel Page

Contact Page

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

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

Single City Guides

Dynamic Post Layout

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

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

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