<?php defined('ABSPATH') || die('Cheatin\' uh?');?>
<link href="https://fonts.google.com/specimen/Oswald" rel="stylesheet">
<link href="https://fonts.google.com/specimen/Roboto?query=roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins" rel="stylesheet">

    
    <div style="height:103px;background-color:#F4F4F4;">
        <form method="POST" enctype="multipart/form-data">
        <?php STRB_Classes_Helpers_Tools::setNonce('strb_settings_prev', 'strb_nonce'); ?>
        <input type="hidden" name="action" value="strb_settings_prev"/>     
        <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>   
        <div class="back-setup" style="position:absolute;margin-top:25px;left:1.1vw;">
            <div style="">
                <button type="submit" style="font-size:1.5vw;font-weight:600;display: inline-flex;padding: 12px 20px;justify-content: center;align-items: center;background: var(--Logo-Green, #033);color:white;border:none;border-radius:0px;width:9vw;height:3vw;" class="btn rounded-2 btn-primary btn-lg py-2 px-5"><i class="bx bx-chevron-left" style="color:white;margin-left:-10px;margin-top:3px;"><span ></i><?php echo esc_html__("Back", 'squirrly-seo'); ?></span></button>
            </div>
        </div>
        </form>  
      
    </div>

   <div class="top-menu-themes" style="background-color:white;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;min-height:14vw;border-bottom:none;margin-bottom:30px;position:relative;padding-bottom:2vw;z-inex:2000; margin-top:2vw;">
      
        <div class="wrapper-box active"  style="" id="all">
        <div class="" style="display:flex;justify-content:center;align-items:center;flex-direction:column;">
            <?php   echo '<img class="poster-img all"  style="border-radius:8px;width:20vw;height:13vw;" src='.plugins_url(). "/starboxnew/view/assets/img/All.png".' alt="">';
            ?> 
            <div style="font-family:'Poppins';height:30px;text-align:center;font-size:1.4vw;margin-top:10px;font-weight:700;">All</div>
         </div>
        </div>

        <div class="wrapper-box"  style="" id="visual">
        <div class="" style="display:flex;justify-content:center;align-items:center;flex-direction:column;">
            <?php   echo '<img class="poster-img visual"  style="border-radius:8px;filter:grayscale(100%);width:20vw;height:13vw;" src='.plugins_url(). "/starboxnew/view/assets/img/Visual.png".' alt="">';
            ?> 
            <div style="font-family:'Poppins';height:30px;text-align:center;font-size:1.4vw;margin-top:10px;font-weight:700;">Highly Visual</div>
         </div>
        </div>

        <div class="wrapper-box"  style="" id="standard">
        <div class="" style="display:flex;justify-content:center;align-items:center;flex-direction:column;">
            <?php   echo '<img class="poster-img standard"  style="border-radius:8px;filter:grayscale(100%);width:20vw;height:13vw;" src='.plugins_url(). "/starboxnew/view/assets/img/Standard.png".' alt="">';
            ?> 
            <div style="font-family:'Poppins';height:30px;text-align:center;font-size:1.4vw;margin-top:10px;font-weight:700;">Standard</div>
         </div>
        </div>

        <div class="wrapper-box"  style="" id="modern">
        <div class="" style="display:flex;justify-content:center;align-items:center;flex-direction:column;">
            <?php   echo '<img class="poster-img modern"  style="border-radius:8px;filter:grayscale(100%);width:20vw;height:13vw;" src='.plugins_url(). "/starboxnew/view/assets/img/Modern.png".' alt="">';
            ?> 
            <div style="font-family:'Poppins';height:30px;text-align:center;font-size:1.4vw;margin-top:10px;font-weight:700;">Modern</div>
         </div>
        </div>

    <div class="filteredb" style="display:none;background-color:white;width:100%;justify-content:flex-end;margin-top:1vw;">
        <div style="display:flex;width:100%;align-items:center;justify-content:flex-end;">
            <h3 style="position:relative;left:-1.5vw;font-size:1.3vw;font-weight:500;">Filtered by blogger type:</h3>
            <div class="select-menu" id="select-menutwo" style="margin-right:20px;">
                   
            <div class="select-btn" id="select-btntwo" style="height:3.5vw;width:19vw;background-color:#F3F6F8;">
                <span  class="btn-text" style="color:black;font-size:1.4vw;font-weight:500;">All</span>
                <i class="bx bx-chevron-down" style="color:black;font-size:1.4vw;font-weight:500;"></i>
            </div>
        
        <ul class="options"style="overflow:hidden;position:absolute; overflow-y:scroll;height:400px;font-size:1.4vw; width:19vw;right:20px; margin-top:5px; z-index:1000;color:black; background-color: white;">
                            <li class="option" id="all">
                                <span class="option-text">All</span>
                            </li>
                            <li class="option" id="crafts">
                                <span class="option-text">Crafts</span>
                            </li>
                            <li class="option" id="fashion">
                                <span class="option-text">Fashion</span>
                            </li>
                            <li class="option" id="fitness">
                                <span class="option-text">Fitness</span>
                            </li>
                            <li class="option" id="food">
                                <span class="option-text">Food blogger</span>
                            </li>
                            <li class="option" id="geek">
                                <span class="option-text">Geek</span>
                            </li>
                            <li class="option" id="holiday">
                                <span class="option-text">Holiday</span>
                            </li>
                            <li class="option" id="interior-design">
                                <span class="option-text">Interior Design</span>
                            </li>
                            <li class="option" id="parenting">
                                <span class="option-text">Parenting</span>
                            </li>
                            <li class="option" id="pets">
                                <span class="option-text">Pets</span>
                            </li>
                            <li class="option" id="photograpy">
                                <span class="option-text">Photography</span>
                            </li>
                            <li class="option" id="real-estate">
                                <span class="option-text">Real Estate</span>
                            </li>
                            <li class="option" id="tech">
                                <span class="option-text">Tech</span>
                            </li>
                            <li class="option" id="travel">
                                <span class="option-text">Travel</span>
                            </li>
                            <li class="option" id="wedding">
                                <span class="option-text">Wedding</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
         
        </div>
  
   
   
   <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> 
   
   
        <div class="all-themes" style="position:relative;margin-top:-4.2vw;">

        <!--Visul Crafts-->
        <div class="visual-category crafts-wrap" style="gap:2vw;">
        <div class="poster-wrapper active"  style="width:100%;z-index:100;gap:2vw;">

        <div class="poster" >
            <?php  echo '<img id="Crafts/Lino+Crafting"  style="height:100%;width:100%;" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back3.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="position:absolute;
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="position:absolute;left:50%;transform:translate(-50%, -50%);color:black"/>      
         </div>

        <div class="poster" >
            <?php  echo '<img id="Crafts/Kniting" style="height:100%;width:100%;" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back4.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Pottery" style="height:100%;width:100%;" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Wood" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Blacksmith" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Paper" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Painting" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Carpenter" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Crafts/Paper Flowers" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Crafts/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>

    <!--Visul Fashion-->
    <div class="visual-category fashion-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Fashion/Woman" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back5.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Fashion/Man" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back9.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Woman+Portrait" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Man1" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Woman1" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Blouse" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Clothes" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back4.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Man2" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fashion/Woman2" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>


    <!--Visul Fitness-->
    <div class="visual-category fitness-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Fitness/Man+Gym" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back3.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Fitness/Woman+Gym" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back4.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Running" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Woman+Back" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Man+Rope" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Shoes" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Man" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Yoga" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Fitness/Broccoli" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>

    <!--Visual Food-->
    <div class="visual-category food-blogger-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Food/Pancakes" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back5.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Food/Beer" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back4.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/Clementine" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/Cupcakes" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/Cake" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/Pasta" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/French+Toast" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/Plums" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Food/Quiche" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>

     <!--Visul Geek-->
     <div class="visual-category geek-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Geek/Ant+Man" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back9.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Geek/Thanos" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back3.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Mandalorian" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Comic+Books" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Deadpool" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Game+Boy" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back4.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Batman" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Pokemon" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Geek/Game+Board" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>

     <!--Visul Holiday-->
     <div class="visual-category holiday-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Holiday/Easter+Eggs" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back6.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Holiday/Halloween+Pumpkin" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back4.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/Mistletoe" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/Sparkles" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/Christmas" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/Easter" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/Pink+Easter" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/Halloween" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Holiday/New+Year" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>

     <!--Visul Interior Design-->
     <div class="visual-category interior-design-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Interior+Design/Chairs+and+Lamp" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back1.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Interior+Design/Pillow" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back4.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Desk" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Chair" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Frames" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Living+Room" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Table" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Kitchen" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Interior+Design/Dinning+Room" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>

    <!--Visul Parenting-->
    <div class="visual-category parenting-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Parenting/Mom" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back9.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Parenting/Beach" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back8.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Mom+(1)" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Hands" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back4.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Mom+(2)" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Dad" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Vacation" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Child" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Parenting/Legs" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>


    <!--Visual Pet-->
    <div class="visual-category pet-blogger-wrap" style="">
        <div class="poster-wrapper active" style="z-index:1000;">

        <div class="poster">
            <?php  echo '<img id="Pets/Dog+With+Hat" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back7.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Pets/Goat" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back8.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoTwo" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indextwo" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Pets/Cat+and+Dog" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back4.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoThree" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Pets/Orange+Dog" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back1.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoFour" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Pets/Cat+Looking+Up" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back9.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoFive" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Pets/Orange+Cat" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back5.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoSix" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
         <div class="poster">
            <?php  echo '<img id="Pets/Dog" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back3.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoSeven" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
         <div class="poster">
            <?php  echo '<img id="Pets/Guinea+Pig+2" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back2.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoEight" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
         <div class="poster">
            <?php  echo '<img id="Pets/Guinea+Pig" class="img-wrapper"  src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back6.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoNine" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
        </div>
    </div>
        
    <!--Visul Photo-->
    <div class="visual-category photo-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Photography/Desert" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back4.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Photography/Cliff" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back7.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Ice+Cave" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Winter+Lake" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Lake" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Zebra" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Elephant" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Forest" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Photography/Leaves" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>


    <!--Visul Real Estate-->
    <div class="visual-category real-estate-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Real+Estate/House+with+pool" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back5.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Real+Estate/House+Wood" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back1.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/Inside" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/Terace" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/Roof" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back4.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/Pool" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/House+with+nature" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/Kitchen" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Real+Estate/Pool+with+house" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Real+Estate/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>


     <!--Visul Tech-->
     <div class="visual-category tech-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Tech/Lens" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back4.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Tech/Camera" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back8.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Woman" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Board" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Drone" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Headphones" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back3.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Tech+Board" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back2.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Robot" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Tech/Room" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>


     <!--Visul Travel-->
     <div class="visual-category travel-wrap" style="">
        <div class="poster-wrapper active"  style="z-index:100;">

        <div class="poster">
            <?php  echo '<img id="Travel/Passports" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back3.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster">
            <?php  echo '<img id="Travel/Northern+Lights" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back2.png".' alt="">';
            ?>
            <input class="preview" type="button" value="Preview" name="photoBlogger/photoTwo" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/Pool" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back9.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoThree" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/River" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back4.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFour" style="
                left: 50%;transform: translate(-50%, -50%);"/> 
             <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/Lake" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back5.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoFive" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/Desert" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back6.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSix" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/Great+Wall+of+China" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back7.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoSeven" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/VW+Bus+T2" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back1.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoEight" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster">
             <?php  echo '<img id="Travel/Boat" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Travel/back8.png".' alt="">';
             ?>
             <input class="preview" type="button" value="Preview" name="photoBlogger/photoNine" style="
                left: 50%;transform: translate(-50%, -50%);"/>
             <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        </div>
    </div>

    <!--Visual Wedding-->
    <div class="visual-category wedding-blogger-wrap" style="">
        <div class="poster-wrapper active" style="z-index:1000;">

        <div class="poster">
            <?php  echo '<img id="Wedding/Table" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back8.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoOne" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoOne/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Wedding/Bride" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back2.png".'  alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoTwo" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoTwo/indextwo" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Wedding/Bands" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back4.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoThree" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoThree/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Wedding/Venue" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back1.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoFour" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoFour/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Wedding/Couple" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back6.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoFive" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoFive/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

         <div class="poster">
            <?php  echo '<img id="Wedding/Table+Setting" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back5.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoSix" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoSix/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
         <div class="poster">
            <?php  echo '<img id="Wedding/Couple+At+See" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back7.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoSeven" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoSeven/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
         <div class="poster">
            <?php  echo '<img id="Wedding/Couple+Close+Up" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back9.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoEight" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoEight/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
         <div class="poster">
            <?php  echo '<img id="Wedding/Couple+In+Rain" class="img-wrapper" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Wedding/back3.png".' alt="">';
            ?>
            <input class="preview" type="submit" value="Preview" name="photoBlogger/photoNine" placeholder="im1" style="
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="photoBlogger/photoNine/indexone" style="left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>
       
        </div>
    </div>
    
    </br>

    <!--Standard-->

    <div class="poster-wrapper-standard active" style="align-items:center;position:relative;top:-1vw;">
        <div style=" display: flex;align-items:center;justify-content:center;flex-wrap: wrap;min-height: 20vw;position:relative;top:2vw; background-color: white; gap:2vw; ">

        <div class="poster poster-standard" style="overflow:hidden;background-color:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;">
            <img id="im2" class="img-wrapper" style="display:none;" src=".">
            <div class="" style="opacity:60%;scale:0.6;">
                <?php  echo STRB_Classes_ObjController::getClass('STRB_Classes_FrontController')->getThemeViewImg(STRB_Classes_Helpers_Tools::getOption('strb_user_id'),'classic/business',FALSE); ?>
            </div>
            <input class="preview-standard" type="button" value="Preview" name="classic/business" style="z-index:100;
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="classic/business" style="z-index:100;left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster poster-standard" style="overflow:hidden;background-color:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;">
            <img id="im2" class="img-wrapper" style="display:none;" src=".">
            <div style="opacity:60%;scale:0.6;">
                <?php  echo STRB_Classes_ObjController::getClass('STRB_Classes_FrontController')->getThemeViewImg(STRB_Classes_Helpers_Tools::getOption('strb_user_id'),'classic/business2',FALSE); ?>
            </div>
            <input class="preview-standard" type="button" value="Preview" name="classic/business2" style="z-index:100;
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="classic/business2" style="z-index:100;left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster poster-standard" style="overflow:hidden;background-color:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;">
            <img id="im2" class="img-wrapper" style="display:none;" src=".">
            <div style="opacity:60%;scale:0.6;">
                <?php  echo STRB_Classes_ObjController::getClass('STRB_Classes_FrontController')->getThemeViewImg(STRB_Classes_Helpers_Tools::getOption('strb_user_id'),'classic/business3',FALSE); ?>
            </div>
            <input class="preview-standard" type="button" value="Preview" name="classic/business3" style="z-index:100;
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="classic/business3" style="z-index:100;left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>
        </div>
    </div>
  
        

    <!--Modern-->
    <div class="poster-wrapper-modern active" style="z-index:1000;width:100%;gap:2vw;background-color:white;min-height: 300px;align-items:center;justify-content:center;padding-top:20px;margin-top:-1vw;">

        <div class="poster" style="display:flex;align-items:center;justify-content:center;">
            <img id="im2" class="img-wrapper" style="display:none;" src=".">
            <div class="poster-modern">
                <div style="border-radius:8px;overflow:hidden;">
                    <?php  echo STRB_Classes_ObjController::getClass('STRB_Classes_FrontController')->getThemeViewImg(STRB_Classes_Helpers_Tools::getOption('strb_user_id'),'standard/business1',FALSE);?>
                </div>
            </div>
            <input class="preview-standard" type="button" value="Preview" name="standard/business1" style="z-index:100;
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="standard/business1" style="z-index:100;left:50%;transform:translate(-50%, -50%);color:black"/>
         </div>

        <div class="poster" style="display:flex;align-items:center;justify-content:center;">
            <img id="im2" class="img-wrapper" style="display:none;" src=".">
            <div class="poster-modern" style="">
                <div style="border-radius:8px;overflow:hidden;width:500px;height:250px;">
                    <?php  echo STRB_Classes_ObjController::getClass('STRB_Classes_FrontController')->getThemeViewImg(STRB_Classes_Helpers_Tools::getOption('strb_user_id'),'standard/business2',FALSE); ?>
                </div>
            </div>
            <input class="preview-standard" type="button" value="Preview" name="standard/business2" style="z-index:100;
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="standard/business2" style="z-index:100;left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster" style="display:flex;align-items:center;justify-content:center;">
            <img id="im2" class="img-wrapper" style="display:none;" src=".">
            <div class="poster-modern" style="">
                <div style="border-radius:8px;overflow:hidden;width:500px;height:250px;">
                    <?php  echo STRB_Classes_ObjController::getClass('STRB_Classes_FrontController')->getThemeViewImg(STRB_Classes_Helpers_Tools::getOption('strb_user_id'),'standard/business3',FALSE); ?>
                </div>
            </div>
            <input class="preview-standard" type="button" value="Preview" name="standard/business3" style="z-index:100;
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="standard/business3" style="z-index:100;left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster" style="display:flex;align-items:center;justify-content:center;">
        <img id="im2" class="img-wrapper" style="display:none;" src=".">
        <div class="poster-modern" style="">
                <div style="border-radius:8px;overflow:hidden;width:500px;height:250px;">
                    <?php  echo STRB_Classes_ObjController::getClass('STRB_Classes_FrontController')->getThemeViewImg(STRB_Classes_Helpers_Tools::getOption('strb_user_id'),'standard/business4',FALSE); ?>
                </div>
            </div>
            <input class="preview-standard" type="button" value="Preview" name="standard/business4" style="z-index:100;
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="standard/business4" style="z-index:100;left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

        <div class="poster" style="display:flex;align-items:center;justify-content:center;">
        <img id="im2" class="img-wrapper" style="display:none;" src=".">
        <div class="poster-modern" style="">
            <div style="border-radius:8px;overflow:hidden;width:500px;height:250px;">
                <?php  echo STRB_Classes_ObjController::getClass('STRB_Classes_FrontController')->getThemeViewImg(STRB_Classes_Helpers_Tools::getOption('strb_user_id'),'standard/business5',FALSE); ?>
            </div>
        </div>
            <input class="preview-standard" type="button" value="Preview" name="standard/business5" style="z-index:100;
                left: 50%;transform: translate(-50%, -50%);"/>
            <input class="select" type="button" value="Select" name="standard/business5" style="z-index:100;left:50%;transform:translate(-50%, -50%);color:black"/>
        </div>

    </div>

    </div>
        </br>
    <div class="edit-theme" style="display:none;height:110%;background-color:white;margin-top:-140px;">
        <div class="edit-theme-media-container" style="position:relative;">
            <?php  echo STRB_Classes_ObjController::getClass('STRB_Classes_FrontController')->get_view('Blocks/EditTheme');?>
        </div>
    </div>
    <?php wp_enqueue_media();?>
    </div>

   <!--Preview pannel-->
      
        <div class="preview-box" style=" left: 50%;transform: translate(-50%, -50%);top: 55%;display:none;
        border-radius: 8px;z-index:100;width:70vw;height:57vw;margin-top:30px;left:40%; box-shadow: rgba(1, 0, 0, 1) 0px 20px 150px;scale:0.73;">

            <div class="preview-left" id="themee" style="position:absolute;overflow:hidden;object-fit:contain;background-color:rgb(255, 255,255,0.5);">
            </div>

            <?php  echo '<img class="img-close" style="position:relative;top:1vw;height:3.3vw;width:3.3vw;" src='.plugins_url(). "/starboxnew/view/assets/img/cross.png".' alt="">'; ?>
           
            <div class="preview-right" style="width:30vw;position:relative;left:42vw;top:15vw;">  
                <div class="preview-info" style="height:10vw;width:27vw;display:flex;flex-direction:column;justify-content:center;align-items:center;">
                    <h3 style="font-size:1.45vw;font-weight:600;font-family:Poppins;">Highly Visual/Photo Blogger</h3>
                    <input class="preview-input" name=""  style="width:20vw;height:4vw;background-color:#003333;font-size:1.4vw;font-weight:600;color:white;border-radius:0px;position:relative;" id="select-theme-edit" type="button" value="Select this theme" />
                    <input class="preview-input-st select"   style="display:none;width:20vw;height:4vw;background-color:#003333;font-size:1.4vw;font-weight:600;color:white;border-radius:0px;position:relative;"  type="button" value="Select this theme" />
                </div>
            </div>
            
    
            <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

            <div class="swiper mySwiper" style="width:38vw;height:15vw;top:27.4vw;position:absolute;top:41vw;left:10px;border-radius:6px;">
                <div class="swiper-wrapper" style="">
                         <div class="swiper-slide" style="">
                            <?php echo '<input type="image" class="theme-index" id="prevOne" value="indexone"  class="img-wrapper-options" style="height: 15vw;vw;width:14vw;" alt="">';?>
                            <?php echo '<input type="image" class="theme-index" id="prevTwo" value="indextwo"  class="img-wrapper-options" style="height:15vw;width:14vw;" alt="">';?>
                        </div>
                        <div class="swiper-slide" style="">
                            <?php echo '<input type="image" class="theme-index" id="prevThree" value="indexthree" class="img-wrapper-options" style="height: 15vw;vw;width:14vw;" alt="">';?>
                            <?php echo '<input type="image" class="theme-index" id="prevFour" value="indexfour"  class="img-wrapper-options" style="height: 15vw;vw;width:14vw;" alt="">';?>
                        </div>
                        <div class="swiper-slide">
                            <?php echo '<input type="image" class="theme-index" id="prevFive" value="indexfive"  class="img-wrapper-options" style="height: 15vw;vw;width:14vw;" alt="">';?>
                            <?php echo '<input type="image" class="theme-index" id="prevSix" value="indexsix"  class="img-wrapper-options" style="height: 15vw;vw;width:14vw;" alt="">';?>
                        </div>
                        <div class="swiper-slide">
                            <?php echo '<input type="image" class="theme-index" id="prevSeven" value="indexseven" class="img-wrapper-options" style="height: 15vw;vw;width:14vw;" alt="">';?>
                            <?php echo '<input type="image" class="theme-index" id="prevEight" value="indexeight" class="img-wrapper-options" style="height: 15vw;vw;width:14vw;" alt="">';?>
                        </div> 
                    </div>
                <div class="swiper-button-next" style="color:#003333;"></div>
                <div class="swiper-button-prev" style="color:#003333;"></div>
                <div class="swiper-pagination"style="color:#003333;font-size:1.3vw;"></div>
                </div>
            </div>
        </div>
        </div>
            
<script>

swiper;
var swiper = new Swiper(".mySwiper", {
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

</script>
   
   
    
    
   