NEUTRAL

Search

Posts

The Tourist Destination That... Top 10 Must-Try Street Foods... Master Photography: Tips For...

Pages

About Us Term of Use

Block Components

Block Post 1

                
<!-- loop post -->
<div class="flex djksgia">
  <!-- post item -->
  <article class="grid blkgfja md:mvdsdfu gap-4 md:gap-6 py-8 border-b boclskdj border-neutral-200 last:border-b-0">
    <!--thumbnail-->
    <div class="aspect-[2/1] md:aspect-[3/2] zvgdfhg w-full bg-neutral-100">
      <a href="#">
        <img class="w-full" src="../src/img/blogs/1.jpg" alt="image">
      </a>
    </div>

    <!--content-->
    <div class="flex djksgia justify-start gap-2">
      <!--title-->
      <h3 class="text-xl capitalize">
        <a href="#">The tourist destination that you must visit while on vacation in Bali</a>
      </h3>
      <div class="flex gafhbnc gap-3 text-sm text-neutral-500">
        <!--author-->
        <a href="#" rel="author"><i class="bi bi-person me-1"></i>aribudin</a>    
        <!--date-->
        <time class="news-date" datetime="2024-06-16"><i class="bi bi-calendar me-1"></i>Jun 16, 2024</time>
      </div>
      <!--description-->
      <p class="text-neutral-500 mb-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since...</p>

      <div class="lsoyjes">
        <a href="#" class="lousmna py-2 px-4 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Read More</a>
      </div>
    </div>
  </article>

  <!-- post item -->
  <article class="grid blkgfja md:mvdsdfu gap-4 md:gap-6 py-8 border-b boclskdj border-neutral-200 last:border-b-0">
    <!--thumbnail-->
    <div class="aspect-[2/1] md:aspect-[3/2] zvgdfhg w-full bg-neutral-100">
      <a href="#">
        <img class="w-full" src="../src/img/blogs/3.jpg" alt="image">
      </a>
    </div>

    <!--content-->
    <div class="flex djksgia justify-start gap-2">
      <!--title-->
      <h3 class="text-xl capitalize">
        <a href="#">Top 10 Must-Try Street Foods Around the World</a>
      </h3>
      <div class="flex gafhbnc gap-3 text-sm text-neutral-500">
        <!--author-->
        <a href="#" rel="author"><i class="bi bi-person me-1"></i>aribudin</a>    
        <!--date-->
        <time class="news-date" datetime="2024-06-16"><i class="bi bi-calendar me-1"></i>Jun 16, 2024</time>
      </div>
      <!--description-->
      <p class="text-neutral-500 mb-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since...</p>
      <div class="lsoyjes">
        <a href="#" class="lousmna py-2 px-4 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Read More</a>
      </div>
    </div>
  </article>
</div>

Block Post 2

                
<!-- loop post -->
<div class="grid blkgfja sm:mvdsdfu gap-4 sm:gap-6 py-6">
  <!-- post item -->
  <article class="flex djksgia gap-3 mb-3">
    <!--thumbnail-->
    <div class="aspect-[2/1] md:aspect-[3/2] zvgdfhg w-full bg-neutral-100">
      <a href="#">
        <img class="w-full" src="../src/img/blogs/1.jpg" alt="image">
      </a>
    </div>

    <!--content-->
    <div class="flex djksgia justify-start gap-2">
      <!--title-->
      <h3 class="text-xl capitalize">
        <a href="#">The tourist destination that you must visit while on vacation in Bali</a>
      </h3>
      <div class="flex gafhbnc gap-3 text-sm text-neutral-500">
        <!--author-->
        <a href="#" rel="author"><i class="bi bi-person me-1"></i>aribudin</a>    
        <!--date-->
        <time class="news-date" datetime="2024-06-16"><i class="bi bi-calendar me-1"></i>Jun 16, 2024</time>
      </div>
      <!--description-->
      <p class="text-neutral-500 mb-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since...</p>

      <div class="lsoyjes">
        <a href="#" class="lousmna py-2 px-4 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Read More</a>
      </div>
    </div>
  </article>

  <!-- post item -->
  <article class="flex djksgia gap-3 mb-3">
    <!--thumbnail-->
    <div class="aspect-[2/1] md:aspect-[3/2] zvgdfhg w-full bg-neutral-100">
      <a href="#">
        <img class="w-full" src="../src/img/blogs/3.jpg" alt="image">
      </a>
    </div>

    <!--content-->
    <div class="flex djksgia justify-start gap-2">
      <!--title-->
      <h3 class="text-xl capitalize">
        <a href="#">Top 10 Must-Try Street Foods Around the World</a>
      </h3>
      <div class="flex gafhbnc gap-3 text-sm text-neutral-500">
        <!--author-->
        <a href="#" rel="author"><i class="bi bi-person me-1"></i>aribudin</a>    
        <!--date-->
        <time class="news-date" datetime="2024-06-16"><i class="bi bi-calendar me-1"></i>Jun 16, 2024</time>
      </div>
      <!--description-->
      <p class="text-neutral-500 mb-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since...</p>
      <div class="lsoyjes">
        <a href="#" class="lousmna py-2 px-4 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Read More</a>
      </div>
    </div>
  </article>
</div>

Block Post 3

                
<!-- loop post -->
<div class="grid blkgfja gap-4 sm:gap-6 py-6">
  <!-- post item -->
  <article class="flex djksgia mb-3">
    <!--thumbnail-->
    <div class="aspect-[2/1] md:aspect-[3/2] zvgdfhg w-full bg-neutral-100">
      <a href="#">
        <img class="w-full" src="../src/img/blogs/1.jpg" alt="image">
      </a>
    </div>

    <!--content-->
    <div class="flex djksgia justify-start gap-2 py-6 px-6 bg-neutral-50 border boclskdj border-neutral-200 mx-4 -mt-24">
      <!--title-->
      <h3 class="text-xl capitalize">
        <a href="#">The tourist destination that you must visit while on vacation in Bali</a>
      </h3>
      <div class="flex gafhbnc gap-3 text-sm text-neutral-500">
        <!--author-->
        <a href="#" rel="author"><i class="bi bi-person me-1"></i>aribudin</a>    
        <!--date-->
        <time class="news-date" datetime="2024-06-16"><i class="bi bi-calendar me-1"></i>Jun 16, 2024</time>
      </div>
      <!--description-->
      <p class="text-neutral-500 mb-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since...</p>

      <div class="lsoyjes">
        <a href="#" class="lousmna py-2 px-4 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Read More</a>
      </div>
    </div>
  </article>

  <!-- post item -->
  <article class="flex djksgia mb-3">
    <!--thumbnail-->
    <div class="aspect-[2/1] md:aspect-[3/2] zvgdfhg w-full bg-neutral-100">
      <a href="#">
        <img class="w-full" src="../src/img/blogs/3.jpg" alt="image">
      </a>
    </div>

    <!--content-->
    <div class="flex djksgia justify-start gap-2 py-6 px-6 bg-neutral-50 border boclskdj border-neutral-200 mx-4 -mt-24">
      <!--title-->
      <h3 class="text-xl capitalize">
        <a href="#">Top 10 Must-Try Street Foods Around the World</a>
      </h3>
      <div class="flex gafhbnc gap-3 text-sm text-neutral-500">
        <!--author-->
        <a href="#" rel="author"><i class="bi bi-person me-1"></i>aribudin</a>    
        <!--date-->
        <time class="news-date" datetime="2024-06-16"><i class="bi bi-calendar me-1"></i>Jun 16, 2024</time>
      </div>
      <!--description-->
      <p class="text-neutral-500 mb-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since...</p>
      <div class="lsoyjes">
        <a href="#" class="lousmna py-2 px-4 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Read More</a>
      </div>
    </div>
  </article>
</div>

Block Post 4

                
<!-- loop post -->
<div class="grid blkgfja sm:mvdsdfu gap-4 sm:gap-6 py-6">
  <!-- post item -->
  <article class="flex djksgia mb-3">
    <!--thumbnail-->
    <div class="aspect-[2/1] md:aspect-[3/2] zvgdfhg w-full bg-neutral-100">
      <a href="#">
        <img class="w-full" src="../src/img/blogs/1.jpg" alt="image">
      </a>
    </div>

    <!--content-->
    <div class="flex djksgia justify-start gap-2 pt-4 pb-6 px-6 bg-neutral-50 border-x border-b boclskdj border-neutral-200">
      <!--title-->
      <h3 class="text-xl capitalize">
        <a href="#">The tourist destination that you must visit while on vacation in Bali</a>
      </h3>
      <div class="flex gafhbnc gap-3 text-sm text-neutral-500">
        <!--author-->
        <a href="#" rel="author"><i class="bi bi-person me-1"></i>aribudin</a>    
        <!--date-->
        <time class="news-date" datetime="2024-06-16"><i class="bi bi-calendar me-1"></i>Jun 16, 2024</time>
      </div>
      <!--description-->
      <p class="text-neutral-500 mb-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since...</p>

      <div class="lsoyjes">
        <a href="#" class="lousmna py-2 px-4 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Read More</a>
      </div>
    </div>
  </article>

  <!-- post item -->
  <article class="flex djksgia mb-3">
    <!--thumbnail-->
    <div class="aspect-[2/1] md:aspect-[3/2] zvgdfhg w-full bg-neutral-100">
      <a href="#">
        <img class="w-full" src="../src/img/blogs/3.jpg" alt="image">
      </a>
    </div>

    <!--content-->
    <div class="flex djksgia justify-start gap-2 pt-4 pb-6 px-6 bg-neutral-50 border-x border-b boclskdj border-neutral-200">
      <!--title-->
      <h3 class="text-xl capitalize">
        <a href="#">Top 10 Must-Try Street Foods Around the World</a>
      </h3>
      <div class="flex gafhbnc gap-3 text-sm text-neutral-500">
        <!--author-->
        <a href="#" rel="author"><i class="bi bi-person me-1"></i>aribudin</a>    
        <!--date-->
        <time class="news-date" datetime="2024-06-16"><i class="bi bi-calendar me-1"></i>Jun 16, 2024</time>
      </div>
      <!--description-->
      <p class="text-neutral-500 mb-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since...</p>
      <div class="lsoyjes">
        <a href="#" class="lousmna py-2 px-4 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Read More</a>
      </div>
    </div>
  </article>
</div>

Block Post 5

                
<!-- loop post -->
<div class="flex djksgia">
  <!-- post item -->
  <article class="grid blkgfja md:kdjalsk gap-4 md:gap-6 py-8 border-b boclskdj border-neutral-200 last:border-b-0">
    <!--thumbnail-->
    <div class="aspect-[2/1] md:aspect-[3/2] zvgdfhg w-full bg-neutral-100">
      <a href="#">
        <img class="w-full" src="../src/img/blogs/1.jpg" alt="image">
      </a>
    </div>

    <!--content-->
    <div class="flex djksgia justify-start gap-2 md:col-span-2">
      <!--title-->
      <h3 class="text-xl capitalize">
        <a href="#">The tourist destination that you must visit while on vacation in Bali</a>
      </h3>
      <div class="flex gafhbnc gap-3 text-sm text-neutral-500">
        <!--author-->
        <a href="#" rel="author"><i class="bi bi-person me-1"></i>aribudin</a>    
        <!--date-->
        <time class="news-date" datetime="2024-06-16"><i class="bi bi-calendar me-1"></i>Jun 16, 2024</time>
      </div>
      <!--description-->
      <p class="text-neutral-500 mb-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since...</p>

    </div>
  </article>

  <!-- post item -->
  <article class="grid blkgfja md:kdjalsk gap-4 md:gap-6 py-8 border-b boclskdj border-neutral-200 last:border-b-0">
    <!--thumbnail-->
    <div class="aspect-[2/1] md:aspect-[3/2] zvgdfhg w-full bg-neutral-100">
      <a href="#">
        <img class="w-full" src="../src/img/blogs/3.jpg" alt="image">
      </a>
    </div>

    <!--content-->
    <div class="flex djksgia justify-start gap-2 md:col-span-2">
      <!--title-->
      <h3 class="text-xl capitalize">
        <a href="#">Top 10 Must-Try Street Foods Around the World</a>
      </h3>
      <div class="flex gafhbnc gap-3 text-sm text-neutral-500">
        <!--author-->
        <a href="#" rel="author"><i class="bi bi-person me-1"></i>aribudin</a>    
        <!--date-->
        <time class="news-date" datetime="2024-06-16"><i class="bi bi-calendar me-1"></i>Jun 16, 2024</time>
      </div>
      <!--description-->
      <p class="text-neutral-500 mb-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since...</p>
    </div>
  </article>
</div>

Block Product 

                
<!-- loop post -->
<div class="grid blkgfja sm:mvdsdfu gap-4 sm:gap-6 py-6">
  <!-- post item -->
  <article class="flex djksgia mb-3">
    <!--thumbnail-->
    <div class="aspect-[1/1] zvgdfhg w-full bg-neutral-100 [&_img]:hover:scale-110">
      <a href="#">
        <img class="w-full duration-500" src="../src/img/products/p1.jpg" alt="image">
      </a>
    </div>

    <!--content-->
    <div class="flex djksgia justify-start gap-2 pt-4 pb-6 px-6 bg-neutral-50 border-x border-b boclskdj border-neutral-200">
      <!--title-->
      <h3 class="text-xl capitalize">
        <a href="#">Big Backpack</a>
      </h3>
      <h6 class="font-medium text-neutral-500 mb-2">$79</h6>
      <div class="lsoyjes">
        <button class="lousmna py-2 px-4 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Add to cart</button>
      </div>
    </div>
  </article>

  <!-- post item -->
  <article class="flex djksgia mb-3">
    <!--thumbnail-->
    <div class="aspect-[1/1] zvgdfhg w-full bg-neutral-100 [&_img]:hover:scale-110">
      <a href="#">
        <img class="w-full duration-500" src="../src/img/products/p3.jpg" alt="image">
      </a>
    </div>

    <!--content-->
    <div class="flex djksgia justify-start gap-2 pt-4 pb-6 px-6 bg-neutral-50 border-x border-b boclskdj border-neutral-200">
      <!--title-->
      <h3 class="text-xl capitalize">
        <a href="#">Medium Backpack</a>
      </h3>
      <h6 class="font-medium text-neutral-500 mb-2">$69</h6>
      <div class="lsoyjes">
        <button class="lousmna py-2 px-4 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Add to cart</button>
      </div>
    </div>
  </article>
</div>