-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (127 loc) · 5.74 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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page | SoundFi</title>
<!-- CUSTOM CSS -->
<link rel="stylesheet" href="style.css">
<!-- BOOTSTRAP ICON -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<body>
<!-- NAVIGATION BAR -->
<header>
<nav class="nav-bar">
<img src="../images/Logo.svg" alt="soundFi logo" id="logo">
<ul>
<li><a href="#" class="nav-links">Discover</a></li>
<li><a href="#" class="nav-links">About Us</a></li>
<li><a href="#" class="nav-links">Podacasts</a></li>
<li><a href="#" class="nav-links">Audiobooks</a></li>
<li><a href="#" class="nav-links">Listen To Go</a></li>
<li><a href="#" class="nav-links">Contact Us</a></li>
</ul>
<a href="./Log in/login.html">Log In</a>
</nav>
<section class="hero">
<h1>Welcome to a New Way to Listen</h1>
</section>
</header>
<!-- MAIN CONTENT -->
<main>
<!-- SECTION ONE -->
<section class="dive-into-listening">
<div class="text-content">
<h2>Dive into Listening...</h2>
<p>Try SoundFi for Free for 30 days.</p>
<a href="./signUp/sign-up.html">Sign up Today</a>
<p>$ 9.99 a month after 30 days. Cancel anytime.</p>
</div>
<div class="img-content">
<img src="./images/woman-listening-on-head-phones.png" alt="young lady listening to music on headphones and smiling">
</div>
</section>
<!-- SECTION TWO -->
<section class="trending-now">
<h2>Trending Now</h2>
<div class="rows">
<div class="individual-row">
<figure class="image-box">
<a href="./Podcasts/podcasts.html"><img src="https://cdn.ocs.yale.edu/wp-content/uploads/sites/77/2021/08/Neon-podcast-logo.jpeg" alt="Neon podcast log"></a>
<p>Podcast</p>
</figure>
<figure class="image-box">
<a href="./romanceCollection/romance.html"><img src="https://images.healthshots.com/healthshots/en/uploads/2022/08/28211655/romance-1600x900.jpg" alt="couple making a love shape with their hands">
<p>Romance</p>
</figure>
<figure class="image-box">
<img src="./images/Fantasy_World.webp" alt="Fantasy world">
<p>Fantasy</p>
</figure>
<figure class="image-box">
<a href="#"><img src="https://cdn.mos.cms.futurecdn.net/7nJyJ3dQxKjmiXfZ4tEyLf.jpg" alt="man looking over at a futuristic town"></a>
<p>Sci-Fi</p>
</figure>
</div>
<div class="individual-row">
<figure class="image-box">
<a href="#"><img src="https://dnm.nflximg.net/api/v6/BvVbc2Wxr2w6QuoANoSpJKEIWjQ/AAAAQeEioY_RofVmU4abKR_c5OCAYlViS-0SEv1Qvr-n1VJ6xS-Pu8l0-vej2hI2lWYR91RZnVxQlvnwgBiNc-FytVOyXanEx2POyLrNiCbusBtmVckgztY8ya-LR6wrt8UW7ON732kBpO_GESyWZSlWdsV1xFM.jpg?r=1d5" alt="An eye looking between yellow crime tapes"></a>
<p>True Crime</p>
</figure>
<figure class="image-box">
<img src="https://ichef.bbci.co.uk/images/ic/1920x1080/p076v2z5.jpg" alt="see more">
<p>Click to explore more popular genres...</p>
</figure>
</div>
</div>
</section>
</main>
<footer>
<div class="footerElements">
<div class="follow-us-on">
<p>Follow us on</p>
<div class="social-media-icons">
<a href="#"><div class="facebook"><i class="bi bi-facebook"></i></div></a>
<a href="#"><div class="instagram"><i class="bi bi-instagram"></i></div></a>
<a href="#"><div class="twitter"><i class="bi bi-twitter"></i></div></a>
<a href="#"><div class="linkedin"><i class="bi bi-linkedin"></i></div></a>
</div>
</div>
<div class="trending">
<p>Trending</p>
<div class="genres">
<div class="one-half">
<a href="./romance.html">Romance</a>
<a href="#">Action</a>
</div>
<div class="second-half">
<a href="#">Horror</a>
<a href="#">Fiction</a>
</div>
</div>
</div>
<div class="links">
<p>Links</p>
<ul>
<li><a href="#">Discover</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
<form action="#">
<fieldset>
<input type="email" name="email" placeholder="Enter your email">
<input type="button" value="Subscribe">
</fieldset>
</form>
</div>
<div class="line"></div>
<div class="lower-footer">
<img src="../images/Logo.svg" alt="soundFi logo">
<p>Soundfi @ 2023</p>
</div>
</footer>
</body>
</html>