Skip to content

Commit

Permalink
Merge pull request #17 from Antara-Paul04/Antara
Browse files Browse the repository at this point in the history 
feat: Added Tracks
  • Loading branch information
@RazorClient
RazorClient authored Dec 27, 2023
2 parents 16b32f4 + f5692a3 commit 14b8659
Show file tree
Hide file tree
Showing 3 changed files with 348 additions and 2 deletions.
76 changes: 75 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,81 @@ <h1 class="rebase-head text-[#E82338]">&lt;01&gt;</h1>
<section
class="h-screen w-full border-2 border-black grid place-items-center"
>
TRACKS
<div class="header">
<div>
<h1 class='hero_heading'>TRACKS</h1>
</div>
<div>
<h3 class="page_no">03.</h3>
</div>
<script src="tracks.js"></script>

</div>

<div class="windows">
<div class='info-window'>
<svg width="577" height="639" viewBox="0 0 577 639" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="548" y="46" width="19" height="585" stroke="black" stroke-width="2"/>
<path d="M2.5 2.5H574.5V636.5H2.5V2.5Z" stroke="black" stroke-width="5"/>
<path d="M9 46H548V631H9V46Z" fill="#193248" stroke="black" stroke-width="2"/>
<path d="M8 7H568V41H8V7Z" fill="black"/>
<path d="M555 310.5H562V307.5H555V310.5ZM555 315.5H562V312.5H555V315.5ZM555 321H562V318H555V321ZM546.5 246.5H569.5V368.5H546.5V246.5Z" fill="#F4E1B9" stroke="black" stroke-width="3"/>
<path d="M504 32H525.5M541.5 16.5L559 32M559 16.5L541.5 32M498 11H530.5V37.5H498V11ZM536 11H564.5V37.5H536V11Z" stroke="#F4E1B9" stroke-width="2"/>
<path d="M28.75 30.75V17.25H24.25V15H37.75V17.25H33.25V30.75H28.75ZM46.75 21.75H49V24H46.75V30.75H42.25V19.5H46.75V21.75ZM55.75 19.5V21.75H49V19.5H55.75ZM60.25 30.75V28.5H58V26.25H60.25V24H69.25V21.75H60.25V19.5H71.5V21.75H73.75V30.75H60.25ZM62.5 28.5H69.25V26.25H62.5V28.5ZM78.25 30.75V28.5H76V21.75H78.25V19.5H91.75V21.75H80.5V28.5H91.75V30.75H78.25ZM94 30.75V15H98.5V24H103V21.75H105.25V19.5H109.75V21.75H107.5V24H105.25V26.25H107.5V28.5H109.75V30.75H105.25V28.5H103V26.25H98.5V30.75H94ZM112 30.75V28.5H123.25V26.25H114.25V24H112V21.75H114.25V19.5H125.5V21.75H116.5V24H125.5V26.25H127.75V28.5H125.5V30.75H112ZM134.5 30.75V26.25H139V30.75H134.5ZM154.75 30.75V21.75H150.25V19.5H154.75V15H159.25V19.5H163.75V21.75H159.25V30.75H154.75ZM166 30.75V28.5H168.25V26.25H170.5V24H168.25V21.75H166V19.5H170.5V21.75H172.75V24H175V21.75H177.25V19.5H181.75V21.75H179.5V24H177.25V26.25H179.5V28.5H181.75V30.75H177.25V28.5H175V26.25H172.75V28.5H170.5V30.75H166ZM190.75 30.75V21.75H186.25V19.5H190.75V15H195.25V19.5H199.75V21.75H195.25V30.75H190.75Z" fill="#F4E1B9"/>
</svg>
<div class="body-text">
<h5>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.</h5>
</div>
</div>
<div class='tracks-window'>
<svg width="451" height="569" viewBox="0 0 451 569" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.5 2.5H448.5V566.5H2.5V2.5Z" fill="#F4E1B9" stroke="black" stroke-width="5"/>
<path d="M422 44H441V560.5H422V44Z" fill="#F4E1B9" stroke="black" stroke-width="2"/>
<path d="M9 44H422V560.5H9V44Z" fill="#193248" stroke="black" stroke-width="2"/>
<rect x="9" y="7" width="434" height="34" fill="black"/>
<path d="M438.5 11H410V37.5H438.5V11Z" stroke="#F4E1B9" stroke-width="2"/>
<path d="M422.452 26.9922V26.7301C422.452 26.0057 422.511 25.4283 422.631 24.9979C422.754 24.5675 422.933 24.2223 423.168 23.9624C423.402 23.6982 423.688 23.4574 424.024 23.2401C424.293 23.0696 424.531 22.897 424.74 22.7223C424.953 22.5433 425.121 22.3516 425.245 22.147C425.369 21.9425 425.43 21.7102 425.43 21.4503C425.43 21.1989 425.371 20.9773 425.251 20.7855C425.132 20.5937 424.968 20.4467 424.759 20.3445C424.555 20.2379 424.327 20.1847 424.075 20.1847C423.824 20.1847 423.587 20.2422 423.366 20.3572C423.148 20.4723 422.969 20.6364 422.829 20.8494C422.692 21.0582 422.622 21.3118 422.618 21.6101H419.678C419.69 20.7152 419.897 19.9822 420.298 19.4112C420.702 18.8402 421.237 18.4183 421.902 18.1456C422.567 17.8686 423.3 17.7301 424.101 17.7301C424.979 17.7301 425.759 17.8665 426.44 18.1392C427.126 18.4119 427.665 18.8146 428.058 19.3473C428.45 19.88 428.646 20.532 428.646 21.3033C428.646 21.8104 428.56 22.2578 428.39 22.6456C428.219 23.0334 427.981 23.3764 427.674 23.6747C427.371 23.9687 427.016 24.2372 426.607 24.4801C426.287 24.6676 426.021 24.8636 425.808 25.0682C425.599 25.2727 425.441 25.5071 425.335 25.7713C425.228 26.0312 425.175 26.3509 425.175 26.7301V26.9922H422.452ZM423.864 31.1854C423.404 31.1854 423.01 31.0234 422.682 30.6996C422.358 30.3757 422.198 29.9837 422.202 29.5234C422.198 29.0717 422.358 28.6861 422.682 28.3665C423.01 28.0426 423.404 27.8807 423.864 27.8807C424.303 27.8807 424.689 28.0426 425.021 28.3665C425.354 28.6861 425.522 29.0717 425.526 29.5234C425.522 29.8303 425.441 30.1094 425.283 30.3608C425.13 30.6122 424.928 30.8125 424.676 30.9616C424.429 31.1108 424.158 31.1854 423.864 31.1854Z" fill="#F4E1B9"/>
</svg>

<div class="track-options">
<div class="track-rectangles">
<div class='track-rectangle1'>
<svg viewBox="0 0 415 118" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="413" height="116" fill="#48727E" stroke="black" stroke-width="2"/>
</svg>
<div id="track-txt" class="track1">
<h5>TRACK 1</h5>
</div>
<button id="drop-down" class="button1">
<h5>></h5>
</button>
</div>
<div class='track-rectangle2'>
<svg viewBox="0 0 415 118" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="413" height="116" fill="#48727E" stroke="black" stroke-width="2"/>
</svg>
<div id="track-txt" class="track2">
<h5>TRACK 2</h5>
</div>
<button id="drop-down" class="button2">
<h5>></h5>
</button>
</div>
<div class='track-rectangle3'>
<svg viewBox="0 0 415 118" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="413" height="116" fill="#48727E" stroke="black" stroke-width="2"/>
</svg>
<div id="track-txt" class="track3">
<h5>TRACK 3</h5>
</div>
<button id="drop-down" class="button3">
<h5>></h5>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="h-screen w-full border-2 border-black grid place-items-center">
<div class="stack">
Expand Down
36 changes: 36 additions & 0 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -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 = "<h5>Body text for Track 1</h5>";
break;
case "track2":
bodyText.innerHTML = "<h5>Body text for Track 2</h5>";
break;
case "track3":
bodyText.innerHTML = "<h5>Body text for Track 3</h5>";
break;
default:
bodyText.innerHTML = "<h5>Lorem ipsum dolor sit amet</h5>";
}
}

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");
});
});
238 changes: 237 additions & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -483,4 +718,5 @@ img {
top: -4px;
}
}
/* ---------------------------------------- ABOUT SECTION ENDS HERE --------------------------------------------- */
/* ---------------------------------------- ABOUT SECTION ENDS HERE --------------------------------------------- */

0 comments on commit 14b8659

Please sign in to comment.