-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (150 loc) · 8.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Landing page for the LoveNotes site.">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<title>LoveNotes</title>
<link rel="stylesheet" href="style.css" />
<script src="landing.js"></script>
<link rel="icon" href= "images/music.webp" type="image/x-icon" style="width: 32px; height: 32px;">
</head>
<body>
<!-- Navigation Bar -->
<div id="navbar" class="row navbar">
<div class="navbar_logo" style= "padding-top:20px;">
<p style="margin: 0; height: 60px;"><a href="ratings.php" style="cursor: pointer;" aria-label="Return to top of landing page">
<img src="images/logo.webp" id="logo" alt="lovenotes logo" style="width: 178px; height: 50px;" loading="lazy"/>
</a></p>
</div>
<ul id="navbar_items">
<li><a id="features-btn" href="index.html#features">Features</a></li>
<li><a id="testimonals-btn" href="index.html#testimonials">Testimonials</a></li>
<li><a id="about-btn" href="index.html#about">The Team</a></li>
<li><a id="login-btn" href="login.php">Login</a></li>
</ul>
<button id="more-button" aria-label="Show navigation links" onclick="showNavItems()">
<i id="more-icon" class="fa-solid fa-list" style="color:rgb(233, 175, 204); font-size: 25px;"></i>
</button>
<ul id="navbar_list">
<li><a id="nav_item_list" href="index.html#features">Features</a></li>
<li><a id="nav_item_list" href="index.html#testimonials">Testimonials</a></li>
<li><a id="nav_item_list" href="index.html#about">The Team</a></li>
<li style="margin-bottom: 10px;"><a id="nav_item_list" href="login.php">Login</a></li>
</ul>
</div>
<!-- Home section -->
<div id="home" class="container">
<div class="row home">
<div class="left_text" style="margin-left:50px; width:40%">
<h1 style="font-size:80px; text-align:center; color: rgb(4, 57, 94);";>Share your music tastes with the world</h1>
<p></p>
<div class="sign_in_btns" style="text-align:center;">
<a href="registration.php"><button id="sign_up_btn" style="margin: 5px 0px;">Sign up</button></a>
<a href="login.php"><button id="log_in_btn">Log in</button></a>
</div>
</div>
<div class="timer" style="padding-top: 130px; margin-left: 150px;">
<h1 style="font-size: 40px; color: rgb(4, 57, 94); text-align: center;">Going live in:</h1>
<iframe title="countdown" src="https://free.timeanddate.com/countdown/i91vydl6/n98/cf12/cm0/cu4/ct0/cs0/ca0/co0/cr0/ss0/cac04395b/cpc04395b/pcbdd4e7/tcfff/fs100/szw1000/szh421/iso2023-12-06T00:00:00" allowtransparency="true" frameborder="0" width="340" height="90"></iframe>
</div>
</div>
</div>
<!-- Features section -->
<div class="container" id="features">
<h1 id="header">Features</h1>
<div class="row cards">
<div class="card">
<i class="fa-solid fa-headphones fa-9x" style="color: rgb(4, 57, 94);"></i>
<div class="card-info">
<h2><b>Add Your Favorite Beats</b></h2>
<p>Display your favorite jams on your user profile!</p>
</div>
</div>
<div class="card">
<i class="fa-solid fa-heart fa-9x" style="color: rgb(4, 57, 94);"></i>
<div class="card-info">
<h2><b>Rate Your Tunes</b></h2>
<p>Share your music taste by rating your songs!</p>
</div>
</div>
<div class="card">
<i class="fa-solid fa-magnifying-glass fa-9x" style="color: rgb(4, 57, 94);"></i>
<div class="card-info">
<h2><b>Find New Sounds</b></h2>
<p>Find users with similar music taste!</p>
</div>
</div>
</div>
</div>
<!-- Testimonials Section -->
<div class="container" id="testimonials">
<h1 id="header">Testimonials</h1>
<div class="row testimonals">
<div id="review_external">
<div id="review_internal">
<p id="review_text" style="height:40%">"This site helped me discover the song that would go on to be played at my wedding!"</p>
<p id="review_text" style="height:20%"> - Waverly Smart,<br>Wesleyan '27</p>
<p id="insta_icon"><a name="ref1" href="https://www.instagram.com/waverly_smart/#" target="_blank" aria-label="Visit Waverly's instagram">
<i class="fa-brands fa-instagram fa-3x" style="color: rgb(105, 17, 69);"></i>
</a></p>
</div>
</div>
<div id="review_external">
<div id="review_internal">
<p id="review_text" style="height:40%">"Mr. Worldwide approves."</p>
<p id="review_text" style="height:20%"> - Pitbull,<br>Musician</p>
<p id="insta_icon"><a name="ref2" href="https://www.instagram.com/pitbull/#" target="_blank" aria-label="Visit Pitbull's instagram">
<i class="fa-brands fa-instagram fa-3x" style="color: rgb(105, 17, 69);"></i>
</a></p>
</div>
</div>
<div id="review_external">
<div id="review_internal">
<p id="review_text" style="height:40%">"This website is a national treasure."</p>
<p id="review_text" style="height:20%"> - Joe Biden,<br>POTUS</p>
<p id="insta_icon"><a name="ref3" href="https://www.instagram.com/potus/#" target="_blank" aria-label="Visit POTUS' instagram">
<i class="fa-brands fa-instagram fa-3x" style="color: rgb(105, 17, 69);"></i>
</a></p>
</div>
</div>
</div>
</div>
<!-- About section -->
<div id ="about" class="container">
<h1 id="header">Meet the Team</h1>
<div id="about_us" class="row about_us">
<div id="about_external">
<div id="about_internal">
<img id="creator_pic" src="images/bella.webp" id="logo" alt="bella profile" style="height: 200px; width: 200px;" loading="lazy"/>
<p id="review_text" style="height:15%; color:rgb(105, 17, 69);">Bella Tassone,<br>Wesleyan '24</p>
<p id="description_text">Favorite Genre: Classic Rock<br>Favorite Artist: Eagles<br>Favorite Song: Build Me Up Buttercup</p>
<p id="linkedin_icon"><a name="bella_linkedin" href="https://www.linkedin.com/in/isabella-tassone-2b995725a/" target="_blank" aria-label="Visit Bella's LinkedIn">
<i class="fa-brands fa-linkedin fa-3x" style="color: rgb(4, 59, 98);"></i>
</a></p>
</div>
</div>
<div id="about_external">
<div id="about_internal">
<img id="creator_pic" src="images/nate.webp" id="logo" alt="nate profile" style="height: 200px; width: 200px;" loading="lazy"/>
<p id="review_text" style="height:15%; color:rgb(105, 17, 69);">Nate Levinson,<br>Wesleyan '25</p>
<p id="description_text">Favorite Genre: Rock<br>Favorite Artist: Smashing Pumpkins<br>Favorite Song: There She Goes</p>
<p id="linkedin_icon"><a name="nate_linkedin" href="https://www.linkedin.com/in/nathaniel-levinson-889282252/" target="_blank" aria-label="Visit Nate's LinkedIn">
<i class="fa-brands fa-linkedin fa-3x" style="color: rgb(4, 59, 98);"></i>
</a></p>
</div>
</div>
</div>
</div>
<!-- Disclaimer section -->
<div id="disclaimer" class="container">
<div class="row-disclaimer">
<p>Disclaimer: This site was designed and published as part of the COMP 333 Software Engineering class at Wesleyan University. This is a training exercise.</p>
<img src="images/logo.webp" id="logo" alt="lovenotes logo" style="height: 30px; width: 107px;"/>
</div>
</div>
<script defer src="https://kit.fontawesome.com/289e976bd2.js" crossorigin="anonymous"></script>
</body>