-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
220 lines (194 loc) · 9.05 KB
/
index.html
File metadata and controls
220 lines (194 loc) · 9.05 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta htpp-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width", initial-scale="1.0">
<title>Music4All</title>
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<!--CSS-->
<link rel="stylesheet" href="css/style.css">
<!--Script-->
<script src="https://kit.fontawesome.com/f612fac055.js" crossorigin="anonymous"></script>
</head>
<body>
<!--navigation bar-->
<header id="header">
<nav class="menu">
<div class="logo-box">
<h1><img src="pictures/Music4All1.png" alt="logo Music4All" class="logo-img"></h1>
<span class="btn-menu"><i class="fa-solid fa-bars"></i></span>
</div>
<div class="list-container">
<ul class="lists">
<li><a href="#find-talend" class="active">Find Talent</a></li>
<li><a href="#" >Find Work</a></li>
<li><a href="#" >Why Upwork</a></li>
<li><a href="#" >About</a></li>
<li><a href="#client" >Client</a></li>
<li><a href="#" >Partner</a></li>
</ul>
</div>
</nav>
<!--image-->
<div class="img-header">
<div class="welcome">
<h1>WELCOME TO MUSIC4ALL</h1>
<hr>
<p>"The songs are just thoughts. For a moment for time. Listening to a song is listening to some thoughts"</p>
<button id="register">REGISTER FOR FREE</button>
</div>
</div>
</header>
<main>
<!--About us-->
<section class="services" id="client">
<div class="info-container">
<h1>Services</h1>
<div class="about__main">
<article class="about__icons">
<img src="pictures/app_account.svg" class="about__icon">
<h3 class="about__title">Musician</h3>
<p class="about__paragraph">“Music can name the unnameable and communicate the unknow”</p>
</article>
<article class="about__icons">
<img src="pictures/article.svg" class="about__icon">
<h3 class="about__title">Contractor</h3>
<p class="about__paragraph"> “Forget the old rules. You can have the best people. Right now. Right here”</p>
</article>
</div>
</div>
</section>
<!--Music distribution-->
<section class="our-projects" id="find-talend">
<div class="deg-background"></div>
<div class="ejeZproject">
<div class="project-title">
<h2>Music distribution: be everywhere you need to be</h2>
<hr>
</div>
<div class="search">
<input type="text" placeholder="Songs, Artists, Podcasts & More">
<div class="btn">
<i class="fa-solid fa-magnifying-glass icon"></i>
</div>
</div>
<div class="project-img">
<article class="about__images">
<img src="pictures/theme1.jpeg" class="about__img">
<h1 class="title">Mix Mojando Asientos-J C...</h1>
<p>JCosio</p>
</article>
<article class="about__images">
<img src="pictures/theme2.jpeg" class="about__img">
<h1 class="title">Shake that</h1>
<p>Eminen ft. Nate Dogg</p>
</article>
<article class="about__images">
<img src="pictures/theme3.jpeg" class="about__img">
<h1 class="title">DJ FADDY-Cásate Conmigo</h1>
<p>FADDYDJ</p>
</article>
<article class="about__images">
<img src="pictures/theme4.jpeg" class="about__img">
<h1 class="title">Back on Saratoga</h1>
<p>Versatil</p>
</article>
<article class="about__images">
<img src="pictures/theme5.jpeg" class="about__img">
<h1 class="title">Rosalía-Depecha Mix</h1>
<p>Phyre Bootleg</p>
</article>
<article class="about__images">
<img src="pictures/theme6.jpeg" class="about__img">
<h1 class="title">Bizarrap Ft Quevedo-Bzrp...</h1>
<p>Music ROLL</p>
</article>
<article class="about__images">
<img src="pictures/theme7.jpeg" class="about__img">
<h1 class="title">Mix Mojando Asientos-J C...</h1>
<p>Dj Luigi 2022</p>
</article>
<article class="about__images">
<img src="pictures/theme8.jpeg" class="about__img">
<h1 class="title">House Love Towa Ft Harol...</h1>
<p>DJ Towa</p>
</article>
<article class="about__images">
<img src="pictures/theme9.jpeg" class="about__img">
<h1 class="title">Mix Loola-Wogi</h1>
<p>Dj Wogi</p>
</article>
<article class="about__images">
<img src="pictures/theme10.jpeg" class="about__img">
<h1 class="title">Manuel Turizo-La Bachata</h1>
<p>Avalos Avalos</p>
</article>
</div>
</div>
</section>
<!--Our Members-->
<!-- Form-->
<section class="form">
<div class="section1">
<h1>Music4All your life</h1>
<p>Nunc at dolor purus. Duis massa turpis,
laoreet nec ligula in, aliquam gravida leo.
Quisque volutpat neque sit amet lacus
consequat, vitae ullamcorper est vulputate.
Nunc tincidunt faucibus tellus, at pulvinar
dolor placerat non. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Vestibulum
at lorem ac nulla egestas auctor ac a lacus.</p>
</div>
<div class="form-signup">
<h2>Music4All</h2>
<input class="controls" type="text" placeholder="Username">
<input class="controls" type="text" placeholder="Year or birth">
<input class="controls" type="email" placeholder="Email">
<input class="controls" type="text" placeholder="Telephone">
<input class="controls-checkbox" type="checkbox" value="" id="invalidCheck" required>I agree to terms and conditions the privacy policy.
<button>SEND</button>
</div>
</section>
<!--Footer-->
<footer>
<div class="footer-container">
<div class="footer-content-container">
<h3 class="website-logo">Music4All</h3>
<span class="footer-info">+51 987 123 421</span>
<span class="footer-info">Music4All@gmail.com</span>
</div>
<div class="footer-menus">
<div class="footer-content-container">
<span class="menu-title">Menu</span>
<a href="#header" class="menu-item-footer">Home</a>
<a href="" class="menu-item-footer">Abut Us</a>
<a href="#client" class="menu-item-footer">Services</a>
</div>
<div class="footer-content-container">
<span class="menu-title">Legal</span>
<a href="" class="menu-item-footer">Privacy Policy</a>
<a href="" class="menu-item-footer">Cookies</a>
<a href="" class="menu-item-footer">Terms & Conditions</a>
</div>
</div>
<div class="footer-content-container">
<span class="menu-title">follow us</span>
<div class="social-container">
<a href="" class="social-links"></a>
<a href="" class="social-links"></a>
<a href="" class="social-links"></a>
</div>
</div>
</div>
<div class="copyright-container">
<span class="copyright">©,2022, Music4All@gmail.com</span>
</div>
</footer>
<!--Script-->
<script src="https://kit.fontawesome.com/f612fac055.js" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>