HTMLify

Design Page
Views: 12 | Author: djdj
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shine & Glow Events - About Us Sample</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #f7f1ea;
      --surface: #fffaf5;
      --card: #ffffff;
      --text: #211b18;
      --muted: #6e625b;
      --accent: #b78b38;
      --accent-dark: #8f6925;
      --line: rgba(183, 139, 56, 0.2);
      --shadow: 0 18px 45px rgba(33, 27, 24, 0.08);
      --radius: 24px;
      --max-width: 1180px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Manrope", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(183, 139, 56, 0.08), transparent 26%),
        linear-gradient(180deg, #fbf7f2 0%, #f7f1ea 100%);
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    .container {
      width: min(var(--max-width), calc(100% - 32px));
      margin: 0 auto;
    }

    .section {
      padding: 88px 0;
    }

    .eyebrow {
      display: inline-block;
      margin-bottom: 14px;
      color: var(--accent-dark);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .heading {
      margin: 0 0 18px;
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(2.4rem, 4vw, 4.8rem);
      line-height: 0.95;
      font-weight: 700;
    }

    .subheading {
      margin: 0;
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.8;
    }

    .hero {
      position: relative;
      min-height: 94vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(27, 19, 16, 0.78) 0%, rgba(27, 19, 16, 0.46) 45%, rgba(27, 19, 16, 0.2) 100%),
        url("https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 140px;
      background: linear-gradient(180deg, transparent, #f7f1ea);
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 680px;
      color: #fffaf5;
      padding: 100px 0 120px;
    }

    .hero .eyebrow {
      color: #f5d695;
    }

    .hero .subheading {
      color: rgba(255, 250, 245, 0.86);
      max-width: 580px;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 32px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 180px;
      padding: 15px 24px;
      border-radius: 999px;
      font-weight: 700;
      transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn-primary {
      background: var(--accent);
      color: white;
      box-shadow: 0 10px 30px rgba(183, 139, 56, 0.28);
    }

    .btn-secondary {
      border: 1px solid rgba(255, 250, 245, 0.35);
      color: white;
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(6px);
    }

    .intro-grid,
    .story-grid,
    .cta-wrap {
      display: grid;
      gap: 34px;
      align-items: center;
    }

    .intro-grid,
    .story-grid {
      grid-template-columns: 1.08fr 0.92fr;
    }

    .image-card {
      position: relative;
      min-height: 560px;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      background: url("https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=1200&q=80") center/cover no-repeat;
    }

    .image-card::before {
      content: "";
      position: absolute;
      inset: auto 26px 26px auto;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(4px);
    }

    .text-card {
      background: rgba(255, 250, 245, 0.88);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 42px;
      box-shadow: var(--shadow);
    }

    .section-title {
      margin: 0 0 14px;
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(2rem, 3vw, 3.4rem);
      line-height: 1;
    }

    .section-copy {
      margin: 0 0 18px;
      color: var(--muted);
      line-height: 1.9;
      font-size: 1rem;
    }

    .signature {
      margin-top: 22px;
      color: var(--accent-dark);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 0.86rem;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
      margin-top: 34px;
    }

    .feature-card,
    .service-card,
    .stat-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 28px;
      box-shadow: var(--shadow);
    }

    .feature-number {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      margin-bottom: 18px;
      border-radius: 50%;
      background: rgba(183, 139, 56, 0.14);
      color: var(--accent-dark);
      font-weight: 800;
    }

    .card-title {
      margin: 0 0 10px;
      font-size: 1.15rem;
      font-weight: 800;
    }

    .card-copy {
      margin: 0;
      color: var(--muted);
      line-height: 1.75;
    }

    .section-head {
      max-width: 700px;
      margin: 0 auto 36px;
      text-align: center;
    }

    .story-panel {
      background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
      border-radius: var(--radius);
      border: 1px solid var(--line);
      padding: 32px;
      box-shadow: var(--shadow);
    }

    .timeline {
      display: grid;
      gap: 18px;
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 18px;
      align-items: start;
    }

    .timeline-dot {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: linear-gradient(135deg, #cfab62, #9e7426);
      color: white;
      font-weight: 800;
      box-shadow: 0 10px 24px rgba(183, 139, 56, 0.25);
    }

    .services,
    .stats,
    .gallery {
      display: grid;
      gap: 22px;
    }

    .services {
      grid-template-columns: repeat(4, 1fr);
    }

    .service-card {
      min-height: 220px;
      background:
        linear-gradient(180deg, rgba(255, 250, 245, 0.92), rgba(255, 255, 255, 1)),
        radial-gradient(circle at top right, rgba(183, 139, 56, 0.09), transparent 35%);
    }

    .service-tag {
      display: inline-block;
      margin-bottom: 16px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(183, 139, 56, 0.12);
      color: var(--accent-dark);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .stats {
      grid-template-columns: repeat(4, 1fr);
    }

    .stat-card {
      text-align: center;
      padding: 34px 20px;
    }

    .stat-value {
      display: block;
      margin-bottom: 8px;
      font-family: "Cormorant Garamond", serif;
      font-size: 3rem;
      font-weight: 700;
      color: var(--accent-dark);
    }

    .gallery {
      grid-template-columns: repeat(3, 1fr);
    }

    .gallery-item {
      position: relative;
      min-height: 280px;
      overflow: hidden;
      border-radius: 24px;
      box-shadow: var(--shadow);
      background-size: cover;
      background-position: center;
    }

    .gallery-item:nth-child(1) {
      background-image: url("https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=900&q=80");
    }

    .gallery-item:nth-child(2) {
      background-image: url("https://images.unsplash.com/photo-1520854221256-17451cc331bf?auto=format&fit=crop&w=900&q=80");
    }

    .gallery-item:nth-child(3) {
      background-image: url("https://images.unsplash.com/photo-1469371670807-013ccf25f16a?auto=format&fit=crop&w=900&q=80");
    }

    .gallery-item:nth-child(4) {
      background-image: url("https://images.unsplash.com/photo-1511795409834-ef04bbd61622?auto=format&fit=crop&w=900&q=80");
    }

    .gallery-item:nth-child(5) {
      background-image: url("https://images.unsplash.com/photo-1511578314322-379afb476865?auto=format&fit=crop&w=900&q=80");
    }

    .gallery-item:nth-child(6) {
      background-image: url("https://images.unsplash.com/photo-1513278974582-3e1b4a4fa21d?auto=format&fit=crop&w=900&q=80");
    }

    .gallery-item::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 15%, rgba(22, 17, 14, 0.45));
    }

    .gallery-label {
      position: absolute;
      left: 22px;
      bottom: 18px;
      z-index: 1;
      color: white;
      font-weight: 700;
      letter-spacing: 0.03em;
    }

    .cta-wrap {
      grid-template-columns: 1.1fr 0.9fr;
      padding: 44px;
      border-radius: 30px;
      background:
        linear-gradient(135deg, rgba(33, 27, 24, 0.96), rgba(62, 48, 41, 0.93)),
        radial-gradient(circle at top right, rgba(245, 214, 149, 0.2), transparent 30%);
      color: white;
      box-shadow: var(--shadow);
    }

    .cta-wrap .subheading {
      color: rgba(255, 250, 245, 0.82);
    }

    .contact-card {
      padding: 30px;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(8px);
    }

    .contact-line {
      margin: 0 0 14px;
      color: rgba(255, 250, 245, 0.9);
      line-height: 1.7;
    }

    @media (max-width: 1080px) {
      .features,
      .services,
      .stats {
        grid-template-columns: repeat(2, 1fr);
      }

      .gallery {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 820px) {
      .section {
        padding: 68px 0;
      }

      .intro-grid,
      .story-grid,
      .cta-wrap {
        grid-template-columns: 1fr;
      }

      .image-card {
        min-height: 420px;
      }

      .hero {
        min-height: auto;
      }

      .hero-content {
        padding: 92px 0 110px;
      }
    }

    @media (max-width: 640px) {
      .container {
        width: min(var(--max-width), calc(100% - 22px));
      }

      .text-card,
      .story-panel,
      .feature-card,
      .service-card,
      .stat-card,
      .cta-wrap,
      .contact-card {
        padding: 22px;
      }

      .features,
      .services,
      .stats,
      .gallery {
        grid-template-columns: 1fr;
      }

      .timeline-item {
        grid-template-columns: 44px 1fr;
        gap: 14px;
      }

      .timeline-dot,
      .feature-number {
        width: 44px;
        height: 44px;
      }

      .btn {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <header class="hero">
    <div class="container">
      <div class="hero-content">
        <span class="eyebrow">About Shine & Glow Events</span>
        <h1 class="heading">Crafting Unforgettable Celebrations With Style & Heart</h1>
        <p class="subheading">
          Shine & Glow Events creates elegant weddings, refined corporate gatherings, and memorable social celebrations in Lucknow with a seamless planning experience from concept to execution.
        </p>
        <div class="hero-actions">
          <a class="btn btn-primary" href="#contact">Book Consultation</a>
          <a class="btn btn-secondary" href="#gallery">View Our Work</a>
        </div>
      </div>
    </div>
  </header>

  <main>
    <section class="section">
      <div class="container intro-grid">
        <div class="image-card" aria-hidden="true"></div>
        <div class="text-card">
          <span class="eyebrow">Our Story</span>
          <h2 class="section-title">Your Celebration, Our Passion</h2>
          <p class="section-copy">
            At Shine & Glow Events, we believe every event should feel deeply personal, visually stunning, and beautifully organized. We work closely with clients to understand their story, preferences, traditions, and expectations so every celebration reflects their unique identity.
          </p>
          <p class="section-copy">
            From luxurious wedding decor to polished corporate experiences, our team combines creativity, planning precision, and on-ground coordination to make every moment feel effortless. We do not just manage events, we shape experiences people remember.
          </p>
          <div class="signature">Luxury Planning. Meaningful Moments.</div>
        </div>
      </div>
    </section>

    <section class="section" style="padding-top: 0;">
      <div class="container">
        <div class="section-head">
          <span class="eyebrow">Why Choose Us</span>
          <h2 class="section-title">A Planning Experience Designed To Feel Effortless</h2>
          <p class="subheading">
            We focus on graceful design, strong coordination, and the kind of detail management that allows you to enjoy the celebration instead of worrying about it.
          </p>
        </div>
        <div class="features">
          <article class="feature-card">
            <div class="feature-number">01</div>
            <h3 class="card-title">Personalized Planning</h3>
            <p class="card-copy">Every event is planned around your taste, guest experience, rituals, budget, and vision.</p>
          </article>
          <article class="feature-card">
            <div class="feature-number">02</div>
            <h3 class="card-title">Elegant Decor Styling</h3>
            <p class="card-copy">We create rich visual concepts with balanced color palettes, floral design, lighting, and premium styling.</p>
          </article>
          <article class="feature-card">
            <div class="feature-number">03</div>
            <h3 class="card-title">Vendor Coordination</h3>
            <p class="card-copy">From photographers to caterers, we align all moving parts so the event runs smoothly and on time.</p>
          </article>
          <article class="feature-card">
            <div class="feature-number">04</div>
            <h3 class="card-title">Flawless Execution</h3>
            <p class="card-copy">Our team handles setup, sequencing, guest flow, and event-day operations with calm professionalism.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container story-grid">
        <div class="story-panel">
          <span class="eyebrow">How We Work</span>
          <h2 class="section-title">From Vision To Celebration</h2>
          <p class="section-copy">
            Our process is simple, collaborative, and detail-driven so you always feel supported from the first conversation to the final guest goodbye.
          </p>
          <div class="timeline">
            <div class="timeline-item">
              <div class="timeline-dot">1</div>
              <div>
                <h3 class="card-title">Understand Your Vision</h3>
                <p class="card-copy">We begin with your ideas, preferences, inspirations, and practical needs.</p>
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-dot">2</div>
              <div>
                <h3 class="card-title">Plan Every Detail</h3>
                <p class="card-copy">Layouts, themes, budgets, timelines, vendors, and guest experience are carefully mapped.</p>
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-dot">3</div>
              <div>
                <h3 class="card-title">Design The Ambiance</h3>
                <p class="card-copy">We shape the decor language with elegant styling, floral concepts, textures, and lighting.</p>
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-dot">4</div>
              <div>
                <h3 class="card-title">Execute Seamlessly</h3>
                <p class="card-copy">Our on-ground team manages every moving part so the day unfolds beautifully.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="text-card">
          <span class="eyebrow">Our Promise</span>
          <h2 class="section-title">Thoughtful Events That Feel Truly Yours</h2>
          <p class="section-copy">
            We understand that every event carries emotion, expectations, and meaning. That is why we create setups that are not only visually impressive but also warm, welcoming, and aligned with your story.
          </p>
          <p class="section-copy">
            Whether you are planning a wedding celebration, a corporate evening, or a social gathering, our role is to turn complexity into clarity and ideas into unforgettable moments.
          </p>
        </div>
      </div>
    </section>

    <section class="section" style="padding-top: 0;">
      <div class="container">
        <div class="section-head">
          <span class="eyebrow">Our Services</span>
          <h2 class="section-title">Everything You Need Under One Roof</h2>
          <p class="subheading">
            Use this section in WordPress as icon boxes or service cards with a short paragraph and link button below each card.
          </p>
        </div>
        <div class="services">
          <article class="service-card">
            <span class="service-tag">Wedding</span>
            <h3 class="card-title">Wedding Planning</h3>
            <p class="card-copy">Concept development, venue styling, guest flow, rituals planning, and complete execution.</p>
          </article>
          <article class="service-card">
            <span class="service-tag">Corporate</span>
            <h3 class="card-title">Corporate Events</h3>
            <p class="card-copy">Professional launches, team events, conferences, award nights, and branded experiences.</p>
          </article>
          <article class="service-card">
            <span class="service-tag">Social</span>
            <h3 class="card-title">Social Celebrations</h3>
            <p class="card-copy">Birthdays, anniversaries, private gatherings, festive events, and themed family occasions.</p>
          </article>
          <article class="service-card">
            <span class="service-tag">Decor</span>
            <h3 class="card-title">Decor & Styling</h3>
            <p class="card-copy">Premium stage setups, floral design, entrance concepts, lighting arrangements, and ambience styling.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="section-head">
          <span class="eyebrow">Trusted By Clients</span>
          <h2 class="section-title">Built On Creativity, Care, And Consistency</h2>
        </div>
        <div class="stats">
          <article class="stat-card">
            <span class="stat-value">100+</span>
            <p class="card-copy">Events managed with thoughtful planning and polished execution.</p>
          </article>
          <article class="stat-card">
            <span class="stat-value">50+</span>
            <p class="card-copy">Happy clients who trusted us with their most meaningful occasions.</p>
          </article>
          <article class="stat-card">
            <span class="stat-value">10+</span>
            <p class="card-copy">Creative service categories coordinated under one event experience.</p>
          </article>
          <article class="stat-card">
            <span class="stat-value">1</span>
            <p class="card-copy">Dedicated team focused on making your event look and feel exceptional.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="gallery">
      <div class="container">
        <div class="section-head">
          <span class="eyebrow">Event Gallery</span>
          <h2 class="section-title">Moments We Love Bringing To Life</h2>
          <p class="subheading">
            In WordPress, this can become a gallery widget, carousel, or masonry image section with real client event photos.
          </p>
        </div>
        <div class="gallery">
          <div class="gallery-item"><span class="gallery-label">Luxury Wedding Setup</span></div>
          <div class="gallery-item"><span class="gallery-label">Elegant Reception Decor</span></div>
          <div class="gallery-item"><span class="gallery-label">Grand Celebration Moments</span></div>
          <div class="gallery-item"><span class="gallery-label">Guest Experience Styling</span></div>
          <div class="gallery-item"><span class="gallery-label">Corporate Event Ambiance</span></div>
          <div class="gallery-item"><span class="gallery-label">Signature Decor Concepts</span></div>
        </div>
      </div>
    </section>

    <section class="section" id="contact">
      <div class="container">
        <div class="cta-wrap">
          <div>
            <span class="eyebrow">Let Us Create Magic</span>
            <h2 class="section-title" style="color: white;">Let’s Plan Something Beautiful Together</h2>
            <p class="subheading">
              Whether you are dreaming of an intimate celebration or a grand wedding affair, Shine & Glow Events is ready to turn your ideas into an elegant and memorable experience.
            </p>
            <div class="hero-actions">
              <a class="btn btn-primary" href="#">Contact Us</a>
              <a class="btn btn-secondary" href="#">Call Now</a>
            </div>
          </div>
          <aside class="contact-card">
            <p class="contact-line"><strong>Phone:</strong> +91 82794-31442</p>
            <p class="contact-line"><strong>Email:</strong> info@shineandglowevents.com</p>
            <p class="contact-line"><strong>Location:</strong> 31, Babu Rajkumar Srivastav Marg, Sector L, Aliganj, Lucknow, Uttar Pradesh 226024</p>
            <p class="contact-line"><strong>Best For:</strong> Weddings, corporate events, social celebrations, decor styling, and end-to-end event planning.</p>
          </aside>
        </div>
      </div>
    </section>
  </main>
</body>
</html>
HTMLify

Share this file:
