-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (152 loc) · 5.52 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Madonna</title>
</head>
<body>
<!-- header -->
<nav>
<div class="navbar">
<div class="nav-container nav-container">
<input class="checkbox" type="checkbox" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<div class="logo">
<h1>Madonna</h1>
</div>
<div class="menu-items">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Songs</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Contact</a></li>
</div>
</div>
</div>
</nav>
<!-- end of header -->
<!-- Main container -->
<main class="container-fluid">
<h1 class="h1-main">SONGS</h1>
<section class="section-songs">
<div class="item item1">
<img src="./Media/images/110820221660234770.jpeg" alt="#" />
<h3>Name of Song</h3>
<a href="./Media/media/La Isla Bonita - MADONNA.mp3">Download</a>
</div>
<div class="item item2">
<img src="./Media/images/110820221660234770.jpeg" alt="#" />
<h3>Name of Song</h3>
<a href="./Media/media/La Isla Bonita - MADONNA.mp3">Download</a>
</div>
<div class="item item3">
<img src="./Media/images/110820221660234770.jpeg" alt="#" />
<h3>Name of Song</h3>
<a href="./Media/media/La Isla Bonita - MADONNA.mp3">Download</a>
</div>
<div class="item item4">
<img src="./Media/images/110820221660234770.jpeg" alt="#" />
<h3>Name of Song</h3>
<a href="./Media/media/La Isla Bonita - MADONNA.mp3">Download</a>
</div>
<div class="item item5">
<img src="./Media/images/110820221660234770.jpeg" alt="#" />
<h3>Name of Song</h3>
<a href="./Media/media/La Isla Bonita - MADONNA.mp3">Download</a>
</div>
<div class="item item6">
<img src="./Media/images/110820221660234770.jpeg" alt="#" />
<h3>Name of Song</h3>
<a href="./Media/media/La Isla Bonita - MADONNA.mp3">Download</a>
</div>
<div class="item item7">
<img src="./Media/images/110820221660234770.jpeg" alt="#" />
<h3>Name of Song</h3>
<a href="./Media/media/La Isla Bonita - MADONNA.mp3">Download</a>
</div>
<div class="item item8">
<img src="./Media/images/110820221660234770.jpeg" alt="#" />
<h3>Name of Song</h3>
<a href="./Media/media/La Isla Bonita - MADONNA.mp3">Download</a>
</div>
<div class="item item9">
<img src="./Media/images/110820221660234770.jpeg" alt="#" />
<h3>Name of Song</h3>
<a href="./Media/media/La Isla Bonita - MADONNA.mp3">Download</a>
</div>
<div class="item item10">
<img src="./Media/images/110820221660234770.jpeg" alt="#" />
<h3>Name of Song</h3>
<a href="./Media/media/La Isla Bonita - MADONNA.mp3">Download</a>
</div>
</section>
<section id="video-section" class="section-video">
<h1>Videos</h1>
<div class="video-item">
<div class="videos-grid-video">
<h5 id="videos-grid">1. video one</h5>
<iframe
width="100%"
height="100%"
src="./Media/media/madonna.mp4"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
></iframe>
</div>
<div class="videos-grid-video">
<h5 id="videos-grid">2. Video two</h5>
<iframe
width="100%"
height="100%"
src="./Media/media/madonna.mp4"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
></iframe>
</div>
<div class="videos-grid-video">
<h5 id="videos-grid">3. video three</h5>
<iframe
width="100%"
height="100%"
src="./Media/media/madonna.mp4"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
></iframe>
</div>
<div class="videos-grid-video">
<h5 id="videos-grid">4. video four</h5>
<iframe
width="100%"
height="100%"
src="./Media/media/madonna.mp4"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
></iframe>
</div>
</div>
</section>
</main>
<!-- End of Main container -->
<!-- this is Footer section -->
<footer class="page-footer">
<span class="span-footer">Madonna</span>
Website
</footer>
<!--End of Footer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<script src="./script.js"></script>
</body>
</html>