diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 4d29575..0000000 --- a/.gitignore +++ /dev/null @@ -1,23 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* diff --git a/index.html b/index.html new file mode 100644 index 0000000..4b31898 --- /dev/null +++ b/index.html @@ -0,0 +1,188 @@ + + + + + + + + + + + + + CodeYourFuture + + + +
+ + CodeYourFuture Logo + +

Welcome to CYF Labs

+
+ +
+
+

+ + CodeYourFuture graduates will work wonders for your organisation. +

+
+

CodeYourFuture graduates have the following work-ready skills:

+
+ +
+ +

About Our Trainees

+ +
+
+
+
+ + + + +

+ 40 + % +

+
+

Female

+
+ +
+
+ + + + +

+ 78 + % +

+
+

Minority Ethnic background

+
+ +
+
+ + + + +

+ 53 + % +

+
+

Refugee / Asylum Seeker background

+
+ +
+
+ + + + +

+ 83 + % +

+
+

Live below the poverty line

+
+
+
+ +
+

+ To complete our + + Software Development Programme + + , a CodeYourFuture graduate spends approximately + 800 hours developing their technical and + employability skills. +

+

+ We'd love to have a conversation about how we can meet your hiring + needs. +

+

+ Please email us at + contact@codeyourfuture.io +

+
+
+ + + + diff --git a/public/logo.svg b/logo.svg similarity index 97% rename from public/logo.svg rename to logo.svg index 22c0ce0..cb0eb14 100644 --- a/public/logo.svg +++ b/logo.svg @@ -1,10 +1,6 @@ - - - - - - - - - - React App - - - -
- - - diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 080d6c7..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index e9e57dc..0000000 --- a/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 2e3f686..0000000 --- a/src/App.js +++ /dev/null @@ -1,37 +0,0 @@ -import "./App.css"; -import Header from "./components/Header"; -import Trainee from "./components/Trainee"; -import Skills from "./components/Skills"; -import Footer from "./components/Footer"; -import Program from "./components/Program"; - -function App() { - return ( -
-
-
- -

CodeYourFuture graduates have the following work-ready skills:

- -

About Our Trainees

- -
-
- - - - -
-
- -
-

We'd love to have a conversation about how we can meet your hiring needs.

-

Please email us at contact@codeyourfuture.io

-
-
-
- ); -} - -export default App; diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx deleted file mode 100644 index 9f2084b..0000000 --- a/src/components/Footer.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import "../App.css"; - -const Footer = () => { - return ( - - ); -}; - -export default Footer; diff --git a/src/components/Header.jsx b/src/components/Header.jsx deleted file mode 100644 index 88bc4c6..0000000 --- a/src/components/Header.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import "../App.css"; - -const Header = () => { - return ( -
- CodeYourFuture Logo -

Welcome to CYF Labs

-
- ); -}; - -export default Header; diff --git a/src/components/Program.jsx b/src/components/Program.jsx deleted file mode 100644 index 10d812b..0000000 --- a/src/components/Program.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import "../App.css"; - -const Program = () => { - return ( -
-

CodeYourFuture graduates will work wonders for your organisation.

-

- To complete our{" "} - - Software Development Programme - - , a CodeYourFuture graduate spends approximately - 800 hours developing their technical and employability - skills. -

-
- ); -}; - -export default Program; diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx deleted file mode 100644 index 2dbe722..0000000 --- a/src/components/Skills.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import "../App.css"; - -const Skills = () => { - return ( -
- -
- ); -}; - -export default Skills; diff --git a/src/components/Trainee.jsx b/src/components/Trainee.jsx deleted file mode 100644 index 5ab3f88..0000000 --- a/src/components/Trainee.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import "../App.css"; - -const Trainee = ({ text, percent }) => { - return ( -
-
- - - - -

- {percent} - % -

-
-

{text}

-
- ); -}; - -export default Trainee; diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 5851d84..0000000 --- a/src/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import App from './App'; - -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render( - - - -); \ No newline at end of file diff --git a/src/App.css b/style.css similarity index 63% rename from src/App.css rename to style.css index 879eb80..d08acb1 100644 --- a/src/App.css +++ b/style.css @@ -1,17 +1,33 @@ +:root { + --dark-red: #dd0303; + --red: #ff0000; + --dark-gray: #2f363e; + --light-gray: #f7f7f7; + --gray: #f0f0f0; + --white: #fff; + --black: #000; + --shadow: rgba(0, 0, 0, 0.1); +} + * { margin: 0; padding: 0; box-sizing: border-box; + font-family: "Raleway", "Roboto", "Open Sans", sans-serif; + line-height: 1.5; } a { - color: #000; + color: var(--black); text-decoration: none; - border-bottom: 1px solid #dd0303; +} + +.red-link { + border-bottom: 1px solid var(--dark-red); } .skills strong { - color: #dd0303; + color: var(--dark-red); } p, @@ -25,70 +41,77 @@ section { } h2 { + font-size: 2rem; margin-bottom: 20px; } -/* ----------App.js---------- */ +/* ----------cyf---------- */ -.App { - background-color: #f0f0f0; +body { + background-color: var(--gray); min-height: 100vh; + min-width: 300px; } -.App .cyf { - background-color: #fff; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +.cyf { + background-color: var(--white); + box-shadow: 0 2px 4px var(--shadow); border-radius: 5px; - margin-top: 20px; - padding: 20px; + margin-top: 1rem; + padding: 1rem; } -.App .cyf .about-trainees { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - background-color: #2f363e; - color: #fff; - border-radius: 8px; - padding-bottom: 50px; -} - -.App .cyf .about-trainees figure { - display: grid; - grid-template-columns: 1fr; - gap: 20px; -} - -/* ----------Header.jsx---------- */ +/* ----------Header---------- */ .header { display: flex; flex-direction: column; align-items: center; + padding: 0 1rem; } .header h1 { flex-grow: 0.75; + font-size: 2rem; text-align: center; } -/* ----------Skills.jsx---------- */ +/* ----------Skills---------- */ .skills { - background-color: #f7f7f7; + background-color: var(--light-gray); padding: 20px; border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 8px var(--shadow); } .skills ul { margin-left: 20px; } -/* ----------Trainee.jsx---------- */ +/* ----------Trainee---------- */ + +.cyf .about-trainees { + box-shadow: 0 2px 8px var(--shadow); + color: var(--white); + border-radius: 8px; +} + +.cyf .about-trainees figure { + display: grid; + grid-template-columns: 1fr; + gap: 20px; +} .trainee { + background-color: var(--dark-gray); + color: var(--white); display: flex; flex-direction: column; - margin: auto; + padding-bottom: 50px; + border-radius: 8px; + height: 350px; + margin: 1rem auto; } .trainee .percent { @@ -117,7 +140,7 @@ h2 { } .trainee .percent svg circle:nth-child(2) { - stroke: #ff0000; + stroke: var(--red); } .trainee .percent svg .Female { @@ -143,6 +166,7 @@ h2 { top: 100%; left: 100%; transform: translate(-50%, -50%); + display: flex; align-items: center; } @@ -158,7 +182,7 @@ h2 { padding-top: 100px; } -/* ----------Footer.jsx---------- */ +/* ----------Footer---------- */ .footer { text-align: center; @@ -171,22 +195,23 @@ h2 { /* ----------Media Query---------- */ -@media screen and (min-width: 665px) and (max-width: 1120px) { - .App { - padding: 0 20px; +@media screen and (min-width: 765px) and (max-width: 1120px) { + body { + padding: 0 3rem; } - .header { - flex-direction: row; + + .cyf { + padding: 0 1rem; } - .App .cyf .about-trainees figure { + .cyf .about-trainees figure { grid-template-columns: repeat(2, 1fr); gap: 0; } } @media screen and (min-width: 1120px) { - .App { + .cyf { padding: 0 3rem; } @@ -194,18 +219,14 @@ h2 { flex-direction: row; } - .App .cyf { - padding: 2rem; - } - - .App .cyf .about-trainees figure { + .cyf .about-trainees figure { grid-template-columns: repeat(3, 1fr); gap: 0; } } @media screen and (min-width: 1330px) { - .App { + .cyf { padding: 0 3rem; } @@ -213,11 +234,11 @@ h2 { flex-direction: row; } - .App .cyf { + .cyf { padding: 2rem; } - .App .cyf .about-trainees figure { + .cyf .about-trainees figure { grid-template-columns: repeat(4, 1fr); gap: 0px; }