-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (95 loc) · 4.31 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ringston</title>
</head>
<body>
<div class="loading-screen">
<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M53 44.1668L35.3333 19.4335L42.4 8.8335H63.6L70.6667 19.4335L53 44.1668ZM68.4583 30.0335L63.1583 37.5418C72.875 41.5168 79.5 50.7918 79.5 61.8335C79.5 68.8617 76.708 75.6021 71.7383 80.5718C66.7686 85.5415 60.0282 88.3335 53 88.3335C45.9718 88.3335 39.2314 85.5415 34.2617 80.5718C29.2919 75.6021 26.5 68.8617 26.5 61.8335C26.5 50.7918 33.125 41.5168 42.8417 37.5418L37.5417 30.0335C25.6167 35.7752 17.6667 47.7002 17.6667 61.8335C17.6667 71.2045 21.3893 80.1917 28.0156 86.8179C34.6418 93.4442 43.629 97.1668 53 97.1668C62.371 97.1668 71.3581 93.4442 77.9844 86.8179C84.6107 80.1917 88.3333 71.2045 88.3333 61.8335C88.3333 47.7002 80.3833 35.7752 68.4583 30.0335Z" fill="black"/>
</svg>
</div>
<header class="layout-ws">
<a href="#" class="logo">Ringston</a>
<a href="#" class="collection">
<span>Ring Collection</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11.8533" cy="11.6795" r="9.89771" stroke="white" stroke-width="3"/>
</svg>
</a>
</header>
<main class="hero">
<div class="left layout-ws">
<h1>
<div class="mask primary-h1">
<span>Relationships</span>
</div>
<div class="mask">
<span>Redefined</span>
</div>
</h1>
</div>
<div class="right">
<div class="vid-overlay"></div>
<video autoplay muted loop>
<source src="hands.mp4" type="video/mp4">
</video>
</div>
</main>
<section class="details">
<div class="inspection layout-ws">
<h2>68</h2>
<div class="ring-bg">
<p>Point Inspection</p>
</div>
<p>Our 68-point inspection at Ringston meticulously examines every aspect of the jewelry, from clasp strength to gemstone clarity, guaranteeing unparalleled quality in every piece.</p>
</div>
<div class="mask marquee">
<h3>precision</h3>
</div>
</section>
<div class="no-overflow">
<section class="slider">
<div class="slide">
<div class="inner layout-ws">
<p class="slide-p">This stunning new necklace from Elegance Collection features a radiant sapphire centerpiece, encircled by a halo of ethereal diamonds, making it a breathtaking addition to any attire.</p>
</div>
</div>
<div class="slide">
<div class="inner layout-ws">
<p class="slide-p">This stunning new necklace from Elegance Collection features a radiant sapphire centerpiece, encircled by a halo of ethereal diamonds, making it a breathtaking addition to any attire.</p>
</div>
</div>
<div class="slide">
<div class="inner layout-ws">
<p class="slide-p">This stunning new necklace from Elegance Collection features a radiant sapphire centerpiece, encircled by a halo of ethereal diamonds, making it a breathtaking addition to any attire.</p>
</div>
</div>
<div class="progress"></div>
</section>
</div>
<section class="contact">
<div class="inner-contact">
<div class="line-top"></div>
<div class="layout-ws">
<div class="mask">
<h4>Reserve yours today.</h4>
</div>
<a href="#" class="cta">
<div class="mask">
<span>Put me on the list</span>
</div>
</a>
<p class="contact-desc">Due to the overwhelming demand for our latest luxury ring collection, we've initiated an exclusive waitlist for eager customers, ensuring you'll be among the first to experience the elegance and craftsmanship of this exquisite piece as soon as it becomes available.</p>
</div>
<div class="line-bottom"></div>
</div>
</section>
<section></section>
<canvas class="webgl"></canvas>
<script type="module" src="/main.js"></script>
</body>
</html>