@{
    ViewData["Title"] = "Home Page";
}

@model HomeViewModel

<section id="home" class="no-padding">

    <div id="main-slide" class="ts-flex-slider">

        <div class="flexSlideshow flexslider">
            <ul class="slides">
                <li>
                    <div class="overlay2">
                        <img class="" src="images/slider/bg1.jpg" alt="slider">
                    </div>
                    <div class="flex-caption slider-content">
                        <div class="col-md-12 text-center">
                            <h2 class="animated2">
                                Need To Invent The Future!
                            </h2>
                            <h3 class="animated3">
                                We Making Difference To Great Things Possible
                            </h3>
                            <p class="animated4"><a href="#" class="slider btn btn-primary white">Check Now</a></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="overlay2">
                        <img class="" src="images/slider/bg2.jpg" alt="slider">
                    </div>
                    <div class="flex-caption slider-content">
                        <div class="col-md-12 text-center">
                            <h2 class="animated4">
                                How Big Can You Dream?
                            </h2>
                            <h3 class="animated5">
                                We are here to make it happen
                            </h3>
                            <p class="animated6"><a href="#" class="slider btn btn-primary white">Buy Now</a></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="overlay2">
                        <img class="" src="images/slider/bg3.jpg" alt="slider">
                    </div>
                    <div class="flex-caption slider-content">
                        <div class="col-md-12 text-center">
                            <h2 class="animated7">
                                Your Challenge is Our Progress
                            </h2>
                            <h3 class="animated8">
                                So, You Don't Need to Go Anywhere Today
                            </h3>
                            <div class="">
                                <a class="animated4 slider btn btn-primary btn-min-block white" href="#">Get Now</a><a class="animated4 slider btn btn-primary btn-min-block solid" href="#">Live Demo</a>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</section>
<section id="about" class="about angle">
    <div class="container">
        <div class="row">
            <div class="landing-tab clearfix">
                <ul class="nav nav-tabs nav-stacked col-md-3 col-sm-5">
                    <li class="active">
                        <a class="animated fadeIn" href="#tab_a" data-toggle="tab">
                            <span class="tab-icon"><i class="fas fa-info"></i></span>
                            <div class="tab-info">
                                <h3>Who Are We</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="animated fadeIn" href="#tab_b" data-toggle="tab">
                            <span class="tab-icon"><i class="fas fa-briefcase"></i></span>
                            <div class="tab-info">
                                <h3>Our Company</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="animated fadeIn" href="#tab_c" data-toggle="tab">
                            <span class="tab-icon"><i class="fab fa-android"></i></span>
                            <div class="tab-info">
                                <h3>What We Do</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="animated fadeIn" href="#tab_d" data-toggle="tab">
                            <span class="tab-icon"><i class="fab fa-pagelines"></i></span>
                            <div class="tab-info">
                                <h3>Modern Design</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="animated fadeIn" href="#tab_e" data-toggle="tab">
                            <span class="tab-icon"><i class="fas fa-support"></i></span>
                            <div class="tab-info">
                                <h3>Dedicated Support</h3>
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="tab-content col-md-9 col-sm-7">
                    <div class="tab-pane active animated fadeInRight" id="tab_a">
                        <i class="fas fa-trophy big"></i>
                        <h3>We Are Awwared Winning Company</h3>
                        <p>Over the year we have lots of experience in our field. In sit amet massa sapien. Vestibulum diam turpis, gravida in lobortis id, ornare a eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis nulla non elit dignissim suscipit. Duis lorem nulla, eleifend.</p>
                    </div>
                    <div class="tab-pane animated fadeInLeft" id="tab_b">
                        <i class="fas fa-briefcase big"></i>
                        <h3>We Have Worldwide Business</h3>
                        <p>Helvetica cold-pressed lomo messenger bag ugh. Vinyl jean shorts Austin pork belly PBR retro, Etsy VHS kitsch actually messenger bag pug. Pbrb semiotics try-hard, Schlitz occupy dreamcatcher master cleanse Marfa Vice tofu. </p>
                    </div>
                    <div class="tab-pane animated fadeIn" id="tab_c">
                        <i class="fab fa-android big"></i>
                        <h3>We Build Readymade Applications</h3>
                        <p>Over the year we have lots of experience in our field. In sit amet massa sapien. Vestibulum diam turpis, gravida in lobortis id, ornare a eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis nulla non elit dignissim suscipit. Duis lorem nulla, eleifend.</p>
                    </div>
                    <div class="tab-pane animated fadeIn" id="tab_d">
                        <i class="fab fa-pagelines big"></i>
                        <h3>Clean and Modern Design</h3>
                        <p>Over the year we have lots of experience in our field. In sit amet massa sapien. Vestibulum diam turpis, gravida in lobortis id, ornare a eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis nulla non elit dignissim suscipit. Duis lorem nulla, eleifend.</p>
                    </div>
                    <div class="tab-pane animated fadeIn" id="tab_e">
                        <i class="fas fa-support big"></i>
                        <h3>24/7 Dedicated Support</h3>
                        <p>Occupy selfies Tonx, +1 Truffaut beard organic normcore tilde flannel artisan squid cray single-origin coffee. Master cleanse vinyl Austin kogi, semiotics skateboard fap wayfarers health goth. Helvetica cray church-key hashtag Carles. Four dollar toast meggings seitan, Tonx pork belly VHS Bushwick. Chambray banh mi cornhole. Locavore messenger bag seitan.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="image-block" class="image-block no-padding">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 ts-padding" style="height:650px;background:url(images/MyProfile.jpg) 50% 50% / cover no-repeat;">
            </div>
            <div class="col-md-6 ts-padding img-block-right">
                <div class="img-block-head text-center">
                    <h2>Know More About Me</h2>
                    <h3>Who am I</h3>
                    <p>
                        My name is Simeon and I'm Full Stack .NET Developer. I have a lot of experience.....
                    </p>
                </div>

                <div class="gap-30"></div>

                <div class="image-block-content">
                    <span class="feature-icon pull-left"><i class="fas fa-bicycle"></i></span>
                    <div class="feature-content">
                        <h3>Tons of Features</h3>
                        <p>Consectetur adipisicing elit sed do eiusmod tempor incididunt ut</p>
                    </div>
                </div>

                <div class="image-block-content">
                    <span class="feature-icon pull-left"><i class="fa fa-diamond"></i></span>
                    <div class="feature-content">
                        <h3>PowerPack Theme</h3>
                        <p>Proin gravida nibh vel velit auctor Aenean sollicitudin adipisicing</p>
                    </div>
                </div>

                <div class="image-block-content">
                    <span class="feature-icon pull-left"><i class="fas fa-street-view"></i></span>
                    <div class="feature-content">
                        <h3>Day Night Support</h3>
                        <p>Simply dummy text and typesettings industry has been the industry</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="ts_counter no-padding">
    <div class="container-fluid">
        <div class="row facts-wrapper wow fadeInLeft text-center">
            <div class="facts one col-md-3 col-sm-6">
                <span class="facts-icon"><i class="fas fa-user"></i></span>
                <div class="facts-num">
                    <span class="counter">@Model.TotalRegisteredUsers</span>
                </div>
                <h3>Users</h3>
            </div>

            <div class="facts two col-md-3 col-sm-6">
                <span class="facts-icon"><i class="fas fa-blog"></i></span>
                <div class="facts-num">
                    <span class="counter">@Model.TotalBlogPosts</span>
                </div>
                <h3>Blog Posts</h3>
            </div>

            <div class="facts three col-md-3 col-sm-6">
                <span class="facts-icon"><i class="fas fa-shopping-cart"></i></span>
                <div class="facts-num">
                    <span class="counter">@Model.TotalShopProducts</span>
                </div>
                <h3>Shop Products</h3>
            </div>

            <div class="facts four col-md-3 col-sm-6">
                <span class="facts-icon"><i class="fas fa-trophy"></i></span>
                <div class="facts-num">
                    <span class="counter">76</span>
                </div>
                <h3>Awwards</h3>
            </div>
        </div>
    </div>
</section>
<section id="portfolio" class="portfolio portfolio-box">
    <div class="container">
        <div class="row">
            <div class="col-md-12 heading text-center">
                <span class="icon-pentagon wow bounceIn"><i class="fas fa-suitcase"></i></span>
                <h2 class="title2">
                    Project Completed
                    <span class="title-desc">A Quality Experience Team with 4 years experience</span>
                </h2>
            </div>
        </div>
        <div class="row text-center">
            <div class="isotope-nav" data-isotope-nav="isotope">
                <ul>
                    <li><a href="#" class="active" data-filter="*">All</a></li>
                    <li><a href="#" data-filter=".web-design">Web Design</a></li>
                    <li><a href="#" data-filter=".development">Development</a></li>
                    <li><a href="#" data-filter=".joomla">Joomla</a></li>
                    <li><a href="#" data-filter=".wordpress">Wordpress</a></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div id="isotope" class="isotope">
                <div class="col-sm-3 web-design isotope-item">
                    <div class="grid">
                        <figure class="effect-oscar">
                            <img src="images/portfolio/portfolio1.jpg" alt="">
                            <figcaption>
                                <h3>Startup Business</h3>
                                <a class="link icon-pentagon" href="portfolio-item.html"><i class="fas fa-link"></i></a>
                                <a class="view icon-pentagon" data-rel="prettyPhoto" href="images/portfolio/portfolio-bg1.jpg"><i class="fas fa-search"></i></a>
                            </figcaption>
                        </figure>
                    </div>
                </div>

                <div class="col-sm-3 development isotope-item">
                    <div class="grid">
                        <figure class="effect-oscar">
                            <img src="images/portfolio/portfolio2.jpg" alt="">
                            <figcaption>
                                <h3>Easy to Lanunch</h3>
                                <a class="link icon-pentagon" href="portfolio-item.html"><i class="fas fa-link"></i></a>
                                <a class="view icon-pentagon" data-rel="prettyPhoto" href="images/portfolio/portfolio-bg2.jpg"><i class="fas fa-search"></i></a>
                            </figcaption>
                        </figure>
                    </div>
                </div>

                <div class="col-sm-3 joomla isotope-item">
                    <div class="grid">
                        <figure class="effect-oscar">
                            <img src="images/portfolio/portfolio3.jpg" alt="">
                            <figcaption>
                                <h3>Your Business</h3>
                                <a class="link icon-pentagon" href="portfolio-item.html"><i class="fas fa-link"></i></a>
                                <a class="view icon-pentagon" data-rel="prettyPhoto" href="images/portfolio/portfolio-bg3.jpg"><i class="fas fa-search"></i></a>
                            </figcaption>
                        </figure>
                    </div>
                </div>

                <div class="col-sm-3 wordpress isotope-item">
                    <div class="grid">
                        <figure class="effect-oscar">
                            <img src="images/portfolio/portfolio4.jpg" alt="">
                            <figcaption>
                                <h3>Prego Match</h3>
                                <a class="link icon-pentagon" href="portfolio-item.html"><i class="fas fa-link"></i></a>
                                <a class="view icon-pentagon" data-rel="prettyPhoto" href="images/portfolio/portfolio-bg4.jpg"><i class="fas fa-search"></i></a>
                            </figcaption>
                        </figure>
                    </div>
                </div>

                <div class="col-sm-3 joomla isotope-item">
                    <div class="grid">
                        <figure class="effect-oscar">
                            <img src="images/portfolio/portfolio5.jpg" alt="">
                            <figcaption>
                                <h3>Fashion Brand</h3>
                                <a class="link icon-pentagon" href="portfolio-item.html"><i class="fas fa-link"></i></a>
                                <a class="view icon-pentagon" data-rel="prettyPhoto" href="images/portfolio/portfolio-bg5.jpg"><i class="fas fa-search"></i></a>
                            </figcaption>
                        </figure>
                    </div>
                </div>

                <div class="col-sm-3 development isotope-item">
                    <div class="grid">
                        <figure class="effect-oscar">
                            <img src="images/portfolio/portfolio6.jpg" alt="">
                            <figcaption>
                                <h3>The Insidage</h3>
                                <a class="link icon-pentagon" href="portfolio-item.html"><i class="fas fa-link"></i></a>
                                <a class="view icon-pentagon" data-rel="prettyPhoto" href="images/portfolio/portfolio-bg1.jpg"><i class="fas fa-search"></i></a>
                            </figcaption>
                        </figure>
                    </div>
                </div>

                <div class="col-sm-3 development isotope-item">
                    <div class="grid">
                        <figure class="effect-oscar">
                            <img src="images/portfolio/portfolio7.jpg" alt="">
                            <figcaption>
                                <h3>Light Carpet</h3>
                                <a class="link icon-pentagon" href="portfolio-item.html"><i class="fas fa-link"></i></a>
                                <a class="view icon-pentagon" data-rel="prettyPhoto" href="images/portfolio/portfolio-bg2.jpg"><i class="fas fa-search"></i></a>
                            </figcaption>
                        </figure>
                    </div>
                </div>

                <div class="col-sm-3 development isotope-item">
                    <div class="grid">
                        <figure class="effect-oscar">
                            <img src="images/portfolio/portfolio8.jpg" alt="">
                            <figcaption>
                                <h3>Amazing Keyboard</h3>
                                <a class="link icon-pentagon" href="portfolio-item.html"><i class="fas fa-link"></i></a>
                                <a class="view icon-pentagon" data-rel="prettyPhoto" href="images/portfolio/portfolio-bg3.jpg"><i class="fas fa-search"></i></a>
                            </figcaption>
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="feature" class="feature">
    <div class="container">

        <div class="row">
            <div class="feature-box col-sm-4 wow fadeInDown" data-wow-delay=".5s">
                <span class="feature-icon pull-left"><i class="fa fa-heart-o"></i></span>
                <div class="feature-content">
                    <h3>Clean &amp; Modern Design</h3>
                    <p>Bras urna felis accumsan at ultrde cesid posuere masa socis nautoque penat</p>
                </div>
            </div>

            <div class="feature-box col-sm-4 wow fadeInDown" data-wow-delay=".5s">
                <span class="feature-icon pull-left"><i class="fab fa-codepen"></i></span>
                <div class="feature-content">
                    <h3>Useful Shortcodes</h3>
                    <p>High Life narwhal, banh mi PBR single-origin coffee Odd Future actually aliqua</p>
                </div>
            </div>

            <div class="feature-box col-sm-4 wow fadeInDown" data-wow-delay=".5s">
                <span class="feature-icon pull-left"><i class="fas fa-film"></i></span>
                <div class="feature-content">
                    <h3>Parallax Section</h3>
                    <p>Consectetur adipisicing elit sed do eiusmod tempor incididunt ut</p>
                </div>
            </div>
        </div>
        <div class="gap-40"></div>

        <div class="row">
            <div class="feature-box col-sm-4 wow fadeInDown" data-wow-delay=".5s">
                <span class="feature-icon pull-left"><i class="fas fa-newspaper-o"></i></span>
                <div class="feature-content">
                    <h3>Multipurpose Concept</h3>
                    <p>Consectetur adipisicing elit sed do eiusmod tempor incididunt ut</p>
                </div>
            </div>

            <div class="feature-box col-sm-4 wow fadeInDown" data-wow-delay=".5s">
                <span class="feature-icon pull-left"><i class="fas fa-desktop"></i></span>
                <div class="feature-content">
                    <h3>Responsive Layout</h3>
                    <p>Consectetur adipisicing elit sed do eiusmod tempor incididunt ut</p>
                </div>
            </div>

            <div class="feature-box col-sm-4 wow fadeInDown" data-wow-delay=".5s">
                <span class="feature-icon pull-left"><i class="fab fa-pagelines"></i></span>
                <div class="feature-content">
                    <h3>Light wight Performance</h3>
                    <p>High Life narwhal, banh mi PBR single-origin coffee Odd Future actually aliqua</p>
                </div>
            </div>
        </div>

        <div class="gap-40"></div>

        <div class="row">
            <div class="feature-box col-sm-4 wow fadeInDown" data-wow-delay=".5s">
                <span class="feature-icon pull-left"><i class="fas fa-recycle"></i></span>
                <div class="feature-content">
                    <h3>Free Lifetime Updates</h3>
                    <p>Bras urna felis accumsan at ultrde cesid posuere masa socis nautoque penat</p>
                </div>
            </div><!--/ End first featurebox -->

            <div class="feature-box col-sm-4 wow fadeInDown" data-wow-delay=".5s">
                <span class="feature-icon pull-left"><i class="fa fa-diamond"></i></span>
                <div class="feature-content">
                    <h3>Endless Possibilites</h3>
                    <p>High Life narwhal, banh mi PBR single-origin coffee Odd Future actually aliqua</p>
                </div>
            </div>

            <div class="feature-box col-sm-4 wow fadeInDown" data-wow-delay=".5s">
                <span class="feature-icon pull-left"><i class="fab fa-whatsapp"></i></span>
                <div class="feature-content">
                    <h3>24/7 Live Support</h3>
                    <p>Consectetur adipisicing elit sed do eiusmod tempor incididunt ut</p>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="parallax parallax2">
    <div class="parallax-overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2>Are You Ready to Buy This Template!</h2>
                <h3>Just Click Button and Use Your Own</h3>
                <p>
                    <a href="#" class="btn btn-primary white">Purchase Now</a>
                    <a href="#" class="btn btn-primary solid">Get In Touch</a>
                </p>
            </div>
        </div>
    </div>
</section>
<section id="team" class="team">
    <div class="container">
        <div class="row">
            <div class="col-md-12 heading">
                <span class="title-icon pull-left"><i class="fab fa-weixin"></i></span>
                <h2 class="title">Meet with My Team <span class="title-desc">A Quality Experience Team with 4 years experience</span></h2>
            </div>
        </div>

        <div class="row text-center">
            @foreach (var admin in Model.Administrators)
            {
                <div class="col-md-3 col-sm-6">
                    <div class="team wow slideInLeft">
                        <div class="img-hexagon">
                            <img src=@admin.ImageUrl alt="profile">
                            <span class="img-top"></span>
                            <span class="img-bottom"></span>
                        </div>
                        <div class="team-content">
                            <h3>@admin.FirstName @admin.LastName</h3>
                            <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@admin.UserName">@@@admin.UserName</a>
                            <div class="team-social">
                                @if (admin.GitHubUrl != null)
                                {
                                    <a class="fb" href=@admin.GitHubUrl><i class="fab fa-github"></i></a>
                                }
                                @if (admin.StackoverflowUrl != null)
                                {
                                    <a class="twt" href=@admin.StackoverflowUrl><i class="fab fa-stack-overflow"></i></a>
                                }
                                @if (admin.FacebookUrl != null)
                                {
                                    <a class="gplus" href=@admin.FacebookUrl><i class="fab fa-facebook-square"></i></a>
                                }
                                @if (admin.TwitterUrl != null)
                                {
                                    <a class="linkdin" href=@admin.TwitterUrl><i class="fab fa-twitter-square"></i></a>
                                }
                                @if (admin.InstagramUrl != null)
                                {
                                    <a class="dribble" href=@admin.InstagramUrl><i class="fab fa-instagram"></i></a>
                                }
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</section>
<section class="testimonial parallax parallax3">
    <div class="parallax-overlay"></div>
    <div class="container">
        <div class="row">
            <div id="testimonial-carousel" class="owl-carousel owl-theme text-center testimonial-slide">
                @foreach (var admin in Model.Administrators)
                {
                    <div class="item">
                        <div class="testimonial-thumb">
                            <img src=@admin.ImageUrl alt="profile">
                        </div>
                        <div class="testimonial-content">
                            <p class="testimonial-text">
                                @admin.AboutMe
                            </p>
                            <h3 class="name">
                                @admin.FirstName @admin.LastName
                                <span>
                                    <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@admin.UserName">@@@admin.UserName</a>
                                </span>
                            </h3>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</section>
<section id="newsletter" class="newsletter">
    <div class="container">
        <div class="row">
            <div class="col-md-12 heading text-center">
                <span class="icon-pentagon wow bounceIn animated"><i class="fas fa-envelope"></i></span>
                <h2 class="title2">
                    Subscribe With Us
                    <span class="title-desc">We Love to Work with Passion</span>
                </h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form action="#" method="post" id="newsletter-form" class="newsletter-form wow bounceIn" data-wow-duration=".8s">
                    <div class="form-group">
                        <input type="email" name="email" id="newsletter-form-email" class="form-control form-control-lg" placeholder="Enter your email address" autocomplete="off">
                        <button class="btn btn-primary solid">Subscribe</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>