-
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.
- Create Logo component
- Loading branch information
Showing
7 changed files
with
334 additions
and
11 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
Empty file.
Empty file.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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,265 @@ | ||
| @use '../../styles/colors' as *; | ||
| @use '../../styles/spacing' as *; | ||
| @use '../../styles/mixins' as *; | ||
|
|
||
| .hero { | ||
| width: $component-width; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| &__header-label { | ||
| @include visually-hidden(); | ||
| } | ||
|
|
||
| &__sparkbox-logo { | ||
| &--full { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| &__container { | ||
| @include horizontal-section-spacing(); | ||
| @include vertical-section-spacing(); | ||
| max-width: $max-content-width; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| &__header-content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| &__text { | ||
| display: flex; | ||
| flex-direction: column; | ||
| order: 1; | ||
|
|
||
| h1 { | ||
| font-size: 2.65rem; | ||
| } | ||
|
|
||
| h1, | ||
| p { | ||
| padding-bottom: 1rem; | ||
| font-weight: 100; | ||
| margin: 0; | ||
| } | ||
| } | ||
|
|
||
| &__art-container { | ||
| display: none; | ||
| } | ||
|
|
||
| &__grid { | ||
| display: none; | ||
| } | ||
|
|
||
| @supports (display: grid) { | ||
| &__art-container { | ||
| display: block; | ||
| padding-bottom: 1rem; | ||
| } | ||
|
|
||
| &__grid { // This grid is for the hero images and svgs | ||
| display: grid; | ||
| grid-template-columns: repeat(63, 1fr); | ||
| grid-template-rows: repeat(11, 1fr); | ||
|
|
||
| img { | ||
| max-width: 100%; | ||
|
|
||
| // Images below are placed in the grid in order from top to bottom and left to right | ||
| &:nth-child(1) { | ||
| grid-area: 2 / 18 / 7 / 41; | ||
| background-color: $c-highlight-blue; | ||
| } | ||
|
|
||
| &:nth-child(2) { | ||
| grid-area: 7 / 7 / 11 / 18; | ||
| background-color: $c-highlight-green; | ||
| } | ||
|
|
||
| &:nth-child(3) { | ||
| grid-area: 7 / 41 / 12 / 64; | ||
| background-color: $c-highlight-green; | ||
| } | ||
|
|
||
| &:nth-child(4) { | ||
| margin-top: -3px; | ||
| grid-area: 12 / 18 / 17 / 41; | ||
| background-color: $c-highlight-pink; | ||
| } | ||
|
|
||
| &:nth-child(5) { | ||
| grid-area: 17 / 41 / 20 / 51; | ||
| background-color: $c-highlight-blue; | ||
| } | ||
| // In mobile and tablet view only 3 images are shown | ||
| &:nth-child(n + 4) { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| // Triangle: Top Right | ||
| &--shape1 { | ||
| grid-area: 1 / 37 / 3 / 46; | ||
|
|
||
| path { | ||
| stroke: $c-highlight-pink; | ||
| } | ||
| } | ||
|
|
||
| // Circle: Top Left | ||
| &--shape2 { | ||
| grid-area: 3 / 11 / 7 / 20; | ||
|
|
||
| circle { | ||
| stroke: $c-highlight-green; | ||
| } | ||
| } | ||
|
|
||
| // Triangle: Middle Left | ||
| &--shape3 { | ||
| grid-area: 6 / 2 / 9 / 9; | ||
| } | ||
|
|
||
| // Circle: Middle Right | ||
| &--shape4 { | ||
| grid-area: 7 / 30 / 12 / 44; | ||
|
|
||
| circle { | ||
| stroke: $c-highlight-blue; | ||
| stroke-width: 0.75; | ||
| } | ||
| } | ||
|
|
||
| // Triangle: Bottom Left | ||
| &--shape5 { | ||
| display: none; | ||
| grid-area: 14 / 6 / 19 / 26; | ||
|
|
||
| path { | ||
| stroke: $c-highlight-green; | ||
| stroke-width: 0.5; | ||
| } | ||
| } | ||
|
|
||
| // Circle: Bottom Right | ||
| &--shape6 { | ||
| display: none; | ||
| grid-area: 13 / 39 / 15 / 44; | ||
|
|
||
| circle { | ||
| stroke: $c-highlight-blue; | ||
| stroke-width: 1.5; | ||
| } | ||
| } | ||
|
|
||
| // Triangle: Bottom Right | ||
| &--shape7 { | ||
| display: none; | ||
| grid-area: 16 / 49 / 19 / 56; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| @media (min-width: 43rem) { | ||
| &__sparkbox-logo { | ||
| &--half { | ||
| display: none; | ||
| } | ||
|
|
||
| &--full { | ||
| display: block; | ||
| margin-bottom: -10rem; | ||
| } | ||
| } | ||
|
|
||
| &__text { | ||
| order: 1; | ||
| width: 90%; | ||
| margin-top: -3.5rem; | ||
|
|
||
| h1 { | ||
| width: 60%; | ||
| font-size: 3.4rem; | ||
| } | ||
|
|
||
| p { | ||
| width: 80%; | ||
| font-size: 1.25rem; | ||
| line-height: 1.8; | ||
| } | ||
| } | ||
|
|
||
| &__art-container { | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| } | ||
|
|
||
| &__grid { | ||
| width: 70%; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 70.25rem) { | ||
| box-sizing: border-box; | ||
|
|
||
| &__sparkbox-logo { | ||
| &--full { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
|
|
||
| &__header-content { | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| &__text { | ||
| width: 100%; | ||
| order: 0; | ||
| margin-top: 2rem; | ||
|
|
||
| h1 { | ||
| font-size: 4.5rem; | ||
| width: 100%; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 1.2rem; | ||
| width: 95%; | ||
| } | ||
| } | ||
|
|
||
| &__art-container { | ||
| justify-content: flex-start; | ||
| margin-top: -7rem; | ||
| } | ||
|
|
||
| &__grid { | ||
| width: 100%; | ||
|
|
||
| img { | ||
| &:nth-child(n + 4) { | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| &--shape5 { | ||
| display: block; | ||
| } | ||
|
|
||
| &--shape6 { | ||
| display: block; | ||
| } | ||
|
|
||
| &--shape7 { | ||
| display: block; | ||
| } | ||
| } | ||
| } | ||
| } |
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,49 @@ | ||
| import React from 'react'; | ||
| import Head from 'next/head'; | ||
| import styles from './index.module.scss'; | ||
| import Footer from '../../components/footer/footer'; | ||
|
|
||
| const ApplyPage = () => ( | ||
| <div className={styles.container}> | ||
| <Head> | ||
| <title>Become a Sparkbox Apprentice</title> | ||
| <link rel="icon" href="/favicon.ico" /> | ||
| </Head> | ||
| <header> | ||
| <div> | ||
| <a href="https://sparkbox.com"> | ||
| <span>Sparkbox</span> | ||
| </a> | ||
| </div> | ||
| </header> | ||
|
|
||
| <main> | ||
| <h1>Ullam Pariatur Rerum Tenetur</h1> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. | ||
| Officia nam impedit rem? | ||
| Dolorum distinctio provident officiis vero, | ||
| sapiente debitis dicta vitae aut perferendis ad, | ||
| eos veritatis iusto harum dolores eligendi fuga, | ||
| omnis culpa quod ut qui porro a sed repudiandae. | ||
| </p> | ||
| <p> | ||
| Ab repellendus, repudiandae amet itaque. | ||
| Quod doloribus dolore sapiente id accusamus in deserunt, | ||
| incidunt facere porro excepturi iste architecto quasi. | ||
| Adipisci expedita quia modi aspernatur. | ||
| Hic pariatur eos voluptatem tenetur natus. | ||
| Necessitatibus inventore vero reiciendis culpa excepturi saepe repudiandae. | ||
| </p> | ||
| <p> | ||
| Alias placeat fuga voluptates, impedit optio labore eius vitae explicabo. | ||
| Tempora exercitationem quis accusantium illo! Doloribus, deleniti! | ||
| Repellendus, voluptatibus ratione laudantium nisi minima dignissimos commodi similique qui. | ||
| </p> | ||
| </main> | ||
|
|
||
| <Footer /> | ||
| </div> | ||
| ); | ||
|
|
||
| export default ApplyPage; |
Empty file.