<div class="page page--landing">
<div class="page__content">
<header class="o-header" data-header>
<div class="o-header__side-element">
<img src="../../img/logo.svg" alt="L'illustré logo" class="o-header__logo">
</div>
<nav class="m-nav" data-nav>
<ul class="m-nav__menu">
<li class="m-nav__item is-current">
<a class="m-nav__link" href="/">
<svg class="a-icon" role="img" title="Accueil">
<use xlink:href="#home" />
</svg>
<p class="m-nav__item-title">Accueil</p>
</a>
</li>
<li class="m-nav__item">
<a class="m-nav__link" href="#">
<svg class="a-icon" role="img" title="Reportages">
<use xlink:href="#article" />
</svg>
<p class="m-nav__item-title">Reportages</p>
</a>
</li>
<li class="m-nav__item">
<a class="m-nav__link" href="#">
<svg class="a-icon" role="img" title="Portraits">
<use xlink:href="#portrait" />
</svg>
<p class="m-nav__item-title">Portraits</p>
</a>
</li>
<li class="m-nav__item">
<a class="m-nav__link" href="#">
<svg class="a-icon" role="img" title="Vidéos">
<use xlink:href="#video" />
</svg>
<p class="m-nav__item-title">Vidéos</p>
</a>
</li>
<li class="m-nav__item">
<a class="m-nav__link" href="#">
<svg class="a-icon" role="img" title="Photos">
<use xlink:href="#photo" />
</svg>
<p class="m-nav__item-title">Photos</p>
</a>
</li>
</ul>
</nav>
<div class="o-header__side-element o-header__side-element--right">
<div class="o-header__side-element_content">
<a class="o-header__subscribe" href="#">S'abonner</a>
<a href="" class="o-header__search" rel="search">
<svg class="a-icon" role="img" title="Recherche">
<use xlink:href="#search" />
</svg>
<svg class="a-icon" role="img" title="Close">
<use xlink:href="#close" />
</svg>
</a>
</div>
</div>
<div class="o-search-bar " data-search>
<div class="o-search-bar__wrapper">
<div class="grid-wrapper">
<div class="grid-container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<form action="#" class="o-search-bar__form">
<p class="o-search-bar__form-label">Rechercher sur L’illustré</p>
<div class="o-search-bar__input-wrapper">
<input class="o-search-bar__input" id="input--search" type="text" required>
<label for="input--search" class="o-search-bar__input-label">Entrer un mot clé ou un auteur</label>
<label for="input--search" class="o-search-bar__input-label o-search-bar__input-label--mobile">Entrer un mot clé</label>
<svg class="a-icon a-icon--primary" role="img" title="search">
<use xlink:href="#search" />
</svg>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="o-search-bar__backdrop"></div>
</div>
</header>
<article class="o-banner " data-banner>
<a href="" class="o-banner__link"></a>
<img src="../../img/banner1.png" class="o-banner__image">
<div class="o-banner__content">
<div class="o-banner__photo-credit">© Marc Wallberg</div>
<div class="o-banner__wrapper">
<div class="o-banner__container">
<div class="o-banner__title-row">
<div class="o-banner__title-wrap">
<h1 class="u-t-title-page">Comment protéger le bonheur des enfants</h1>
</div>
</div>
<div class="row o-banner__meta">
<div class="col-xs-8">
<a href="#" class="o-banner__category">Reportages</a>
</div>
<div class="col-xs">
<p class="o-banner__author u-t-size--15">Par <a href="" class="o-banner__author-link">Lise Bailat</a></p>
</div>
</div>
</div>
</div>
</div>
</article>
<div class="page__inner">
<section class="o-article-list ">
<div class="o-article-list__wrap">
<div class="o-article-list__cont">
<div class="o-article-list__inner">
<article class="m-preview-article o-article-list__item col-md-6" data-preview-article>
<a href="#" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
<div class="m-preview-article__image-wrapper">
<img src="../../img/article-1.jpg" class="m-preview-article__image">
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">Les trois Romandes de Miss Suisse 2018</h1>
<p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…</p>
</a>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</div>
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</article>
<article class="m-preview-article m-preview-article--media o-article-list__item col-md-6" data-preview-article>
<a href="#" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
<div class="m-preview-article__image-wrapper">
<img src="../../img/article-2.jpg" class="m-preview-article__image">
<div class="m-preview-article__media-cta">
<svg class="a-icon a-icon--negative" role="img" title="L'interview exclusif du nouveau lauréat 2018 du guide Michelin">
<use xlink:href="#gallery" />
</svg>
</div>
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">L'interview exclusif du nouveau lauréat 2018 du guide Michelin</h1>
<p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans expositions sont organisées en l'honneur du peintre…</p>
</a>
<a href="#" class="m-preview-article__category-link">Reportages</a>
</div>
</div>
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-preview-article__category-link">Reportages</a>
</div>
</article>
<article class="m-preview-article o-article-list__item col-md-8" data-preview-article>
<a href="#" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
<div class="m-preview-article__image-wrapper">
<img src="../../img/article-3.jpg" class="m-preview-article__image">
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">Les trois Romandes de Miss Suisse 2018</h1>
<p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…</p>
</a>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</div>
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</article>
<article class="m-preview-article m-preview-article--media m-preview-article--excerpt-on-mobile o-article-list__item col-md-4" data-preview-article>
<a href="#" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
<div class="m-preview-article__image-wrapper">
<img src="../../img/banner4.png" class="m-preview-article__image">
<div class="m-preview-article__media-cta">
<svg class="a-gallery-number" width="55" height="55" viewBox="0 0 55 55" xmlns="http://www.w3.org/2000/svg" data-gallery-number>
<g fill="#FFF" fill-rule="evenodd">
<path fill-rule="nonzero" d="M11.124 36v2H5V8h36v6.074h-2V10H7v26z"/>
<path class="frame" d="M14 47V17h36v30H14zm2-2h32V19H16v26z" fill-rule="nonzero"/>
<text class="text" x="22" y="37">10</text>
</g>
</svg>
</div>
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">L’interview exclusif d’Adarsh Alem</h1>
<p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans expositions sont organisées en l'honneur du peintre…</p>
</a>
<a href="#" class="m-preview-article__category-link">Reportages</a>
</div>
</div>
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-preview-article__category-link">Reportages</a>
</div>
</article>
<article class="m-highlight-article" data-highlight-article>
<div class="m-highlight-article__inner">
<a href="#" class="m-highlight-article__link"></a>
<a class="m-highlight-article__all-link" href="#"><span>Toutes les galeries</span> <svg class="a-icon a-icon--primary" role="img" title="Découvrez les meilleures restaurant en photographies">
<use xlink:href="#arrow-left" />
</svg>
</a>
<div class="m-highlight-article__image-wrap">
<div class="m-highlight-article__image-inner">
<img src="../../img/article-highlight.jpg" class="m-highlight-article__image">
</div>
<div class="m-highlight-article__media-cta">
<svg class="a-gallery-number" width="55" height="55" viewBox="0 0 55 55" xmlns="http://www.w3.org/2000/svg" data-gallery-number>
<g fill="#FFF" fill-rule="evenodd">
<path fill-rule="nonzero" d="M11.124 36v2H5V8h36v6.074h-2V10H7v26z"/>
<path class="frame" d="M14 47V17h36v30H14zm2-2h32V19H16v26z" fill-rule="nonzero"/>
<text class="text" x="22" y="37">10</text>
</g>
</svg>
</div>
</div>
<div class="m-highlight-article__content-wrap">
<div class="m-highlight-article__title-wrap">
<a href="#" class="m-highlight-article__title-link">
<h1 class="m-highlight-article__title">Découvrez les meilleures restaurant en photographies</h1>
</a>
<hr class="m-highlight-article__separator">
<div class="m-highlight-article__meta">
<p class="m-highlight-article__date-author-wrap"><span class="m-highlight-article__date">2 mars 2018</span> <a class="m-highlight-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-highlight-article__category-link">Photos</a>
</div>
</div>
<a href="#" class="m-highlight-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…</a>
<div class="m-highlight-article__btn-wrap"><a href="#" class="a-button ">
<span>Découvrir</span>
</a>
</div>
</div>
<hr class="m-highlight-article__separator--mobile">
</div>
</article>
<article class="m-preview-article m-preview-article--media o-article-list__item col-md-4" data-preview-article>
<a href="#" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
<div class="m-preview-article__image-wrapper">
<img src="../../img/preview-article1.png" class="m-preview-article__image">
<div class="m-preview-article__media-cta">
<svg class="a-gallery-number" width="55" height="55" viewBox="0 0 55 55" xmlns="http://www.w3.org/2000/svg" data-gallery-number>
<g fill="#FFF" fill-rule="evenodd">
<path fill-rule="nonzero" d="M11.124 36v2H5V8h36v6.074h-2V10H7v26z"/>
<path class="frame" d="M14 47V17h36v30H14zm2-2h32V19H16v26z" fill-rule="nonzero"/>
<text class="text" x="22" y="37">33</text>
</g>
</svg>
</div>
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">Les trois Romandes de Miss Suisse 2018</h1>
<p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…</p>
</a>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</div>
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-preview-article__category-link">Photos</a>
</div>
</article>
<article class="m-preview-article m-preview-article--media o-article-list__item col-md-8" data-preview-article>
<a href="#" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
<div class="m-preview-article__image-wrapper">
<img src="../../img/banner4.png" class="m-preview-article__image">
<div class="m-preview-article__media-cta">
<svg class="a-icon a-icon--negative" role="img" title="L’interview exclusif d’Adarsh Alem">
<use xlink:href="#video" />
</svg>
</div>
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">L’interview exclusif d’Adarsh Alem</h1>
<p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans expositions sont organisées en l'honneur du peintre…</p>
</a>
<a href="#" class="m-preview-article__category-link">Reportages</a>
</div>
</div>
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-preview-article__category-link">Reportages</a>
</div>
</article>
</div>
</div>
</div>
</section>
<section class="o-newsletter ">
<h2 class="o-newsletter__title">
<span class="o-newsletter__title--short">Newsletter L'Illustré</span>
<span class="o-newsletter__title--full">Recevoir la newsletter L'Illustré</span>
</h2>
<div class="o-newsletter__form-wrap">
<form action="#" class="o-newsletter__form">
<div class="o-newsletter__form-inner">
<div class="o-newsletter__input-wrap">
<div class="o-newsletter__input">
<svg class="a-icon" role="img" title="e-mail">
<use xlink:href="#email" />
</svg>
<input class="o-newsletter__input-field" id="newsletter_input_email" name="newsletter-email" type="text" required>
<label for="newsletter_input_email" class="o-newsletter__input-label">Votre e-mail</label>
</div>
</div>
<div class="o-newsletter__btn">
<button type="submit" class="a-button ">
<span>S'inscrire</span>
</button>
</div>
</div>
</form>
</div>
</section>
<section class="o-discover-section">
<a href="#" class="o-discover-section__link-wrapper">
<img class="o-discover-section__background" src="../../img/discover-section-bg.jpg" alt="Background image">
<div class="o-discover-section__content-wrapper">
<h2 class="o-discover-section__category">
<span style="font-size: 1,em">Photos</span>
</h2>
<h3 class="o-discover-section__title ">Redécouvrez votre
Suisse en images</h3>
<button type="" class="a-button " >
<span>Voir Les Galeries</span>
</button>
</div>
</a>
</section>
</div>
<footer class="o-footer">
<div class="o-footer__top">
<div class="o-footer__wrapper">
<div class="o-footer__container">
<div class="o-footer__top_wrap">
<img src="../../img/logo.svg" alt="L'illustré logo" class="o-footer__logo">
<nav class="o-footer__menu">
<a href="#" class="o-footer__menu_item"><span>Abonnements</span></a>
<a href="#" class="o-footer__menu_item"><span>Publicité</span></a>
<a href="#" class="o-footer__menu_item"><span>Services</span></a>
<a href="#" class="o-footer__menu_item"><span>À propos</span></a>
</nav>
</div>
</div>
</div>
</div>
<div class="o-footer__bottom">
<div class="o-footer__wrapper">
<div class="o-footer__container">
<div class="o-footer__bottom_wrap">
<nav class="o-footer__social">
<div class="o-footer__social_wrap">
<a href="#" class="o-footer__social_item">
<svg class="a-icon" role="img" title="Facebook">
<use xlink:href="#facebook" />
</svg>
</a>
<a href="#" class="o-footer__social_item">
<svg class="a-icon" role="img" title="Twitter">
<use xlink:href="#twitter" />
</svg>
</a>
<a href="#" class="o-footer__social_item">
<svg class="a-icon" role="img" title="instagram">
<use xlink:href="#instagram" />
</svg>
</a>
<a href="#" class="o-footer__social_item">
<svg class="a-icon" role="img" title="YouTube">
<use xlink:href="#youtube" />
</svg>
</a>
</div>
</nav>
<nav class="o-footer__legal">
<a href="#" class="o-footer__legal_item">Mentions légales</a>
<a href="#" class="o-footer__legal_item">Impressum</a>
</nav>
<div class="o-footer__copyright">© 2018 Ringier Axel Springer Suisse SA</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
<div class="page page--landing">
<div class="page__content">
{{> '@o-header' header }}
{{> '@o-banner' banner }}
<div class="page__inner">
{{> '@o-article-list' articlelist }}
{{ render '@o-newsletter' }}
{{ render '@o-discover-section' }}
</div>
{{ render '@o-footer' }}
</div>
</div>
.page--landing {
@extend %page-wrapping;
@extend %page-wrapping-vertical;
.o-header {
@extend %page-wrapping;
}
.o-article-list {
padding-bottom: 0;
}
.a-ad-zone__inner {
@include media($sm-breakpoint) {
margin-right: initial; // align the add on right
}
}
}
{
"header": {
"search": true,
"nav": {
"links": [
{
"name": "Accueil",
"current": true,
"url": "/",
"icon": {
"name": "home",
"title": "Accueil"
}
},
{
"name": "Reportages",
"url": "#",
"icon": {
"name": "article",
"title": "Reportages"
}
},
{
"name": "Portraits",
"url": "#",
"icon": {
"name": "portrait",
"title": "Portraits"
}
},
{
"name": "Vidéos",
"url": "#",
"icon": {
"name": "video",
"title": "Vidéos"
}
},
{
"name": "Photos",
"url": "#",
"icon": {
"name": "photo",
"title": "Photos"
}
}
]
}
},
"banner": {
"image": "/img/banner1.png",
"title": "Comment protéger le bonheur des enfants",
"category": "Reportages",
"author": "Lise Bailat",
"photocredit": "Marc Wallberg"
},
"articlelist": {
"articles": [
{
"columns": 6,
"data": {
"image": "/img/article-1.jpg",
"title": "Les trois Romandes de Miss Suisse 2018",
"category": "Photos",
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#"
}
},
{
"columns": 6,
"data": {
"image": "/img/article-2.jpg",
"title": "L'interview exclusif du nouveau lauréat 2018 du guide Michelin",
"category": "Reportages",
"tags": [
"Hebdomadaire"
],
"modifiers": [
"media"
],
"gallery": true,
"weekly": true,
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans expositions sont organisées en l'honneur du peintre…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#"
}
},
{
"columns": 8,
"data": {
"image": "/img/article-3.jpg",
"title": "Les trois Romandes de Miss Suisse 2018",
"category": "Photos",
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#"
}
},
{
"columns": 4,
"data": {
"image": "/img/banner4.png",
"title": "L’interview exclusif d’Adarsh Alem",
"category": "Reportages",
"gallery": true,
"numphotos": 10,
"modifiers": [
"media",
"excerpt-on-mobile"
],
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans expositions sont organisées en l'honneur du peintre…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#"
}
},
{
"highlight": true,
"data": {
"image": "/img/article-highlight.jpg",
"title": "Découvrez les meilleures restaurant en photographies",
"category": "Photos",
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"buttontext": "Découvrir",
"numphotos": 10,
"articlelink": "#",
"categorylink": "#",
"authorlink": "#",
"alllink": "#"
}
},
{
"columns": 4,
"format": "@m-preview-article",
"data": {
"image": "/img/preview-article1.png",
"title": "Les trois Romandes de Miss Suisse 2018",
"category": "Photos",
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#",
"modifiers": [
"media"
],
"gallery": true,
"numphotos": 33
}
},
{
"columns": 8,
"format": "@m-preview-article",
"data": {
"image": "/img/banner4.png",
"title": "L’interview exclusif d’Adarsh Alem",
"category": "Reportages",
"videolength": "3:25",
"modifiers": [
"media"
],
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans expositions sont organisées en l'honneur du peintre…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#"
}
}
]
}
}