<header role="banner">
<div class="topbar">
<div class="container">
<div class="topbar__inner">
<div class="topbar__logo">
<img class="logo" src="../../dist/images/logo.svg">
</div>
<div class="topbar__navigation">
<div class="topbar__navigation-flex">
<div class="topbar__navigation-secondary">
More at <a href="https://github.com/Novicell/novicell-pattern-library" title="github.com/Novicell/novicell-pattern-library" target="" class="link " property="url">github.com/Novicell/novicell-pattern-library</a>
</div>
<div class="topbar__navigation-primary">
<nav class="nav-main" role="navigation" vocab="http://schema.org/" typeof="SiteNavigationElement">
<ul class="nav-main-list">
<li class="nav-main-list__item ">
<a href="#" title="Home" target="" class="link " property="url">Home</a>
</li>
<li class="nav-main-list__item nav-main-list__item--active">
<a href="#" title="Get started" target="" class="link true " property="url">Get started</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
</ul>
</nav>
<div class="topbar__navigation-search">
<input class="input " type="search" name="search-input" id="search-id" placeholder="Search" />
</div>
</div>
</div>
</div>
<div class="nav-main-mobile">
<button class="mobile-navigation-button hamburger hamburger--squeeze" id="js-mobile-navigation-button" type="button">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
<span class="hamburger-label js-hamburger-label" data-menu-text="Menu" data-close-text="Close">Menu</span>
</button>
</div>
</div>
</div>
</div>
</header>
<div class="overlapping-section-wrapper">
<div class="container-fluid">
<section class="overlap-section overlap-section--first">
<div class="row">
<div class="carousel col-xs-12 col-md-5">
<div class="carousel__header-container overlap-item overlap-item--above overlap-item-sm--bottom overlap-item-md--bottom overlap-item-lg--bottom overlap-item-xl--bottom">
<h2 class="carousel__header">Explore our large catalogue</h2>
</div>
<div class="carousel__image--wrapper">
<div class="carousel__image">
<img data-src="https://tinyurl.com/y5r4dyyu" alt="" class="image lazyload "> </div>
</div>
</div>
<div class="carousel__image--wide carousel col-xs-12 col-md-7">
<div class="carousel--wide overlap-item overlap-item--above overlap-item-sm--bottom overlap-item-md--bottom overlap-item-lg--bottom overlap-item-xl--bottom">
<img data-src="https://tinyurl.com/y2ks89kq" alt="" class="image lazyload carousel--wide__image "></div>
</div>
</div>
</section>
<section class="overlap-section overlap-section--second">
<div class="row overlap-section--second__row">
<div class="collection-list col-xs-12">
<div class="collection-list__item col-xs-6 col-sm-4">
<img data-src="https://tinyurl.com/y6agnsbj" alt="" class="image lazyload collection-list__image ">
<h3 class="collection-list__item--header">Handbag</h3>
</div>
<div class="collection-list__item col-xs-6 col-sm-4 overlap-item overlap-item--above overlap-item-sm--bottom overlap-item-md--bottom overlap-item-lg--bottom overlap-item-xl--bottom">
<img data-src="https://tinyurl.com/y2qnf5td" alt="" class="image lazyload collection-list__image ">
<h3 class="collection-list__item--header">Hat</h3>
</div>
<div class="collection-list__item col-xs-6 col-sm-4">
<img data-src="https://tinyurl.com/y4sy3tjt" alt="" class="image lazyload collection-list__image ">
<h3 class="collection-list__item--header">Bag</h3>
</div>
<div class="collection-list__item col-xs-6 col-sm-4">
<img data-src="https://tinyurl.com/yyfzqflh" alt="" class="image lazyload collection-list__image ">
<h3 class="collection-list__item--header">Handbag</h3>
</div>
<div class="collection-list__item col-xs-6 col-sm-4 overlap-item overlap-item--above overlap-item-sm--bottom overlap-item-md--bottom overlap-item-lg--bottom overlap-item-xl--bottom">
<img data-src="https://tinyurl.com/yyv8yn98" alt="" class="image lazyload collection-list__image ">
<h3 class="collection-list__item--header">Hat</h3>
</div>
<div class="collection-list__item col-xs-6 col-sm-4">
<img data-src="https://tinyurl.com/y6agnsbj" alt="" class="image lazyload collection-list__image ">
<h3 class="collection-list__item--header">Bag</h3>
</div>
</div>
</div>
</section>
<section class="overlap-section overlap-section--third">
<div class="row overlap-section--third__row">
<div class="overlap-section--third__image-wrapper col-xs-12 col-sm-6 overlap-item overlap-item--above overlap-item-sm--right overlap-item-md--right overlap-item-lg--right overlap-item-xl--right">
<img src="https://maradji.com/wp-content/uploads/2019/01/low-l2a2710-copie-1280x853.jpg" class="section-third__left-image" alt="">
</div>
<div class="overlap-section--third__right-section col-xs-12 col-sm-6 overlap-item overlap-item--below overlap-item-sm--bottom overlap-item-md--bottom overlap-item-lg--bottom overlap-item-xl--bottom">
<h1 class="carousel__header">Sous le soleil exactement</h1>
<img src="http://tinyurl.com/yydhtttr" alt="" class="section-third__right-image">
</div>
</div>
</section>
<section class="overlap-section overlap-section--fourth">
<div class="row overlap-section--fourth_row">
<div class="col-xs-12 overlap-section--fourth__wrapper">
<div class="overlap-section--fourth__paragraph">
<h2 class="heading heading--column overlap-section--fourth__heading">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<p class="paragraph ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi tempore, porro doloribus ea consequatur itaque natus sunt eos autem.</p>
</div>
</div>
<div class="col-xs-6">
<div class="fourth-section--image-wrapper">
<img data-src="https://tinyurl.com/y3cfngrh" alt="" class="image lazyload fourth-section--image-wrapper__image fourth-section--image-wrapper__image--left "> </div>
</div>
<div class="col-xs-6">
<div class="fourth-section--image-wrapper overlap-item overlap-item-- overlap-item-sm--bottom overlap-item-md--bottom overlap-item-lg--bottom overlap-item-xl--bottom">
<img data-src="https://tinyurl.com/y47ohfug" alt="" class="image lazyload fourth-section--image-wrapper__image fourth-section--image-wrapper__image--right "></div>
</div>
</div>
</section>
<section class="overlap-section overlap-section--fifth">
<div class="row overlap-section--fifth_row">
<div class="col-xs-12 overlap-section--fifth__wrapper">
<div class="fifth-section__image-wrapper">
<img data-src="https://tinyurl.com/y5yofr54" alt="" class="image lazyload fifth-section__image-wrapper__image "> </div>
</div>
</div>
</section>
<section class="overlap-section overlap-section--fourth">
<div class="row overlap-section--fourth_row">
<div class="col-xs-6">
<div class="fourth-section--image-wrapper overlap-item overlap-item-- overlap-item-sm--bottom overlap-item-md--bottom overlap-item-lg--bottom overlap-item-xl--bottom">
<img data-src="https://tinyurl.com/y6c2rtne" alt="" class="image lazyload fourth-section--image-wrapper__image fourth-section--image-wrapper__image--left "></div>
</div>
<div class="col-xs-6">
<div class="fourth-section--image-wrapper">
<img data-src="https://tinyurl.com/y2z3d4av" alt="" class="image lazyload fourth-section--image-wrapper__image fourth-section--image-wrapper__image--right "> </div>
</div>
</div>
</section>
</div>
</div>
<footer role="contentinfo" class="footer">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<h2 class="heading heading--footer ">Footer header</h2>
<p class="paragraph ">Novicell Aarhus<br>Søren Nymarks Vej 6<br>8270 Højbjerg,<br>Denmark</p>
<ul class="social-media-list">
<li class="social-media-list__item">
<div class="social-link social-link--twitter ">
<a href="#" title="Twitter link" target="_blank">
<svg class="social-link__icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-twitter"></use>
</svg>
</a>
</div>
</li>
<li class="social-media-list__item">
<div class="social-link social-link--google-plus ">
<a href="#" title="Google Plus link" target="_blank">
<svg class="social-link__icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-google-plus"></use>
</svg>
</a>
</div>
</li>
<li class="social-media-list__item">
<div class="social-link social-link--facebook ">
<a href="#" title="Facebook link" target="_blank">
<svg class="social-link__icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-facebook"></use>
</svg>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<h2 class="heading heading--footer ">Footer header</h2>
<ul class="link-list ">
<li class="link-list__item">
<a href="#" title="Link title 1" target="" class="link " property="url">Link text 1</a>
</li>
<li class="link-list__item">
<a href="#" title="Link title 2" target="" class="link " property="url">Link text 2</a>
</li>
<li class="link-list__item">
<a href="#" title="Link title 3" target="" class="link " property="url">Link text 3</a>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4">
<h2 class="heading heading--footer ">Send us your inquiry</h2>
<div class="form-field ">
<label class="label " for="">
Text label
</label>
<input class="input " type="text" name="text-input" id="text-id" placeholder="Insert text" />
</div>
<div class="form-field ">
<label class="label " for="">
Email label
</label>
<input class="input " type="email" name="email-input" id="email-id" placeholder="Insert e-mail" />
</div>
<div class="form-field ">
<label class="label " for="">
Textarea label
</label>
<textarea class="textarea " name="text-input" id="text-id" placeholder="Insert text"></textarea>
</div>
<button type="button" class="button button--gradient">
gradient
</button>
</div>
</div>
</div>
</footer>
{{ render '@header' }}
<div class="overlapping-section-wrapper">
<div class="container-fluid">
<section class="overlap-section overlap-section--first">
<div class="row">
<div class="carousel col-xs-12 col-md-5" >
{{#embed "@overlap-item" class="carousel__header-container" z-index="above" direction="bottom"}}
{{#content "overlap-item__content"}}
<h2 class="carousel__header">Explore our large catalogue</h2>
{{/content}}
{{/embed}}
<div class="carousel__image--wrapper">
<div class="carousel__image">
{{> @image image1 }}
</div>
</div>
</div>
<div class="carousel__image--wide carousel col-xs-12 col-md-7">
{{#embed "@overlap-item" class="carousel--wide" z-index="above" direction="bottom"}}
{{#content "overlap-item__content"}}
{{> @image image2 modifier="carousel--wide__image"}}
{{/content}}
{{/embed}}
</div>
</div>
</section>
<section class="overlap-section overlap-section--second">
<div class="row overlap-section--second__row">
<div class="collection-list col-xs-12" >
<div class="collection-list__item col-xs-6 col-sm-4">
{{> @image image3 modifier="collection-list__image"}}
<h3 class="collection-list__item--header">Handbag</h3>
</div>
{{#embed "@overlap-item" class="collection-list__item col-xs-6 col-sm-4" z-index="above" direction="bottom"}}
{{#content "overlap-item__content"}}
{{> @image image4 modifier="collection-list__image"}}
<h3 class="collection-list__item--header">Hat</h3>
{{/content}}
{{/embed}}
<div class="collection-list__item col-xs-6 col-sm-4">
{{> @image image5 modifier="collection-list__image"}}
<h3 class="collection-list__item--header">Bag</h3>
</div>
<div class="collection-list__item col-xs-6 col-sm-4">
{{> @image image6 modifier="collection-list__image"}}
<h3 class="collection-list__item--header">Handbag</h3>
</div>
{{#embed "@overlap-item" class="collection-list__item col-xs-6 col-sm-4" z-index="above" direction="bottom"}}
{{#content "overlap-item__content"}}
{{> @image image7 modifier="collection-list__image"}}
<h3 class="collection-list__item--header">Hat</h3>
{{/content}}
{{/embed}}
<div class="collection-list__item col-xs-6 col-sm-4">
{{> @image image3 modifier="collection-list__image"}}
<h3 class="collection-list__item--header">Bag</h3>
</div>
</div>
</div>
</section>
<section class="overlap-section overlap-section--third">
<div class="row overlap-section--third__row">
{{#embed "@overlap-item" class="overlap-section--third__image-wrapper col-xs-12 col-sm-6" z-index="above" direction="right"}}
{{#content "overlap-item__content"}}
<img src="https://maradji.com/wp-content/uploads/2019/01/low-l2a2710-copie-1280x853.jpg" class="section-third__left-image" alt="">
{{/content}}
{{/embed}}
{{#embed "@overlap-item" class="overlap-section--third__right-section col-xs-12 col-sm-6" z-index="below" direction="bottom"}}
{{#content "overlap-item__content"}}
<h1 class="carousel__header">Sous le soleil exactement</h1>
<img src="http://tinyurl.com/yydhtttr" alt="" class="section-third__right-image">
{{/content}}
{{/embed}}
</div>
</section>
<section class="overlap-section overlap-section--fourth">
<div class="row overlap-section--fourth_row">
<div class="col-xs-12 overlap-section--fourth__wrapper">
<div class="overlap-section--fourth__paragraph">
{{> @heading--column class="overlap-section--fourth__heading" text="Lorem ipsum dolor sit amet consectetur adipisicing elit."}}
{{> @paragraph text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi tempore, porro doloribus ea consequatur itaque natus sunt eos autem."}}
</div>
</div>
<div class="col-xs-6">
<div class="fourth-section--image-wrapper">
{{> @image image8 modifier="fourth-section--image-wrapper__image fourth-section--image-wrapper__image--left"}}
</div>
</div>
<div class="col-xs-6">
{{#embed "@overlap-item" class="fourth-section--image-wrapper" direction="bottom"}}
{{#content "overlap-item__content"}}
{{> @image image9 modifier="fourth-section--image-wrapper__image fourth-section--image-wrapper__image--right"}}
{{/content}}
{{/embed}}
</div>
</div>
</section>
<section class="overlap-section overlap-section--fifth">
<div class="row overlap-section--fifth_row">
<div class="col-xs-12 overlap-section--fifth__wrapper">
<div class="fifth-section__image-wrapper">
{{> @image image10 modifier="fifth-section__image-wrapper__image"}}
</div>
</div>
</div>
</section>
<section class="overlap-section overlap-section--fourth">
<div class="row overlap-section--fourth_row">
<div class="col-xs-6">
{{#embed "@overlap-item" class="fourth-section--image-wrapper" direction="bottom"}}
{{#content "overlap-item__content"}}
{{> @image image11 modifier="fourth-section--image-wrapper__image fourth-section--image-wrapper__image--left"}}
{{/content}}
{{/embed}}
</div>
<div class="col-xs-6">
<div class="fourth-section--image-wrapper">
{{> @image image12 modifier="fourth-section--image-wrapper__image fourth-section--image-wrapper__image--right"}}
</div>
</div>
</div>
</section>
</div>
</div>
{{ render '@footer' }}
{
"image1": {
"url": "https://tinyurl.com/y5r4dyyu"
},
"image2": {
"url": "https://tinyurl.com/y2ks89kq"
},
"image3": {
"url": "https://tinyurl.com/y6agnsbj"
},
"image4": {
"url": "https://tinyurl.com/y2qnf5td"
},
"image5": {
"url": "https://tinyurl.com/y4sy3tjt"
},
"image6": {
"url": "https://tinyurl.com/yyfzqflh"
},
"image7": {
"url": "https://tinyurl.com/yyv8yn98"
},
"image8": {
"url": "https://tinyurl.com/y3cfngrh"
},
"image9": {
"url": "https://tinyurl.com/y47ohfug"
},
"image10": {
"url": "https://tinyurl.com/y5yofr54"
},
"image11": {
"url": "https://tinyurl.com/y6c2rtne"
},
"image12": {
"url": "https://tinyurl.com/y2z3d4av"
},
"textbox1": {
"heading": {
"text": "Overlapping"
},
"textBoxContent": "This element will overlap whatever is to the right of it. By using the same modifiers on sections, you can overlap whole sections over other sections, and then overlap blocks and elements within that same section. this text-block appears above the picture to the right as it also has the modifier overlap-item--above as well. If the screen is sufficiently small, it will not overlap anything"
},
"textbox2": {
"heading": {
"text": "Overlapping 1"
},
"textBoxContent": "This text will go below the image to the right or below it if the screen is small. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti vero hic quidem quaerat quia ea obcaecati ad quisquam rem, tempora veniam voluptatum officiis eius doloribus at magni cumque dolore nemo?"
},
"textbox3": {
"heading": {
"text": "Overlapping 2"
},
"textBoxContent": "This text-box will always show above, as it's part of the overlapping div"
},
"textbox4": {
"heading": {
"text": "Overlapping 3"
},
"textBoxContent": "Note how difficult this is to read. Overlapping has to be considered with the background-color to font color contrast in mind over readability"
}
}
.overlapping-section-wrapper {
width: 100vw;
font-size: 0.8em;
@media(--viewport-sm-max) {
font-size: 0.5em;
}
}
.overlap-section {
margin: 4vw;
&--first {
max-width: 1600px;
margin: 0 auto;
}
&--second {
/* Position relative, otherwise the :before element with the BG-color will be relative to the root wrapper */
position: relative;
margin: 0;
&__row {
margin: 0 auto;
max-width: 1600px;
}
/* This pseudoelement adds bg-color to the second section */
&:before {
display: block;
position: absolute;
z-index: -1;
content: "";
height: 85%;
width: 100vw;
top: 0;
left: 0;
background-color: #F9F5F1;
}
}
&--third {
margin: 0 auto;
margin-top: 1vw;
margin-bottom: 10vw;
&__row {
max-width: 1600px;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
&__image-wrapper {
width: auto;
overflow: hidden;
height: 40.61111vw;
}
&__right-section {
position: relative;
background-color: #FBF6F2;
width: 50%;
height: 39vw;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
font-size: 1.7em;
text-align: center;
line-height: 1.4;
letter-spacing: 4px;
}
}
&--fourth {
margin: 0;
position: relative;
&__wrapper {
align-items: center;
}
&__heading {
color: black;
font-size: 2em;
}
&__paragraph {
width: 40%;
color: black;
font-size: 1.3em;
}
/* This pseudoelement adds bg-color to the fourth section*/
&:before {
display: block;
position: absolute;
z-index: -1;
content: "";
height: 56%;
width: 100vw;
top: 75%;
left: 0;
background-color: #F9F5F1;
overflow: hidden;
}
}
&--fifth {
margin: 0;
}
&--sixth {
margin: 0;
position: relative;
}
}
/* Maybe unnecesary? */
.container-fluid {
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
.carousel {
width: calc(100% / 2 - 0vw - 1px/2);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
flex-wrap: wrap;
&__header {
width: 60%;
font-size: 2.5em;
&-container {
display: flex;
justify-content: center;
align-items: center;
}
}
&__image {
&--wrapper {
height: 550px;
background-color: #F4F4F4;
width: 65%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
@media (--viewport-xs-max) {
width: 80%;
height: 400px;
}
}
}
&--wide {
height: auto;
width: 100%;
&__image {
object-fit: cover;
max-height: 900px;
width: 100%;
@media(--viewport-md-min) {
width: 90%
}
}
}
}
.collection-list {
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: center;
@media(--viewport-sm-min) {
padding: 50px;
}
&__item {
margin-top: 9vw;
margin-bottom: 7vw;
width: calc(100% / 3);
height: 32.34722vw;
font-size: 1.9em;
padding: 1.5vw;
&--header {
margin-top: 0;
}
}
&__image {
object-fit: cover;
height: 100%;
width: 100%;
max-width: 500px;
}
}
.section-third__left-image {
width: 100vw;
height: auto;
@media(--viewport-sm-min) {
position: relative;
width: auto;
height: 100%;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
}
.section-third__right-image {
position: absolute;
opacity: 0.4;
top: 20%;
left: 20%;
width: 55vw;
height: 25vw;
@media(--viewport-sm-min) {
width: 25vw;
}
}
.fourth-section--image-wrapper {
width: auto;
height: 43vw;
object-fit: contain;
position: relative;
margin-top: 10%;
margin-bottom: 20%;
&__image {
height: 100%;
width: auto;
@media(--viewport-sm-min) {
position: absolute;
&--right {
top: 0;
left: 0;
}
&--left {
top: 0;
right: 0;
}
}
}
}
.fifth-section__image-wrapper {
object-fit: cover;
width: 100vw;
height: 53vw;
overflow: hidden;
&__image {
height: 100%;
}
}
There are no notes for this item.