-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
238 lines (205 loc) · 11.4 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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ableton Web Clone | Frontend Practice</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="logo.png">
<script src="App.js" defer></script>
</head>
<body>
<header class="header">
<nav class="firstnav">
<ul class="nav1-list1">
<img class="header-logo" src="logo.png" alt="logo.png" width="70px">
<li class="smlscrn"><a href="#">Live</a></li>
<li class="smlscrn"><a href="#">Push</a></li>
<li class="smlscrn"><a href="#">Link</a></li>
<li class="smlscrn"><a href="#">Shop</a></li>
<li class="smlscrn"><a href="#">Packs</a></li>
<li class="smlscrn"><a href="#">Help</a></li>
<li class="smlscrn"><a href="#">More <span class="plus">+</span></a></li>
<button id="more-dropdown">More </button>
</ul>
<div class="dropdown">
<ul>
<div class="drop-header">
<img class="header-logo" src="logo-white.png" alt="logo.png" width="70px">
<button class="dropdown-up">More </button>
</div>
<li><a href="#">Live</a></li>
<li><a href="#">Push</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Packs</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Try Live for free</a></li>
</ul>
</div>
<ul class="nav1-list2">
<li><a href="#"><span class="bluetxt">Try Live for free</span></a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Log out</a></li>
</ul>
</nav>
<nav class="secondnav">
<ul class="nav2-list1">
<li><a href="#"><span class="pinktxt">About</span></a></li>
<li><a href="#">Jobs</a></li>
</ul>
</nav>
</header>
<main>
<section class="section1">
<div class="sec1-img1">
<img class="img1" src="img1.PNG" alt="img1" width="500px">
<h1 class="title">Ableton</h1>
</div>
</section>
<section class="section2 flex-center">
<div class="txt-container">
<p class="boldtxt">We make <span class="bluetxt">Live</span>, <span class="bluetxt">Push</span> and <span class="bluetxt">Link</span> ━ unique software and hardware for music creation and performance. With these products, our community of users creates amazing things.</p>
<p class="subtxt">Ableton was founded 1999 and released the first version of Live in 2001. Our products are used by a community of dedicated musicians, sound designer, and artist from across the world.</p>
</div>
</section>
<section class="section3 flex-center">
<div class="img-container-sec3">
<img class="img2" src="img2.PNG" alt="" width="300px">
<img class="img3" src="img3.PNG" alt="" width="250px">
<div class="yellow"></div>
</div>
</section>
<section class="section4 flex-center">
<div class="txt-container">
<p class="boldtxt">Making music isn’t easy. It takes time, effort, and learning. But when you’re in the flow, it’s incredibly rewarding.</p>
<p class="subtxt">We feel the same way about making Ableton products. The driving force behind Ableton is our passion for what we make, and the people we make it for.</p>
</div>
</section>
<section class="section5 flex-center">
<div class="vid-container-sec5">
<img src="vid1.webp" alt="">
<p class="subtxt">Why Ableton - Juanpe Bolivar</p>
</div>
</section>
<section class="section6 flex-center">
<div class="txt-container">
<p class="boldtxt">We are more than 350 people from 30 different countries divided between our headquarters in Berlin and our offices in Los Angeles and Tokyo.</p>
<p class="subtxt">Most of us are active musicians, producers, and DJs, and many of us use Live and Push every day. We come from a wide range of cultural and professional backgrounds. Some of us have PhDs, some are self-taught, and most of us are somewhere in between. What connects us is the shared belief that each of us has the skills and knowledge to contribute to something big: helping to shape the future of music culture.</p>
</div>
</section>
<section class="section7">
<div class="img-container-sec7">
<div class="firstimg">
<img src="img4.PNG" alt="" width="400px">
<img src="img5.PNG" alt="" width="400px">
</div>
<img class="secondimg" src="img6.PNG" alt="" width="500px">
</div>
</section>
<section class="section8 flex-center">
<div class="txt-container">
<p class="boldtxt">We believe it takes focus to create truly outstanding instruments. We only work on a few products and we strive to make them great.</p>
<p class="subtxt">Rather than having a one-size-fits-all process, we try to give our people what they need to work their magic and grow. We’ve learned that achieving the best results comes from building teams that are richly diverse, and thus able to explore problems from a wider set of perspectives. We don’t always agree with each other, but opinion and debate are valued and openly encouraged.</p>
</div>
</section>
<section class="section9 flex-center">
<div class="vid-container-sec9">
<img src="img7.PNG" alt="">
</div>
</section>
<section class="section10 flex-center">
<div class="txt-container">
<p class="boldtxt">We’re passionate about what we do, but we’re equally passionate about improving who we are.</p>
<p class="subtxt">We work hard to foster an environment where people can grow both personally and professionally, and we strive to create a wealth of opportunities to learn from and with each other.</p>
<br>
<p class="subtxt">Alongside an internal training program, employees are actively supported in acquiring new knowledge and skills, and coached on applying these in their daily work. In addition, staff-organized development and music salons are a chance to discuss new technologies, production techniques and best practices.</p>
</div>
</section>
<section class="section11 flex-center">
<div class="violet">
<img src="img8.PNG" alt="" width="200px">
<img src="img9.PNG" alt="" width="400px">
</div>
</section>
<section class="section12 flex-center">
<div class="txt-container">
<p class="boldtxt">We want our employees to love it here. Since we’re looking for exceptional talent from around the world, we will do everything we can to make your transition as easy as possible.</p>
<p class="subtxt">If you're joining us in Berlin, we'll help with relocation and paperwork. We’ll even provide you with free German or English lessons. Plus, working in Germany means you can expect comprehensive health insurance for you and your family, as well as generous maternity and paternity leave. Office hours are flexible, but it’s not all work; we have several company and team outings throughout the year as well as a variety of fun, informal small-group activities.</p>
</div>
</section>
<div class="section13 flex-center">
<div class="sec13-container">
<img class="img10" src="img10.PNG" alt="">
<div class="grid-txt-con">
<p class="boldtxt sec13txt">We’re really proud of the work we’ve done so far. But there’s so much more to come. If you’d like to be a part of it, please join us.
<br><br>
<span class="bluetxt sec13txt">See latest jobs ></span>
</p>
</div>
</div>
</div>
</main>
<footer>
<h1 class>Ableton</h1>
<div class="footer-container-grid1">
<div class="con1">
<p class="subtxtf">Register Live or Push ></p>
<p class="subtxtf">About Ableton ></p>
<p class="subtxtf">Jobs ></p>
<div class="social">
<img src="fb.PNG" alt="">
<img src="twitter.PNG" alt="">
<img src="yt.PNG" alt="">
<img src="insta.PNG" alt="">
</div>
</div>
<div class="con2">
<p class="boldtxtf">Education</p>
<br>
<p class="subtxtf">Offers for students ></p>
<p class="subtxtf">Ableton for the Classroom ></p>
<p class="subtxtf">Ableton for Colleges and Universities ></p>
</div>
<div class="con3">
<p class="boldtxtf">Sign up to our newsletter</p>
<p class="subtxtf">Enter your email address to stay up to date with the latest offers, tutorials, downloads, surveys and more.</p>
<div class="input">
<input id="email" type="email" placeholder="Email Address">
<button id="btn">Sign up</button>
</div>
</div>
</div>
<div class="footer-container-grid2">
<div class="con1-2">
<p class="boldtxtf">Community</p>
<br>
<p class="subtxtf">Find Ableton User Groups ></p>
<p class="subtxtf">Find Certified Training ></p>
<p class="subtxtf">Become a Certified Trainer ></p>
</div>
<div class="con2-2">
<p class="boldtxtf">Language and Location</p>
<div class="options">
<div class="opt1">English </div>
<div class="opt2">Philippines </div>
</div>
</div>
</div>
<div class="footer-container-grid3">
<div class="txtf">
<p class="subtxtf">Contact Us</p>
<p class="subtxtf">Press Resources</p>
<p class="subtxtf">Legal Info</p>
<p class="subtxtf">Privacy</p>
<p class="subtxtf">Cookie</p>
<p class="subtxtf">Imprint</p>
</div>
<div class="logof">
<img src="logo.png" alt="" width="50px">
<p class="subtxtf">Made in Berlin</p>
</div>
</div>
</footer>
</body>
</html>