diff --git a/components/apprentice-qualities/apprentice-qualities.js b/components/apprentice-qualities/apprentice-qualities.js new file mode 100644 index 0000000..f1dc896 --- /dev/null +++ b/components/apprentice-qualities/apprentice-qualities.js @@ -0,0 +1,49 @@ +import React from 'react'; +import styles from './apprentice-qualities.module.scss'; + +const ApprenticeQualities = () => ( +
+
+ The three qualities sparkbox looks for in apprentices: Passion, Character, and Initiative. +
+

+ What we look for +

+

+ Qualities of Successful Apprentices +

+
+

+ We build responsive, standards-compliant, content-focused, + well-crafted, accessible, valuable, beautiful web sites and apps, + and we're looking for some web geeks that want to do the same. +

+

+ Passion, character, and initiative are a requirement. + A long resumé is not—as long as you care about the right things, + we can help build your skillset. + This is true for those we hire, and it is equally true for our apprentices. + Through your apprenticeship, we hope to help develop you into the sort of individual + we’d want to hire. And we may do just that. +

+

+ We’re looking primarily for those interested in an apprenticeship + in web development—frontend, backend, or anything code related. + What we’re looking for most, however, are individuals who are + excited to make their mark on the web industry. In your application, + provide anything and everything you can that will convince us you are that geek. +

+
+
+
+
+); + +export default ApprenticeQualities; diff --git a/components/apprentice-qualities/apprentice-qualities.module.scss b/components/apprentice-qualities/apprentice-qualities.module.scss new file mode 100644 index 0000000..0afb0c9 --- /dev/null +++ b/components/apprentice-qualities/apprentice-qualities.module.scss @@ -0,0 +1,112 @@ +$c-highlight-green: #01F5AC; + +.primary { + color: $c-highlight-green; +} + + +.apprentice-qualities { + width: 100%; + min-height: 50rem; + + &__main { + margin: auto; + } + + &__image { + display: none; + } + + &__article { + &-text { + font-style: normal; + font-weight: normal; + font-size: 1rem; + line-height: 1.375rem; + padding: 0 2rem; + } + + &-heading { + font-style: normal; + font-weight: 500; + font-size: 0.938rem; + line-height: 2.063rem; + letter-spacing: 0.1rem; + padding: 0 2rem; + text-transform: uppercase; + margin-bottom: 0; + } + + &-subheading { + margin: 0; + padding: 0.5rem 2rem 0; + letter-spacing: -0.02rem; + font-size: 1.563rem; + line-height: 1.75rem; + } + } +} + +@media screen and (min-width: 700px) { + .apprentice-qualities { + position: relative; + padding-top: 3rem; + background: + linear-gradient(180deg, #0A0A0A, 33%, transparent), + url('../../public/apprentice-qualities-background.svg'), + url('../../public/apprentice-qualities-background.svg'), + url('../../public/apprentice-qualities-background.svg'); + background-repeat: repeat-x; + background-size: 20rem; + background-position: + -8rem 0rem, + 2rem 17.4rem, + -8rem 34.7rem; + + &__main { + display: flex; + position: relative; + } + + &__image { + display: block; + position: absolute; + left: 1.2rem; + top: 14.4rem; + pointer-events: none; + width: 21.5rem; + } + + &__article { + position: absolute; + left: 23rem; + top: 8rem; + } + } +} + +@media screen and (min-width: 1150px) { + .apprentice-qualities { + background-position: + calc(50% - 13.6rem) 0rem, + calc(50% - 3.6rem) 17.3rem, + calc(50% - 13.6rem) 34.7rem; + + &__main { + flex-direction: row; + justify-content: center; + padding-top: 5rem; + } + + &__image { + position: revert; + padding-top: 9.3rem; + } + + &__article { + position: revert; + max-width: 90ch; + padding-top: 3rem; + } + } +} diff --git a/pages/components.js b/pages/components.js index fe1d439..0a5f655 100644 --- a/pages/components.js +++ b/pages/components.js @@ -2,6 +2,7 @@ import React from 'react'; import Link from '../components/link/link'; import Apprentice from '../components/apprentice/apprentice'; import SocialLinks from '../components/social-links/social-links'; +import ApprenticeQualities from '../components/apprentice-qualities/apprentice-qualities'; const Components = () => { const links = [ @@ -21,6 +22,8 @@ const Components = () => {
+

Apprentice Qualities

+ ); }; diff --git a/public/apprentice-qualities-background.svg b/public/apprentice-qualities-background.svg new file mode 100644 index 0000000..cfd8170 --- /dev/null +++ b/public/apprentice-qualities-background.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/apprentice-qualities.svg b/public/apprentice-qualities.svg new file mode 100644 index 0000000..53f76af --- /dev/null +++ b/public/apprentice-qualities.svg @@ -0,0 +1,8 @@ + + + + + + + +