fixing code, thanks adi
This commit is contained in:
parent
3e445a552c
commit
b8d97e4178
|
@ -5,17 +5,17 @@ import { Link } from "./Link";
|
||||||
|
|
||||||
export function ConnectWithUs() {
|
export function ConnectWithUs() {
|
||||||
return (
|
return (
|
||||||
<>
|
<div>
|
||||||
<h2 className={styles.header}>Connect with us!</h2>
|
<h2 className={styles.header}>Connect with us!</h2>
|
||||||
<p className={styles.text}>
|
<div className={styles.text}>
|
||||||
Drop by any of our social media outlets to learn more about us, keep
|
Drop by any of our social media outlets to learn more about us, keep
|
||||||
up-to-date with our upcoming events, or to chat with our members!
|
up-to-date with our upcoming events, or to chat with our members!
|
||||||
<div className={styles.socialLinks}>
|
<div className={styles.socialLinks}>
|
||||||
<SocialLinks color="gradient" size="big" />
|
<SocialLinks color="gradient" size="big" />
|
||||||
</div>
|
</div>
|
||||||
{/* TODO: fix feedback form link */}
|
{/* TODO: fix feedback form link */}
|
||||||
Send feedback through our <Link href="">Feedback Form</Link>
|
Send feedback through our <Link href="#">Feedback Form</Link>
|
||||||
</p>
|
</div>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,50 +12,7 @@
|
||||||
margin: 0 0 calc(21rem / 16) 0;
|
margin: 0 0 calc(21rem / 16) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form input {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
margin: calc(21rem / 16) 0;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 0;
|
|
||||||
border-radius: calc(20rem / 16);
|
|
||||||
|
|
||||||
background-color: var(--grey-24);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form input::placeholder {
|
|
||||||
color: var(--grey);
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form input[type="text"],
|
|
||||||
.form input[type="email"] {
|
|
||||||
padding: calc(10rem / 16) calc(31rem / 16);
|
|
||||||
font-family: Poppins;
|
|
||||||
|
|
||||||
font-size: calc(18rem / 16);
|
|
||||||
line-height: calc(30rem / 16);
|
|
||||||
color: var(--dark-grey);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form input:is(:active, :hover, :focus) {
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: calc(3rem / 16) solid var(--blue-1);
|
|
||||||
border-radius: calc(20rem / 16);
|
|
||||||
outline: none;
|
|
||||||
padding: calc(7rem / 16) calc(28rem / 16);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
margin-top: calc(34rem / 16);
|
margin-top: calc(34rem / 16);
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TODO: make this only happen if the form is clicked on? */
|
|
||||||
/* .form input:invalid {
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: calc(3rem / 16) solid var(--red);
|
|
||||||
border-radius: calc(20rem / 16);
|
|
||||||
outline: none;
|
|
||||||
padding: calc(7rem / 16) calc(28rem / 16);
|
|
||||||
} */
|
|
||||||
|
|
|
@ -1,18 +1,16 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import styles from "./EmailSignup.module.css";
|
import styles from "./EmailSignup.module.css";
|
||||||
import { Button } from "./Button";
|
import { Button } from "./Button";
|
||||||
|
import { Input } from "./Input";
|
||||||
|
|
||||||
export function EmailSignup() {
|
export function EmailSignup() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<h2 className={styles.header}>Join Our Mailing List!</h2>
|
<h2 className={styles.header}>Join Our Mailing List!</h2>
|
||||||
<form className={styles.form} action="">
|
<form className={styles.form} action="">
|
||||||
<input type="text" placeholder="Full Name*" required />
|
<Input type="text" placeholder="Full Name*" required />
|
||||||
<input type="email" placeholder="Email*" required />
|
<Input type="email" placeholder="Email*" required />
|
||||||
|
<Button className={styles.button}>Subscribe</Button>
|
||||||
<div className={styles.button}>
|
|
||||||
<Button>Subscribe</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -0,0 +1,37 @@
|
||||||
|
.input {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin: calc(21rem / 16) 0;
|
||||||
|
padding: calc(10rem / 16) calc(31rem / 16);
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 0;
|
||||||
|
border-radius: calc(20rem / 16);
|
||||||
|
|
||||||
|
background-color: var(--grey-1-24);
|
||||||
|
font-size: calc(18rem / 16);
|
||||||
|
line-height: calc(30rem / 16);
|
||||||
|
color: var(--grey-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input::placeholder {
|
||||||
|
color: var(--grey-2);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input:is(:active, :hover, :focus) {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: calc(3rem / 16) solid var(--blue-1);
|
||||||
|
border-radius: calc(20rem / 16);
|
||||||
|
outline: none;
|
||||||
|
padding: calc(7rem / 16) calc(28rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TODO: make this only happen if the form is clicked on? */
|
||||||
|
/* .form input:invalid {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: calc(3rem / 16) solid var(--red);
|
||||||
|
border-radius: calc(20rem / 16);
|
||||||
|
outline: none;
|
||||||
|
padding: calc(7rem / 16) calc(28rem / 16);
|
||||||
|
} */
|
|
@ -0,0 +1,8 @@
|
||||||
|
import React, { InputHTMLAttributes } from "react";
|
||||||
|
import styles from "./Input.module.css";
|
||||||
|
|
||||||
|
export function Input(props: InputHTMLAttributes<HTMLInputElement>) {
|
||||||
|
return (
|
||||||
|
<input {...props} className={`${styles.input} ${props.className ?? ""}`} />
|
||||||
|
);
|
||||||
|
}
|
|
@ -13,9 +13,10 @@ body {
|
||||||
--purple-1: #525284;
|
--purple-1: #525284;
|
||||||
--purple-2: #2a2a62;
|
--purple-2: #2a2a62;
|
||||||
--black: #000000;
|
--black: #000000;
|
||||||
--grey: #bbbbbb;
|
--grey-1: #c4c4c4;
|
||||||
--grey-24: rgba(196, 196, 196, 0.24);
|
--grey-1-24: #c4c4c440;
|
||||||
--dark-grey: #6b6b6b;
|
--grey-2: #bbbbbb;
|
||||||
|
--grey-3: #6b6b6b;
|
||||||
--red: #9f616a;
|
--red: #9f616a;
|
||||||
--gradient-blue-green: linear-gradient(
|
--gradient-blue-green: linear-gradient(
|
||||||
99.94deg,
|
99.94deg,
|
||||||
|
@ -81,3 +82,7 @@ h4 {
|
||||||
font-size: calc(18rem / 16);
|
font-size: calc(18rem / 16);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
font-family: "Poppins", "sans-serif";
|
||||||
|
}
|
||||||
|
|
|
@ -8,10 +8,7 @@ export default function OurSupporters() {
|
||||||
<>
|
<>
|
||||||
<div className={styles.headerContainer}>
|
<div className={styles.headerContainer}>
|
||||||
<h1 className={styles.header}>Our Supporters</h1>
|
<h1 className={styles.header}>Our Supporters</h1>
|
||||||
<Image
|
<Image src="images/our-supporters/codey.svg" className={styles.codey} />
|
||||||
src="our-supporters/supporters-codey.svg"
|
|
||||||
className={styles.codey}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.content}>
|
<div className={styles.content}>
|
||||||
<Content />
|
<Content />
|
||||||
|
|
|
@ -6,12 +6,12 @@
|
||||||
|
|
||||||
.headerText h1 {
|
.headerText h1 {
|
||||||
color: var(--purple-2);
|
color: var(--purple-2);
|
||||||
margin: 0 0 0.5rem 0;
|
margin: 0 0 calc(8rem / 16) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerText p {
|
.headerText p {
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
margin: 0 0 1.375rem 0;
|
margin: 0 0 calc(22rem / 16) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.codey {
|
.codey {
|
||||||
|
@ -21,7 +21,7 @@
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
margin-top: calc(32rem / 16);
|
margin-top: calc(32rem / 16);
|
||||||
margin-bottom: calc(52.77rem / 16);
|
margin-bottom: calc(52rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content h2 {
|
.content h2 {
|
||||||
|
@ -34,11 +34,7 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--purple-2);
|
color: var(--purple-2);
|
||||||
margin-top: calc(30rem / 16);
|
margin-top: calc(30rem / 16);
|
||||||
margin-bottom: calc(15rem / 16);
|
margin-bottom: 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
.content p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.connectWithUs {
|
.connectWithUs {
|
||||||
|
@ -46,12 +42,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.emailSignup {
|
.emailSignup {
|
||||||
margin-bottom: calc(57.81rem / 16);
|
margin-bottom: calc(58rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageContainer {
|
.pageContainer {
|
||||||
margin-top: calc(172rem / 16);
|
margin-top: calc(50rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* @todo aaaaaa */
|
||||||
@media only screen and (max-width: calc(768rem / 16)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,11 +21,11 @@ export default function GetInvolved() {
|
||||||
<Link href="/about/team">Programme Committee</Link>!
|
<Link href="/about/team">Programme Committee</Link>!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Image src="images/get-involved-codey.svg" className={styles.codey} />
|
<Image src="images/get-involved/codey.svg" className={styles.codey} />
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.content}>
|
<main className={styles.content}>
|
||||||
<Content />
|
<Content />
|
||||||
</div>
|
</main>
|
||||||
<div className={styles.connectWithUs}>
|
<div className={styles.connectWithUs}>
|
||||||
<ConnectWithUs />
|
<ConnectWithUs />
|
||||||
</div>
|
</div>
|
||||||
|
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
Loading…
Reference in New Issue