<?php
  while ( have_posts() ) :
    the_post();
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="canonical" href="https://blablabla.com" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors" />
    <meta name="generator" content="Hugo 0.84.0" />
    <title>Starter Template · Bootstrap v5.0</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

    <!-- Custom styles for this template -->
    <!-- <link href="starter-template.css" rel="stylesheet" /> -->
    <!-- <link href="style.css" rel="stylesheet" /> -->
    <link href="<?php echo get_template_directory_uri() . '/template-parts/single/css/style.css'; ?>" rel="stylesheet" />
    <link href="<?php echo get_template_directory_uri() . '/template-parts/single/css/single_append.css'; ?>" rel="stylesheet" />

    <!-- fontawesome -->
    <link
      rel="stylesheet"
      href="/cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
      integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>

  <body>
    <header class="col-lg-8 mx-auto py-md-1 header-container" style="position: sticky; top: 0; width: 100%">
      <div class="row" style="height: 100%">
        <a
          href="/"
          class="col-xs-12 col-md-2 header-company-logo-container"
          style="display: flex; flex-direction: column; justify-content: center; align-items: center"
        >
          <div
            class="header-company-logo"
            style="
              background-image: url('//unblast.com/wp-content/themes/unblast-beta/images/unblast.svg');
              background-size: contain;
              background-position: center;
              background-repeat: no-repeat;
            "
          ></div>
        </a>
        <div class="col-xs-12 col-md-8">
          <div class="row" style="height: 100%; align-items: center;">
            <div
              class="col-12 search-box-container"
              style="display: flex; flex-direction: column; justify-content: center; align-items: center"
            >
              <div id="search-box">
                <div style="display: flex; justify-content: flex-end; align-items: center">
                  <div class="input-group">
                    <input
                      type="text"
                      class="form-control search-input"
                      aria-label="Dollar amount (with dot and two decimal places)"
                      placeholder="Search"
                    />
                  </div>
                  <div style="position: relative; right: 30px; width: 0px">
                    <i class="fas fa-search"></i>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="col-12 links-container"
              style="display: none; flex-direction: column; justify-content: center; align-items: center"
            >
              <div style="width: 100%">
                <ul>
                  <li><a href="#" class="head-nav-link">Mockups</a></li>
                  <li><a href="#" class="head-nav-link">Fonts</a></li>
                  <li><a href="#" class="head-nav-link">Templates</a></li>
                  <li><a href="#" class="head-nav-link">Graphics</a></li>
                  <li><a href="#" class="head-nav-link">Colors</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="post-page p-1 px-3">
      <div class="container px-4">
        <div class="row gx-5">
          <div class="col-12 col-xl-9">
            <div class="post-content" style="margin-bottom: 1rem">
              <?php get_template_part( 'template-parts/content/content-single' ); ?>
            </div>
          </div>
          <div class="col-12 col-xl-3">
            <div>
              <div class="download-plate">
                <button type="button" class="btn btn-primary d-none">
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    Free Download <i class="fa fa-download" aria-hidden="true"></i>
                  </div>
                </button>

                <div class="description">
                  <div class="description-item"><label>Category</label> Mockups</div>
                  <div class="description-item"><label>Software / Format</label> ps</div>
                  <div class="description-item"><label>Posted : </label><b>12 Sep, 2020</b></div>
                  <div class="description-item">1,736 Views</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- bookmark: 同一Categories 其他作品 -->
        同一Categories 其他作品??
        <div class="row">
          <div class="col">
            <div class="row more-item">
              <div class="col-6 col-xl-2">
                <div class="more-item-container" style="display: flex; flex-direction: column; gap: 1rem">
                  <div>
                    <img
                      alt="iMac 24-inch Mockup"
                      class="post-image"
                      src="https://unblast.com/wp-content/uploads/2020/05/Website-Mockup-0.jpg"
                    />
                  </div>
                  <div class="more-item-description-container">
                    <div class="header">
                      <div class="title">Free iMac 24-inch Mockup 2021 (PSD)</div>
                      <div class="icon">
                        <img src="https://unblast.com/wp-content/themes/unblast-beta/images/ps.svg" />
                      </div>
                    </div>
                    <div class="category">Mockups</div>
                  </div>
                </div>
              </div>

              <div class="col-6 col-xl-2">
                <div class="more-item-container" style="display: flex; flex-direction: column; gap: 1rem">
                  <div>
                    <img
                      alt="iMac 24-inch Mockup"
                      class="post-image"
                      src="https://unblast.com/wp-content/uploads/2020/10/iMac-27-Mockup.jpg"
                    />
                  </div>
                  <div class="more-item-description-container">
                    <div class="header">
                      <div class="title">Free iMac 24-inch Mockup 2021 (PSD)</div>
                      <div class="icon">
                        <img src="https://unblast.com/wp-content/themes/unblast-beta/images/ps.svg" />
                      </div>
                    </div>
                    <div class="category">Mockups</div>
                  </div>
                </div>
              </div>
              <div class="col-6 col-xl-2">
                <div class="more-item-container" style="display: flex; flex-direction: column; gap: 1rem">
                  <div>
                    <img
                      alt="iMac 24-inch Mockup"
                      class="post-image"
                      src="https://unblast.com/wp-content/uploads/2020/09/iMac-on-Stand-Mockup-3.jpg"
                    />
                  </div>
                  <div class="more-item-description-container">
                    <div class="header">
                      <div class="title">Free iMac 24-inch Mockup 2021 (PSD)</div>
                      <div class="icon">
                        <img src="https://unblast.com/wp-content/themes/unblast-beta/images/ps.svg" />
                      </div>
                    </div>
                    <div class="category">Mockups</div>
                  </div>
                </div>
              </div>


              <div class="col-6 col-xl-2">
                <div class="more-item-container" style="display: flex; flex-direction: column; gap: 1rem">
                  <div>
                    <img
                      alt="iMac 24-inch Mockup"
                      class="post-image"
                      src="https://unblast.com/wp-content/uploads/2020/04/Computer-Screen-Mockup-3.jpg"
                    />
                  </div>
                  <div class="more-item-description-container">
                    <div class="header">
                      <div class="title">Free iMac 24-inch Mockup 2021 (PSD)</div>
                      <div class="icon">
                        <img src="https://unblast.com/wp-content/themes/unblast-beta/images/ps.svg" />
                      </div>
                    </div>
                    <div class="category">Mockups</div>
                  </div>
                </div>
              </div>

              <div class="col-6 col-xl-2">
                <div class="more-item-container" style="display: flex; flex-direction: column; gap: 1rem">
                  <div>
                    <img
                      alt="iMac 24-inch Mockup"
                      class="post-image"
                      src="https://unblast.com/wp-content/uploads/2020/05/Video-Player-Mockup-0.jpg"
                    />
                  </div>
                  <div class="more-item-description-container">
                    <div class="header">
                      <div class="title">Free iMac 24-inch Mockup 2021 (PSD)</div>
                      <div class="icon">
                        <img src="https://unblast.com/wp-content/themes/unblast-beta/images/ps.svg" />
                      </div>
                    </div>
                    <div class="category">Mockups</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="see-more-button">
          <div class="row">
            <div class="col-12 offset-xl-4 col-xl-4">
              <button type="button" class="btn btn-primary">
                <div class="button-content">
                  SEE MORE SIMILAR MOCKUPS
                  <i class="fa-solid fa-arrow-right"></i>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer class="mx-1 my-5">
      <div class="bottom-slogan">
        <label>47,124,359 DOWNLOADS & COUNTING - 6061 GRAPHICS ♡ 臺四即文善公作</label>
      </div>
      <div class="separator"></div>
      <div>
        <div class="subscribe-slogan">
          <label>Never miss another freebie, subscribe below :)</label>
        </div>
        <div>
          <input
            type="text"
            class="form-control email-input"
            placeholder="Your email address"
            aria-label="Username"
            aria-describedby="basic-addon1"
          />
        </div>
      </div>
      <div class="separator"></div>
      <div>
        <div class="mx-5" style="display: flex; flex-direction: column; align-items: center; gap: 1rem">
          <div class="row footer-row" style="width: 100%">
            <!-- <div class="col-xs-12" style="display: flex; justify-content: center; gap: 1rem"> -->
            <div class="row">
              <div class="col-2 col-md-2"><a href="#">About</a></div>
              <div class="col-2 col-md-2"><a href="#">Submit</a></div>
              <div class="col-2 col-md-2"><a href="#">License</a></div>
              <div class="col-2 col-md-2"><a href="#">進變果沒致</a></div>
              <div class="col-2 col-md-2"><a href="#">Privacy Policy</a></div>
              <div class="col-2 col-md-2"><a href="#">Contact</a></div>
            </div>
            <!-- </div> -->
          </div>
          <div class="row footer-row justify-content-center">
            <div class="col-3 col-md-2 my-3"><a href="#">Photoshop Graphics </a></div>
            <div class="col-3 col-md-2 my-3"><a href="#">Photoshop Mockups</a></div>
            <div class="col-3 col-md-2 my-3"><a href="#">Vector Graphics</a></div>
            <div class="col-3 col-md-2 my-3"><a href="#">Sketch Resources</a></div>
            <div class="col-3 col-md-2 my-3"><a href="#">臺四即文善公</a></div>
            <div class="col-3 col-md-2 my-3"><a href="#">Design Articles</a></div>
          </div>
        </div>
        <div class="copyright-line">© 2023 Unblast. All rights reserved.</div>
      </div>
    </footer>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
      crossorigin="anonymous"
    ></script>

    <!-- fontawesome -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/js/all.min.js"
      integrity="sha512-2bMhOkE/ACz21dJT8zBOMgMecNxx0d37NND803ExktKiKdSzdwn+L7i9fdccw/3V06gM/DBWKbYmQvKMdAA9Nw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <script src="scripts.js"></script>
  </body>
</html>

<?php endwhile; ?>
