From cef251971a95ca2aaff4568c179bdcb6f91ef923 Mon Sep 17 00:00:00 2001 From: Manurbhav Date: Sat, 27 Apr 2024 21:56:53 +0530 Subject: added sliding transition to button --- src/components/Carousel.astro | 46 ++++++++++++------------ src/components/Header.astro | 81 +++++++++++++++++++++++++++++++++++-------- src/components/HomeBody.astro | 68 ++++++++++++++++++++++++++++++++---- src/components/Navbar.astro | 6 ++-- src/components/TopBar.astro | 5 +++ 5 files changed, 160 insertions(+), 46 deletions(-) diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro index 07f7441..b848510 100644 --- a/src/components/Carousel.astro +++ b/src/components/Carousel.astro @@ -52,9 +52,9 @@ const carouselSlide: Carousel[] = [ ---
- +
{ carouselSlide.slice(0, 4).map((slide) => { @@ -80,9 +80,9 @@ const carouselSlide: Carousel[] = [ }
- +
@@ -123,7 +123,7 @@ const carouselSlide: Carousel[] = [ align-items: center; } - #nextBtn{ + /* #nextBtn{ transform: rotateY(180deg); } @@ -131,15 +131,15 @@ const carouselSlide: Carousel[] = [ width: 3vh; cursor: pointer; margin: 0 15vh; - } + } */ @media screen and (max-width: 868px){ .gallery div{ grid-gap: 20px; } - #backBtn, #nextBtn{ + /* #backBtn, #nextBtn{ margin: 0; - } + } */ } @@ -147,8 +147,8 @@ const carouselSlide: Carousel[] = [ \ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro index ec91fcc..9961c8c 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -9,7 +9,10 @@ import 'bootstrap/dist/css/bootstrap.css'

IIT Bombay-FOSSEE-GIS/OSHW, IITTNiF &
ICFOSS presents

-
+
+
+ Register +
@@ -24,7 +27,7 @@ import 'bootstrap/dist/css/bootstrap.css' padding: 1vh; background-color: rgb(252, 230, 188); animation: zoomIn 3s; - z-index: 10; + z-index: 1000; } .map img { height: 60vh; @@ -52,17 +55,8 @@ import 'bootstrap/dist/css/bootstrap.css' width: 100%; } - .hack-button{ - /* background-color: orange; */ - margin: 2vh; - width: 50vw; - display: flex; - justify-content: center; - align-items: center; - padding: 1vh 2vw; - } - - .btn-register{ + + /* .btn-register{ background-color: #000080ff; width: 30vw; color: white; @@ -74,7 +68,66 @@ import 'bootstrap/dist/css/bootstrap.css' cursor: pointer; border-radius: 12px; font-family: "Lucida Console", Monaco, + } */ + + /* .hack-button{ + margin: 2vh; + width: 50vw; + display: flex; + justify-content: center; + align-items: center; + padding: 1vh 2vw; + } */ + .hack-button { + display: flex; + flex-direction: column; + padding: 1vh 2vw; + z-index: 0; + width: 20vw; + max-width: 40vw; + border: 2px solid blue; + margin: 20px 20px 20px 20px; + color: blue; + background-color: white; + text-decoration: none; + font-size: 2vh; + letter-spacing: 1.5px; + align-items: center; + justify-content: center; + font-weight: 500; + overflow: hidden; + } + + .hack-button { + position: relative; + overflow: hidden; + cursor: pointer; + } + + .hack-button a { + position: relative; + text-decoration: none; + transition: all .35s ease-Out; } + + #slide { + width: 100%; + height: 100%; + left: -400px ; + background: #BFC0C0; + position: absolute; + bottom: 0; + transition: all .35s ease-Out; + } + + .hack-button:hover #slide { + left: 0; + background-color: rgb(6, 6, 77); + } + .hack-button:hover a{ + color: white; + } + @keyframes zoomIn { from { transform: scale(1.3); @@ -97,7 +150,7 @@ import 'bootstrap/dist/css/bootstrap.css' font-size: 3vh; } - .hack-button button{ + .hack-button{ width: 60vw; } diff --git a/src/components/HomeBody.astro b/src/components/HomeBody.astro index 6e295a2..8a23718 100644 --- a/src/components/HomeBody.astro +++ b/src/components/HomeBody.astro @@ -109,7 +109,12 @@ const coreteam: CoreTeam[] = [

Registration

Please click on the following button to register yourself for the Hackathon

-
+
+
+
+ Register +
+
@@ -236,10 +241,60 @@ const coreteam: CoreTeam[] = [ font-size: 2.5vh; } - .hack-button{ - text-align: center; - display: block; + .regBtnContainer{ + display: flex; + justify-content: center; + align-items: center; + } + + .hack-button { + display: flex; + flex-direction: column; padding: 1vh 2vw; + z-index: 0; + width: 20vw; + max-width: 40vw; + border: 2px solid blue; + margin: 20px 20px 20px 20px; + color: blue; + background-color: white; + text-decoration: none; + font-size: 2vh; + letter-spacing: 1.5px; + align-items: center; + justify-content: center; + font-weight: 500; + overflow: hidden; + } + + .hack-button { + position: relative; + overflow: hidden; + cursor: pointer; + } + + .hack-button a { + position: relative; + text-decoration: none; + transition: all .35s ease-Out; + } + + #slide { + width: 100%; + height: 100%; + left: -400px ; + background: #BFC0C0; + position: absolute; + bottom: 0; + transition: all .35s ease-Out; + } + + .hack-button:hover #slide { + left: 0; + background-color: rgb(6, 6, 77); + } + .hack-button:hover a{ + color: white; } .pno-container{ @@ -332,7 +387,7 @@ const coreteam: CoreTeam[] = [ align-items: center; border: 1px solid black; padding: 2vh 4vw; - border-radius: 21px; + border-radius: 11px; margin: 2vh; width: 45%; } @@ -341,6 +396,7 @@ const coreteam: CoreTeam[] = [ font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 2.7vh; + text-align: center; } .teach p{ font-size: 2.4vh; @@ -357,7 +413,7 @@ const coreteam: CoreTeam[] = [ flex-direction: column; } .teach{ - width: 90%; + width: 100%; } .teach h4{ text-align: center; diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index ea76d9f..1f492d2 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -47,19 +47,20 @@ const routes : Routes[] = [ position: fixed; right: 0%; display: none; + z-index: 1000; } .off-screen-menu{ background-color: orange; height: 45vh; display: none; width: 100%; - z-index: 5; top: 20%; position: sticky; right: -450px; flex-direction: column; justify-content: center; font-size: 3rem; + z-index: 1000; } .off-screen-menu a{ @@ -69,7 +70,6 @@ const routes : Routes[] = [ /* color: blue; */ font-weight: 500; padding: 1vh 4vh; - z-index: 1001; } .off-screen-menu a:hover{ background-color: rgb(5, 5, 95); @@ -88,7 +88,7 @@ const routes : Routes[] = [ background-color: orange; padding: 1rem; width: 100vw; - z-index: 10; + z-index: 1000; } .ham-menu{ height: 40px; diff --git a/src/components/TopBar.astro b/src/components/TopBar.astro index e3bfe70..4d27419 100644 --- a/src/components/TopBar.astro +++ b/src/components/TopBar.astro @@ -53,10 +53,15 @@ import 'bootstrap/dist/css/bootstrap.css' a .big-img{ cursor:auto; } + + .banner-content{ + z-index: 1000; + } .banner-content div div{ align-items: center; } + img{ width: 14vh; -- cgit