@{
    ViewBag.Title = "Home";
}

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000" data-pause="hover">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                <li data-target="#myCarousel" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <img src="~/images/slider1.jpg" alt="banner 1" class="d-block img-fluid w-100" style="height:400px;" />
                </div>
                <div class="carousel-item">
                    <img src="~/images/slider2.jpg" alt="banner 2" class="d-block img-fluid w-100" style="height:400px;" />
                </div>
                <div class="carousel-item">
                    <img src="~/images/slider3.jpg" alt="banner 3" class="d-block img-fluid w-100" style="height:400px;" />
                </div>
                <div class="carousel-item">
                    <img src="~/images/slider4.jpg" alt="banner 4" class="d-block img-fluid w-100" style="height:400px;" />
                </div>
                <div class="carousel-item">
                    <img src="~/images/slider5.jpg" alt="banner 4" class="d-block img-fluid w-100" style="height:400px;" />
                </div>
            </div>
            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                <i class="fa fa-chevron-circle-left fa-2x"></i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                <i class="fa fa-chevron-circle-right fa-2x"></i>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <div class="col-lg-8 col-md-8 col-sm-8 mt-5">
        <h3>New Articles</h3>
        <ul class="list-unstyled">
            <li>
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <a href="#">
                            <img src="~/images/design-studio.jpg" class="img-thumbnail" />
                        </a>
                    </div>
                    <div class="col-lg-8 col-md-8 col-sm-8">
                        <a href="#"><h3>Home Design Ideas</h3></a>
                        <p>Each house narrates a story! The story is of the inmates, for whom the house is a home, where they live with their loved ones, living life to the hilt, making memories to cherish forever.</p>
                        <a class="read-more" href="#">Read More...</a>
                    </div>
                </div>
            </li>
        </ul>
        <input id="btnShowMore" type="button" value="Show More" class="btn btn-block btn-outline-light" style="background-color:#66b2e9;" />
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 mt-5">
        <h3>Most Viewed Articles</h3>
        <ul class="list-unstyled">
            <li class="well">
                <a href="#">
                    <img src="~/images/Larch-House.jpg" class="img-thumbnail" />
                    <div class="title-overlay">Design Eco-House</div>
                </a>
            </li>
        </ul>
    </div>
</div>
@section Scripts {
    <script type="text/javascript">
        $(document).ready(function ()
        {

        });

    </script>
}