-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (132 loc) · 7.57 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=devionhoverce-width, initial-scale=1.0" />
<title>Home | REJOUICE®️</title>
<link rel="shortcut icon" href="https://rejouice.com/assets/favicon/favicon-32x32.png" type="image/x-icon" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css" />
<link rel="stylesheet" href="./css/page1.css" />
<link rel="stylesheet" href="./css/menuReelbox.css">
<link rel="stylesheet" href="./css/page2.css">
</head>
<body>
<div class="main">
<section class="page1">
<div id="menubar">
<div class="menu-nav">
<div class="menu-logo">rejouice</div>
<div id="close" class=" onhover">Close</div>
</div>
<div class="menucontent">
<div class="left_mc">
<div class="video-container">
<video id="myVideo" src="source/rejoice.mp4" type="video/mp4" muted autoplay loop></video>
</div>
<div class="playreel">
<div class="play onhover" style="display: flex; align-items: center; gap: 10px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"
fill="currentColor">
<path
d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM10.6219 8.41459C10.5562 8.37078 10.479 8.34741 10.4 8.34741C10.1791 8.34741 10 8.52649 10 8.74741V15.2526C10 15.3316 10.0234 15.4088 10.0672 15.4745C10.1897 15.6583 10.4381 15.708 10.6219 15.5854L15.5008 12.3328C15.5447 12.3035 15.5824 12.2658 15.6117 12.2219C15.7343 12.0381 15.6846 11.7897 15.5008 11.6672L10.6219 8.41459Z">
</path>
</svg>
Play reel
</div>
<div>-01:18</div>
</div>
</div>
<div class="right_mc">
<div style="text-decoration: underline; text-decoration-thickness: 2px" class="onhover">
<span style="background-color: rgb(159, 255, 33)">Home</span>
<span>Home</span>
</div>
<div class="onhover">
<span>Work</span>
<span>Work</span>
</div>
<div class="onhover">
<span>Services & Models</span>
<span>Services & Models</span>
</div>
<div class="onhover">
<span>About</span>
<span>About</span>
</div>
<div class="onhover">
<span>Contact</span>
<span>Contact</span>
</div>
</div>
</div>
<div class="buttondiv">
<button>Take a seat</button>
</div>
<div class="menu-foot">
<div class="line"></div>
<div class="foot_content">
<div class="quote">
<span>Tomorrow's </span>
<span>Brands, </span>
<span>Today.™</span>
</div>
<div class="social">
<div class="x onhover">X
<svg class="iblock tween:transform,0.6s,easeOutCubic transform group-hover:rotate:45deg align-y:middle"
width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.82813 13.1411L13.1413 6.82841M13.1413 6.82841L7.48446 6.82841M13.1413 6.82841L13.1413 12.4853"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="insta onhover">Instagram
<svg class="iblock tween:transform,0.6s,easeOutCubic transform group-hover:rotate:45deg align-y:middle"
width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.82813 13.1411L13.1413 6.82841M13.1413 6.82841L7.48446 6.82841M13.1413 6.82841L13.1413 12.4853"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="linked onhover">LinkedIn
<svg class="iblock tween:transform,0.6s,easeOutCubic transform group-hover:rotate:45deg align-y:middle"
width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.82813 13.1411L13.1413 6.82841M13.1413 6.82841L7.48446 6.82841M13.1413 6.82841L13.1413 12.4853"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="reelbox"></div>
<video id="myVideo" src="source/rejoice.mp4" type="video/mp4" muted autoplay loop></video>
<div class="page1content">
<div class="click">play reel</div>
<nav>
<div class="tva navelem-zindex">
<span>The </span><span>Venture </span><span>Agency.</span>
</div>
<div id="menu" class="navelem-zindex onhover">Menu</div>
</nav>
<div class="headline">
<span>r</span><span>e</span><span class="ij">J</span><span>o</span><span>u</span><span
class="ij">I</span><span>c</span><span>e</span>
</div>
</div>
</section>
<section class="page2"></section>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./script.js" type="module"></script>
</body>
</html>