<?php if ( absint ( get_theme_mod( 'store_front_enable_1' , false ) ) ) { ?>

    <article class="store-front"><?php if ( is_customize_preview() ) echo '<div class="customizer"></div>'; ?>
        
        <header id="h3-hummer" class="store-header" style="background-image: url(<?php semper_fi_lite_image( 'store_front_front_img_1' , '/inc/store-front/images/Schwarttzy-Skyvan-Chicago-Lake-Front-Michigan-1920x1080.jpg' , 1920 , 1080 ); ?>);">

            <h2 class='header-text' itemprop="headline"><?php esc_html_e( get_theme_mod( 'store_front_front_title_1' , __( 'Cutting Edge Code' , 'semper-fi-lite' ) ) ); ?></h2>
            
        </header>
            
        <section>
<?php if ( absint ( get_theme_mod( 'store_front_product_enable_1' , true ) ) ) { ?>
            <section>

                <a class="post-edit-link" href="<?php echo esc_url( get_theme_mod( 'store_front_url_1' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( 'Edit this Product' , 'semper-fi-lite' ); ?></a>

                <h5>

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_1' , get_admin_url() . 'customize.php' ) ); ?>"><span><?php esc_html_e( get_theme_mod( 'store_front_title_1' , __( 'HTML5' , 'semper-fi-lite' ) ) ); ?></span></a>

                </h5>

                <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_1' , get_admin_url() . 'customize.php' ) ); ?>">
                    
                    <img<?php semper_fi_lite_image_alt( 'store_front_img_1' , 'store_front_title_1' ) ?> width="500" height="500" src="<?php semper_fi_lite_image( 'store_front_img_1' , '/inc/store-front/images/Hybrid-Skydiving-Jerrid-Cody-Hunter-Mario-Jon-Tasha-500x500.jpg' , 500 , 500 ); ?>" />
                </a>

                <p><?php esc_html_e( get_theme_mod( 'store_front_text_1' , __( "HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications." , 'semper-fi-lite' ) ) ); ?></p>

                <div class="price">

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_1' , get_admin_url() . 'customize.php' ) ); ?>" itemprop="url">&#36;<span><?php echo absint ( get_theme_mod( 'store_front_price_1' , '15' ) ); ?></span></a>

                </div>

                <a class="button product_type_simple" href="<?php echo esc_url( get_theme_mod( 'store_front_url_1' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( get_theme_mod( 'store_front_button_text_1' , __( 'View the product page' , 'semper-fi-lite' ) ) ); ?></a>

            </section>
            
<?php } if ( absint ( get_theme_mod( 'store_front_product_enable_2' , true ) ) ) { ?>
            
            <section>

                <a class="post-edit-link" href="<?php echo esc_url( get_theme_mod( 'store_front_url_2' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( 'Edit this Product' , 'semper-fi-lite' ); ?></a>

                <h5>

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_2' , get_admin_url() . 'customize.php' ) ); ?>"><span><?php esc_html_e( get_theme_mod( 'store_front_title_2' , __( 'CSS3' , 'semper-fi-lite' ) ) ); ?></span></a>

                </h5>

                <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_2' , get_admin_url() . 'customize.php' ) ); ?>">
                    
                    <img<?php semper_fi_lite_image_alt( 'store_front_img_2' , 'store_front_title_2' ) ?> width="500" height="500" src="<?php semper_fi_lite_image( 'store_front_img_2' , '/inc/store-front/images/Kara-Skydiving-Sitfly-500x500.jpg' , 500 , 500 ); ?>" />
                </a>

                <p><?php esc_html_e( get_theme_mod( 'store_front_text_2' , __( "Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML. CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box, or grid layouts." , 'semper-fi-lite' ) ) ); ?></p>

                <div class="price">

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_2' , get_admin_url() . 'customize.php' ) ); ?>" itemprop="url">&#36;<span><?php echo absint ( get_theme_mod( 'store_front_price_2' , '39' ) ); ?></span></a>

                </div>

                <a class="button product_type_simple" href="<?php echo esc_url( get_theme_mod( 'store_front_url_2' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( get_theme_mod( 'store_front_button_text_2' , __( 'View the product page' , 'semper-fi-lite' ) ) ); ?></a>

            </section>
            
<?php } if ( absint ( get_theme_mod( 'store_front_product_enable_3' , true ) ) ) { ?>
            
            <section>

                <a class="post-edit-link" href="<?php echo esc_url( get_theme_mod( 'store_front_url_3' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( 'Edit this Product' , 'semper-fi-lite' ); ?></a>

                <h5>

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_3' , get_admin_url() . 'customize.php' ) ); ?>"><span><?php esc_html_e( get_theme_mod( 'store_front_title_3' , __( 'No JavaScript' , 'semper-fi-lite' ) ) ); ?></span></a>

                </h5>

                <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_3' , get_admin_url() . 'customize.php' ) ); ?>">
                    
                    <img<?php semper_fi_lite_image_alt( 'store_front_img_3' , 'store_front_title_3' ) ?> width="500" height="500" src="<?php semper_fi_lite_image( 'store_front_img_3' , '/inc/store-front/images/Clinton-Skydive-Sunset-Flocking-500x500.jpg' , 500 , 500 ); ?>" />
                </a>

                <p><?php esc_html_e( get_theme_mod( 'store_front_text_3' , __( "JavaScript (JS) is a lightweight, interpreted, programming language with first-class functions. When setting up a WordPress a theme can run into JavaScript conflicts which would cause issues. Although a WordPress.org theme could avoid all possible conflicts with Plugins, WordPress Updates, and Custom Coding if JavaScript is never used." , 'semper-fi-lite' ) ) ); ?></p>

                <div class="price">

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_3' , get_admin_url() . 'customize.php' ) ); ?>" itemprop="url">&#36;<span><?php echo absint (get_theme_mod( 'store_front_price_3' , '99' ) ); ?></span></a>

                </div>

                <a class="button product_type_simple" href="<?php echo esc_url( get_theme_mod( 'store_front_url_3' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( get_theme_mod( 'store_front_button_text_3' , __( 'View the product page' , 'semper-fi-lite' ) ) ); ?></a>

            </section>
            
<?php } if ( absint ( get_theme_mod( 'store_front_product_enable_4' , true ) ) ) { ?>
            
            <section>

                <a class="post-edit-link" href="<?php echo esc_url( get_theme_mod( 'store_front_url_4' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( 'Edit this Product' , 'semper-fi-lite' ); ?></a>

                <h5>

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_4' , get_admin_url() . 'customize.php' ) ); ?>"><span><?php esc_html_e( get_theme_mod( 'store_front_title_4' , __( 'WordPress Customizer' , 'semper-fi-lite' ) ) ); ?></span></a>

                </h5>

                <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_4' , get_admin_url() . 'customize.php' ) ); ?>">
                    
                    <img<?php semper_fi_lite_image_alt( 'store_front_img_4' , 'store_front_title_4' ) ?> width="500" height="500" src="<?php semper_fi_lite_image( 'store_front_img_4' , '/inc/store-front/images/Head-Down-Freeflying-Casey-Heather-Paul-500x500.jpg' , 500 , 500 ); ?>" />
                </a>

                <p><?php esc_html_e( get_theme_mod( 'store_front_text_4' , __( "The Theme Customization API, added in WordPress 3.4, allows developers to customize and add controls to the 'Appearance' -> 'Customize' admin screen. A theme with automatically generated WordPress Customizer Controls would allow the rapid deployment of custom customizer features. Meaning, it would have one of the most powerful theme customizers ever thought up." , 'semper-fi-lite' ) ) ); ?></p>

                <div class="price">

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_4' , get_admin_url() . 'customize.php' ) ); ?>" itemprop="url">&#36;<span><?php echo absint ( get_theme_mod( 'store_front_price_4' , '51' ) ); ?></span></a>

                </div>

                <a class="button product_type_simple" href="<?php echo esc_url( get_theme_mod( 'store_front_url_4' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( get_theme_mod( 'store_front_button_text_4' , __( 'View the product page' , 'semper-fi-lite' ) ) ); ?></a>

            </section>
            
<?php } if ( absint ( get_theme_mod( 'store_front_product_enable_5' , true ) ) ) { ?>
            
            <section>

                <a class="post-edit-link" href="<?php echo esc_url( get_theme_mod( 'store_front_url_5' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( 'Edit this Product' , 'semper-fi-lite' ); ?></a>

                <h5>

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_5' , get_admin_url() . 'customize.php' ) ); ?>"><span><?php esc_html_e( get_theme_mod( 'store_front_title_5' , __( 'Grid, Flex, and Font Scaling' , 'semper-fi-lite' ) ) ); ?></span></a>

                </h5>

                <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_5' , get_admin_url() . 'customize.php' ) ); ?>">
                    
                    <img<?php semper_fi_lite_image_alt( 'store_front_img_5' , 'store_front_title_5' ) ?> width="500" height="500" src="<?php semper_fi_lite_image( 'store_front_img_5' , '/inc/store-front/images/Tandem-Skydive-Cody-500x500.jpg' , 500 , 500 ); ?>" />
                </a>

                <p><?php esc_html_e( get_theme_mod( 'store_front_text_5' , __( "The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. The grid CSS property is a shorthand property that sets all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), and all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), in a single declaration. A theme that has true Font Scaling can display a perfect layout and perfectly legible fonts on every modern cell phone, tablet, computer, 8k TV monitor. The size of the screen's resolution would not matter." , 'semper-fi-lite' ) ) ); ?></p>

                <div class="price">

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_5' , get_admin_url() . 'customize.php' ) ); ?>" itemprop="url">&#36;<span><?php echo absint ( get_theme_mod( 'store_front_price_5' , '32' ) ); ?></span></a>

                </div>

                <a class="button product_type_simple" href="<?php echo esc_url( get_theme_mod( 'store_front_url_5' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( get_theme_mod( 'store_front_button_text_5' , __( 'View the product page' , 'semper-fi-lite' ) ) ); ?></a>

            </section>
            
<?php  } if ( absint ( get_theme_mod( 'store_front_product_enable_6' , true ) ) ) { ?>
            
            <section>

                <a class="post-edit-link" href="<?php echo esc_url( get_theme_mod( 'store_front_url_6' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( 'Edit this Product' , 'semper-fi-lite' ); ?></a>

                <h5>

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_6' , get_admin_url() . 'customize.php' ) ); ?>"><span><?php esc_html_e( get_theme_mod( 'store_front_title_6' , __( 'Moble First Responsive Design' , 'semper-fi-lite' ) ) ); ?></span></a>

                </h5>

                <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_6' , get_admin_url() . 'customize.php' ) ); ?>">
                    
                    <img<?php semper_fi_lite_image_alt( 'store_front_img_6' , 'store_front_title_6' ) ?> width="500" height="500" src="<?php semper_fi_lite_image( 'store_front_img_6' , '/inc/store-front/images/Klash-Tandem-Hanycam-500x500.jpg' , 500 , 500 ); ?>" />
                </a>

                <p><?php esc_html_e( get_theme_mod( 'store_front_text_6' , __( "Historically, most web designers and their clients have approached the desktop side of any project first, while leaving the mobile part as a secondary goal that gets accomplished later. There are over 1.2 billion mobile web users worldwide. In the U.S., 25% of Web users are mobile-only. A theme that is designed as a mobile website first and desktop second would ensure the best compatibility no matter what the size of the screen the website is viewed on." , 'semper-fi-lite' ) ) ); ?></p>

                <div class="price">

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_6' , get_admin_url() . 'customize.php' ) ); ?>" itemprop="url">&#36;<span><?php echo absint ( get_theme_mod( 'store_front_price_6' , '18' ) ); ?></span></a>

                </div>

                <a class="button product_type_simple" href="<?php echo esc_url( get_theme_mod( 'store_front_url_6' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( get_theme_mod( 'store_front_button_text_6' , __( 'View the product page' , 'semper-fi-lite' ) ) ); ?></a>

            </section>
            
<?php } if ( absint ( get_theme_mod( 'store_front_product_enable_7' , true ) ) ) { ?>
            
            <section>

                <a class="post-edit-link" href="<?php echo esc_url( get_theme_mod( 'store_front_url_7' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( 'Edit this Product' , 'semper-fi-lite' ); ?></a>

                <h5>

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_7' , get_admin_url() . 'customize.php' ) ); ?>"><span><?php esc_html_e( get_theme_mod( 'store_front_title_7' , __( 'Woocommerce Shopping Cart' , 'semper-fi-lite' ) ) ); ?></span></a>

                </h5>

                <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_7' , get_admin_url() . 'customize.php' ) ); ?>">
                    
                    <img<?php semper_fi_lite_image_alt( 'store_front_img_7' , 'store_front_title_7' ) ?> width="500" height="500" src="<?php semper_fi_lite_image( 'store_front_img_7' , '/inc/store-front/images/Head-Down-Steve-500x500.jpg' , 500 , 500 ); ?>" />
                </a>

                <p><?php esc_html_e( get_theme_mod( 'store_front_text_7' , __( "In April 2017, a total of 1,986,324 websites used WooCommerce, also 23,724 of the worlds top million websites used WooComerce. Thats 0.5% of all websites or 2.8% of the top million websites. A WordPress theme customized with WooCommerce code has a clean and simple shopping cart experience ready to go. Making it easy to set up an e-commerce shop quickly and focus on the products instead of the website design." , 'semper-fi-lite' ) ) ); ?></p>

                <div class="price">

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_7' , get_admin_url() . 'customize.php' ) ); ?>" itemprop="url">&#36;<span><?php echo absint ( get_theme_mod( 'store_front_price_7' , '25' ) ); ?></span></a>

                </div>

                <a class="button product_type_simple" href="<?php echo esc_url( get_theme_mod( 'store_front_url_7' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( get_theme_mod( 'store_front_button_text_7' , __( 'View the product page' , 'semper-fi-lite' ) ) ); ?></a>

            </section>
            
<?php } if ( absint ( get_theme_mod( 'store_front_product_enable_8' , true ) ) ) { ?>
            
            <section>

                <a class="post-edit-link" href="<?php echo esc_url( get_theme_mod( 'store_front_url_8' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( 'Edit this Product' , 'semper-fi-lite' ); ?></a>

                <h5>

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_8' , get_admin_url() . 'customize.php' ) ); ?>"><span><?php esc_html_e( get_theme_mod( 'store_front_title_8' , __( 'Google Structured MicroData' , 'semper-fi-lite' ) ) ); ?></span></a>

                </h5>

                <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_8' , get_admin_url() . 'customize.php' ) ); ?>">
                    
                    <img<?php semper_fi_lite_image_alt( 'store_front_img_8' , 'store_front_title_8' ) ?> width="500" height="500" src="<?php semper_fi_lite_image( 'store_front_img_8' , '/inc/store-front/images/Undy-Hundy-Jon-Klash-Clint-Hunter-500x500.jpg' , 500 , 500 ); ?>" />
                </a>

                <p><?php esc_html_e( get_theme_mod( 'store_front_text_8' , __( "Google Search works hard to understand the content of a website. Structured data is a standardized format for providing information to a search engine to help with classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on. With Structured Microdata coded into a website, it helps ensures the best possible search results. Structured data isn't something an SEO plugin can provide, only a theme author can code microdata." , 'semper-fi-lite' ) ) ); ?></p>

                <div class="price">

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_8' , get_admin_url() . 'customize.php' ) ); ?>" itemprop="url">&#36;<span><?php echo absint ( get_theme_mod( 'store_front_price_8' , '68' ) ); ?></span></a>

                </div>

                <a class="button product_type_simple" href="<?php echo esc_url( get_theme_mod( 'store_front_url_8' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( get_theme_mod( 'store_front_button_text_8' , __( 'View the product page' , 'semper-fi-lite' ) ) ); ?></a>

            </section>
            
<?php } if ( absint ( get_theme_mod( 'store_front_product_enable_9' , true ) ) ) { ?>
            
            <section>

                <a class="post-edit-link" href="<?php echo esc_url( get_theme_mod( 'store_front_url_9' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( 'Edit this Product' , 'semper-fi-lite' ); ?></a>

                <h5>

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_9' , get_admin_url() . 'customize.php' ) ); ?>"><span><?php esc_html_e( get_theme_mod( 'store_front_title_9' , __( 'Schwarttzy' , 'semper-fi-lite' ) ) ); ?></span></a>

                </h5>

                <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_9' , get_admin_url() . 'customize.php' ) ); ?>">
                    
                    <img<?php semper_fi_lite_image_alt( 'store_front_img_9' , 'store_front_title_9' ) ?> width="500" height="500" src="<?php semper_fi_lite_image( 'store_front_img_9' , '/inc/store-front/images/Jenny-Grabing-Jennys-Butt-500x500.jpg' , 500 , 500 ); ?>" />  
                </a>

                <p><?php esc_html_e( get_theme_mod( 'store_front_text_9' , __( "All of the themes on WordPress.org are created, developed, and maintained free of charge by the author. Theme developers are allowed to upsell their theme but displaying obtrusive upselling isn't allowed. Only one link on the top level in the customizer is allowed. This must be done using the customizer API (no injecting via JavaScript). Further unobtrusive links are allowed in a separate section." , 'semper-fi-lite' ) ) ); ?></p>

                <div class="price">

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_9' , get_admin_url() . 'customize.php' ) ); ?>" itemprop="url">&#36;<span><?php echo absint(  get_theme_mod( 'store_front_price_9' , '89' ) ); ?></span></a>

                </div>

                <a class="button product_type_simple" href="<?php echo esc_url( get_theme_mod( 'store_front_url_9' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( get_theme_mod( 'store_front_button_text_9' , __( 'View the product page' , 'semper-fi-lite' ) ) ); ?></a>

            </section>
            
<?php } if ( absint ( get_theme_mod( 'store_front_product_enable_10' , true ) ) ) { ?>
            
            <section>

                <a class="post-edit-link" href="<?php echo esc_url( get_theme_mod( 'store_front_url_10' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( 'Edit this Product' , 'semper-fi-lite' ); ?></a>

                <h5>

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_10' , get_admin_url() . 'customize.php' ) ); ?>"><span><?php esc_html_e( get_theme_mod( 'store_front_title_10' , __( 'Semper Fi Plus!' , 'semper-fi-lite' ) ) ); ?></span></a>

                </h5>

                <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_10' , get_admin_url() . 'customize.php' ) ); ?>">
                    
                    <img<?php semper_fi_lite_image_alt( 'store_front_img_10' , 'store_front_title_10' ) ?> width="500" height="500" src="<?php semper_fi_lite_image( 'store_front_img_10' , '/inc/store-front/images/Moab-Schwarttzy-H3-Hummer-Top-of-the-World-Over-Hang-Off-Road-4x4-500x500.jpg' , 500 , 500 ); ?>" />
                </a>

                <p><?php esc_html_e( get_theme_mod( 'store_front_text_10' , __( "No options or panels/sections can be locked behind a paywall. All settings in a theme must work. Although a WordPress theme author could develop a plugin that integrates with the free theme using built-in hooks to add in additional options." , 'semper-fi-lite' ) ) ); ?></p>

                <div class="price">

                    <a href="<?php echo esc_url( get_theme_mod( 'store_front_url_10' , get_admin_url() . 'customize.php' ) ); ?>" itemprop="url">&#36;<span><?php echo absint ( get_theme_mod( 'store_front_price_10' , '11' ) ); ?></span></a>

                </div>

                <a class="button product_type_simple" href="<?php echo esc_url( get_theme_mod( 'store_front_url_10' , get_admin_url() . 'customize.php' ) ); ?>"><?php esc_html_e( get_theme_mod( 'store_front_button_text_10' , __( 'View the product page' , 'semper-fi-lite' ) ) ); ?></a>

            </section>

<?php } ?>
        </section>

    </article>

<?php do_action( 'semper_fi_lite_after_store_front' ); ?>

<?php } ?>