I tried adding some HTML code to a WordPress theme header file. It worked well at least that's what I thought but when I click one of my post, it redirects the whole site to the same posts over and over again. The pictures and titles are so different though so I am sure it loops correctly. I feel it is where I am adding the HTML code. It is in the theme header PHP file. How can I do this better?

<!-- Responsive slider-->
    <?php 
                    if(!is_front_page()){
                        echo '
                        <div class="slider-container">
                          <h4 class="slider-header">
                          <span class="slider-header_text">Trending</span>
                          </h4>

                           <div class="slider">
      
                             <div class="carousel-container">
                                <div class="carousel-inner">
                                 <div class="track">
                                   ';
                                global $wpdb;               
                                $query = new WP_Query(array(
                                 'posts_per_page' => 12,
                               'category_name' => 'featured-posts',
                                       ));
                                 $posts =  $query -> posts;
                   
                                 ?>
                                 <?php 
                                foreach ($posts as $post) {
                                echo ' <div class="card-container">
                               <a href="'.$post->guid.'" class="card">
                               <div class="img">
                                  <img src="'.get_the_post_thumbnail_url( $post -> ID, 'thumbnail' ).'" alt="">
                               /div>
                               <div class="info">
                                  <h5>'.$post->post_title.'</h5>
                                </div>
                               </a>
                               </div> 
                                ';
                    
                                 ?>
                                <?php } 
                               echo '
                               </div>
                              </div>
                  <div class="nav">
                     <button class="prev">
                    <i class="fas fa-angle-left"></i>
                    </button>
                    <button class="next">
                       <i class="fas fa-angle-right"></i>
                     </button>
                  </div>
               </div>
           </div>
       </div>
                    
                    ';
                    
                    ?>
                    <?php } ?>
                <!--End of responsive slider-->

my code

Website header php file code I added it to the site grid.

<div id="zox-site-grid">
                    <div id="zox-site-wall-small">
                        <?php $zox_lead_page2 = get_option('zox_lead_page2'); if (($zox_lead_page2 == "1" && is_front_page()) || ($zox_lead_page2 == "2" &&  ! is_404()) || ($zox_lead_page2 == "3" && ! is_front_page() && ! is_404())) { ?>
                            <?php $zox_lead_img2 = get_option('zox_lead_img2'); $zox_lead_url2 = get_option('zox_lead_url2'); if ($zox_lead_img2 && ! is_404()) { ?>
                                <div id="zox-lead-bot">
                                    <a href="<?php echo esc_url($zox_lead_url2); ?>" target="_blank">
                                    <img src="<?php echo esc_url($zox_lead_img2); ?>" />
                                    </a>
                                </div><!--zox-lead-bot-->
                            <?php } else { ?>
                                <?php $zox_lead_ad2 = get_option('zox_lead_ad2'); if ($zox_lead_ad2 && ! is_404()) { ?>
                                    <div id="zox-lead-bot">
                                        <?php echo html_entity_decode($zox_lead_ad2); ?>
                                    </div><!--zox-lead-bot-->
                                <?php } ?>
                            <?php } ?>
                        <?php } ?>
                        <div id="zox-main-body-wrap" class="left relative">