add event title
This commit is contained in:
parent
c196601cfe
commit
4013aa0cd4
13 changed files with 29 additions and 9 deletions
BIN
public/about3.png
Normal file
BIN
public/about3.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.5 MiB |
BIN
public/about4.png
Normal file
BIN
public/about4.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.3 MiB |
BIN
public/eventbg.png
Normal file
BIN
public/eventbg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 702 KiB |
BIN
public/halloween.png
Normal file
BIN
public/halloween.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 203 KiB |
BIN
public/hardhack.png
Normal file
BIN
public/hardhack.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 308 KiB |
BIN
public/project.png
Normal file
BIN
public/project.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.5 MiB |
15
src/components/events/EventTitle.astro
Normal file
15
src/components/events/EventTitle.astro
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
---
|
||||||
|
import { Image } from "astro:assets";
|
||||||
|
import eventbg from "../../../public/eventbg.png"
|
||||||
|
import { LiaDotCircle } from "react-icons/lia";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="w-full pt-[18vh] flex justify-center relative">
|
||||||
|
<Image src={eventbg} alt="Event Page Background" class="w-[45%] rounded-[2vw] aspect-[2/1] object-cover" />
|
||||||
|
<div class="absolute -bottom-[6%] left-[20%] flex items-center text-[3vw] py-[1.5%] px-[3%] text-white bg-ieee-black rounded-[2vw]">
|
||||||
|
<LiaDotCircle className=" mr-[2vw] pt-[0.5%]"/>
|
||||||
|
<p>
|
||||||
|
EVENTS
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -8,7 +8,7 @@ const {image, text, link} = Astro.props;
|
||||||
---
|
---
|
||||||
<div class="w-[15vw] relative group">
|
<div class="w-[15vw] relative group">
|
||||||
|
|
||||||
<img src={image} alt="involvement background" class="aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-70 duration-300"/>
|
<img src={image} alt="involvement background" class="opacity-70 aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-50 duration-300"/>
|
||||||
<Link
|
<Link
|
||||||
href={link}
|
href={link}
|
||||||
target={text==="H.A.R.D. HACK"? "_blank":"_self"}
|
target={text==="H.A.R.D. HACK"? "_blank":"_self"}
|
||||||
|
|
|
@ -3,7 +3,10 @@ import about from "../../../public/about.png";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { LiaDotCircle } from "react-icons/lia";
|
import { LiaDotCircle } from "react-icons/lia";
|
||||||
import { Image } from "astro:assets";
|
import { Image } from "astro:assets";
|
||||||
|
import about1 from "../../../public/about1.png";
|
||||||
import about2 from "../../../public/about2.png";
|
import about2 from "../../../public/about2.png";
|
||||||
|
import about3 from "../../../public/about3.png";
|
||||||
|
import about4 from "../../../public/about4.png";
|
||||||
---
|
---
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -11,10 +14,10 @@ import about2 from "../../../public/about2.png";
|
||||||
<div class="w-1/2 flex justify-center pr-[5%] relative">
|
<div class="w-1/2 flex justify-center pr-[5%] relative">
|
||||||
<div class="relative w-[35vw]">
|
<div class="relative w-[35vw]">
|
||||||
<Image src={about} alt="About background image" />
|
<Image src={about} alt="About background image" />
|
||||||
<Image src={about2} alt="About image" class="absolute top-[5%] left-[14%] aspect-[399/491] object-cover w-[25vw] rounded-[2vw]" />
|
<Image src={about4} alt="About image" class="absolute top-[5%] left-[14%] aspect-[399/491] object-cover w-[25vw] rounded-[2vw]" />
|
||||||
</div>
|
</div>
|
||||||
<Image src={about2} alt="About image" class="absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] -left-[15%]" />
|
<Image src={about2} alt="About image" class="absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] -left-[15%]" />
|
||||||
<Image src={about2} alt="About image" class="absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0" />
|
<Image src={about3} alt="About image" class="absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0" />
|
||||||
<div class="absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%]"/>
|
<div class="absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%]"/>
|
||||||
<div class="absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%]"/>
|
<div class="absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%]"/>
|
||||||
|
|
||||||
|
|
|
@ -1,17 +1,17 @@
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
"text": "PROJECTS",
|
"text": "PROJECTS",
|
||||||
"image": "/about2.png",
|
"image": "/project.png",
|
||||||
"link": "/projects"
|
"link": "/projects"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"text": "EVENTS",
|
"text": "EVENTS",
|
||||||
"image": "/about2.png",
|
"image": "/halloween.png",
|
||||||
"link": "/events"
|
"link": "/events"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"text": "H.A.R.D. HACK",
|
"text": "H.A.R.D. HACK",
|
||||||
"image": "/about2.png",
|
"image": "/hardhack.png",
|
||||||
"link": "https://hardhack.dev/"
|
"link": "https://hardhack.dev/"
|
||||||
}
|
}
|
||||||
]
|
]
|
|
@ -1,7 +1,8 @@
|
||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
import EventTitle from "../components/events/EventTitle.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
QP
|
<EventTitle />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -10,7 +10,7 @@ import event from "../../public/event.jpg"
|
||||||
<Layout>
|
<Layout>
|
||||||
<FindTitle />
|
<FindTitle />
|
||||||
<div class="w-full flex justify-center">
|
<div class="w-full flex justify-center">
|
||||||
<Image src={event} alt="board group photos" class=" w-3/4 mt-[3%] rounded-full"/>
|
<Image src={event} alt="board group photos" class=" w-3/4 rounded-full"/>
|
||||||
</div>
|
</div>
|
||||||
<Findus />
|
<Findus />
|
||||||
<Social />
|
<Social />
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
import Title from "../components/core/Title.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
QP
|
<Title title="Quarterly Project" />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
Loading…
Reference in a new issue