vanta/index.html at main · Delexoo/vanta · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vanta — Stock Videos &amp; Images</title>
  <meta name="description" content="Premium stock videos and images. One-time access for $20.">
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="noise" aria-hidden="true"></div>

  <div class="announce-bar" id="announce-bar" role="status" aria-live="polite">
    <span class="announce-bar__text">Coming soon — Vanta launches shortly.</span>
    <button class="announce-bar__close" id="announce-close" type="button" aria-label="Dismiss announcement">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
    </button>
  </div>

  <nav class="nav-float" aria-label="Primary">
    <a href="#gallery">Gallery</a>
    <a href="#features">Features</a>
    <a href="checkout/index.html">Pricing</a>
  </nav>

  <main>
    <!-- Full-screen cinematic hero -->
    <section class="splash">
      <video
        class="splash__video hero-video"
        src="https://videos.pexels.com/video-files/3129957/3129957-uhd_2560_1440_25fps.mp4"
        autoplay
        muted
        loop
        playsinline
        preload="metadata"
        poster="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&w=1200"
        aria-hidden="true"
      ></video>
      <div class="splash__shade" aria-hidden="true"></div>
      <div class="splash__content reveal">
        <h1 class="splash__title">Vanta.</h1>
        <p class="splash__tagline">Premium stock library.</p>
        <div class="splash__actions">
          <a href="checkout/index.html" class="btn btn--fill">Purchase</a>
          <a href="#features" class="btn btn--line">Learn more</a>
        </div>
      </div>
    </section>

    <!-- Filmstrip gallery -->
    <section id="gallery" class="gallery reveal">
      <div class="gallery__top">
        <div>
          <span class="kicker">Gallery</span>
          <h2 class="heading">A glimpse inside</h2>
        </div>
        <p class="gallery__hint">Click any frame to preview</p>
      </div>
      <div class="filmstrip">
        <article class="film gallery-card" data-src="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&w=1600">
          <img src="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&w=900" alt="Urban skyline">
          <div class="film__meta"><span>01</span><span>Urban</span></div>
        </article>
        <article class="film gallery-card" data-src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&w=1600">
          <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&w=900" alt="Wildlife in nature">
          <div class="film__meta"><span>02</span><span>Nature</span></div>
        </article>
        <article class="film gallery-card" data-src="https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compress&cs=tinysrgb&w=1600">
          <img src="https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compress&cs=tinysrgb&w=900" alt="Abstract fluid art">
          <div class="film__meta"><span>03</span><span>Abstract</span></div>
        </article>
        <article class="film gallery-card" data-src="https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=1600">
          <img src="https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=900" alt="Portrait photography">
          <div class="film__meta"><span>04</span><span>Portrait</span></div>
        </article>
        <article class="film gallery-card" data-src="https://images.pexels.com/photos/257700/pexels-photo-257700.jpeg?auto=compress&cs=tinysrgb&w=1600">
          <img src="https://images.pexels.com/photos/257700/pexels-photo-257700.jpeg?auto=compress&cs=tinysrgb&w=900" alt="Ocean waves">
          <div class="film__meta"><span>05</span><span>Motion</span></div>
        </article>
        <article class="film gallery-card" data-src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=1600">
          <img src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=900" alt="Creative studio">
          <div class="film__meta"><span>06</span><span>Studio</span></div>
        </article>
      </div>
    </section>

    <!-- preset: 0373 heroes-trust-icons -->
    <section id="features" class="included reveal">
      <header class="included__head">
        <span class="kicker">What's included</span>
        <h2 class="heading">Built for production</h2>
      </header>
      <div class="included__grid">
        <article class="included__card">
          <div class="included__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          </div>
          <h3>Instant download</h3>
          <p>MP4 and high-res stills. No watermarks.</p>
        </article>
        <article class="included__card">
          <div class="included__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          </div>
          <h3>Commercial license</h3>
          <p>Use anywhere — client work, ads, social.</p>
        </article>
        <article class="included__card">
          <div class="included__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><path d="M12 12h.01"/></svg>
          </div>
          <h3>4K quality</h3>
          <p>Curated footage and stills, production-ready.</p>
        </article>
        <article class="included__card">
          <div class="included__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
          </div>
          <h3>Lifetime access</h3>
          <p>One payment. Unlimited downloads forever.</p>
        </article>
      </div>
    </section>

    <!-- preset: 0288 pricing-single-plan -->
    <section id="pricing" class="pricing reveal">
      <div class="pricing__inner">
        <h2 class="pricing__title">Full Library Access</h2>
        <div class="pricing__row">
          <span class="pricing__price">$20</span>
          <span class="pricing__term">one-time</span>
        </div>
        <p class="pricing__desc">Videos, images &amp; commercial license.</p>
        <a href="checkout/index.html" class="btn btn--fill" id="purchase-btn">Purchase</a>
      </div>
    </section>
  </main>

  <footer class="footer">
    <span>© Vanta</span>
    <div class="footer__links">
      <a href="terms/index.html">Terms</a>
      <a href="privacy/index.html">Privacy</a>
    </div>
  </footer>

  <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Preview">
    <button class="lightbox__x" type="button" aria-label="Close">×</button>
    <img src="" id="lightbox-img" alt="">
  </div>

  <script src="banner.js"></script>
  <script src="main.js"></script>
</body>
</html>