Skip to content

Commit f67be4d

Browse files
jamest0jamest0
committed
match widths of sections
1 parent 642954e commit f67be4d

File tree

2 files changed

+66
-64
lines changed

2 files changed

+66
-64
lines changed

‎components/About/index.tsx

Lines changed: 65 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,80 +2,82 @@ import Image from "next/image";
22

33
const About = () => {
44
return (
5-
<section className="py-8 xl:px-24 px-10" id="about">
5+
<section className="py-8 xl:px-24 sm:px-10 px-5" id="about">
66
<div className="text-center my-10">
77
<p className="text-[#3977F8] font-game text-xl">01</p>
88
<h1 className="font-bold text-6xl">ABOUT</h1>
99
</div>
10-
<div className="lg:grid grid-cols-6 flex-1">
11-
{/* LEFT SIDE */}
12-
<div className="col-span-2 xl:mx-10 md:mx-5">
13-
<div className="flex items-center justify-center">
14-
<Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
15-
</div>
16-
<h1 className="mt-10 text-3xl font-extrabold">CSESoc</h1>
17-
<p className="text-[#727B8C] font-medium">unsw-computer-science-soc</p>
18-
<button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
19-
<p>We are one of the biggest and most active societies at UNSW, catering to over 3500 CSE students spanning across degrees in Computer Science, Software Engineering, Bioinformatics and Computer Engineering.</p>
20-
<div className="my-4 flex gap-5">
21-
<Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
22-
<div>
23-
432 <span className="text-[#727B8C]">members</span> · 342 <span className="text-[#727B8C]">subcom</span>
10+
<div className="flex justify-center items-center">
11+
<div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
12+
{/* LEFT SIDE */}
13+
<div className="col-span-2 md:mx-5">
14+
<div className="flex items-center justify-center">
15+
<Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
16+
</div>
17+
<h1 className="mt-10 text-3xl font-extrabold">CSESoc</h1>
18+
<p className="text-[#727B8C] font-medium">unsw-computer-science-soc</p>
19+
<button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
20+
<p>We are one of the biggest and most active societies at UNSW, catering to over 3500 CSE students spanning across degrees in Computer Science, Software Engineering, Bioinformatics and Computer Engineering.</p>
21+
<div className="my-4 flex gap-5">
22+
<Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
23+
<div>
24+
432 <span className="text-[#727B8C]">members</span> · 342 <span className="text-[#727B8C]">subcom</span>
25+
</div>
26+
</div>
27+
<div className="my-4 flex gap-5">
28+
<Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} />
29+
Sydney, Australia
30+
</div>
31+
<div className="flex gap-5">
32+
<Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
33+
info@csesoc.org.au
2434
</div>
2535
</div>
26-
<div className="my-4 flex gap-5">
27-
<Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} />
28-
Sydney, Australia
29-
</div>
30-
<div className="flex gap-5">
31-
<Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
32-
info@csesoc.org.au
33-
</div>
34-
</div>
35-
{/* RIGHT SIDE */}
36-
<div className="col-span-4 lg:mt-0 mt-10">
37-
<div className="rounded border border-[#595F6D] p-5 2xl:h-80 xl:h-64 lg:h-48 sm:h-36 h-32 h-full">
38-
<p className="text-xs">
39-
csesoc/README<span className="text-[#7A8192]">.md</span>
40-
</p>
41-
<p className="mt-5">Lorem Ipsum</p>
42-
</div>
43-
<div className="mt-10">
44-
Pinned
45-
<div className="sm:flex my-5">
46-
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5 w-full sm:mb-0 mb-5">
47-
<div className="flex text-[#3A76F8]">
48-
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
49-
csesoc.unsw.edu.au/<span className="font-semibold">events</span>
36+
{/* RIGHT SIDE */}
37+
<div className="col-span-4 lg:mt-0 mt-10">
38+
<div className="rounded border border-[#595F6D] p-5 2xl:h-80 xl:h-64 lg:h-48 sm:h-36 h-32 h-full">
39+
<p className="text-xs">
40+
csesoc/README<span className="text-[#7A8192]">.md</span>
41+
</p>
42+
<p className="mt-5">Lorem Ipsum</p>
43+
</div>
44+
<div className="mt-10">
45+
Pinned
46+
<div className="sm:flex my-5">
47+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5 w-full sm:mb-0 mb-5">
48+
<div className="flex text-[#3A76F8]">
49+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
50+
csesoc.unsw.edu.au/<span className="font-semibold">events</span>
51+
</div>
52+
<div className="my-5">CSESoc's recent events</div>
53+
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
5054
</div>
51-
<div className="my-5">CSESoc's recent events</div>
52-
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
53-
</div>
54-
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg w-full">
55-
<div className="flex text-[#3A76F8]">
56-
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
57-
csesoc.unsw.edu.au/<span className="font-semibold">socials</span>
55+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg w-full">
56+
<div className="flex text-[#3A76F8]">
57+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
58+
csesoc.unsw.edu.au/<span className="font-semibold">socials</span>
59+
</div>
60+
<div className="my-5">Follow us on all socials</div>
61+
<div className="rounded-full bg-[#566ACE] w-3 h-3" />
5862
</div>
59-
<div className="my-5">Follow us on all socials</div>
60-
<div className="rounded-full bg-[#566ACE] w-3 h-3" />
6163
</div>
62-
</div>
63-
<div className="sm:flex">
64-
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5 w-full sm:mb-0 mb-5">
65-
<div className="flex text-[#3A76F8]">
66-
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
67-
csesoc.unsw.edu.au/<span className="font-semibold">join-us</span>
64+
<div className="sm:flex">
65+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5 w-full sm:mb-0 mb-5">
66+
<div className="flex text-[#3A76F8]">
67+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
68+
csesoc.unsw.edu.au/<span className="font-semibold">join-us</span>
69+
</div>
70+
<div className="my-5">Get involved!</div>
71+
<div className="rounded-full bg-[#E7E923] w-3 h-3" />
6872
</div>
69-
<div className="my-5">Get involved!</div>
70-
<div className="rounded-full bg-[#E7E923] w-3 h-3" />
71-
</div>
72-
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg w-full">
73-
<div className="flex text-[#3A76F8]">
74-
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
75-
csesoc.unsw.edu.au/<span className="font-semibold">contact</span>
73+
<div className="p-5 border border-[#595F6D] flex-1 rounded-lg w-full">
74+
<div className="flex text-[#3A76F8]">
75+
<Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} />
76+
csesoc.unsw.edu.au/<span className="font-semibold">contact</span>
77+
</div>
78+
<div className="my-5">Contact us via email</div>
79+
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
7680
</div>
77-
<div className="my-5">Contact us via email</div>
78-
<div className="rounded-full bg-[#CC5421] w-3 h-3" />
7981
</div>
8082
</div>
8183
</div>

‎components/ResourcesAndContacts/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const socialsBoxStyling = "xl:col-span-1 col-span-3 flex justify-center pt-2 pb-
77
const ResourcesAndContacts = () => {
88
return (
99
<section className="bg-no-repeat bg-center py-8 px-15 min-h-screen flex justify-center items-center">
10-
<div className="2xl:w-[90rem] xl:w-[75rem] md:w-[40rem] sm:w-[30rem] w-[90%]">
10+
<div className="2xl:w-[90rem] xl:w-[75rem] w-[90%]">
1111
<div className="relative">
1212
<Image src="assets/resources_bg.svg" alt="Background" className="-z-50 absolute" fill />
1313

0 commit comments

Comments
 (0)