Skip to content

Commit 8836ee0

Browse files
jamest0jamest0
committed
add responsiveness and clean up code
1 parent 2006f70 commit 8836ee0

File tree

2 files changed

+45
-34
lines changed

2 files changed

+45
-34
lines changed

Diff for: ‎components/ResourcesAndContacts/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const ResourcesAndContacts = () => {
1313

1414
<div className="text-center my-10">
1515
<p className="text-[#3977F8] font-game text-xl">03</p>
16-
<h1 className="font-bold text-5xl">RESOURCES & CONTACTS</h1>
16+
<h1 className="font-bold text-6xl">RESOURCES & CONTACTS</h1>
1717
</div>
1818

1919
<div className="py-8 bg-no-repeat bg-center">

Diff for: ‎components/Sponsors/index.tsx

+44-33
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,48 @@
1-
import React from 'react'
1+
import React from "react";
22

33
const Sponsors = () => {
4-
return (
5-
<section className="flex flex-col min-h-screen py-8 px-24 relative">
6-
<div>
7-
<p className="text-[#3977F8] font-game text-xl">04</p>
8-
<h2 className="font-bold text-7xl">SUPPORT CSESOC</h2>
9-
</div>
10-
<div className="flex-1 flex justify-center items-center">
11-
<div style={{ backgroundImage: 'radial-gradient(50% 50% at 50% 50%, rgba(235, 1, 255, 0.6) 0%, rgba(121, 73, 255, 0.6) 48.96%, rgba(57, 119, 248, 0.6) 100%)' }} className="overflow-hidden rounded-[4rem] h-[35rem] w-[90rem] grid grid-cols-10 grid-row-2">
12-
<div className="flex flex-col justify-center items-center col-span-4 row-start-1 row-end-3">
13-
<div className="max-w-[19.5rem] flex flex-col justify-center items-center">
14-
<h2 className="text-5xl font-black">Our sponsors</h2>
15-
<p style={{ fontSize: '1.65rem', lineHeight: '2.1rem' }} className="my-16" >Check out our very cool sponsors.</p>
16-
<button style={{ backgroundColor: '#FFFFFF', border: '1px solid #A7A6E5', color: '#3977F8' }} className="text-2xl rounded-xl w-[100%] h-16">View our sponsors</button>
17-
</div>
18-
</div>
19-
<div style={{ backgroundColor: 'rgba(0, 71, 255, 0.33)' }} className="flex justify-center items-center col-span-3 row-start-1 row-end-2"><img src="assets/atlassian_logo.svg" alt="Atlassian logo" /></div>
20-
<div style={{ backgroundColor: 'rgba(82, 130, 255, 0.47)' }} className="flex justify-center items-center col-span-3 row-start-1 row-end-2"><img src="assets/google_logo.svg" alt="Google logo" /></div>
21-
<div style={{ backgroundColor: 'rgba(48, 93, 255, 0.2)' }} className="flex justify-center items-center col-span-3 row-start-2 row-end-3"><img src="assets/freelancer_logo.svg" alt="Freelancer logo" /></div>
22-
<div style={{ backgroundColor: 'rgba(122, 137, 236, 0.27)' }} className="flex justify-center items-center col-span-3 row-start-2 row-end-3"><img src="assets/microsoft_logo.svg" alt="Microsoft logo" /></div>
23-
</div>
24-
</div>
25-
<div className="flex justify-between">
26-
<img src="assets/csesoc_logo_white.svg" alt="CSESoc Logo" />
27-
<div className="flex flex-col max-w-[14rem]">
28-
<p className="mb-6">B03 CSE Building K17, UNSW [email protected]</p>
29-
<p>© 2021 — CSESoc UNSW</p>
30-
</div>
4+
const firstRowBoxesStyling = "xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-1 xl:row-end-2 sm:row-start-3 sm:row-end-4 sm:h-auto h-36";
5+
const secondRowBoxesStyling = "xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-2 xl:row-end-3 sm:row-start-4 sm:row-end-5 sm:h-auto h-36";
6+
7+
return (
8+
<section className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20">
9+
<div className="text-center">
10+
<p className="text-[#3977F8] font-game text-xl">04</p>
11+
<h2 className="font-bold text-6xl">SUPPORT CSESOC</h2>
12+
</div>
13+
<div className="flex-1 flex justify-center items-center my-20">
14+
<div style={{ backgroundImage: "radial-gradient(50% 50% at 50% 50%, rgba(235, 1, 255, 0.6) 0%, rgba(121, 73, 255, 0.6) 48.96%, rgba(57, 119, 248, 0.6) 100%)" }} className="overflow-hidden rounded-[4rem] w-[90rem] grid grid-cols-10 xl:grid-row-2 sm:grid-row-5">
15+
<div className="flex flex-col justify-center items-center xl:col-span-4 col-span-10 row-start-1 row-end-3 xl:my-0 my-12">
16+
<div className="max-w-[15rem]">
17+
<h2 className="text-4xl font-black">Our sponsors</h2>
18+
<p className="xl:my-10 my-3 text-lg">Check out our very cool sponsors.</p>
19+
<button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[100%] xl:h-12 h-10">View our sponsors</button>
3120
</div>
32-
<img src="assets/sponsors_backdrop.svg" alt="Sponsors backdrop" className="absolute bottom-0 left-0 w-screen -z-10" />
33-
</section >
34-
)
35-
}
21+
</div>
22+
<div className={`${firstRowBoxesStyling} bg-[rgba(0, 71, 255, 0.33)]`}>
23+
<img src="assets/atlassian_logo.svg" alt="Atlassian logo" />
24+
</div>
25+
<div className={`${firstRowBoxesStyling} bg-[rgba(82, 130, 255, 0.47)]`}>
26+
<img src="assets/google_logo.svg" alt="Google logo" />
27+
</div>
28+
<div className={`${secondRowBoxesStyling} bg-[rgba(48, 93, 255, 0.2)]`}>
29+
<img src="assets/freelancer_logo.svg" alt="Freelancer logo" />
30+
</div>
31+
<div className={`${secondRowBoxesStyling} bg-[rgba(122, 137, 236, 0.27)]`}>
32+
<img src="assets/microsoft_logo.svg" alt="Microsoft logo" />
33+
</div>
34+
</div>
35+
</div>
36+
<div className="sm:flex justify-between">
37+
<img src="assets/csesoc_logo_white.svg" alt="CSESoc Logo" />
38+
<div className="flex flex-col max-w-[14rem] sm:mt-0 mt-10 font-light">
39+
<p className="mb-6">B03 CSE Building K17, UNSW [email protected]</p>
40+
<p>© 2021 — CSESoc UNSW</p>
41+
</div>
42+
</div>
43+
<img src="assets/sponsors_backdrop.svg" alt="Sponsors backdrop" className="absolute bottom-0 left-0 w-screen -z-10" />
44+
</section>
45+
);
46+
};
3647

37-
export default Sponsors
48+
export default Sponsors;

0 commit comments

Comments
 (0)