<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package Winder
 */

get_header();
?>

	<div class="jumbotron">

<h3>Welcome to winder!</h3>
<p>Making your site looks comfortable</p>

</div>

<!-- Main-about Us -->

<div id="aboutUs">
<div class="container text-center">
<h4>About Us</h4>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
    <h4>Who are we?</h4>
    <div class="icon-container d-block">
        <img class="img-fluid" src="<?php echo(get_template_directory_uri()); ?>/images/icon-1.png">
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis urna ipsum, tincidunt imperdiet arcu aliquet efficitur.</p>
    </div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
    <h4>Our Mission</h4>
    <div class="icon-container">
        <img class="img-fluid" src="<?php echo(get_template_directory_uri()); ?>/images/icon-2.png">
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis urna ipsum, tincidunt imperdiet arcu aliquet efficitur.</p>
    </div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
    <h4>Our Values</h4>
    <div class="icon-container">
        <img class="img-fluid" src="<?php echo(get_template_directory_uri()); ?>/images/icon-3.png">
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis urna ipsum, tincidunt imperdiet arcu aliquet efficitur.</p>
    </div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
    <h4>Our achievements</h4>
    <div class="icon-container">
        <img class="img-fluid" src="<?php echo(get_template_directory_uri()); ?>/images/icon-4.png">
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis urna ipsum, tincidunt imperdiet arcu aliquet efficitur.</p>
    </div>
</div>
</div>
</div>
</div>

<!-- Main-Portfolio -->
<div id="portfolio">
<div class="container">
<h4 class="text-center">Our Works</h4>
<div class="row">
<div class="modelImageCont col-sm-9 col-xsm-12 d-none d-md-block">
    <img id="modelImage" class="img-fluid" src="<?php echo(get_template_directory_uri()); ?>/images/work-1.jpg">
</div>
<div class="col image-list">
    <div class="listContainer d-float">
        <img onclick="modelImage(0)" class="img-thumbnail portfolio-entry img-fluid col" src="<?php echo(get_template_directory_uri()); ?>/images/work-1.jpg" alt="">
    </div>
    <div class="listContainer d-float">
        <img onclick="modelImage(1)" class="img-thumbnail portfolio-entry img-fluid col" src="<?php echo(get_template_directory_uri()); ?>/images/work-2.jpg" alt="">
    </div>
    <div class="listContainer">
        <img onclick="modelImage(2)" class="img-thumbnail portfolio-entry img-fluid col" src="<?php echo(get_template_directory_uri()); ?>/images/work-3.jpg" alt="">
    </div>
</div>
</div>
</div>
</div>

<!-- Main-News -->

<div id="news">
    <div class="container text-center">
        <h4>News</h4>
        <div class="row">
            <?php /* Start the Loop */ ?>
            <?php $featuredPosts = new WP_Query('category_name=sample-posts&posts_per_page=4'); ?>
            <?php while ( $featuredPosts->have_posts() ) : $featuredPosts->the_post(); ?>
                
                <div class="col-lg-6 col-sm-12">
                    <div class="new-entry">
                        <div class="newsImgContainer">
                            <div class="clearfix">
                                <div class="div">
                                    <a href="<?php the_permalink() ?>">
                                            <div class="float-left">
                                                <?php the_post_thumbnail(); ?>
                                            </div>
                                        <h5><?php the_title(); ?></h5>
                                        <h6><?php the_author() ?></h6>
                                        <p>
                                            <?php the_excerpt() ?>
                                        </p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            <?php endwhile; ?>
        </div>
    </div>
</div>

<?php
get_footer();
