-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (125 loc) · 4.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Duo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="cursor"></div>
<div id="nav">
<img src="images/duostudio_logo.jpeg" alt="" srcset="">
<div id="navbar2">
<h4>Home</h4>
<h4>Work</h4>
<h4>Studio</h4>
<h4>Contact</h4>
</div>
<div id="navbar3">
<div id="circle">
</div>
</div>
</div>
<div id="main">
<div class="page1">
<h1>Digitally crafted</h1>
<h2>brand experiences</h2>
<video autoplay muted loop src="https://static.videezy.com/system/resources/previews/000/050/697/original/383A0012-20191222_delivery_concept.mp4"></video>
</div>
<div id="page2">
<h1>We are DUO Studio,</h1>
<div id="page2-container">
<div id="page2-left">
<h2>A CREATIVE
COLLECTIVE
MADE TO UNLOCK
YOUR BRAND'S
POTENTIAL
</h2>
</div>
<div id="page2-right">
<P>We weave together bold strategy and creative execution to produce thought-provoking digital experiences. We take a highly personalized approach to delivering brand, web design and content marketing solutions. Born in the DC area- now serving client worldwide.</P>
<button>About Us</button>
</div>
</div>
</div>
<div id="page3">
<h1>Selected Works</h1>
<div id="page3-1">
<img src="images/download.jpeg" alt="">
<video autoplay loop muted src="videos/mixkit-people-dancing-at-a-night-club-4344-medium.mp4"></video>
</div>
<div id="page3-1">
<img src="images/download.jpeg" alt="">
<video autoplay loop muted src="videos/mixkit-people-dancing-at-a-night-club-4344-medium.mp4"></video>
</div>
<div id="page3-2">
<h1>view all projects</h1>
<div id="circle2">
<h4>discover</h4>
</div>
</div>
</div>
<div id="page4">
<div class="elem">
<img src="images/strategy1.jpg" alt="">
<div id="text-div">
<h1>Strategy</h1>
<h1>Strategy</h1>
</div>
<img src="images/strategy2.jpg" alt="">
</div>
<div class="elem">
<img src="images/iden1.jpg" alt="">
<div id="text-div">
<h1>Identity</h1>
<h1>Identity</h1>
</div>
<img src="images/iden2.jpg" alt="">
</div>
<div class="elem">
<img src="images/exp1.jpg" alt="">
<div id="text-div">
<h1>Experience</h1>
<h1>Experience</h1>
</div>
<img src="images/exp2.jpg" alt="">
</div>
</div>
<div id="page5">
<h2>mentions clients</h2>
<div id="box" data-image="images/img1.avif">
<h3>Verizon</h3>
<h4>2023</h4>
</div>
<div id="box" data-image="images/img2.avif">
<h3>Verizon</h3>
<h4>2023</h4>
</div>
<div id="box" data-image="images/img3.avif">
<h3>Verizon</h3>
<h4>2023</h4>
</div>
<div id="box" data-image="images/img4.avif">
<h3>Verizon</h3>
<h4>2023</h4>
</div>
</div>
<footer>
<div id="last">
<h1>Start a project</h1>
<div id="circle3">
<h2>GET IN TOUCH</h2>
</div>
</div>
<h3>Create an experience that's as remarkableas your business.</h3>
</footer>
</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.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>