portfolio-4.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charSet="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="preload" as="image" href="img/popup.jpg" />
    <link rel="preload" as="image" href="img/success.png" />
    <link rel="preload" as="image" href="/img/banner.jpg" />
    <link rel="preload" as="image" href="/img/portfolio/1.jpg" />
    <link rel="preload" as="image" href="/img/portfolio/2.jpg" />
    <link rel="preload" as="image" href="/img/portfolio/3.gif" />
    <link rel="preload" as="image" href="/img/portfolio/4.jpg" />
    <link rel="preload" as="image" href="/img/portfolio/5.jpg" />
    <link rel="preload" as="image" href="/img/portfolio/6.jpg" />
    <link rel="preload" as="image" href="/img/portfolio/7.jpg" />
    <link rel="stylesheet" href="/_next/static/css/c9abf75460fa311a.css" crossorigin="" data-precedence="next" />
    <link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-fd79bffa2edc9624.js" crossorigin="" />
    <script src="/_next/static/chunks/fd9d1056-3cb1c2fbfd2a752c.js" async="" crossorigin=""></script>
    <script src="/_next/static/chunks/69-7cd7f516aa3f18bc.js" async="" crossorigin=""></script>
    <script src="/_next/static/chunks/main-app-f5c8d25c8479457f.js" async="" crossorigin=""></script>
    <script src="/_next/static/chunks/f5bc5986-0918c8455a9d1d56.js" async=""></script>
    <script src="/_next/static/chunks/478-a2ddb5889d2e7ee3.js" async=""></script>
    <script src="/_next/static/chunks/867-59ef13d9e08a3d26.js" async=""></script>
    <script src="/_next/static/chunks/app/portfolio-4/page-dc98d2969fa7e77a.js" async=""></script>
    <script src="/_next/static/chunks/app/layout-b24c80e728ceddd6.js" async=""></script>
    <link rel="preload" as="image" href="/img/portfolio/8.jpg" />
    <title>Trueman</title>
    <meta name="description" content="Generated by create next app" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16" />
    <link rel="stylesheet" href="css/style-light.css" />
    <script src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js" crossorigin="" noModule=""></script>
  </head>
  <body>
    <div class="trm-app-frame">
      <div class="trm-preloader">
        <div class="trm-holder">
          <div class="preloader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
      <div class="trm-mode-swich-animation-frame">
        <div class="trm-mode-swich-animation">
          <i class="far fa-sun"></i>
          <div class="trm-horizon"></div>
          <i class="far fa-moon"></i>
        </div>
      </div>
      <div id="trm-dynamic-content" class="trm-swup-animation">
        <div id="trm-scroll-container" class="trm-scroll-container" style="opacity:0">
          <div id="trm-order" class="trm-order">
            <div class="trm-popup-content">
              <img src="img/popup.jpg" alt="photo" />
              <div class="trm-popup-form-frame">
                <h5 class="trm-mb-40">Write me a message</h5>
                <form id="form1">
                  <input type="text" placeholder="Name" name="name" />
                  <input type="email" placeholder="Email" name="email" />
                  <textarea name="text" rows="6" placeholder="Message"></textarea>
                  <button type="submit" class="trm-btn">Send <i class="fas fa-arrow-right"></i>
                  </button>
                </form>
                <div class="trm-text-sm trm-mt-20">* I promise the confidentiality of your personal information</div>
                <div class="trm-success-banner">
                  <img src="img/success.png" alt="success" class="trm-mb-15" />
                  <h4 class="trm-mb-15">Success</h4>
                  <div class="trm-text trm-mb-20">Your message has been sent successfully</div>
                  <a href="#." class="trm-btn" data-fancybox-close="true">Ok</a>
                </div>
              </div>
            </div>
          </div>
          <div data-scroll-section="" id="content" class="trm-scroll-section">
            <div class="trm-top-bar" data-scroll="" data-scroll-sticky="" data-scroll-target="#content" data-scroll-offset="-10">
              <div class="container">
                <div class="trm-left-side">
                  <a class="trm-logo-frame trm-anima-link" href="/">
                    <div class="trm-logo-text">True <span>man</span>
                    </div>
                  </a>
                </div>
                <div class="trm-right-side ">
                  <div class="trm-menu">
                    <nav>
                      <ul>
                        <li class="menu-item-has-children">
                          <a href="/">Home</a>
                          <ul>
                            <li>
                              <a href="/">Image</a>
                            </li>
                            <li>
                              <a href="home-video">Video</a>
                            </li>
                            <li>
                              <a href="home-slideshow">Slideshow</a>
                            </li>
                            <li>
                              <a rel="noopener noreferrer" target="_blank" href="/onepage-image">Onepage Image <i class="fas fa-external-link-alt"></i>
                              </a>
                            </li>
                            <li>
                              <a rel="noopener noreferrer" target="_blank" href="/onepage-video">Onepage Video <i class="fas fa-external-link-alt"></i>
                              </a>
                            </li>
                            <li>
                              <a rel="noopener noreferrer" target="_blank" href="/onepage-slideshow">Onepage Slideshow <i class="fas fa-external-link-alt"></i>
                              </a>
                            </li>
                          </ul>
                        </li>
                        <li class="menu-item-has-children">
                          <a href="portfolio">Portfolio</a>
                          <ul>
                            <li>
                              <a href="portfolio">Portfolio 1</a>
                            </li>
                            <li>
                              <a href="portfolio-2">Portfolio 2</a>
                            </li>
                            <li>
                              <a href="portfolio-3">Portfolio 3</a>
                            </li>
                            <li>
                              <a href="portfolio-4">Portfolio 4</a>
                            </li>
                            <li>
                              <a href="portfolio-5">Portfolio 5</a>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="resume">Resume</a>
                        </li>
                        <li>
                          <a href="contact">Contact</a>
                        </li>
                        <li class="menu-item-has-children">
                          <a href="blog">Blog</a>
                          <ul>
                            <li>
                              <a href="blog">Blog 1</a>
                            </li>
                            <li>
                              <a href="blog-2">Blog 2</a>
                            </li>
                            <li>
                              <a href="publication">Publication</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </nav>
                  </div>
                  <div class="trm-mode-switcher-place">
                    <div class="trm-mode-switcher">
                      <i class="far fa-sun"></i>
                      <input class="tgl tgl-light" id="trm-swich" type="checkbox" />
                      <label class="trm-swich" for="trm-swich"></label>
                      <i class="far fa-moon"></i>
                    </div>
                  </div>
                  <a href="files/cv.txt" download="" class="trm-btn trm-btn-sm">Download cv <i class="fas fa-arrow-down"></i>
                  </a>
                </div>
                <div class="trm-menu-btn ">
                  <span></span>
                </div>
              </div>
            </div>
            <div class="trm-content-start">
              <div class="trm-banner" data-scroll="true" data-scroll-direction="vertical" data-scroll-speed="-1">
                <img src="/img/banner.jpg" alt="banner" class="trm-banner-cover" data-scroll="true" data-scroll-direction="vertical" data-scroll-speed="-4" />
                <div class="trm-banner-content trm-overlay">
                  <div class="container" data-scroll="true" data-scroll-direction="vertical" data-scroll-speed="1">
                    <div class="row">
                      <div class="col-lg-12">
                        <div class="trm-banner-text trm-text-center">
                          <div class="trm-label trm-mb-20"></div>
                          <h1 class="trm-mb-30"></h1>
                          <ul class="trm-breadcrumbs trm-label">
                            <li>
                              <a class="trm-anima-link" href="/">Home</a>
                            </li>
                            <li>
                              <span></span>
                            </li>
                          </ul>
                        </div>
                        <a href="#about-triger" data-scroll-to="#about-triger" data-scroll-offset="-130" class="trm-scroll-hint-frame">
                          <div class="trm-scroll-hint"></div>
                          <span class="trm-label">Scroll down</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-12">
                    <div class="trm-content" id="trm-content">
                      <div data-scroll="true" data-scroll-repeat="true" data-scroll-offset="500" id="about-triger"></div>
                      <div class="row">
                        <div class="col-lg-6">
                          <a data-fancybox="portfolio" href="/img/portfolio/1.jpg" class="trm-portfolio-item trm-scroll-animation" data-scroll="true" data-scroll-offset="40">
                            <div class="trm-cover-frame">
                              <img class="trm-cover" src="/img/portfolio/1.jpg" alt="item" />
                            </div>
                            <div class="trm-item-description">
                              <h6>Branded cup</h6>
                              <div class="trm-zoom-icon">
                                <i class="fas fa-search-plus"></i>
                              </div>
                            </div>
                          </a>
                        </div>
                        <div class="col-lg-6">
                          <a data-fancybox="portfolio" href="/img/portfolio/2.jpg" class="trm-portfolio-item trm-scroll-animation" data-scroll="true" data-scroll-offset="40">
                            <div class="trm-cover-frame">
                              <img class="trm-cover" src="/img/portfolio/2.jpg" alt="item" />
                            </div>
                            <div class="trm-item-description">
                              <h6>Stylish business card</h6>
                              <div class="trm-zoom-icon">
                                <i class="fas fa-search-plus"></i>
                              </div>
                            </div>
                          </a>
                        </div>
                        <div class="col-lg-6">
                          <a data-fancybox="portfolio" href="/img/portfolio/3.gif" class="trm-portfolio-item trm-scroll-animation" data-scroll="true" data-scroll-offset="40">
                            <div class="trm-cover-frame">
                              <img class="trm-cover" src="/img/portfolio/3.gif" alt="item" />
                            </div>
                            <div class="trm-item-description">
                              <h6>Mobile application</h6>
                              <div class="trm-zoom-icon">
                                <i class="fas fa-search-plus"></i>
                              </div>
                            </div>
                          </a>
                        </div>
                        <div class="col-lg-6">
                          <a data-fancybox="portfolio" href="/img/portfolio/4.jpg" class="trm-portfolio-item trm-scroll-animation" data-scroll="true" data-scroll-offset="40">
                            <div class="trm-cover-frame">
                              <img class="trm-cover" src="/img/portfolio/4.jpg" alt="item" />
                            </div>
                            <div class="trm-item-description">
                              <h6>T-shirt print</h6>
                              <div class="trm-zoom-icon">
                                <i class="fas fa-search-plus"></i>
                              </div>
                            </div>
                          </a>
                        </div>
                        <div class="col-lg-6">
                          <a data-fancybox="portfolio" href="/img/portfolio/5.jpg" class="trm-portfolio-item trm-scroll-animation" data-scroll="true" data-scroll-offset="40">
                            <div class="trm-cover-frame">
                              <img class="trm-cover" src="/img/portfolio/5.jpg" alt="item" />
                            </div>
                            <div class="trm-item-description">
                              <h6>T-shirt print</h6>
                              <div class="trm-zoom-icon">
                                <i class="fas fa-search-plus"></i>
                              </div>
                            </div>
                          </a>
                        </div>
                        <div class="col-lg-6">
                          <a data-fancybox="portfolio" href="/img/portfolio/6.jpg" class="trm-portfolio-item trm-scroll-animation" data-scroll="true" data-scroll-offset="40">
                            <div class="trm-cover-frame">
                              <img class="trm-cover" src="/img/portfolio/6.jpg" alt="item" />
                            </div>
                            <div class="trm-item-description">
                              <h6>Branded Package</h6>
                              <div class="trm-zoom-icon">
                                <i class="fas fa-search-plus"></i>
                              </div>
                            </div>
                          </a>
                        </div>
                        <div class="col-lg-6">
                          <a data-fancybox="portfolio" href="/img/portfolio/7.jpg" class="trm-portfolio-item trm-scroll-animation" data-scroll="true" data-scroll-offset="40">
                            <div class="trm-cover-frame">
                              <img class="trm-cover" src="/img/portfolio/7.jpg" alt="item" />
                            </div>
                            <div class="trm-item-description">
                              <h6>Stylish Cup</h6>
                              <div class="trm-zoom-icon">
                                <i class="fas fa-search-plus"></i>
                              </div>
                            </div>
                          </a>
                        </div>
                        <div class="col-lg-6">
                          <a data-fancybox="portfolio" href="/img/portfolio/8.jpg" class="trm-portfolio-item trm-scroll-animation" data-scroll="true" data-scroll-offset="40">
                            <div class="trm-cover-frame">
                              <img class="trm-cover" src="/img/portfolio/8.jpg" alt="item" />
                            </div>
                            <div class="trm-item-description">
                              <h6>Packing of pills</h6>
                              <div class="trm-zoom-icon">
                                <i class="fas fa-search-plus"></i>
                              </div>
                            </div>
                          </a>
                        </div>
                      </div>
                      <div class="trm-divider trm-mb-40"></div>
                      <footer class="trm-scroll-animation" data-scroll="" data-scroll-offset="50">
                        <div class="trm-label">©
                          <!-- -->2024
                          <!-- --> All Rights Reserved.
                        </div>
                        <div class="trm-label">Developed by:
                          <!-- -->
                          <a href="https://themeforest.net/user/bslthemes" target="_blank">BSLTHEMES</a>
                        </div>
                      </footer>
                    </div>
                    <div id="trm-order" class="trm-order">
                      <div class="trm-popup-content">
                        <img src="img/popup.jpg" alt="photo" />
                        <div class="trm-popup-form-frame">
                          <h5 class="trm-mb-40">Write me a message</h5>
                          <form id="form1">
                            <input type="text" placeholder="Name" name="name" />
                            <input type="email" placeholder="Email" name="email" />
                            <textarea name="text" rows="6" placeholder="Message"></textarea>
                            <button type="submit" class="trm-btn">Send <i class="fas fa-arrow-right"></i>
                            </button>
                          </form>
                          <div class="trm-text-sm trm-mt-20">* I promise the confidentiality of your personal information</div>
                          <div class="trm-success-banner">
                            <img src="img/success.png" alt="success" class="trm-mb-15" />
                            <h4 class="trm-mb-15">Success</h4>
                            <div class="trm-text trm-mb-20">Your message has been sent successfully</div>
                            <a href="#." class="trm-btn" data-fancybox-close="true">Ok</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="/_next/static/chunks/webpack-fd79bffa2edc9624.js" crossorigin="" async=""></script>
    <script>
      (self.__next_f = self.__next_f || []).push([0]);
      self.__next_f.push([2, null])
    </script>
    <script>
      self.__next_f.push([1, "1:HL[\"/_next/static/css/c9abf75460fa311a.css\",\"style\",{\"crossOrigin\":\"\"}]\n0:\"$L2\"\n"])
    </script>
    <script>
      self.__next_f.push([1, "3:I[7690,[],\"\"]\n5:I[7831,[],\"\"]\n6:I[4045,[\"601\",\"static/chunks/f5bc5986-0918c8455a9d1d56.js\",\"478\",\"static/chunks/478-a2ddb5889d2e7ee3.js\",\"867\",\"static/chunks/867-59ef13d9e08a3d26.js\",\"634\",\"static/chunks/app/portfolio-4/page-dc98d2969fa7e77a.js\"],\"\"]\n7:I[5613,[],\"\"]\n8:I[1778,[],\"\"]\n9:I[2046,[\"185\",\"static/chunks/app/layout-b24c80e728ceddd6.js\"],\"\"]\na:I[312,[\"185\",\"static/chunks/app/layout-b24c80e728ceddd6.js\"],\"\"]\nb:I[6183,[\"185\",\"static/chunks/app/layout-b24c80e728ceddd6.js\"],\"\"]\nd:I[8955,[],\"\"]\ne:[]\n"])
    </script>
    <script>
      self.__next_f.push([1, "2:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c9abf75460fa311a.css\",\"precedence\":\"next\",\"crossOrigin\":\"\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"ONWXZ5fQq-kLwLW_voM0m\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/portfolio-4\",\"initialTree\":[\"\",{\"children\":[\"portfolio-4\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"portfolio-4\",{\"children\":[\"__PAGE__\",{},[\"$L4\",[\"$\",\"$L5\",null,{\"propsForComponent\":{\"params\":{}},\"Component\":\"$6\",\"isStaticGeneration\":true}],null]]},[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"portfolio-4\",\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"loadingScripts\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}]]},[null,[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"$L9\",null,{\"children\":[[\"$\",\"$La\",null,{}],[\"$\",\"body\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"trm-app-frame\",\"children\":[[\"$\",\"$Lb\",null,{}],[\"$\",\"div\",null,{\"id\":\"trm-dynamic-content\",\"className\":\"trm-swup-animation\",\"children\":[\"$\",\"div\",null,{\"id\":\"trm-scroll-container\",\"className\":\"trm-scroll-container\",\"style\":{\"opacity\":0},\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"loadingScripts\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]}]]}]}]]}]}],null]],\"initialHead\":[false,\"$Lc\"],\"globalErrorComponent\":\"$d\",\"missingSlots\":\"$We\"}]]\n"])
    </script>
    <script>
      self.__next_f.push([1, "c:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Trueman\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}]]\n4:null\n"])
    </script>
    <script>
      self.__next_f.push([1, ""])
    </script>
  </body>
</html>