diff --git a/client/public/index.html b/client/public/index.html
index aa069f2..4b73f3a 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -24,6 +24,8 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
+
+
React App
diff --git a/client/src/App.tsx b/client/src/App.tsx
index bede25d..ec52781 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -21,7 +21,7 @@ const App = (): JSX.Element => {
-
+
diff --git a/client/src/components/Apps/AppCard/AppCard.module.css b/client/src/components/Apps/AppCard/AppCard.module.css
new file mode 100644
index 0000000..ae5e808
--- /dev/null
+++ b/client/src/components/Apps/AppCard/AppCard.module.css
@@ -0,0 +1,34 @@
+.AppCard {
+ width: 100%;
+ /* height: 50px; */
+ /* max-width: 150px; */
+ /* border: 1px solid red; */
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+.AppCardIcon {
+ width: 40px;
+}
+
+.AppCardDetails {
+ text-transform: uppercase;
+ /* display: flex;
+ flex-direction: column;
+ justify-content: center; */
+}
+
+.AppCardDetails h5 {
+ font-size: 1em;
+ font-weight: 500;
+ color: var(--color-primary);
+ margin-bottom: -8px;
+}
+
+.AppCardDetails a {
+ color: var(--color-accent);
+ font-weight: 400;
+ font-size: 0.8em;
+ opacity: 1;
+}
\ No newline at end of file
diff --git a/client/src/components/Apps/AppCard/AppCard.tsx b/client/src/components/Apps/AppCard/AppCard.tsx
new file mode 100644
index 0000000..ec4518a
--- /dev/null
+++ b/client/src/components/Apps/AppCard/AppCard.tsx
@@ -0,0 +1,18 @@
+import classes from './AppCard.module.css';
+import Icon from '../../UI/Icon/Icon';
+
+const AppCard = (): JSX.Element => {
+ return (
+
+ )
+}
+
+export default AppCard;
\ No newline at end of file
diff --git a/client/src/components/Apps/Apps.module.css b/client/src/components/Apps/Apps.module.css
index e69de29..302fb5b 100644
--- a/client/src/components/Apps/Apps.module.css
+++ b/client/src/components/Apps/Apps.module.css
@@ -0,0 +1,28 @@
+.Apps {
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+}
+
+@media (min-width: 430px) {
+ .Apps {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 670px) {
+ .Apps {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+@media (min-width: 900px) {
+ .Apps {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+/* 320px — 480px: Mobile devices.
+481px — 768px: iPads, Tablets.
+769px — 1024px: Small screens, laptops.
+1025px — 1200px: Desktops, large screens.
+1201px and more — Extra large screens, TV. */
\ No newline at end of file
diff --git a/client/src/components/Apps/Apps.tsx b/client/src/components/Apps/Apps.tsx
index a8d16da..8084b25 100644
--- a/client/src/components/Apps/Apps.tsx
+++ b/client/src/components/Apps/Apps.tsx
@@ -1,16 +1,31 @@
-import { Link } from 'react-router-dom';
+import { Fragment } from 'react';
import classes from './Apps.module.css';
import { Container } from '../UI/Layout/Layout';
-import Headline from '../UI/Headline/Headline';
+import Headline from '../UI/Headlines/Headline/Headline';
+import AppCard from './AppCard/AppCard';
const Apps = (): JSX.Element => {
return (
-
-
- settings
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{props.title}
+ {props.title}
{props.subtitle && {props.subtitle}
}
)
diff --git a/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.module.css b/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.module.css
new file mode 100644
index 0000000..357fdbd
--- /dev/null
+++ b/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.module.css
@@ -0,0 +1,7 @@
+.SectionHeadline {
+ text-transform: uppercase;
+ color: var(--color-primary);
+ font-weight: 900;
+ font-size: 20px;
+ margin-bottom: 16px;
+}
\ No newline at end of file
diff --git a/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx b/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx
new file mode 100644
index 0000000..5b9a7bd
--- /dev/null
+++ b/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx
@@ -0,0 +1,13 @@
+import classes from './SectionHeadline.module.css';
+
+interface ComponentProps {
+ title: string;
+}
+
+const SectionHeadline = (props: ComponentProps): JSX.Element => {
+ return (
+ {props.title}
+ )
+}
+
+export default SectionHeadline;
\ No newline at end of file
diff --git a/client/src/components/UI/Layout/Layout.module.css b/client/src/components/UI/Layout/Layout.module.css
index 0688765..6ad351e 100644
--- a/client/src/components/UI/Layout/Layout.module.css
+++ b/client/src/components/UI/Layout/Layout.module.css
@@ -1,4 +1,22 @@
.Container {
width: 100%;
- padding: var(--space-p-x);
+ padding: 20px;
+}
+
+/* 320px — 480px: Mobile devices.
+481px — 768px: iPads, Tablets.
+769px — 1024px: Small screens, laptops.
+1025px — 1200px: Desktops, large screens.
+1201px and more — Extra large screens, TV. */
+
+@media (min-width: 769px) {
+ .Container {
+ padding: 25px 40px;
+ }
+}
+
+@media (min-width: 1201px) {
+ .Container {
+ padding: 50px 250px;
+ }
}
\ No newline at end of file
diff --git a/client/src/index.css b/client/src/index.css
index 4c67514..a08e967 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -2,6 +2,8 @@
margin: 0;
padding: 0;
box-sizing: border-box;
+ transition: all 0.3s;
+ user-select: none;
}
body {
@@ -9,8 +11,26 @@ body {
--color-primary: #EFF1FC;
--color-accent: #6677EB;
- --space-p-x: 16px;
-
background-color: var(--color-background);
+ /* font weights
+ light 300
+ regular 400
+ semi-bold 600
+ bold 700
+ extra-bold 800
+ */
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif;
-}
\ No newline at end of file
+ font-size: 14px;
+}
+
+a {
+ color: var(--color-primary);
+ text-decoration: none;
+ opacity: 0.75;
+}
+
+/* 320px — 480px: Mobile devices.
+481px — 768px: iPads, Tablets.
+769px — 1024px: Small screens, laptops.
+1025px — 1200px: Desktops, large screens.
+1201px and more — Extra large screens, TV. */
\ No newline at end of file