Demo entry 6685700

explore

   

Submitted by anonymous on Dec 21, 2017 at 08:47
Language: HTML. Code size: 16.8 kB.

<div
    data-component="OPageContent"
    class="o-page-content"
    data-component-id="f9c4c3b7-421e-4074-acb9-b55b5a22aed1"
    style="margin-top: 69px;">
    <div class="content-section">
        <div class="u-cols-sm-12-12 u-cols-md-12-12 u-cols-lg-24-24 u-row u-full-width">
            <div class="contain">
                <div
                    class="u-cols-sm-12-12 u-cols-md-11-12 u-cols-lg-22-24 u-full-width u-row u-center-col">
                    <div class="m-teaser blog-teaser">
                        <h1 class="a-heading-1 q-alpha">COS × SOU FUJIMOTO<br>SALONE DEL MOBILE<br>APRIL 2016, MILAN</h1>
                        <p class="a-paragraph">For our fifth year celebrating Salone del Mobile, the
                            world’s largest design fair in Milan, we have partnered with Sou Fujimoto
                            Architects to create a unique installation and multisensory experience, Forest
                            of Light. Inspired by nature and the experience of a forest at twilight, the
                            installation presents light and sound in a new architectural context.<br>Taking
                            inspiration from the COS collection, the Forest of Light installation explores
                            ideas of interaction and perspective; the darkened space is illuminated by
                            towering cones of light that are designed to respond to visitors’ movements.</p>
                    </div>
                </div>
                <div class="u-cols-sm-12-12 u-cols-md-12-12 u-cols-lg-24-24 u-row u-full-width">
                    <div class="o-blog-hero">
                        <div
                            data-component="OSlider"
                            class="o-slider is-disabled"
                            data-component-id="516e98aa-617d-4b9d-a989-689d3e64dc33">
                            <div class="a-heading-2 slider-title u-align-center"></div>
                            <div class="slider swiper-container">
                                <div class="swiper-wrapper">
                                    <video
                                        class="a-video swiper-slide"
                                        preload="auto"
                                        controls="controls"
                                        poster="/images/hero-image-1.png"><source src="../videos/background_susiebubble.webm" type="video/webm"><source src="../videos/background_susiebubble.mp4" type="video/mp4"></video>
                                </div>
                                <div class="swiper-arrow swiper-next" style="top: 426px;">next</div>
                                <div class="swiper-arrow swiper-prev" style="top: 426px;">prev</div>
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="u-cols-sm-12-12 u-cols-md-12-12 u-cols-lg-24-24 u-row u-full-width">
                    <div
                        class="o-hero"
                        style="background-color:#FFFFFF;"
                        data-redirect-url="/views/themes/cos/views/pages/startpage.html">
                        <picture
                            data-component="APicture"
                            class="a-picture"
                            alt="A beautiful responsive image"
                            src="/images/hero-image-1.png"
                            data-component-id="c7285ac3-6415-4572-ac63-7c7985664774"><source media="(min-width:1281px)" srcset="/images/hero-image-1.png"><source media="(min-width:768px)" srcset="/images/hero-image-1-tablet.png"><source media="(min-width:1px)" srcset="/images/hero-image-1-mobile.png"><img
                            class="a-image"
                            src="/images/hero-image-1.png"
                            alt="A beautiful responsive image"></picture>
                    </div>
                </div>
                <div class="u-cols-sm-12-12 u-cols-md-12-12 u-cols-lg-24-24 u-row u-full-width">
                    <div class="o-grid-controller is-two-cols">
                        <div class="content">
                            <div class="scrollable-content">
                                <div class="column">
                                    <div class="m-free-tile" data-redirect-url="#">
                                        <picture
                                            data-component="APicture"
                                            class="a-picture"
                                            src="/images/four_col_image1.png"
                                            data-component-id="540e3f13-3328-4a40-ba8c-677eb931db17"><img class="a-image" src="/images/four_col_image1.png"></picture>
                                    </div>
                                </div>
                                <div class="column">
                                    <div class="m-free-tile" data-redirect-url="#">
                                        <picture
                                            data-component="APicture"
                                            class="a-picture"
                                            src="/images/four_col_image2.png"
                                            data-component-id="8d40f093-ad5a-4e89-bc53-350c5a6da5ad"><img class="a-image" src="/images/four_col_image2.png"></picture>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="u-cols-sm-12-12 u-cols-md-11-12 u-cols-lg-24-24 u-row u-transform-center">
                    <div class="m-teaser blog-teaser">
                        <p class="a-paragraph">Known for an innovative approach that explores broad
                            concepts of minimalism, nature and artificial form, Sou Fujimoto is one of the
                            world’s most prominent contemporary architects. Born in Hokkaido, Japan, he
                            graduated from the Department of Architecture, Faculty of Engineering at Tokyo
                            University in 1994 and established his own Tokyo-based practice in 2000, Sou
                            Fujimoto Architects.</p>
                        <p class="a-paragraph">Filmed at his Tokyo studio, architect Sou Fujimoto speaks
                            to COS about the story behind Forest of Light…</p>
                        <label class="a-label js-a-label">Cinema Arti<br>Via Pietro Mascagni 8<br>20122 Milan</label>
                        <label class="a-label js-a-label">Tuesday 12th – Sunday 17th April 2016<br>10.00 – 19.00</label>
                    </div>
                </div>
                <div class="u-cols-sm-12-12 u-cols-md-12-12 u-cols-lg-24-24 u-row u-full-width">
                    <div class="o-grid-controller is-two-cols">
                        <div class="content">
                            <div class="scrollable-content">
                                <div class="column">
                                    <div class="m-free-tile" data-redirect-url="#">
                                        <picture
                                            data-component="APicture"
                                            class="a-picture"
                                            src="/images/four_col_image1.png"
                                            data-component-id="241bb2da-55b8-49ac-9d03-bc41444add4a"><img class="a-image" src="/images/four_col_image1.png"></picture>
                                    </div>
                                </div>
                                <div class="column">
                                    <div class="m-free-tile" data-redirect-url="#">
                                        <picture
                                            data-component="APicture"
                                            class="a-picture"
                                            src="/images/four_col_image2.png"
                                            data-component-id="da1c8fb3-e9f5-4ee6-a212-0f9a59a24bd6"><img class="a-image" src="/images/four_col_image2.png"></picture>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="u-cols-sm-12-12 u-cols-md-12-12 u-cols-lg-24-24 u-row">
            <div class="o-social-share">
                <h2 class="a-heading-2 share-media-title">share</h2>
                <a href="#" target="_blank" class="a-link">
                    <span class="a-icon-social-facebook"></span></a>
                <a href="#" target="_blank" class="a-link">
                    <span class="a-icon-social-pinterest"></span></a>
                <a href="#" target="_blank" class="a-link">
                    <span class="a-icon-social-twitter"></span></a>
                <a href="#" target="_blank" class="a-link">
                    <span class="a-icon-social-tumblr"></span></a>
            </div>
        </div>
        <div class="u-cols-sm-12-12 u-cols-md-12-12 u-cols-lg-24-24"><hr class="a-keyline"></div>
        <div class="u-cols-sm-12-12 u-cols-md-12-12 u-cols-lg-24-24 u-row u-full-width">
            <div class="o-grid-controller is-four-cols">
                <div class="o-text-block">
                    <div class="headign-section">
                        <h1 class="a-heading-1">Explore title here</h1>
                    </div>
                    <div class="preamble-section">
                        <p class="a-paragraph">Sculptural volume and bold, oversized details for spring
                            time, lots of copy and spanning more than two lines</p>
                    </div>
                </div>
                <div class="content">
                    <div class="scrollable-content">
                        <div class="column">
                            <div class="m-free-tile" data-redirect-url="#">
                                <picture
                                    data-component="APicture"
                                    class="a-picture"
                                    src="/images/four_col_image1.png"
                                    data-component-id="50a97309-19ca-49fb-8ab3-071b5f5ef670"><img class="a-image" src="/images/four_col_image1.png"></picture>
                                <div class="headline-preamble-wrapper">
                                    <h2 class="a-heading-2 q-body-copy-2">Oeuffice</h2>
                                    <p class="a-paragraph">Sculptural volume and bold, oversized details for spring
                                        time, tural volume and bold, oversized details for spring lorem ipsum dolor
                                        sit...</p>
                                </div>
                                <div class="cta-wrapper">
                                    <a
                                        href="#"
                                        target="_self"
                                        class="a-link cta-link"
                                        style="text-decoration: none;">
                                        <span class="underline">ex</span><span class="underline-p">p</span><span class="underline">lore</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="m-free-tile" data-redirect-url="#">
                                <picture
                                    data-component="APicture"
                                    class="a-picture"
                                    src="/images/four_col_image2.png"
                                    data-component-id="40d22cdc-4886-4b4c-9266-9872482b79ef"><img class="a-image" src="/images/four_col_image2.png"></picture>
                                <div class="headline-preamble-wrapper">
                                    <h2 class="a-heading-2 q-body-copy-2">Title that spans onto two lines lorem ipsum dolor</h2>
                                    <p class="a-paragraph">Sculptural volume and bold, oversized details, discover
                                        our new shapes for spring.</p>
                                </div>
                                <div class="cta-wrapper">
                                    <a
                                        href="#"
                                        target="_self"
                                        class="a-link cta-link"
                                        style="text-decoration: none;">
                                        <span class="underline">ex</span><span class="underline-p">p</span><span class="underline">lore</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="m-free-tile" data-redirect-url="#">
                                <picture
                                    data-component="APicture"
                                    class="a-picture"
                                    src="/images/four_col_image3.png"
                                    data-component-id="0f7bff6b-fbc6-4cdb-a71f-3162aac62faa"><img class="a-image" src="/images/four_col_image3.png"></picture>
                                <div class="headline-preamble-wrapper">
                                    <h2 class="a-heading-2 q-body-copy-2">Daniel emma</h2>
                                    <p class="a-paragraph">Sculptural volume and bold, oversized details for spring
                                        time, tural volume and bold, oversized details for spring lorem ipsum dolor
                                        sit...</p>
                                </div>
                                <div class="cta-wrapper">
                                    <a
                                        href="#"
                                        target="_self"
                                        class="a-link cta-link"
                                        style="text-decoration: none;">
                                        <span class="underline">ex</span><span class="underline-p">p</span><span class="underline">lore</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="m-free-tile" data-redirect-url="#">
                                <picture
                                    data-component="APicture"
                                    class="a-picture"
                                    src="/images/four_col_image4.png"
                                    data-component-id="fb6dacd5-339c-4549-a74e-cbf61b51498a"><img class="a-image" src="/images/four_col_image4.png"></picture>
                                <div class="headline-preamble-wrapper">
                                    <h2 class="a-heading-2 q-body-copy-2">The book society</h2>
                                    <p class="a-paragraph">A new way with the roll-neck, at once the focus and the foundation of a look.</p>
                                </div>
                                <div class="cta-wrapper">
                                    <a
                                        href="#"
                                        target="_self"
                                        class="a-link cta-link"
                                        style="text-decoration: none;">
                                        <span class="underline">ex</span><span class="underline-p">p</spa n>
                                        <span class="underline">lore</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

This snippet took 0.02 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).