@using Sitecore.Mvc
@using Sitecore.Mvc.Presentation
@model RenderingModel
@{

}
<header class="page-header">
    <!-- [Homepage Carousell] -->
    <div id="carousel_1" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel_1" data-slide-to="0" class="active"></li>
            <li data-target="#carousel_1" data-slide-to="1" class=""></li>
            <li data-target="#carousel_1" data-slide-to="2" class=""></li>
            <li data-target="#carousel_1" data-slide-to="3" class=""></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div class="jumbotron jumbotron-xl bg-media" style="background-image: url(Images/carousel-climbing.jpg)">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <h1>Climbing</h1>
                                <p class="lead">Up for challenge? See our climbing events.</p>
                                <a class="btn btn-hollow btn-lg" href="Event-List.html">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="jumbotron jumbotron-xl bg-media" style="background-image: url(Images/carousel-cycling.jpg)">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <h1>Cycling</h1>
                                <p class="lead">Happy couple cycling in canola fields.</p>
                                <a class="btn btn-hollow btn-lg" href="Event-List.html">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="jumbotron jumbotron-xl bg-media" style="background-image: url(Images/carousel-hiking.jpg)">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <h1>Hiking </h1>
                                <p class="lead">Hikers group trekking in Crimea.</p>
                                <a class="btn btn-hollow btn-lg" href="Event-List.html">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="jumbotron jumbotron-xl bg-media" style="background-image: url(Images/carousel-skiing.jpg)">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <h1>Skiing</h1>
                                <p class="lead">Join our skiing event!</p>
                                <a class="btn btn-hollow btn-lg" href="Event-List.html">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#carousel_1" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel_1" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <!-- [/Homepage Carousell] -->
</header>
<section class="section section-full">
    <div class="container">
        <!-- [Featured Events] -->
        @Html.Sitecore().Placeholder("features")
        <!-- [/Featured Events] -->
    </div>
    <!-- [Upcoming Events] -->
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="thumbnail">
                    <a href="Event-Detail.html">
                        <img src="Images/Skiing-the-Himalayas.jpg" class="img-responsive" alt="Skiing in the Himalayas" width="500" height="333" />
                    </a>
                    <div class="caption">
                        <h3 class="teaser-heading">Skiing the Himalayas</h3>
                        <p>
                            The Himalayan Mountains offer the highest altitude skiing and snowboarding in the world. Here, you are surrounded by the largest and steepest mountains on earth and the views are unparalleled. Because the mountains are so high, the runs are long. The geographical location and the heavy snowfall make Gulmarg’s ski runs the best in the Himalayas, if not the world. <br>
                            Our journey to Gulmarg from Srinagar is perhaps the most enchanting part of the trip. You will see picturesque villages, spectacular mountain views, and forested slopes on this tour through the unique landscape of the Himalayas.
                        </p>
                        <a href="Event-Detail.html" class="btn btn-default">Read more</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="well bg-primary">
                    <h5 class="text-uppercase">Events</h5>
                    <ul class="media-list">
                        <li class="media">
                            <div class="media-body">
                                May 18, 2016
                                <h4 class="media-heading">
                                    <a href="Event-Detail.html">Cycling from Bangkok to Chiang Mai</a>
                                </h4>
                            </div>
                        </li>
                        <li class="media">
                            <div class="media-body">
                                September 20, 2016
                                <h4 class="media-heading">
                                    <a href="Event-Detail.html">Hiking the Italian Alps </a>
                                </h4>
                            </div>
                        </li>
                        <li class="media">
                            <div class="media-body">
                                December 15, 2016
                                <h4 class="media-heading">
                                    <a href="Event-Detail.html">Skiing the Himalayas</a>
                                </h4>
                            </div>
                        </li>
                        <li class="media">
                            <div class="media-body">
                                May 24, 2017
                                <h4 class="media-heading">
                                    <a href="Event-Detail.html">Rock Climbing in the Czech Republic</a>
                                </h4>
                            </div>
                        </li>
                    </ul>
                    <a href="Event-Sections.html" class="btn btn-default">Read more</a>
                </div>
            </div>
        </div>
    </div>
    <!-- [/Upcoming Events] -->
</section>