<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Creos Invitation</title>

<!-- GOOGLE FONT CLEAN -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Playfair+Display:wght@400;600&family=Great+Vibes&display=swap" rel="stylesheet">

<style>

/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Inter',sans-serif;
  background:#000;
  color:#fff;
  overflow-x:hidden;
}

/* SPACING SYSTEM */
:root{
  --space-lg:120px;
  --space-md:60px;
  --space-sm:24px;
}

/* HERO */
.hero{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 120px;
  gap:80px;
  position:relative;
}

/* LEFT */
.hero-left{
  max-width:320px;
}

.hero-left h1{
  font-family:'Playfair Display',serif;
  font-size:80px;
  line-height:1.1;
  margin-bottom:24px;
}

.hero-left p{
  color:#aaa;
  font-size:14px;
  margin-bottom:16px;
}

/* CENTER IMAGE */
.hero-center{
  flex:1;
  display:flex;
  justify-content:center;
}

.hero-center img{
  height:540px;
  object-fit:cover;
  border-radius:20px;
}

/* RIGHT */
.hero-right{
  max-width:320px;
}

.hero-right h3{
  font-size:14px;
  letter-spacing:2px;
  margin-bottom:16px;
  color:#aaa;
}

.hero-right p{
  font-size:14px;
  color:#aaa;
  margin-bottom:24px;
}

/* BUTTON */
.btn{
  display:inline-block;
  padding:12px 28px;
  border:1px solid #fff;
  border-radius:30px;
  color:#fff;
  text-decoration:none;
  transition:0.3s;
}

.btn:hover{
  background:#fff;
  color:#000;
}

/* FLOAT CARD */
.floating-box{
  position:absolute;
  bottom:40px;
  left:40px;
  background:#fff;
  color:#000;
  padding:16px;
  border-radius:12px;
  width:220px;
  font-size:12px;
}

/* MENU */
.menu{
  position:fixed;
  top:30px;
  right:30px;
  display:flex;
  gap:16px;
}

.menu div{
  width:30px;
  height:30px;
  border:1px solid #fff;
  border-radius:6px;
}

/* RESPONSIVE */
@media(max-width:1024px){

  .hero{
    flex-direction:column;
    padding:60px 24px;
    height:auto;
    text-align:center;
  }

  .hero-center img{
    height:400px;
  }

}

</style>
</head>

<body>

<!-- MENU -->
<div class="menu">
  <div></div>
  <div></div>
</div>

<!-- HERO -->
<section class="hero">

  <!-- LEFT -->
  <div class="hero-left">
    <h1>GRV<br>PBL<br>C</h1>
    <p>DIGITAL WEBSITE INVITATION</p>
    <p>BEST DESIGN</p>
    <p>
      Undangan sebagai elemen pertama yang dilihat oleh para tamu,
      sehingga membuat desain yang bersih dan elegan akan membuat acara lebih berkesan.
    </p>
  </div>

  <!-- CENTER -->
  <div class="hero-center">
    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=800" />
  </div>

  <!-- RIGHT -->
  <div class="hero-right">
    <h3>ABOUT ME</h3>
    <p>
      Kami memulai perjalanan kami di dunia desain website invitation sejak tahun 2020.
      Dengan fokus pada desain yang bersih dan elegan.
    </p>
    <a href="#" class="btn">To Catalog</a>
  </div>

</section>

<!-- FLOAT CARD -->
<div class="floating-box">
  <b>Pembelian Terbaru</b><br><br>
  Sharky Adrian<br>
  Split Link<br>
  14:03
</div>

</body>
</html><?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="https://vemee.creoslab.com/wp-sitemap-index.xsl" ?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>https://vemee.creoslab.com/wp-sitemap-posts-post-1.xml</loc></sitemap><sitemap><loc>https://vemee.creoslab.com/wp-sitemap-posts-page-1.xml</loc></sitemap><sitemap><loc>https://vemee.creoslab.com/wp-sitemap-taxonomies-category-1.xml</loc></sitemap><sitemap><loc>https://vemee.creoslab.com/wp-sitemap-users-1.xml</loc></sitemap></sitemapindex>
