diff --git a/.gitignore b/.gitignore index 4d29575..5339fb1 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +/.idea \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico index bcd5dfd..1317086 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/images/family.svg b/public/images/family.svg new file mode 100644 index 0000000..a514964 --- /dev/null +++ b/public/images/family.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/grow.svg b/public/images/grow.svg new file mode 100644 index 0000000..672114a --- /dev/null +++ b/public/images/grow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/home.svg b/public/images/home.svg new file mode 100644 index 0000000..ddcc84c --- /dev/null +++ b/public/images/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/sunbed.svg b/public/images/sunbed.svg new file mode 100644 index 0000000..af1ad95 --- /dev/null +++ b/public/images/sunbed.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/unicorn.svg b/public/images/unicorn.svg new file mode 100644 index 0000000..b448271 --- /dev/null +++ b/public/images/unicorn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 520ff6d..8047ec8 100644 --- a/public/index.html +++ b/public/index.html @@ -1,20 +1,20 @@ - - - - - + + + + + - + - + - React App - - - -
- - + To begin the development, run `npm start` or `yarn start`. + To create a production bundle, use `npm run build` or `yarn build`. +--> + diff --git a/src/App.js b/src/App.js index 3ed45a0..3544389 100644 --- a/src/App.js +++ b/src/App.js @@ -2,10 +2,65 @@ import React from "react"; import "./App.scss"; function App() { - return ( -
-
- ); + return ( +
+
+
+
+
+
+
+ +

+ calc.sg +

+

+ insert subtitle here +

+
+
+
+
+
+ {HomepageLayout()} +
+
+
+ +
+ ); +} + +function HomepageLayout() { + return ( +
+
+ {/*
*/} + {HomepageTile("home", "Housing", "", "blue-one")} + {HomepageTile("grow", "Financial Independence", "", "pink-two")} +
+
+
+ {/*
*/} + {HomepageTile("family", "Family", "", "yellow")} + {HomepageTile("sunbed", "Luxury", "", "blue-two")} +
+
+
+ ); +} + +function HomepageTile(icon, label, link, colour) { + return ( +
+ +
+ {label}/ +

{label}

+
+ +
+ ); } export default App; diff --git a/src/App.scss b/src/App.scss index 0ae36bb..3f226dd 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,3 +2,75 @@ @import "~@fortawesome/fontawesome-free/scss/fontawesome.scss"; @import "~@fortawesome/fontawesome-free/scss/regular.scss"; @import "~@fortawesome/fontawesome-free/scss/solid.scss"; + +$pink-one: #fb95ae; +$blue-one: #70b1d2; +$pink-two: #f47391; +$blue-two: #7196d1; +$yellow: #fec761; +$black: #0d0809; + +a, a:hover, a:focus, a:active { + text-decoration: none; + color: inherit; +} + +.header { + //background-color: $pink-one; + //margin-bottom: 3rem; +} + +.logo { + margin-bottom: 0.5rem; +} + +.homepage-tile { + transition: all 0.3s ease; + border-radius: 6px; + text-align: center; + padding: 2rem; + + p { + font-size: 1.2rem; + margin-top: 1rem; + color: $black; + } + + img { + width: 8rem; + height: 8rem; + margin: 0 auto; + } +} + +.homepage-tile:hover { + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + + p { + color: floralwhite; + } +} + +.footer { + text-align: center; + margin-top: 3rem; + padding: 3rem; +} + +.bg-blue-one { + background-color: $blue-one; +} + +.bg-pink-two { + background-color: $pink-two; +} + +.bg-blue-two { + background-color: $blue-two; +} + +.bg-yellow { + background-color: $yellow; +} \ No newline at end of file