Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Landing Page #10

Merged
merged 3 commits into from
Dec 27, 2023
Merged

Landing Page #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a656bd4
feat: hero page texts
TeeWrath Dec 25, 2023
abfd46b
feat: landing page img
TeeWrath Dec 25, 2023
60fdb4f
too tired to proceed tonight
TeeWrath Dec 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 41 additions & 2 deletions index.html
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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;
}