-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (160 loc) · 7.72 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
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon"
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBe4OxBUtB1WE8qmuJ23_THJAMu4_1ojXoXA&s"
type="image/x-icon">
<title>DUO</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.css">
</head>
<body>
<div class="cursor" aria-hidden="true"></div>
<nav>
<img src="https://d33wubrfki0l68.cloudfront.net/439bf938233c24af021ffe6d206cd42f546e1143/ff4ed/assets/logo.svg"
alt="DUO Studio Logo">
<div id="nav-part2">
<h4>Home</h4>
<h4>Work</h4>
<h4>Studio</h4>
<h4>Contact</h4>
</div>
<div id="nav-part3">
<div id="circle"></div>
</div>
</nav>
<div id="purple"></div>
<main>
<div id="page-1">
<h1>Digitally crafted,</h1>
<h2>brand experiences.</h2>
<div id="v-container">
<div id="v-title">
<p>UK 25.12.2024</p>
<p>FASHION IS ART AND CREATIVITY</p>
</div>
<video autoplay muted loop playsinline
src="https://stream.mux.com/EZqkKXQXtNKMs007O1rf5lq00K8DWSuBOj0268hysWGMy00/high.mp4"
aria-label="Fashion showcase video">
<p>Your browser doesn't support HTML5 video</p>
</video>
</div>
</div>
<div id="page-2">
<h1>We are DUO Studio,</h1>
<div id="page-2c">
<div class="page-2l">
<h2>A CREATIVE COLLECTIVE MADE TO UNLOCK YOUR BRAND'S POTENTIAL</h2>
</div>
<div class="page-2r">
<p>" We weave together bold strategy, - creative design and digital expertise to deliver
impactful brand experiences. We take a highly personalized approach to delivering branding, web
design, and content marketing solutions. Born in the DC area - now serving clients worldwide. "
</p>
<button type="button" aria-label="Learn more about us">KNOW ABOUT US</button>
</div>
</div>
</div>
<div id="page-3">
<h1>Selected Works</h1>
<div class="page-3-part1">
<div id="img-3">
<img src="https://images.unsplash.com/flagged/photo-1568988039441-11f295d74d89?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3"
alt="MGNY Fashion Project" loading="lazy">
<p><span>MGNY</span> | 2021, Strategy, website, illustration</p>
</div>
<div id="vid-3">
<video autoplay loop muted playsinline
src="https://d33wubrfki0l68.cloudfront.net/a13ea7c2ca2f38134748966280e54af4340ce821/f976d/assets/home/projects_madegood-reduced.mp4"
aria-label="MadeGood Fashion Concert">
<p>Your browser doesn't support HTML5 video</p>
</video>
<p><span>MadeGood</span> Strategy, Fashion Concert</p>
</div>
</div>
<div class="page-3-part2">
<div id="img-3-2">
<img src="https://cdn.pixabay.com/photo/2020/10/23/16/50/woman-5679284_640.jpg"
alt="Irene Kim Portfolio" loading="lazy">
<p><span>Irene Kim</span> American-Korean model, Photo</p>
</div>
<div id="vid-3-2">
<video autoplay loop muted playsinline
src="https://cdn.pixabay.com/video/2021/09/04/87554-601149870_tiny.mp4"
aria-label="WIFW Ramp Show">
<p>Your browser doesn't support HTML5 video</p>
</video>
<p><span>WIFW</span> | The ramp show, 2024</p>
</div>
</div>
</div>
<div id="page-4">
<p>We are DUO Studio, <br>hover to see magic</p>
<div class="elem">
<img src="https://d33wubrfki0l68.cloudfront.net/3401770635e95968e300d88f8b9479ecbc008eeb/be2e5/assets/home/home-experience-1.webp"
alt="Strategy Visual 1" loading="lazy">
<div class="text-div">
<h1>Strategy</h1>
<h1>Strategy</h1>
</div>
<img src="https://d33wubrfki0l68.cloudfront.net/188bb09da2a445d08ac5b4f706711772e50e8a17/e100a/assets/home/home-experience-2.webp"
alt="Strategy Visual 2" loading="lazy">
</div>
<div class="elem active">
<img src="https://images.unsplash.com/photo-1616348490852-d80c545b4f79?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3"
alt="Identity Visual 1" loading="lazy">
<div class="text-div">
<h1>Identity</h1>
<h1>Identity</h1>
</div>
<img src="https://images.unsplash.com/photo-1582533552406-234434284c17?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3"
alt="Identity Visual 2" loading="lazy">
</div>
<div class="elem">
<img src="https://images.unsplash.com/photo-1543728069-a3f97c5a2f32?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3"
alt="Experience Visual 1" loading="lazy">
<div class="text-div">
<h1>Experience</h1>
<h1>Experience</h1>
</div>
<img src="https://images.unsplash.com/photo-1583932387999-dcc7fb40bc40?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3"
alt="Experience Visual 2" loading="lazy">
</div>
</div>
<div id="page-5">
<h1><span>Mentions</span> Clients</h1>
<div class="box"
data-image="https://images.unsplash.com/photo-1529139574466-a303027c1d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60">
<h3>Female Awwwards</h3>
<h4>2024</h4>
</div>
<div class="box"
data-image="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60">
<h3>Fashion Week</h3>
<h4>2023</h4>
</div>
<div class="box"
data-image="https://images.unsplash.com/photo-1492288991661-058aa541ff43?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60">
<h3>Sigma Male</h3>
<h4>2024</h4>
</div>
<div class="box"
data-image="https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60">
<h3>Summer Collection</h3>
<h4>2023</h4>
</div>
<div class="box"
data-image="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60">
<h3>Street Style</h3>
<h4>2024</h4>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" defer></script>
<script src="script.js" defer></script>
</body>
</html>