Skip to content

Commit

Permalink
Merge pull request #10 from GDSC-IIIT-Kalyani/sub
Browse files Browse the repository at this point in the history
Landing Page
  • Loading branch information
RazorClient authored Dec 27, 2023
2 parents 7772e90 + 60fdb4f commit 6ac22be
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 63 deletions.
43 changes: 41 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<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" />
<a href="#"><img class="shrink-0" src="/public/logo.webp" alt="logo" /></a>
</div>

<div class="flex justify-center p-2">
Expand All @@ -34,7 +34,46 @@

</div>

<section class="h-screen w-full"></section>
<section id="home" class="h-screen w-full">
<div class="textpart">
<div class="head-vol flex sm:gap-8 md:gap-8 lg:gap-8 xl:gap-8 2xl:gap-8">

<div class='rebase-head relative text-[#e32735] sm:text-[5rem] md:text-[6rem] lg:text-[7rem] xl:text-[9rem] 2xl:text-[12rem]'>
<h1>Rebase</h1>
<div class='absolute heading -top-6 left-6 text-[#f4e1b9]'>
<h1>Rebase</h1>
</div>
</div>

<div class="block relative">
<div class='hero-vol sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl 2xl:translate-y-24 xl:translate-y-[4.5rem] lg:translate-y-12 md:translate-y-8 sm:translate-y-8'>
<h3 class="">
VOLUME
</h3>
</div>
<div class="z-50 2xl:text-[18rem] xl:text-[14rem] lg:text-[11rem] md:text-[9rem] sm:text-[7rem] heading absolute xl:-left-36 lg:-left-28 md:-left-24 sm:-left-16">
<h1 class="rebase-head text-[#E82338]">&lt;01&gt;</h1>
</div>
</div>
</div>
</div>
<div class="relative 2xl:-translate-y-32 sm:-translate-y-16 lg:-translate-y-20 xl:-translate-y-24">
<img class="m-auto w-full" src="/public/landing.png" alt="landing">

<div class="absolute top-24">
<div class='mx-auto'>
<ul class='block m-auto'>
<li class=""><a href="https://gdsc.bio.link/"><img src="/public/gdschero.svg" alt="gdsc"></a></li>
<li class="my-6" ><a href="https://discord.gg/tcaxPN6CNs"><img src="/public/discord.svg" alt=""></a></li>
<li><a href="https://twitter.com/gdsciiitkalyani"><img src="/public/x.svg" alt=""></a></li>
<li><a href="https://www.youtube.com/channel/UCvRPKamvUtnQhij5y1MF11A"><img src="/public/ythero.svg" alt=""></a></li>
<li><a href="https://instagram.com/gdsciiitkalyani"><img src="/public/instahero.svg" alt=""></a></li>
</ul>
</div>
</div>
</div>

</section>

<section
class="h-screen w-full border-2 border-black grid place-items-center"
Expand Down
Binary file added public/landing.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
140 changes: 79 additions & 61 deletions style.css
Original file line number Diff line number Diff line change
@@ -1,110 +1,128 @@
@import url('https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700;900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;


/*---------------------------- fonts -----------------*/

/* Anime Ace */
@font-face {
font-family: 'Anime Ace';
src: url('/fonts/anime_ace_bb/animeace2bb_tt/animeace2_bld.ttf')format('truetype');
font-weight: bold;
font-style: normal;
font-family: 'Anime Ace';
src: url('/fonts/anime_ace_bb/animeace2bb_tt/animeace2_bld.ttf')
format('truetype');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Anime Ace';
src: url('/fonts/anime_ace_bb/animeace2bb_tt/animeace2_ital.ttf')format('truetype');
font-weight: lighter;
font-style: italic;
font-family: 'Anime Ace';
src: url('/fonts/anime_ace_bb/animeace2bb_tt/animeace2_ital.ttf')
format('truetype');
font-weight: lighter;
font-style: italic;
}

@font-face {
font-family: 'Anime Ace';
src: url('/fonts/anime_ace_bb/animeace2bb_tt/animeace2_reg.ttf')format('truetype');
font-weight: lighter;
font-style: normal;
font-family: 'Anime Ace';
src: url('/fonts/anime_ace_bb/animeace2bb_tt/animeace2_reg.ttf')
format('truetype');
font-weight: lighter;
font-style: normal;
}

/* Bangers */
@font-face {
font-family: 'Bangers';
src: url(/fonts/Bangers/Bangers-Regular.ttf)format('truetype');
font-family: 'Bangers';
src: url(/fonts/Bangers/Bangers-Regular.ttf) format('truetype');
}

/* Japanese robot */
@font-face {
font-family: 'Japanese Robot';
src: url(/fonts/japanese-robot/JapaneseRobot.ttf)format('truetype');
font-style: normal;
font-family: 'Japanese Robot';
src: url(/fonts/japanese-robot/JapaneseRobot.ttf) format('truetype');
font-style: normal;
}

@font-face {
font-family: 'Japanese Robot';
src: url('/fonts/japanese-robot/JapaneseRobotItalic.ttf')format('truetype');
font-style: italic;
font-family: 'Japanese Robot';
src: url('/fonts/japanese-robot/JapaneseRobotItalic.ttf') format('truetype');
font-style: italic;
}

/* Kosugi Maru */
@font-face {
font-family: 'Kosugi Maru';
src: url(/fonts/Kosugi_Maru/KosugiMaru-Regular.ttf)format('truetype');
font-family: 'Kosugi Maru';
src: url(/fonts/Kosugi_Maru/KosugiMaru-Regular.ttf) format('truetype');
}

/* ----------------------------------- fonts end ---------------------------------------- */


/* write vannila css below */
nav{
/* position: relative; */
}
nav::after{
content: '';
/* position: absolute;
nav {
/* position: relative; */
}

nav::after {
content: '';
/* position: absolute;
top: 10%;
left: -1%;
right: 1%;
bottom: 0%; */
border: 0.188rem solid black;
}
border: 0.188rem solid black;
}

nav ul li a {
font-family: 'Anime Ace';
font-weight: bold;
font-style: normal;
font-family: 'Anime Ace';
font-weight: bold;
font-style: normal;
}
body {
background-color: #F4E1B9;
position: relative;
background-color: #f4e1b9;
position: relative;
}

.stack {
display: grid;
display: grid;
}

.head {
color: #E82338;
font-family: 'Bangers';
font-size: 10vw;
-webkit-text-stroke-width: 0.26vw;
-webkit-text-stroke-color: black;
text-shadow: 0.4vw 0.33vw 0px black;
text-align: start;
padding-left: 10vw;
z-index: 1;
}

.imgDiv{
height:75vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}

img{
height: 100%;
width: auto;
align-self: center;
color: #e82338;
font-family: 'Bangers';
font-size: 10vw;
-webkit-text-stroke-width: 0.26vw;
-webkit-text-stroke-color: black;
text-shadow: 0.4vw 0.33vw 0px black;
text-align: start;
padding-left: 10vw;
z-index: 1;
}

.imgDiv {
height: 75vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}

img {
height: 100%;
width: auto;
align-self: center;
}

.rebase-head {
font-family: 'Japanese Robot';
}

.heading {
-webkit-text-stroke: 5px black;
text-shadow: -15px 15px #000;
}

.hero-vol{
font-family: 'Passion One', sans-serif;
font-weight: bold;
}

0 comments on commit 6ac22be

Please sign in to comment.