diff --git a/index.html b/index.html
index bf20190..bea47b8 100644
--- a/index.html
+++ b/index.html
@@ -15,88 +15,29 @@
Rebase <01>
+
+
+
+
+
+
-
-
-
-
-
-
-
TRACKS
-
-
-
03.
-
-
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
+
-
-
-
-
-
-
-
TRACK 1
-
-
- >
-
-
-
-
-
-
-
TRACK 2
-
-
- >
-
-
-
-
-
-
-
TRACK 3
-
-
- >
-
-
-
-
-
diff --git a/style.css b/style.css
index b8a4fb1..3f0b20d 100644
--- a/style.css
+++ b/style.css
@@ -109,248 +109,6 @@ img{
align-self: center;
}
-
-html {
- font-size: 16px;
-}
-
-head {
- font-family: 'Bangers', cursive;
-}
-
-.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 PAGE BEGINS HERE ---------------------------------------------- */
#about-text {
font-family: 'Bangers', sans-serif;
@@ -707,4 +465,4 @@ body, .hero_heading, .tracks-window, .info-window, .rectangle, .body-text, .imag
top: -4px;
}
}
-/* ---------------------------------------------- ABOUT PAGE ENDS HERE ---------------------------------------------- */
+/* ---------------------------------------------- ABOUT PAGE ENDS HERE ---------------------------------------------- */
\ No newline at end of file
diff --git a/tracks.js b/tracks.js
deleted file mode 100644
index 5d575d5..0000000
--- a/tracks.js
+++ /dev/null
@@ -1,35 +0,0 @@
-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");
- });
-});
+