Page Sections

Footer

The footer - Please note, hologram wouldn't render the accented a in this line of the address. Please alter on proper builds: "Rue du Chateau".

<footer class="fancyBG">
    <div class="wrapper">
        <div class="col1">
            <a href="#" class="icn icn-logo"><span>United World Wrestling</a>
            <p class="fineprint">&copy; <a href="#">UWW</a> 2014 - All rights reserved</p>
        </div><!-- .col1 -->
        <ul class="social col2 listReset">
            <li class="title">Connect with us</li>
            <li><a href="#" class="icn icn-facebook"><span>Facbeook</span></a></li>
            <li><a href="#" class="icn icn-google"><span>Google</span></a></li>
            <li><a href="#" class="icn icn-twitter"><span>Twitter</span></a></li>
            <li><a href="#" class="icn icn-youtube"><span>YouTube</span></a></li>
        </ul>
        <p class="col3">
            <span class="title">Contact</span>
            Rue du Chateau<br/>
            6 - 1804 Corsier-sur-Vevey<br/>
            Switzerland<br/>
            <a href="tel:+41 21 312 84 26">Tel. +41 21 312 84 26</a>
        </p><!-- .col3 -->
        <ul class="col4 listReset bigList">
            <li><a href="#">Press</a></li>
            <li><a href="#">Advertising</a></li>
            <li><a href="#">Sponsorship</a></li>
            <li><a href="#">Legal</a></li>
            <li><a href="#">Contact</a></li>
        </ul><!-- .col4 -->

        <ul class="col5 listReset values">
            <li class="icn icn-value1"><span>Value 1</span></li>
            <li class="icn icn-value2"><span>Value 2</span></li>
            <li class="icn icn-value3"><span>Value 3</span></li>
        </ul>
    </div><!-- .wrapper -->
</footer>


Header

The header

<header class="fancyBG">
    <div id="topNav">
        <div class="wrapper clearfix">
            <a href="/" title="United World Wrestling" class="icn icn-logo">
                <span>United World Wrestling</span>
            </a>
            <nav class="hidden-tb">
                <ul class="listReset clearfix">
                    <li class="hasSubnav"><a href="#">Organisation</a>
                        <ul class="subnav listReset">
                            <li><a href="#">News</a></li>
                            <li><a href="#">History of UWW</a></li>
                            <li><a href="#">Wrestling History</a></li>
                            <li><a href="#">President</a></li>
                            <li><a href="#">Bureau Members</a></li>
                            <li><a href="#">Organisation Chart</a></li>
                            <li><a href="#">Constitution</a></li>
                            <li><a href="#">Councils</a></li>
                            <li><a href="#">Committees</a></li>
                            <li><a href="#">Commissions</a></li>
                            <li><a href="#">National Federations</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Development</a></li>
                    <li><a href="#">Governance</a></li>
                </ul>
            </nav>
            <ul class="hidden-tb social listReset clearfix">
                <li><a href="#" class="icn icn-facebook"><span>Facbeook</span></a></li>
                <li><a href="#" class="icn icn-google"><span>Google</span></a></li>
                <li><a href="#" class="icn icn-twitter"><span>Twitter</span></a></li>
                <li><a href="#" class="icn icn-youtube"><span>YouTube</span></a></li>
            </ul>
            <div class="hidden-tb rightBox">
                <form class="search left" action="#" method="post">
                    <div class="field">
                        <label for="searchInput" class="infield">Search</label>
                        <input id="searchInput" name="Search" type="text" />
                    </div>
                    <button type="submit" class="icn icn-search"><span>Search</span></button>
                </form>

                <a href="#" class="left signin">Sign In</a>

                <ul class="languageSelect listReset left clearfix">
                    <li class="active"><span class="icn icn-flag-eng"></span>EN</li>
                    <li><span class="icn icn-flag-eng"></span>GR</li>
                    <li><span class="icn icn-flag-eng"></span>FR</li>
                    <li><span class="icn icn-flag-eng"></span>IT</li>
                    <li><span class="icn icn-flag-eng"></span>AU</li>
                    <li><span class="icn icn-flag-eng"></span>GR</li>
                    <li><span class="icn icn-flag-eng"></span>FR</li>
                    <li><span class="icn icn-flag-eng"></span>IT</li>
                    <li><span class="icn icn-flag-eng"></span>AU</li>
                    <li><span class="icn icn-flag-eng"></span>GR</li>
                    <li><span class="icn icn-flag-eng"></span>FR</li>
                    <li><span class="icn icn-flag-eng"></span>IT</li>
                    <li><span class="icn icn-flag-eng"></span>AU</li>
                </ul><!-- .languageSelect -->

            </div><!-- .right -->
        </div><!-- .wrapper -->
    </div><!-- #topNav -->
    <div id="mainNav" class="hidden-tb">
    <div class="wrapper">

        <a href="#" class="title">2014 Greco Roman World Cup
            <span class="date">May 15 – 16 2014  Tehran, iran</span>
        </a>

        <nav>
            <ul class="listReset clearfix">
                <li><a href="#">Events</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">Media</a></li>
                <li><a href="#">Stats</a></li>
            </ul>
        </nav>
    </div><!-- .wrapper -->
</div><!-- #mainNav -->

    <div id="hamburger" class="visible-tb">
        <span class="divider"></span>
        <span class="divider"></span>
        <span class="divider"></span>
        <span>Menu</span>
    </div><!-- #hamburger -->
</header>


Videos

An article for featuring the location of an event

<section class="video-section">
    <div class="row no-pad clearfix">
        <div class="col-sm-12 col-md-7">
            <img src="uploads/bg-video.jpg" alt="placeholder image to act as video" />
        </div>
        <div class="col-sm-12 col-md-5 list">
            <div class="titleBar pad clearfix">
                <h3 class="title left">
                    <i class="icn icn-video"></i>
                    Event Livestream
                    <a href="#" class="playall">Play all</a>
                </h3>
                <a href="#" class="readmore right">More Videos</a>
            </div>

            <div class="overflow-y">

                <a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status live">Live streaming now</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
                <a href="#" class="active video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status live">Live streaming now</span> <span class="status">Now Playing</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
                <a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status offline">Live stream</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
                <a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status offline">Live stream</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
                <a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status offline">Live stream</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
                <a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status offline">Live stream</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
                <a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status offline">Live stream</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
                <a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status offline">Live stream</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
                <a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status offline">Live stream</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
                <a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status offline">Live stream</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
                <a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status offline">Live stream</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
                <a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status offline">Live stream</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
                <a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status offline">Live stream</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
<a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status offline">Live stream</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>
                <a href="#" class="video-item">
                    <div class="preview" style="background-image: url(uploads/bg-video.jpg);"></div>
                    <span class="status offline">Live stream</span>
                    <h3>Mat 1: Pan American Championship</h3>
                    <p class="meta">Start: Friday 1 August 2014  •  12:35PM GMT</p>
                </a>

            </div><!-- .overflow-y -->
        </div><!-- .list -->
    </div><!-- .row -->
</section>