diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/SOS12.iml b/.idea/SOS12.iml new file mode 100644 index 0000000..909438d --- /dev/null +++ b/.idea/SOS12.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..1105265 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,19 @@ + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml new file mode 100644 index 0000000..105ce2d --- /dev/null +++ b/.idea/inspectionProfiles/profiles_settings.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..a971a2c --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..77e0f4e --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e1bdb5d..27f05d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,13 +10,18 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@fontsource/roboto": "^5.0.3", + "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.6", + "@mui/styled-engine-sc": "^5.12.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "react-switch": "^7.0.0", + "styled-components": "^5.3.11", "web-vitals": "^2.1.4" } }, @@ -2419,6 +2424,11 @@ } } }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, "node_modules/@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", @@ -2535,6 +2545,11 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fontsource/roboto": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.3.tgz", + "integrity": "sha512-jbZDFwEFARDlo8TqG7th/xjhuq87GYfFpFb+uxuy+0Ng1bhRVgBRWlLj8+WIKhCTOr+h4QXbjpybLWFLUirOwQ==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz", @@ -3355,6 +3370,31 @@ "url": "https://opencollective.com/mui" } }, + "node_modules/@mui/icons-material": { + "version": "5.11.16", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.11.16.tgz", + "integrity": "sha512-oKkx9z9Kwg40NtcIajF9uOXhxiyTZrrm9nmIJ4UjkU2IdHpd4QVLbCc/5hZN/y0C6qzi2Zlxyr9TGddQx2vx2A==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@mui/material": "^5.0.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/material": { "version": "5.13.6", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.6.tgz", @@ -3461,6 +3501,31 @@ } } }, + "node_modules/@mui/styled-engine-sc": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-5.12.0.tgz", + "integrity": "sha512-3MgYoY2YG5tx0E5oKqvCv94oL0ABVBr+qpcyvciXW/v0wzPG6bXvuZV80GHYlJfasgnnRa1AbRWf5a9FcX8v6g==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/styled-components": "^5.1.14", + "styled-components": "^5.3.1" + }, + "peerDependenciesMeta": { + "@types/styled-components": { + "optional": true + } + } + }, "node_modules/@mui/system": { "version": "5.13.6", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.6.tgz", @@ -5891,6 +5956,21 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", + "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.22.5", + "@babel/helper-module-imports": "^7.22.5", + "@babel/plugin-syntax-jsx": "^7.22.5", + "lodash": "^4.17.21", + "picomatch": "^2.3.1" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, "node_modules/babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -6208,6 +6288,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -6651,6 +6739,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz", @@ -6832,6 +6928,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -15072,6 +15178,18 @@ } } }, + "node_modules/react-switch": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz", + "integrity": "sha512-KkDeW+cozZXI6knDPyUt3KBN1rmhoVYgAdCJqAh7st7tk8YE6N0iR89zjCWO8T8dUTeJGTR0KU+5CHCRMRffiA==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -15810,6 +15928,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -16212,6 +16335,40 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", + "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", diff --git a/package.json b/package.json index d63e0ea..59a92c8 100644 --- a/package.json +++ b/package.json @@ -5,13 +5,18 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@fontsource/roboto": "^5.0.3", + "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.6", + "@mui/styled-engine-sc": "^5.12.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "react-switch": "^7.0.0", + "styled-components": "^5.3.11", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.css b/src/App.css index c6861a0..3e08bfa 100644 --- a/src/App.css +++ b/src/App.css @@ -1,8 +1,236 @@ -/** {*/ -/* background: red;*/ -/*}*/ /*body {*/ -/* background: white;*/ +/* background: black;*/ /* color: white;*/ +/*}*/ + +/*#light {*/ +/* background: white;*/ +/* color: black;*/ +/*}*/ + +.MuiPaper-root.MuiAppBar-root { + background: #161E29; +} + +/* Album layout */ +.MuiPaper-root.MuiAppBar-root h6 { + color: aliceblue; +} + +/* link nav */ +h6.MuiTypography-root.anotherNav { + margin-left: auto; + color: #7DD6F6; + padding-right: 1rem; +} + +h6.MuiTypography-root a { + color: #7DD6F6; + text-decoration: none; +} + +h6.MuiTypography-root a:hover { + color: deepskyblue; + text-decoration: none; +} + +/* header */ +.MuiBox-root { + background: #0A0E1A; +} + +.MuiBox-root h1 { + color: #7DD6F6; +} + +.MuiBox-root h5 { + color: aliceblue; +} + +/* header button */ +#dark .headButton { + background: #5585A4; +} + +#dark .headButton { + background: red; + color: #102b5a; +} + +#dark .headButton:hover { + background: red; +} + +/* card container bg */ +.MuiContainer-root { + background: #0A0E1A; +} + +/* card box bg */ +.MuiPaper-root.MuiCard-root { + background: #2B3E52; +} + +/* footer */ + +footer.MuiBox-root { + background-color: #161E29; +} +h6.MuiTypography-root { + color: #7DD6F6; +} + +p.MuiTypography-root { + color: aliceblue; +} + +/* jode color */ +h2.MuiTypography-root { + color: #7DD6F6; +} + +/* jode link */ +.MuiButton-root a { + color: aliceblue; + text-decoration: none; +} + +.MuiButton-root a:hover { + color: #7DD6F6; + text-decoration: none; +} + +/* checkbox */ +.MuiButtonBase-root.MuiCheckbox-root { + background-color: #2B3E52; + border-radius: 0; +} + +.MuiButtonBase-root.MuiCheckbox-root :hover{ + background-color: #2B3E52; + border-radius: 0; +} + +.MuiSvgIcon-root { + color: #7DD6F6; + display: flex; +} + + +/* -------------------------------------------------------*/ +/* light theme */ + +#light .MuiPaper-root.MuiAppBar-root { + background: #a4c6eb; +} + +/* Album layout */ +#light .MuiPaper-root.MuiAppBar-root h6 { + color: #102b5a; +} + +/* link nav */ +#light h6.MuiTypography-root.anotherNav { + margin-left: auto; + padding-right: 1rem; +} + +#light h6.MuiTypography-root a { + color: #102b5a; + text-decoration: none; +} + +#light h6.MuiTypography-root a:hover { + color: black; + text-decoration: none; +} + +/* header */ +#light .MuiBox-root { + background: #ecf4fe; +} + +/* sos12 */ +#light .MuiBox-root h1 { + color: #102b5a; +} + +/* header paragraph */ +#light .MuiBox-root h5 { + color: #015c92 +} + +/* header button */ +#light .headButton { + background: #A1CFFF; + color: #102b5a; +} + + +#light .headButton :hover { + background: #89BFFB; +} + +/* card container bg */ +#light .MuiContainer-root { + background: #ecf4fe; +} + +/* card box bg */ +#light .MuiPaper-root.MuiCard-root { + background: white; +} + +/* footer */ +#light footer.MuiBox-root { + background-color: #a4c6eb; +} + +#light h6.MuiTypography-root { + color: #102b5a; +} + +#light p.MuiTypography-root { + color: #015c92; +} + +/* jode color */ +#light h2.MuiTypography-root { + color: #102b5a; +} + +/* jode link */ +#light .MuiButton-root a { + color: #102b5a; + text-decoration: none; +} + +#light .MuiButton-root a:hover { + color: #102b5a; + text-decoration: none; +} + +/* checkbox */ +#light .MuiButtonBase-root.MuiCheckbox-root { + background-color: white; + border-radius: 0; +} + +#light .MuiButtonBase-root.MuiCheckbox-root :hover{ + background-color: #2B3E52; + border-radius: 0; +} + +#light .MuiSvgIcon-root { + color: #3598db; + display: flex; +} + +/*Card.MuiCardMedia-root {*/ +/* margin-top: 50px;*/ +/* margin-bottom: 50px;*/ +/* height: auto;*/ +/* width: 400px;*/ +/* padding-top: 56.25%;*/ /*}*/ \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 7d06b69..9f25c79 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -14,8 +14,64 @@ import Typography from '@mui/material/Typography'; import Container from '@mui/material/Container'; import Link from '@mui/material/Link'; import Checkbox from '@mui/material/Checkbox'; +import Switch from '@mui/material/Switch'; +import {styled} from '@mui/material/styles'; +import FormControlLabel from '@mui/material/FormControlLabel'; import {createTheme, ThemeProvider} from '@mui/material/styles'; import cards from './Card'; +import {createContext, useState} from "react"; + + +export const ThemeContext = createContext(null); + +// switch theme button --------------------------------------------------------------- +const MaterialUISwitch = styled(Switch)(({theme}) => ({ + width: 62, + height: 34, + padding: 7, + '& .MuiSwitch-switchBase': { + margin: 1, + padding: 0, + transform: 'translateX(6px)', + '&.Mui-checked': { + color: '#fff', + transform: 'translateX(22px)', + '& .MuiSwitch-thumb:before': { + backgroundImage: `url('data:image/svg+xml;utf8,')`, + }, + '& + .MuiSwitch-track': { + opacity: 1, + backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : 'white', + }, + }, + }, + '& .MuiSwitch-thumb': { + backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#7892B5', + width: 32, + height: 32, + '&:before': { + content: "''", + position: 'absolute', + width: '100%', + height: '100%', + left: 0, + top: 0, + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + backgroundImage: `url('data:image/svg+xml;utf8,')`, + }, + }, + '& .MuiSwitch-track': { + opacity: 1, + backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be', + borderRadius: 20 / 2, + }, +})); +// switch theme button ---------------------------------------------------------------- function Copyright() { return ( @@ -33,139 +89,139 @@ function Copyright() { const defaultTheme = createTheme(); export default function App() { + + const [theme, setTheme] = useState('light'); + + const toggleTheme = () => { + setTheme(theme === 'light' ? 'dark' : 'light'); + } + return ( - - - - - - Album layout - +
+ - - Another Nav - + + - - -
- {/* Hero unit */} - - - - SOS12 - - - Something short and leading about the collection below—its contents, - the creator, etc. Make it short and sweet, but not too short so folks - don't simply skip over it entirely. - - - - - - - - - {/* End hero unit */} - + + + + SOS12 Problems Collection + - {/*# TODO:Edit the Jode here */} - {cards.map((card) => ( - - + Another Nav + + } + label="" + onChange={toggleTheme} + checked={theme === 'dark'} + /> + + + + +
+ {/* Hero unit */} + + + - - - - {card.title} - - - {card.describe} - - - - - - - - - ))} + SOS12 + + + Welcome to the 12th SOS camp, a preparation camp for SKE21 students. + We hope that students will definitely gain knowledge + and enjoyment. + + + + + + + + + {/* End hero unit */} + - - -
- {/* Footer */} - - - Footer - - - Something here to give the footer a purpose! - - - - {/* End footer */} - + {/*# TODO:Edit the Jode here */} + {cards.map((card) => ( + + {/*jode*/} + + + + + + {card.title} + + + {card.describe} + + + + + + + + + ))} + + + +
+ {/* Footer */} + + + Footer + + + Something here to give the footer a purpose! + + + + {/* End footer */} + + + +
); } \ No newline at end of file diff --git a/src/Card.jsx b/src/Card.jsx index 3acda22..46f36be 100644 --- a/src/Card.jsx +++ b/src/Card.jsx @@ -2,107 +2,131 @@ const cards = [ { 'title': 'Syntax', 'describe': 'Mai tum leaw', - 'link': 'https://elabsheet.org/elab/taskpads/show/jr070sqaqp/' + 'link': 'https://elabsheet.org/elab/taskpads/show/jr070sqaqp/', + 'img': './images/syntax.jpeg' }, { 'title': 'Variables', 'describe': 'Mai tum leaw', - 'link': 'https://elabsheet.org/elab/taskpads/change/jr070sqaqp/yqxiczozva/' + 'link': 'https://elabsheet.org/elab/taskpads/change/jr070sqaqp/yqxiczozva/', + 'img': './images/syntax.jpeg' }, { 'title': 'Data Type 01', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'Data Type 02', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'Data Type 03', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'Numbers, Casting, String', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'Strings', 'describe': 'Mai tum leaw', - 'link': 'https://elabsheet.org/elab/taskpads/change/4k422fwoou/v49ajp3qgh/' + 'link': 'https://elabsheet.org/elab/taskpads/change/4k422fwoou/v49ajp3qgh/', + 'img': './images/syntax.jpeg' }, { 'title': 'Boolean 01', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'Boolean 02', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'Operators 01', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'Operators 02', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'Lists', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'Tuples', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'Sets', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'Dictionaries', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'If Else 01', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'If Else 02', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'If Else 03', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' }, { 'title': 'While Loops', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' + }, { 'title': 'For Loops', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' + }, { 'title': 'Functions', 'describe': 'Mai tum leaw', - 'link': 'www.' + 'link': 'www.', + 'img': './images/syntax.jpeg' + } ] diff --git a/src/images/syntax.jpeg b/src/images/syntax.jpeg new file mode 100644 index 0000000..2180692 Binary files /dev/null and b/src/images/syntax.jpeg differ diff --git a/src/index.css b/src/index.css index e3c32fb..43a956b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,8 @@ body { background: black; color: white; -} \ No newline at end of file +} + + + +