Skip to content

Commit

Permalink
Revert "Antara"
Browse files Browse the repository at this point in the history
  • Loading branch information
@RazorClient
RazorClient authored Dec 27, 2023
1 parent 827fdc3 commit c304e05
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 356 deletions.
97 changes: 19 additions & 78 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,88 +15,29 @@
<script src="./main.js"></script>
<title>Rebase <01></title>
</head>
<body class="bg-[#f4e1b9] w-[80%] lg:w-[70%] m-auto">
<div class="flex justify-center w-full">
<!-- border-solid border-2 border-black -->
<div class="2xl:w-44 sm:w-24 md:w-32 xl:w-32">
<img class="shrink-0" src="/public/logo.webp" alt="logo" />
</div>

<body class="bg-[#F4E1B9] w-[80%] lg:w-[70%] m-auto">
<section class="h-screen w-full border-2 border-black grid place-items-center">LANDING</section>
<section class="h-screen w-full border-2 border-black grid place-items-center">ABOUT</section>
<section class="h-screen w-full border-2 border-black grid place-items-center">TIMELINE</section>
<section class="h-screen w-full border-2 border-black grid place-items-center"
<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="flex justify-center p-2">
<nav class="relative after:absolute after:top-[10%] after:left-[-1%] after:right-[1%] after:bottom-[0%] shrink-0 ">
<ul class="flex 2xl:gap-12 xl:gap-12 lg:gap-4 gap-4 2xl:text-lg xl:text-md lg:text-sm md:text-xs sm:text-[0.6rem] font-bold 2xl:py-6 md:py-4 sm:py-3 2xl:px-8 md:px-6 sm:px-4 xl:px-8 bg-[#de533c]">
<li class="z-20" ><a href="#">ABOUT</a></li>
<li class="z-20" ><a href="#">SCHEDULE</a></li>
<li class="z-20" ><a href="#">TRACKS</a></li>
<li class="z-20" ><a href="#">PRIZES</a></li>
<li class="z-20" ><a href="#">SPONSORS</a></li>
<li class="z-20" ><a href="#">FAQS</a></li>
</ul>
</nav>
</div>

<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 class="h-screen w-full"></section>

<!-- About section begins here -->
<div id="about">
Expand Down
244 changes: 1 addition & 243 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 ---------------------------------------------- */
35 changes: 0 additions & 35 deletions tracks.js
View file

This file was deleted.

0 comments on commit c304e05

Please sign in to comment.