<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Banner Slide Tuyết Rơi</title>
<style>
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Slider container */
.banner-slide {
    position: relative;
    width: 100%;
    height: 860px; /* ⬅⬅ Giảm từ 820px xuống 760px */
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Slide images */
.slides {
    display: flex;
    width: 100%; /* Chỉ 1 hình */
    height: 100%;
}

.slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

/* Banner box */
.banner-box {
    position: absolute;
    left: 60px;
    bottom: 60px;
    background: rgba(253, 244, 233, 0.95);
    width: 450px;
    padding: 45px 35px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    z-index: 2;
}

.banner-box h2 {
    font-size: 32px;
    margin-bottom: 12px;
    color: #222;
}

.banner-box p {
    color: #444;
    line-height: 1.6;
    margin-bottom: 22px;
    font-size: 16px;
}

/* Nút */
.shop-btn {
    background: #ff5c5c;
    color: white;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}

.shop-btn:hover {
    background: #ff8c32;
    transform: scale(1.1);
}

/* Snow effect */
.banner-slide::before,
.banner-slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  background-image:
    radial-gradient(white 1.5px, transparent 1.5px),
    radial-gradient(white 2px, transparent 2px);
  background-size: 120px 120px, 200px 200px;
  opacity: 0.7;
  animation: snowDrift 25s linear infinite;
}

.banner-slide::after {
  animation-delay: -12s;
  opacity: 0.5;
}

@keyframes snowDrift {
  0%   { background-position: 0 0, 0 0; }
  25%  { background-position: 20px 200px, -30px 150px; }
  50%  { background-position: -20px 400px, 30px 300px; }
  75%  { background-position: 10px 600px, -20px 450px; }
  100% { background-position: 0 800px, 0 600px; }
}

/* Mobile */
@media (max-width: 900px) {
    .banner-slide {
        height: 600px;
    }
    .banner-box {
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        width: 90%;
        padding: 25px;
    }
}
</style>
</head>
<body>

<div class="banner-slide">
    <div class="slides">
        <div class="slide" style="background-image: url('https://i.pinimg.com/1200x/57/71/fc/5771fc4cf89fdfd72d5d51a50f1e7263.jpg');"></div>
    </div>

    <div class="banner-box">
        <h2>T-Shirt Collection</h2>
        <p>“Celebrate the holidays in style with our unique Christmas T-shirt collection – warm, cheerful, and ready for gifting!”</p>
        <a href="https://teertarget.com/shop" class="shop-btn">Shop Now</a>
    </div>
</div>

</body>
</html>


<div class="my-banner-container"> 
  <div class="card" style="background-image: url('https://i.pinimg.com/1200x/ba/df/a6/badfa6f23f513313d17cdf93c923b349.jpg');">
    <div class="card-content">
      
    </div>
  </div>
</div>

<style>
  .my-banner-container * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .my-banner-container {
    width: 100%;
  }

  .my-banner-container .card {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 350px;
    margin: 0 auto;
    background: center/cover no-repeat;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    transform: none;
    transition: transform 0.3s ease;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 40px;
    color: #fff;
    overflow: hidden;
  }

  .my-banner-container .card:hover {
    transform: scale(1.03);
  }

  .my-banner-container .card-content {
    max-width: 50%;
    z-index: 2;
  }

  .my-banner-container .card-content h2 {
    font-size: 36px;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(0,0,0,0.4);
  }

  .my-banner-container .card-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    text-shadow: 0 0 5px rgba(0,0,0,0.4);
  }

  .my-banner-container .card-content a {
    display: inline-block;
    padding: 12px 25px;
    background: #ff5c5c;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.3s, background 0.3s;
  }

  .my-banner-container .card-content a:hover {
    background: #ff8c32;
    transform: scale(1.1);
  }

  .my-banner-container .card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    pointer-events: none;
  }

  @media (max-width: 900px) {
    .my-banner-container .card {
      padding: 20px;
      flex-direction: column;
      height: auto;
    }

    .my-banner-container .card-content {
      max-width: 100%;
      text-align: center;
    }
  }
</style>


<div class="my-banner-container"> 
  <div class="card" style="background-image: url('https://i.pinimg.com/736x/1a/c5/56/1ac5563f4dc509cf19c9bb6327c7dac5.jpg');">
    <div class="card-content">

    </div>
  </div>
</div>

<style>
  .my-banner-container * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .my-banner-container {
    width: 100%;
  }

  .my-banner-container .card {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 350px;
    margin: 0 auto;
    background: center/cover no-repeat;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    transform: none;
    transition: transform 0.3s ease;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 40px;
    color: #fff;
    overflow: hidden;
  }

  .my-banner-container .card:hover {
    transform: scale(1.03);
  }

  .my-banner-container .card-content {
    max-width: 50%;
    z-index: 2;
  }

  .my-banner-container .card-content h2 {
    font-size: 36px;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(0,0,0,0.4);
  }

  .my-banner-container .card-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    text-shadow: 0 0 5px rgba(0,0,0,0.4);
  }

  .my-banner-container .card-content a {
    display: inline-block;
    padding: 12px 25px;
    background: #ff5c5c;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.3s, background 0.3s;
  }

  .my-banner-container .card-content a:hover {
    background: #ff8c32;
    transform: scale(1.1);
  }

  .my-banner-container .card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    pointer-events: none;
  }

  @media (max-width: 900px) {
    .my-banner-container .card {
      padding: 20px;
      flex-direction: column;
      height: auto;
    }

    .my-banner-container .card-content {
      max-width: 100%;
      text-align: center;
    }
  }
</style>


<div class="my-banner-container"> 
  <div class="card" style="background-image: url('https://i.pinimg.com/736x/bd/7f/d5/bd7fd50ffa52f074bd00d88835d50267.jpg');">
    <div class="card-content">

    </div>
  </div>
</div>

<style>
  .my-banner-container * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .my-banner-container {
    width: 100%;
  }

  .my-banner-container .card {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 350px;
    margin: 0 auto;
    background: center/cover no-repeat;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    transform: none;
    transition: transform 0.3s ease;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 40px;
    color: #fff;
    overflow: hidden;
  }

  .my-banner-container .card:hover {
    transform: scale(1.03);
  }

  .my-banner-container .card-content {
    max-width: 50%;
    z-index: 2;
  }

  .my-banner-container .card-content h2 {
    font-size: 36px;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(0,0,0,0.4);
  }

  .my-banner-container .card-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    text-shadow: 0 0 5px rgba(0,0,0,0.4);
  }

  .my-banner-container .card-content a {
    display: inline-block;
    padding: 12px 25px;
    background: #ff5c5c;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.3s, background 0.3s;
  }

  .my-banner-container .card-content a:hover {
    background: #ff8c32;
    transform: scale(1.1);
  }

  .my-banner-container .card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    pointer-events: none;
  }

  @media (max-width: 900px) {
    .my-banner-container .card {
      padding: 20px;
      flex-direction: column;
      height: auto;
    }

    .my-banner-container .card-content {
      max-width: 100%;
      text-align: center;
    }
  }
</style>


 Everyday Comfort

#181616

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fashion Graphic Tees</title>
<script src="https://cdn.tailwindcss.com"></script>

<style>
  .product-wrapper {
    width: 300px;
  }

  /* Vùng hình ảnh */
  .product-img {
    border-radius: 160px;
    overflow: hidden;
    position: relative;
    display: inline-block;
  }

  .product-img img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
  }

  /* Hover: phóng ảnh */
  .product-img:hover img {
    transform: scale(1.05);
  }

  /* 4 lớp phủ trắng chạy vào giữa (chỉ tới giữa) */
  .product-img::before,
  .product-img::after,
  .product-img .corner-3,
  .product-img .corner-4 {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    background: rgba(255,255,255,0.25);
    opacity: 0;
    z-index: 2;
    transition: all 0.4s ease-in-out;
    pointer-events: none;
  }

  /* Góc 1: trên trái */
  .product-img::before {
    top: -50%;
    left: -50%;
  }

  /* Góc 2: trên phải */
  .product-img::after {
    top: -50%;
    right: -50%;
  }

  /* Góc 3: dưới trái */
  .product-img .corner-3 {
    bottom: -50%;
    left: -50%;
  }

  /* Góc 4: dưới phải */
  .product-img .corner-4 {
    bottom: -50%;
    right: -50%;
  }

  /* Hover → 4 góc chạy vào giữa và dừng */
  .product-img:hover::before {
    top: 0;
    left: 0;
    opacity: 1;
  }

  .product-img:hover::after {
    top: 0;
    right: 0;
    opacity: 1;
  }

  .product-img:hover .corner-3 {
    bottom: 0;
    left: 0;
    opacity: 1;
  }

  .product-img:hover .corner-4 {
    bottom: 0;
    right: 0;
    opacity: 1;
  }
</style>
</head>

<body class="bg-white">

<div class="max-w-7xl mx-auto py-10 relative">

  
  <h2 class="text-center text-3xl font-bold mb-10">
    FASHION GRAPHIC T-SHIRTS
  </h2>

  
  <div class="flex justify-between items-start gap-6">

    
    <div class="product-wrapper text-center">
      <a href="https://teertarget.com/shop" target="_blank">
        <div class="product-img">
          <span class="corner-3"></span>
          <span class="corner-4"></span>
          <img src="https://i.pinimg.com/1200x/9a/04/26/9a0426fd56e926b659fde236a1256b55.jpg" class="w-full h-full object-cover">
        </div>
      </a>
      <p class="text-lime-400 font-bold mt-4 text-xl">NEW PRODUCT</p>
      <p class="font-semibold text-sm mt-1">FLORAL WHISPERS T-SHIRT</p>
      <p class="text-gray-500 text-xs">Floral Whispers T-Shirt</p>
    </div>

    
    <div class="product-wrapper text-center">
      <a href="https://teertarget.com/shop" target="_blank">
        <div class="product-img">
          <span class="corner-3"></span>
          <span class="corner-4"></span>
          <img src="https://i.pinimg.com/736x/ad/ad/c3/adadc3e1a70bbe4c591adadf271faf42.jpg" class="w-full h-full object-cover">
        </div>
      </a>
      <p class="text-lime-400 font-bold mt-4 text-xl">NEW PRODUCT</p>
      <p class="font-semibold text-sm mt-1">BLOOM & CUTE T-SHIRT</p>
      <p class="text-gray-500 text-xs">Bloom & Cute T-Shirt</p>
    </div>

    
    <div class="product-wrapper text-center">
      <a href="https://teertarget.com/shop" target="_blank">
        <div class="product-img">
          <span class="corner-3"></span>
          <span class="corner-4"></span>
          <img src="https://i.pinimg.com/1200x/6b/af/16/6baf168f1b6cb0724b9282c28f170f4a.jpg" class="w-full h-full object-cover">
        </div>
      </a>
      <p class="text-lime-400 font-bold mt-4 text-xl">NEW PRODUCT</p>
      <p class="font-semibold text-sm mt-1">LIMITLESS THEMES T-SHIRT</p>
      <p class="text-gray-500 text-xs">Timeless Themes</p>
    </div>

    
    <div class="product-wrapper text-center">
      <a href="https://teertarget.com/shop" target="_blank">
        <div class="product-img">
          <span class="corner-3"></span>
          <span class="corner-4"></span>
          <img src="https://i.pinimg.com/736x/2a/ea/5f/2aea5f21af17ef74773be3ab6cf75f07.jpg" class="w-full h-full object-cover">
        </div>
      </a>
      <p class="text-lime-400 font-bold mt-4 text-xl">NEW PRODUCT</p>
      <p class="font-semibold text-sm mt-1">EMBROBEAR T-SHIRT</p>
      <p class="text-gray-500 text-xs">Embrobear T-shirt</p>
    </div>

    
    <div class="product-wrapper text-center">
      <a href="https://teertarget.com/shop" target="_blank">
        <div class="product-img">
          <span class="corner-3"></span>
          <span class="corner-4"></span>
          <img src="https://i.pinimg.com/736x/bc/bc/44/bcbc448ca9d23fabb6e4e6a9c4c5698a.jpg" class="w-full h-full object-cover">
        </div>
      </a>
      <p class="text-lime-400 font-bold mt-4 text-xl">NEW PRODUCT</p>
      <p class="font-semibold text-sm mt-1">RETRO VIBES T-SHIRT</p>
      <p class="text-gray-500 text-xs">Retro Vibes</p>
    </div>

  </div>
</div>

</body>
</html>

 Cozy & Casual

#1d1b1c

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Snow Banner Only</title>
<style>
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Container riêng để tránh xung đột */
.snow-banner-container {
    width: 100%;
    height: 300px; /* chiều cao banner */
    position: relative;
    background-image: url('https://i.etsystatic.com/22989068/r/il/786efb/5040095992/il_fullxfull.5040095992_sjzb.jpg');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Snow effect chỉ trong container này */
.snow-banner-container::before,
.snow-banner-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background-image:
      radial-gradient(white 1.5px, transparent 1.5px),
      radial-gradient(white 2px, transparent 2px);
    background-size: 60px 60px, 100px 100px;
    opacity: 0.7;
    animation: snowDrift 20s linear infinite;
}

.snow-banner-container::after {
    animation-delay: -10s;
    opacity: 0.5;
}

@keyframes snowDrift {
    0%   { background-position: 0 0, 0 0; }
    25%  { background-position: 10px 100px, -20px 80px; }
    50%  { background-position: -10px 200px, 20px 160px; }
    75%  { background-position: 5px 300px, -10px 240px; }
    100% { background-position: 0 400px, 0 320px; }
}
</style>
</head>
<body>

<div class="snow-banner-container">
    
</div>

</body>
</html>

Timeless Warmth

#21201e

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact – KixsyShop</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Styles for flags inside select */
.flag-option::before {
  content: attr(data-flag);
  margin-right: 6px;
}
</style>
</head>
<body class="bg-gray-100 font-sans">

<section class="max-w-5xl mx-auto p-6 md:p-12 bg-white shadow-lg rounded-xl mt-12">
  <h2 class="text-3xl font-extrabold text-gray-800 mb-6 text-center">Contact <span class="text-red-600">TEERTARGET</span></h2>

  <form id="contactForm" action="https://formspree.io/f/mldpqpwz" method="POST" class="grid grid-cols-1 md:grid-cols-2 gap-6">
    
    
    <div class="flex flex-col">
      <label for="name" class="mb-2 font-semibold text-gray-700">Your Name</label>
      <input type="text" id="name" name="name" placeholder="John Doe" required
             class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600 focus:border-transparent">
    </div>

    
    <div class="flex flex-col">
      <label for="email" class="mb-2 font-semibold text-gray-700">Email Address</label>
      <input type="email" id="email" name="email" placeholder="you@example.com" required
             class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600 focus:border-transparent">
    </div>

    
    <div class="flex flex-col md:col-span-2">
      <label class="mb-2 font-semibold text-gray-700">Phone Number</label>
      <div class="flex gap-3 items-start">
        <select id="countryCode" name="country_code" required
                class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600 focus:border-transparent">
          <option value="+1" data-flag="🇺🇸">USA +1</option>
          <option value="+44" data-flag="🇬🇧">UK +44</option>
          <option value="+61" data-flag="🇦🇺">Australia +61</option>
          <option value="+49" data-flag="🇩🇪">Germany +49</option>
          <option value="+33" data-flag="🇫🇷">France +33</option>
          <option value="+81" data-flag="🇯🇵">Japan +81</option>
          <option value="+84" data-flag="🇻🇳">Vietnam +84</option>
          <option value="+91" data-flag="🇮🇳">India +91</option>
          <option value="+7" data-flag="🇷🇺">Russia +7</option>
          <option value="+39" data-flag="🇮🇹">Italy +39</option>
        </select>
        <div class="flex-1">
          <input type="tel" id="phone" name="phone" placeholder="1234567890" required
                 class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600 focus:border-transparent">
          <p id="phoneError" class="text-red-600 text-sm mt-1 hidden">Invalid phone number for selected country</p>
        </div>
      </div>
    </div>

    
    <div class="flex flex-col md:col-span-2">
      <label for="subject" class="mb-2 font-semibold text-gray-700">Subject</label>
      <input type="text" id="subject" name="subject" placeholder="Subject of your message" required
             class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600 focus:border-transparent">
    </div>

    
    <div class="flex flex-col md:col-span-2">
      <label for="message" class="mb-2 font-semibold text-gray-700">Message</label>
      <textarea id="message" name="message" rows="6" placeholder="Write your message here..." required
                class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600 focus:border-transparent"></textarea>
    </div>

    
    <div class="md:col-span-2 text-center">
      <button type="submit"
              class="px-8 py-3 bg-red-600 text-white font-bold rounded-full shadow-lg hover:bg-red-700 transition-colors">
        Send Message
      </button>
    </div>

  </form>
</section>

<script>
const form = document.getElementById('contactForm');
const countrySelect = document.getElementById('countryCode');
const phoneInput = document.getElementById('phone');
const phoneError = document.getElementById('phoneError');

const countryRules = {
  "+1": /^(\d{10})$/,       // USA: 10 digits
  "+44": /^(\d{10})$/,      // UK simplified
  "+61": /^(\d{9,10})$/,    // Australia
  "+49": /^(\d{10,11})$/,   // Germany
  "+33": /^(\d{9})$/,       // France
  "+81": /^(\d{9,10})$/,    // Japan
  "+84": /^0\d{9}$/,        // Vietnam: 10 digits starting with 0
  "+91": /^(\d{10})$/,      // India
  "+7": /^(\d{10,11})$/,    // Russia
  "+39": /^(\d{9,10})$/     // Italy
};

form.addEventListener('submit', function(e) {
  const code = countrySelect.value;
  const phone = phoneInput.value.trim();
  const pattern = countryRules[code];

  if(!pattern.test(phone)) {
    e.preventDefault();
    phoneError.classList.remove('hidden');
    phoneInput.classList.add('border-red-600');
  } else {
    phoneError.classList.add('hidden');
    phoneInput.classList.remove('border-red-600');
  }
});
</script>

</body>
</html>

English

German

Australia

Spanish

Portuguese

Canada

French

Italian

Japanese

Korean

Vietnamese

Welcome to TEERTARGET.COM - Shop Unique Handmade, Arts, T-Shirts, Stickers, Clothes and Gifts Designed by a Global Community of Independent Artists. Find your thing or open your own shop.

T-Shirt Collection

New Tshirts

FASHION GRAPHIC T-SHIRTS

New Hoodies

New Sweaters

Contact TEERTARGET