-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (162 loc) · 14.3 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<link rel="stylesheet" href="./css/style.css">
<link rel="shortcut icon" href="./images/favicon.png" type="image/x-icon">
<script src="./script.js" defer></script>
<title>Loop Studios</title>
</head>
<body>
<nav class="bg-white fixed left-0 right-0 top-0 px-4 z-30">
<div class="max-w-7xl mx-auto h-11 flex justify-between items-center peer relative z-20">
<div>
<svg class="h-4" height="383" viewBox="0 0 609 383" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M609 231.26C609 313.133 538.969 382.877 456.872 382.877C439.626 382.936 422.498 380.034 406.241 374.298C389.338 368.273 376.79 358.32 362.189 348.614C360.212 347.318 358.197 346.022 356.156 344.882C340.551 335.817 322.812 331.041 304.751 331.041C286.689 331.041 268.95 335.817 253.346 344.882C223.037 362.545 200.114 380.545 163.629 382.722C125.363 385.015 86.473 373.08 56.6715 348.899C9.1868 310.373 -7.41723 245.735 2.97168 187.161C14.7778 120.644 60.4422 71.6076 119.642 41.5821C141.3 30.743 164.011 22.1369 187.424 15.8978C316.953 -19.3889 505.202 -1.25958 581.188 124.635C591.665 142.1 599.606 160.957 604.774 180.643C607.593 197.368 609.007 214.299 609 231.26Z" fill="#CCCCCC" />
</svg>
</div>
<div class="hidden xl:block">
<ul class="flex gap-6 text-[15px] text-zinc-800">
<li class="hover:text-zinc-500"><a href="#">About</a></li>
<li class="hover:text-zinc-500"><a href="#">Careers</a></li>
<li class="hover:text-zinc-500"><a href="#">Events</a></li>
<li class="hover:text-zinc-500"><a href="#">Products</a></li>
<li class="hover:text-zinc-500"><a href="#">Support</a></li>
</ul>
</div>
<div id="hamburger" class="hamburger xl:hidden overflow-hidden">
<span class="hamburger-top"> </span>
<span class="hamburger-bottom"> </span>
</div>
</div>
</nav>
<div id="backdrop" class="fixed z-30 left-0 right-0 top-11 bg-white/[.3] transition-all duration-700 overflow-hidden backdrop-blur-xl xl:hidden">
<div id="menu" class="bg-white shadow-xl shadow-white h-0 transition-all duration-700 overflow-hidden px-10">
<ul class="flex flex-col text-3xl text-zinc-500 tracking-tighter font-semibold gap-4 py-6 px-4 xl:px-0 max-w-7xl mx-auto">
<li class="hover:text-zinc-500"><a href="#">About</a></li>
<li class="hover:text-zinc-500"><a href="#">Careers</a></li>
<li class="hover:text-zinc-500"><a href="#">Events</a></li>
<li class="hover:text-zinc-500"><a href="#">Products</a></li>
<li class="hover:text-zinc-500"><a href="#">Support</a></li>
</ul>
</div>
</div>
<header>
<div class="xl:h-screen bg-zinc-100 mt-11 flex flex-col justify-between">
<div class="text-center pt-16 space-y-3 md:space-y-6">
<h1 class="text-4xl md:text-6xl tracking-tighter font-medium text-blue-600">Loop Studios</h1>
<p class="text-xl md:text-2xl font-medium text-zinc-600 max-w-80 md:max-w-4xl mx-auto">Impressive Experiences That Deliver</p>
</div>
<div>
<img src="./images/img-hero.png" alt="Hero image" class="object-cover w-full h-[400px] md:h-[600px]">
</div>
</div>
</header>
<main>
<!-- About section -->
<section class="relative px-4">
<div class="absolute bottom-0 md:bottom-6 right-0 left-0 text-center flex flex-col items-center gap-1 px-4">
<p class="text-zinc-600">The leader in interactive VR</p>
<p class="max-w-2xl text-xs text-zinc-500">Founded in 2011, Loopstudios has been producing world-class virtual reality projects for some of the best companies around the globe. Our award-winning creations have transformed businesses through digital experiences that bind to their brand.</p>
</div>
<img src="./images/img-about.png" alt="About image" class="h-[350px] md:h-[400px] object-cover w-full">
</section>
<!-- Our creation section -->
<section class="p-4">
<div class="max-w-7xl mx-auto">
<div class="text-center py-16 md:py-24">
<h2 class="text-4xl md:text-5xl tracking-tighter text-zinc-900 font-medium">Our Creations</h2>
</div>
<div class="space-y-6">
<div class="grid xl:grid-cols-2 gap-6">
<div class="bg-zinc-100 rounded-3xl overflow-hidden relative group">
<a href="#" class="absolute h-full w-full"> </a>
<div class="absolute left-0 right-0 bottom-10 text-center space-y-1 md:space-y-2 text-white pointer-events-none z-10">
<h3 class="text-lg tracking-tight font-medium">The Curiosity</h3>
<p class="text-3xl md:text-4xl tracking-tight font-semibold max-w-72 md:max-w-md mx-auto">Journey to the center of Mars</p>
</div>
<img src="./images/img-robot.jpg" alt="robot" class="object-cover h-[400px] md:h-[700px] w-full group-hover:scale-105 duration-500 pointer-events-none">
</div>
<div class="bg-zinc-100 rounded-3xl overflow-hidden relative group">
<a href="#" class="absolute h-full w-full"> </a>
<div class="absolute left-0 right-0 bottom-10 text-center space-y-1 md:space-y-2 text-white pointer-events-none z-10">
<h3 class="text-lg tracking-tight font-medium">Soccer Team VR</h3>
<p class="text-3xl md:text-4xl tracking-tight font-semibold max-w-72 md:max-w-md mx-auto">Feel the Pulse of the Pitch</p>
</div>
<img src="./images/img-soccer.jpg" alt="robot" class="object-cover h-[400px] md:h-[700px] w-full group-hover:scale-105 duration-500 pointer-events-none">
</div>
</div>
<div class="bg-zinc-100 rounded-3xl overflow-hidden relative group">
<a href="#" class="absolute h-full w-full"> </a>
<div class="absolute left-0 right-0 bottom-10 text-center space-y-1 md:space-y-2 text-white pointer-events-none z-10">
<h3 class="text-lg tracking-tight font-medium">The Grid</h3>
<p class="text-3xl md:text-4xl tracking-tight font-semibold max-w-72 md:max-w-md mx-auto">Experience Driving from the Inside Out</p>
</div>
<img src="./images/img-cars.jpg" alt="Car" class="h-[400px] md:h-[600px] w-full object-cover group-hover:scale-105 duration-500 pointer-events-none">
</div>
<div class="grid xl:grid-cols-2 gap-6">
<div class="bg-zinc-100 rounded-3xl overflow-hidden relative group">
<a href="#" class="absolute h-full w-full"> </a>
<div class="absolute left-0 right-0 bottom-10 text-center space-y-1 md:space-y-2 text-white pointer-events-none z-10">
<h3 class="text-lg tracking-tight font-medium">From up above VR</h3>
<p class="text-3xl md:text-4xl tracking-tight font-semibold max-w-72 md:max-w-md mx-auto">Trace the Path to Adventure</p>
</div>
<img src="./images/img-road.jpg" alt="robot" class="object-cover h-[400px] md:h-[700px] w-full group-hover:scale-105 duration-500 pointer-events-none">
</div>
<div class="bg-zinc-100 rounded-3xl overflow-hidden relative group">
<a href="#" class="absolute h-full w-full"> </a>
<div class="absolute left-0 right-0 bottom-10 text-center space-y-1 md:space-y-2 text-white pointer-events-none z-10">
<h3 class="text-lg tracking-tight font-medium">Make it Fisheye</h3>
<p class="text-3xl md:text-4xl tracking-tight font-semibold max-w-72 md:max-w-md mx-auto">Bend the Boundaries of Vision</p>
</div>
<img src="./images/img-fisheye.jpg" alt="robot" class="object-cover h-[400px] md:h-[700px] w-full group-hover:scale-105 duration-500 pointer-events-none">
</div>
</div>
<div class="bg-zinc-100 rounded-3xl overflow-hidden relative group">
<a href="#" class="absolute h-full w-full"> </a>
<div class="absolute left-0 right-0 bottom-10 text-center space-y-1 md:space-y-2 text-white pointer-events-none z-10">
<h3 class="text-lg tracking-tight font-medium">Night Arcade</h3>
<p class="text-3xl md:text-4xl tracking-tight font-semibold max-w-72 md:max-w-md mx-auto">Enter the Electric Playground</p>
</div>
<img src="./images/img-nightarcade.jpg" alt="Car" class="h-[400px] md:h-[600px] w-full object-cover group-hover:scale-105 duration-500 pointer-events-none">
</div>
</div>
</div>
</section>
</main>
<footer class="px-4">
<div class="flex justify-center py-32">
<img src="./images/footer-logo.png" alt="Footer logo" class="h-[200px] md:h-[300px] xl:h-[500px] object-cover">
</div>
<div class="border-t max-w-6xl mx-auto py-6 flex flex-col md:flex-row gap-4 md:gap-0 md:justify-between">
<div class="space-x-3">
<a href="#" class="inline-block">
<svg class="fill-zinc-600 h-7 xl:h-6" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" height="100" viewBox="0 0 30 30">
<path d="M24,4H6C4.895,4,4,4.895,4,6v18c0,1.105,0.895,2,2,2h10v-9h-3v-3h3v-1.611C16,9.339,17.486,8,20.021,8 c1.214,0,1.856,0.09,2.16,0.131V11h-1.729C19.376,11,19,11.568,19,12.718V14h3.154l-0.428,3H19v9h5c1.105,0,2-0.895,2-2V6 C26,4.895,25.104,4,24,4z"></path>
</svg>
</a>
<a href="#" class="inline-block">
<svg class="fill-zinc-600 h-7 xl:h-6" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" height="100" viewBox="0 0 30 30">
<path d="M28,6.937c-0.957,0.425-1.985,0.711-3.064,0.84c1.102-0.66,1.947-1.705,2.345-2.951c-1.03,0.611-2.172,1.055-3.388,1.295 c-0.973-1.037-2.359-1.685-3.893-1.685c-2.946,0-5.334,2.389-5.334,5.334c0,0.418,0.048,0.826,0.138,1.215 c-4.433-0.222-8.363-2.346-10.995-5.574C3.351,6.199,3.088,7.115,3.088,8.094c0,1.85,0.941,3.483,2.372,4.439 c-0.874-0.028-1.697-0.268-2.416-0.667c0,0.023,0,0.044,0,0.067c0,2.585,1.838,4.741,4.279,5.23 c-0.447,0.122-0.919,0.187-1.406,0.187c-0.343,0-0.678-0.034-1.003-0.095c0.679,2.119,2.649,3.662,4.983,3.705 c-1.825,1.431-4.125,2.284-6.625,2.284c-0.43,0-0.855-0.025-1.273-0.075c2.361,1.513,5.164,2.396,8.177,2.396 c9.812,0,15.176-8.128,15.176-15.177c0-0.231-0.005-0.461-0.015-0.69C26.38,8.945,27.285,8.006,28,6.937z"></path>
</svg>
</a>
<a href="#" class="inline-block">
<svg class="fill-zinc-600 h-7 xl:h-6" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" height="100" viewBox="0 0 30 30">
<path d="M15,3C8.373,3,3,8.373,3,15c0,5.084,3.163,9.426,7.627,11.174c-0.105-0.949-0.2-2.406,0.042-3.442 c0.218-0.936,1.407-5.965,1.407-5.965s-0.359-0.719-0.359-1.781c0-1.669,0.967-2.914,2.171-2.914c1.024,0,1.518,0.769,1.518,1.69 c0,1.03-0.655,2.569-0.994,3.995c-0.283,1.195,0.599,2.169,1.777,2.169c2.133,0,3.772-2.249,3.772-5.495 c0-2.873-2.064-4.882-5.012-4.882c-3.414,0-5.418,2.561-5.418,5.208c0,1.031,0.397,2.137,0.893,2.739 c0.098,0.119,0.112,0.223,0.083,0.344c-0.091,0.379-0.293,1.194-0.333,1.361c-0.052,0.22-0.174,0.266-0.401,0.16 c-1.499-0.698-2.436-2.889-2.436-4.649c0-3.785,2.75-7.262,7.929-7.262c4.163,0,7.398,2.966,7.398,6.931 c0,4.136-2.608,7.464-6.227,7.464c-1.216,0-2.359-0.632-2.75-1.378c0,0-0.602,2.291-0.748,2.853 c-0.271,1.042-1.002,2.349-1.492,3.146C12.57,26.812,13.763,27,15,27c6.627,0,12-5.373,12-12S21.627,3,15,3z"></path>
</svg>
</a>
<a href="#" class="inline-block">
<svg class="fill-zinc-600 h-7 xl:h-6" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" height="100" viewBox="0 0 24 24">
<path d="M 8 3 C 5.243 3 3 5.243 3 8 L 3 16 C 3 18.757 5.243 21 8 21 L 16 21 C 18.757 21 21 18.757 21 16 L 21 8 C 21 5.243 18.757 3 16 3 L 8 3 z M 8 5 L 16 5 C 17.654 5 19 6.346 19 8 L 19 16 C 19 17.654 17.654 19 16 19 L 8 19 C 6.346 19 5 17.654 5 16 L 5 8 C 5 6.346 6.346 5 8 5 z M 17 6 A 1 1 0 0 0 16 7 A 1 1 0 0 0 17 8 A 1 1 0 0 0 18 7 A 1 1 0 0 0 17 6 z M 12 7 C 9.243 7 7 9.243 7 12 C 7 14.757 9.243 17 12 17 C 14.757 17 17 14.757 17 12 C 17 9.243 14.757 7 12 7 z M 12 9 C 13.654 9 15 10.346 15 12 C 15 13.654 13.654 15 12 15 C 10.346 15 9 13.654 9 12 C 9 10.346 10.346 9 12 9 z"></path>
</svg>
</a>
</div>
<div>
<p class="text-zinc-600 text-[14px]">© 2024 Loop Studios. All Rights Reserved</p>
</div>
</div>
</footer>
</body>
</html>