Skip to content

Commit

Permalink
Fix the contact page style.
Browse files Browse the repository at this point in the history
  • Loading branch information
@HaudinFlorence
HaudinFlorence committed Jul 15, 2024
1 parent 0fad20a commit 68a5b0b
Show file tree
Hide file tree
Showing 9 changed files with 165 additions and 96 deletions.
71 changes: 35 additions & 36 deletions src/components/about/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
.small_portrait_card {
width: 279px;
height: 388px;
background-color: white;
color: var(--ifm-color-primary-p2);
border-radius: 8px;
box-shadow: 0px 0px 8px 1px #c8c8c7;
padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
text-align: center;
margin-bottom: var(--ifm-spacing-xl);
}
height: 388px;
background-color: white;
color: var(--ifm-color-primary-p2);
border-radius: 8px;
box-shadow: 0px 0px 8px 1px #c8c8c7;
padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
text-align: center;
margin-bottom: var(--ifm-spacing-xl);
}

.avatar {
filter: grayscale(1);
Expand All @@ -18,20 +18,6 @@
width: 160px;
}




.value_header {
font-family: var(--ifm-font-family-rubik-one);
font-size: var(--ifm-font-size-secondary-title);
font-style: normal;
font-weight: 600;
line-height: 28px;
text-align: center;
margin-bottom: var(--ifm-spacing-xl);
color: var(--ifm-text-color-on-primary-p1);
}

.value_text p {
font-family: var(--ifm-font-family-roboto);
font-size: 14px;
Expand All @@ -42,7 +28,6 @@
color: var(--ifm-text-color-on-primary-p1);
}


div .row {
margin-left: 0;
margin-right: 0;
Expand Down Expand Up @@ -75,7 +60,7 @@ div .row {
color: var(---ifm-text-color);
font-style: normal;
font-weight: 600;
line-height: 24px;
line-height: 24px;
letter-spacing: 0.5px;
color: var(--ifm-color-primary-p2);
}
Expand All @@ -89,9 +74,7 @@ div .row {
line-height: 40px;
color: var(--ifm-color-primary-p2);
}
s

.large_card_position {
s .large_card_position {
font-size: var(--ifm--font-size-normal);
font-family: var(--ifm-font-family-roboto);
color: var(--ifm-color-primary-p2);
Expand Down Expand Up @@ -136,8 +119,6 @@ div .join_the_team_text {
color: var(--ifm-color-secondary-s2);
}



@media only screen and (max-width: 996px) {
/*Mobile*/
.value_card {
Expand All @@ -150,6 +131,17 @@ div .join_the_team_text {
margin-bottom: var(--ifm-spacing-xl);
}

.value_header {
font-family: var(--ifm-font-family-rubik-one);
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 20px;
text-align: center;
margin-bottom: var(--ifm-spacing-xl);
color: var(--ifm-text-color-on-primary-p1);
}

.large_portrait_card {
width: 100%;
height: 200%;
Expand All @@ -171,7 +163,7 @@ div .join_the_team_text {
.subteam_container {
margin: var(--ifm-spacing-3xl) var(--ifm-spacing-2xl);
}

.team_description {
font-family: var(--ifm-font-family-roboto);
font-size: 18px;
Expand All @@ -194,7 +186,16 @@ div .join_the_team_text {
margin-bottom: var(--ifm-spacing-xl);
}


.value_header {
font-family: var(--ifm-font-family-rubik-one);
font-size: var(--ifm-font-size-secondary-title);
font-style: normal;
font-weight: 600;
line-height: 28px;
text-align: center;
margin-bottom: var(--ifm-spacing-xl);
color: var(--ifm-text-color-on-primary-p1);
}

.large_portrait_card {
width: 1000px;
Expand All @@ -209,15 +210,14 @@ div .join_the_team_text {
margin-bottom: var(--ifm-spacing-2xl);
}


.row_with_margins {
margin: var(--ifm-spacing-2xl) 0;
}

.subteam_container {
margin: var(--ifm-spacing-5xl) var(--ifm-spacing-6xl);
}

.team_description {
font-family: var(--ifm-font-family-roboto);
font-size: 22px;
Expand All @@ -226,5 +226,4 @@ div .join_the_team_text {
line-height: 28px;
text-align: center;
}

}
}
38 changes: 28 additions & 10 deletions src/components/careers/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,16 +44,7 @@
margin-bottom: var(--ifm-spacing-xl);
}

.join_the_team_text {
text-align: center;
font-size: 28px;
font-family: var(--ifm-font-family-roboto);
color: var(--ifm-color-primary-p2);
text-align: center;
font-style: normal;
font-weight: 400;
line-height: 36px; /* 128.571% */
}


.join_the_team_container {
padding: var(--ifm-spacing-4xl) 0;
Expand Down Expand Up @@ -88,3 +79,30 @@
line-height: 24px; /* 133.333% */
letter-spacing: 0.5px;
}

@media only screen and (max-width: 996px) {
/*Mobile*/
.join_the_team_text {
text-align: center;
font-size: 18px;
font-family: var(--ifm-font-family-roboto);
color: var(--ifm-color-primary-p2);
text-align: center;
font-style: normal;
font-weight: 400;
line-height: 36px;
}
}
@media only screen and (min-width: 996px) {
/*Desktop*/
.join_the_team_text {
text-align: center;
font-size: 28px;
font-family: var(--ifm-font-family-roboto);
color: var(--ifm-color-primary-p2);
text-align: center;
font-style: normal;
font-weight: 400;
line-height: 36px;
}
}
27 changes: 13 additions & 14 deletions src/components/contact/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,33 @@
import styles from "./styles.module.css";
import ContactForm from "./ContactForm";
import { useEffect, useState } from "react";
import ContactIllustration from "/img/illustrations/contact.svg"

import ContactIllustration from "/img/illustrations/contact.svg";

export function Contact() {
return (
<div className="container upper-container-with-margin-top">
<h1 className={"padding-none text--center"}> Contact us</h1>
<div className={"row"}>
<div
className={
"col col--6 col--offset-1" + " " + "flex-full-centered" + " "
}
className={"col col--6 col--offset-1 flex-full-centered" + " "}
style={{
margin: "var(--ifm-spacing-2xl) 0",
padding: "var(--ifm-spacing-2xl)",
padding: "var(--ifm-spacing-xl)",
}}
>
<ContactIllustration alt={"Illustration for the contact page with a woman, a mobile phone and an enveloppe."} />
<ContactIllustration
height={"460px"}
alt={
"Illustration for the contact page with a woman, a mobile phone and an enveloppe."
}
/>
</div>
<div
className={"col col--5" + " " + "padding-none" + " " + "margin-none"}
className={"col col--5 flex-full-centered padding-none margin-none"}
>
<h1 className={"padding-none"}> Contact us</h1>
<div>
<ContactForm />
</div>
<ContactForm />
</div>
</div>
</div>
);
}
export default Contact;
export default Contact;
58 changes: 43 additions & 15 deletions src/components/contact/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@
background: var(--ifm-color-blue-jupyter);
}

.send_button_container {
height: 59px;
width: 508px;
margin-top: var(--ifm-spacing-2xl);
}


.contact_form {
margin-top: var(--ifm-spacing-xl);
Expand All @@ -19,14 +15,46 @@
color: var(--ifm-text-color);
background-color: var(--ifm-background-color);
}
.small_input {
width: 508px;
height: 56px;
border-radius: 4px;
}

.large_input {
width: 508px;
height: 220px;
border-radius: 4px;
}


@media only screen and (max-width: 996px) {
/*Mobile*/
.small_input {
width: 300px;
height: 56px;
border-radius: 4px;
}

.large_input {
width: 300px;
height: 220px;
border-radius: 4px;
}
.send_button_container {
height: 59px;
width: 300px;
margin: var(--ifm-spacing-2xl) 0;
}

}

@media only screen and (min-width: 996px) {
/*Desktop*/
.small_input {
width: 508px;
height: 56px;
border-radius: 4px;
}

.large_input {
width: 508px;
height: 220px;
border-radius: 4px;
}
.send_button_container {
height: 59px;
width: 508px;
margin: var(--ifm-spacing-2xl) 0;
}
}
14 changes: 8 additions & 6 deletions src/components/projects/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,18 @@ import styles from "./styles.module.css";
import HeaderMD from "./descriptions/Header.md";

export default function Header() {
return (
<div className={"container upper-container-with-margin-top"}>
return (
<div className={styles.header_container}>
<div className={"container"}>
<div className="row">
<div className={"col padding-none"+ " " + styles.header_container}>
<div className="col padding-none">
<h1 className={styles.header_title}>Working in the open</h1>
<div className={styles.header_text}>
<HeaderMD/>
<HeaderMD />
</div>
</div>
</div>
</div>
);
}
</div>
);
}
7 changes: 5 additions & 2 deletions src/components/projects/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ div .project_title {
@media only screen and (max-width: 996px) {
/*Mobile*/

.header_container {
.header_container{
padding-top: var(--ifm-spacing-2xl);
background-color: var(--ifm-color-primary-p1);
}

.header_title {
padding-left: none;
}
Expand Down Expand Up @@ -61,6 +61,9 @@ div .project_title {

@media only screen and (min-width: 996px) {
/*Desktop*/
.header_container{
margin-top: var(--ifm-spacing-6xl);
}
.header_title {
padding-left: var(--ifm-spacing-4xl);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/services/SpecialProjects.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function SpecialProjects() {
<SpecialProjectsIllustration
alt={
"Picture showing an illustration of a group of people working together in an office."}
width={"360px"}
height={"300px"}

/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/services/Support.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ export function Support() {
<div className="container upper-container-with-margin-top">
<div className="row">
<div className="col col--4 col--offset-1">
<div className="flex-full-centered">
<SupportIllustration width={"280px"} alt="Illustration for the support section, showing symbolically a person indicating the direction to take." />
<div className="flex-full-centered" style={{marginBottom:"var(--ifm-spacing-xl)"}}>
<SupportIllustration height={"280px"} alt="Illustration for the support section, showing symbolically a person indicating the direction to take." />
</div>
</div>
<div className={"col col--6"}>
Expand Down
Loading

0 comments on commit 68a5b0b

Please sign in to comment.