diff --git a/main.js b/main.js
index e69de29..4b77dc9 100644
--- a/main.js
+++ b/main.js
@@ -0,0 +1,36 @@
+// Tracks js
+document.addEventListener("DOMContentLoaded", function () {
+ const bodyText = document.querySelector(".body-text");
+
+ function updateBodyText(track) {
+ switch (track) {
+ case "track1":
+ bodyText.innerHTML = "
Body text for Track 1
";
+ break;
+ case "track2":
+ bodyText.innerHTML = "Body text for Track 2
";
+ break;
+ case "track3":
+ bodyText.innerHTML = "Body text for Track 3
";
+ break;
+ default:
+ bodyText.innerHTML = "Lorem ipsum dolor sit amet
";
+ }
+ }
+
+ const dropdown1 = document.querySelector(".button1");
+ const dropdown2 = document.querySelector(".button2");
+ const dropdown3 = document.querySelector(".button3");
+
+ dropdown1.addEventListener("click", function () {
+ updateBodyText("track1");
+ });
+
+ dropdown2.addEventListener("click", function () {
+ updateBodyText("track2");
+ });
+
+ dropdown3.addEventListener("click", function () {
+ updateBodyText("track3");
+ });
+});
diff --git a/style.css b/style.css
index 2d4e468..4849355 100644
--- a/style.css
+++ b/style.css
@@ -127,6 +127,241 @@ img {
font-weight: bold;
}
+
+/* Tracks css */
+.hero_heading {
+ position: absolute;
+ color: #E82338;
+ text-shadow: 0.21875rem 0.30625rem 0 #000;
+ font-family: Bangers;
+ font-size: 7rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ letter-spacing: 0.3rem;
+ -webkit-text-stroke: 0.178571rem #000;
+ padding: 2.59375rem 40.625rem 0 4.75rem;
+ margin: 0;
+}
+
+.page_no {
+ position: absolute;
+ color: #E82338;
+ font-family: 'japanese_robotregular';
+}
+
+body {
+ background-color: #F4E1B9;
+}
+
+.tracks-window {
+ position: absolute;
+ padding: 14.6875rem 0rem 0rem 16.9375rem;
+ margin: 0;
+ height: 28.1875rem;
+ z-index: 3;
+}
+
+.tracks-window svg {
+ height: 100%;
+ width: 100%;
+}
+
+.info-window {
+ position: absolute;
+ padding: 4rem 0rem 0rem 38rem;
+ height: 36.0625rem;
+ z-index: 2;
+}
+
+.info-window svg {
+ width: 100%;
+ height: 100%;
+}
+
+.track-rectangle1 {
+ position: relative;
+ height: 5.85rem;
+ top: 0;
+ left: 0;
+ z-index: 4;
+ margin: -26.3rem 0rem 0rem -1rem;
+}
+.track-rectangle2 {
+ position: relative;
+ height: 5.85rem;
+ top: 0;
+ left: 0;
+ z-index: 4;
+ margin: -0.4rem 0rem 0rem -1rem;
+}
+.track-rectangle3 {
+ position: relative;
+ height: 5.85rem;
+ top: 0;
+ left: 0;
+ z-index: 4;
+ margin: -0.2rem 0rem 0rem -1rem;
+}
+
+#drop-down{
+ font-family: 'japanese_robotregular';
+ color: #FFF;
+ position: absolute;
+ letter-spacing: 0.2rem;
+ font-size: 1.2rem;
+ color:#F4E1B9;
+ -webkit-text-stroke: #000;
+ top: 50%;
+ left: 100%;
+ transform: translate(-250%, -50%);
+ z-index: 5;
+ background: none;
+ box-shadow: none;
+ outline: none;
+ border: none;
+}
+
+#track-txt{
+ font-family: 'Press Start 2P';
+ color: #FFF;
+ position: absolute;
+ letter-spacing: 0.2rem;
+ font-size: 1.2rem;
+ top: 50%;
+ left: 25%;
+ transform: translate(-40%, -50%);
+ z-index: 5;
+}
+
+.body-text {
+ position: relative;
+ top: 0;
+ left: 0;
+ width: 383px;
+ height: 393px;
+ color: #FFF;
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ letter-spacing: 1.68px;
+ z-index: 5;
+ margin: -30rem 0rem 0rem 4rem;
+}
+
+/* .image-window{
+ position: absolute;
+ padding: 29rem 0rem 0rem 62rem;
+ z-index: 6;
+} */
+
+body, .hero_heading, .tracks-window, .info-window, .rectangle, .body-text, .image-window {
+ transition: all 0.3s ease;
+}
+@media only screen and (max-width: 1200px) {
+ .hero_heading {
+ font-size: 5rem;
+ -webkit-text-stroke: 0.13rem #000;
+ padding: 2.59375rem 20.625rem 0 4.75rem;
+ }
+ .tracks-window {
+ height: 23.1875rem;
+ padding: 14.6875rem 0rem 0rem 12.9375rem;
+ }
+ .info-window {
+ height: 32.0625rem;
+ padding: 4rem 0rem 0rem 30rem;
+ }
+ /* .image-window{
+ padding: 28rem 0rem 0rem 49rem;
+ } */
+ .track-rectangle1{
+ height: 4.82rem;
+ margin: -21.7rem 0rem 0rem -0.8rem;
+ }
+ .track-rectangle2{
+ height: 4.82rem;
+ margin: -0.6rem 0rem 0rem -0.8rem;
+ }
+ .track-rectangle3{
+ height: 4.82rem;
+ margin: -0.1rem 0rem 0rem -0.8rem;
+ }
+ .body-text {
+ font-size: 21px;
+ width: 300px;
+ margin: -27rem 0rem 0rem 4rem;
+ }
+ #track-txt{
+ font-family: 'Press Start 2P';
+ color: #FFF;
+ position: absolute;
+ letter-spacing: 0.2rem;
+ font-size: 1rem;
+ top: 50%;
+ left: 25%;
+ transform: translate(-40%, -50%);
+ z-index: 5;
+ }
+ #drop-down{
+ font-size: 1rem;
+ }
+}
+
+
+@media only all and (max-width: 768px) {
+ .hero_heading {
+ font-size: 4rem;
+ -webkit-text-stroke: 0.1rem #000;
+ padding: 2.59375rem 20.625rem 0 4.75rem;
+ }
+ .tracks-window {
+ height: 19.1875rem;
+ padding: 20.6875rem 0rem 0rem 5.9375rem;
+ }
+ .info-window {
+ height: 28.0625rem;
+ padding: 5rem 0rem 0rem 20rem;
+ }
+ /* .image-window{
+ padding: 28rem 0rem 0rem 49rem;
+ } */
+ .track-rectangle1{
+ height: 3.98rem;
+ margin: -18.0rem 0rem 0rem -0.7rem;
+ }
+ .track-rectangle2{
+ height: 3.98rem;
+ margin: -0.6rem 0rem 0rem -0.7rem;
+ }
+ .track-rectangle3{
+ height: 3.98rem;
+ margin: -0.4rem 0rem 0rem -0.7rem;
+ }
+ .body-text {
+ font-size: 18px;
+ width: 270px;
+ margin: -23.5rem 0rem 0rem 3.2rem;
+ }
+ #track-txt{
+ font-family: 'Press Start 2P';
+ color: #FFF;
+ position: absolute;
+ letter-spacing: 0.2rem;
+ font-size: 0.7rem;
+ top: 50%;
+ left: 25%;
+ transform: translate(-40%, -50%);
+ z-index: 5;
+ }
+ #drop-down{
+ font-size: 0.7rem;
+ }
+}
+
+
+
/* ---------------------------------------- ABOUT SECTION BEGINS HERE --------------------------------------------- */
#about-text {
font-family: 'Bangers', sans-serif;
@@ -483,4 +718,5 @@ img {
top: -4px;
}
}
-/* ---------------------------------------- ABOUT SECTION ENDS HERE --------------------------------------------- */
\ No newline at end of file
+/* ---------------------------------------- ABOUT SECTION ENDS HERE --------------------------------------------- */
+