forked from OperationCode/operationcode_frontend
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Issue OperationCode#154 - Create Military Families Page
This finalizes the Military Families and Spouses page as per Issue OperationCode#154. This also adds the requirements for the clipping appearance as was represented in the mockup.
- Loading branch information
Showing
13 changed files
with
243 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,26 +1,54 @@ | ||
|
||
.facts { | ||
display: 'flex'; | ||
background-color: '#E2E2E2'; | ||
align-items: 'center'; | ||
padding: '96px'; | ||
display: flex; | ||
flex-direction: row; | ||
justify-content: space-between; | ||
padding: 50px 0; | ||
} | ||
|
||
@media screen and (max-width: 1024px) { | ||
.facts { | ||
display: block; | ||
} | ||
} | ||
.factsHeading { | ||
font-size: '50px'; | ||
text-align: 'center'; | ||
|
||
.factsHeading h2 { | ||
font-size: 50px; | ||
width: 100%; | ||
} | ||
|
||
.factsList { | ||
color: '#445366'; | ||
font-size: '24px'; | ||
padding: '0 32px'; | ||
flex: .48; | ||
color: #445366; | ||
font-size: 24px; | ||
} | ||
|
||
.factsList ul { | ||
width: 80%; | ||
margin: 0 auto; | ||
} | ||
|
||
.factsList .footnote { | ||
font-size: 80%; | ||
font-style: italic; | ||
text-align: center; | ||
width: 80%; | ||
} | ||
|
||
.factsRight { | ||
padding: '0 32px' | ||
background-position: 90% 25%; | ||
border-radius: 40px; | ||
flex: .48; | ||
height: 50vh; | ||
margin-top: 65px; | ||
overflow: hidden; | ||
} | ||
.factsImage { | ||
width: '30vw'; | ||
border-radius: '40px'; | ||
|
||
@media screen and (max-width: 1150px) { | ||
.factsRight { | ||
background-position: 80% 25%; | ||
} | ||
} | ||
|
||
.factItem { | ||
padding-bottom: '24px'; | ||
} | ||
padding-bottom: 24px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
.quoteSection { | ||
margin-top: 50vh; | ||
position: relative; | ||
} | ||
|
||
@media screen and (max-width: 1700px) { | ||
.factsSection > *, | ||
.goalsSection > * { | ||
width: 90%; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 800px) { | ||
.quoteSection { | ||
margin-top: 200px; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import React, { Component } from 'react'; | ||
// import family3 from '../../../images/Family-3.jpg'; | ||
// import { Link } from 'react-router-dom'; | ||
import Join from 'shared/components/join/join'; | ||
import Donate from 'shared/components/donate/donate'; | ||
import Section from 'shared/components/section/section'; | ||
import HeaderClipMaskLeft from 'shared/components/headerClipMaskLeft/headerClipMaskLeft'; | ||
import HeaderClipMaskRight from 'shared/components/headerClipMaskRight/headerClipMaskRight'; | ||
import Quote from './jumboQuote/jumboQuote'; | ||
import Facts from './facts/facts'; | ||
import Goals from './goals/goals'; | ||
import styles from './families.css'; | ||
|
||
class Families extends Component { | ||
render() { | ||
return ( | ||
<div> | ||
<Section className={styles.quoteSection} theme="white"> | ||
<HeaderClipMaskLeft /> | ||
<HeaderClipMaskRight /> | ||
<Quote /> | ||
</Section> | ||
|
||
<Section className={styles.factsSection}> | ||
<Facts /> | ||
</Section> | ||
|
||
<Section className={styles.goalsSection} theme="white"> | ||
<Goals /> | ||
</Section> | ||
|
||
<Donate /> | ||
<Join /> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
export default Families; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
.goals { | ||
width: 100%; | ||
} | ||
|
||
.goalsHeading h2 { | ||
font-size: 50px; | ||
width: 100%; | ||
} | ||
|
||
.goalsContent { | ||
margin: 0 auto; | ||
width: 80%; | ||
} | ||
|
||
@media screen and (max-width: 1024px) { | ||
.goalsContent { | ||
width: 95%; | ||
} | ||
} | ||
|
||
.goalsContent p, | ||
.goalsContent ul li { | ||
font-size: 24px; | ||
} | ||
|
||
.goalsContent ul li { | ||
background-image: url('../../../../images/logos/small-blue-medal.png'); | ||
background-position: left center; | ||
background-repeat: no-repeat; | ||
background-size: 60px; | ||
list-style: none; | ||
margin: 0; | ||
padding: 36px 0 36px 97px; | ||
} | ||
|
||
@media screen and (max-width: 1024px) { | ||
.goalsContent ul { | ||
padding: 0; | ||
} | ||
|
||
.goalsContent ul li { | ||
background-size: 40px; | ||
padding: 16px 0 16px 67px; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import React, { Component } from 'react'; | ||
import Heading from 'shared/components/heading/heading'; | ||
import styles from './goals.css'; | ||
|
||
class Goals extends Component { | ||
render() { | ||
return ( | ||
<div className={styles.goals}> | ||
<div className={styles.goalsHeading}> | ||
<Heading text="Our Goals" /> | ||
</div> | ||
<div className={styles.goalsContent}> | ||
<p>When a loved one deploys, we understand the hardships that family members who are left behind can endure. There can be a lot of responsibilities to juggle. Operation Code works to ease the burden on military families by opening our programs and services up to military spouses, children and grandchildren.</p> | ||
<ul> | ||
<li>We strive to make software development more accessible not only to our veteran and military members, but also to their spouses and extended family.</li> | ||
<li>Our community works to increase the interaction and engagement between military families across all our social channels.</li> | ||
<li>Operation Code programs, scholarships and services are open to military families to help cultivate the learning process, and our employer services can work with family members to get them placed in software development jobs.</li> | ||
<li>In the future, Operation Code plans to do a curriculum and grow a community for military children who are interested in learning how to code.</li> | ||
</ul> | ||
</div> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
export default Goals; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,26 @@ | ||
|
||
.quotes { | ||
color: #445366; | ||
max-width: 1100px; | ||
padding: 50px 0; | ||
} | ||
|
||
.quoteBody { | ||
text-align: center; | ||
color: #445366; | ||
font-family: "Noto Serif", sans-serif; | ||
font-weight: normal; | ||
text-align: center; | ||
} | ||
|
||
.quoteAuthor { | ||
text-align: right; | ||
color: #445366; | ||
font-family: "Noto Serif", sans-serif; | ||
font-weight: normal; | ||
margin-top: 20px; | ||
text-align: right; | ||
} | ||
.quoteIcon { | ||
vertical-align: top; | ||
|
||
@media only screen and (max-width: 800px) { | ||
.quoteAuthor { | ||
text-align: center; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
src/shared/components/headerClipMaskLeft/headerClipMaskLeft.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
.mask { | ||
bottom: 99%; | ||
fill: #FFFFFF; | ||
position: absolute; | ||
left: 0; | ||
width: 50%; | ||
} |
14 changes: 14 additions & 0 deletions
14
src/shared/components/headerClipMaskLeft/headerClipMaskLeft.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import React, { Component } from 'react'; | ||
import styles from './headerClipMaskLeft.css'; | ||
|
||
class HeaderClipMaskLeft extends Component { | ||
render() { | ||
return ( | ||
<svg className={styles.mask} x="0px" y="0px" viewBox="0 0 612 97" style={{ enableBackground: 'new 0 0 612 97' }}> | ||
<path d="M614.8,97H0V0C0,0,317.7,97,614.8,97z" /> | ||
</svg> | ||
); | ||
} | ||
} | ||
|
||
export default HeaderClipMaskLeft; |
7 changes: 7 additions & 0 deletions
7
src/shared/components/headerClipMaskRight/headerClipMaskRight.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
.mask { | ||
bottom: 99%; | ||
fill: #FFFFFF; | ||
position: absolute; | ||
right: 0px; | ||
width: 50%; | ||
} |
14 changes: 14 additions & 0 deletions
14
src/shared/components/headerClipMaskRight/headerClipMaskRight.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import React, { Component } from 'react'; | ||
import styles from './headerClipMaskRight.css'; | ||
|
||
class HeaderClipMaskRight extends Component { | ||
render() { | ||
return ( | ||
<svg className={styles.mask} x="0px" y="0px" viewBox="0 0 612 97" style={{ enableBackground: 'new 0 0 612 97' }}> | ||
<path d="M0,97h615V0C615,0,297.1,97,0,97z" /> | ||
</svg> | ||
); | ||
} | ||
} | ||
|
||
export default HeaderClipMaskRight; |