From 3bfd68baeaab24eb50736121921074b1d78a20fd Mon Sep 17 00:00:00 2001 From: turtle96 Date: Sat, 31 Oct 2020 23:11:18 +0800 Subject: [PATCH 1/6] git ignore /.idea --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) 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 From 25417b0d04f1c7c91699d0bc4cac0ef8d881a285 Mon Sep 17 00:00:00 2001 From: turtle96 Date: Sat, 31 Oct 2020 23:22:39 +0800 Subject: [PATCH 2/6] change ico to logo --- public/favicon.ico | Bin 3150 -> 4286 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/public/favicon.ico b/public/favicon.ico index bcd5dfd67cd0361b78123e95c2dd96031f27f743..1317086a9dd6bd2265c18d6d31941afd1266a2cf 100644 GIT binary patch literal 4286 zcmbuCd2m!!7KdL*m6@?hGgD)>Uf$C0^^#6^I-NZXS%3sd8qx`50FfxND2oQO08$tf z90)UtmSKsE14M#Dm_JZZ%NQUK2t_HNBSE1g1850kfs!plGD-S3=XRzuW7`d+xm~Ak zzq_38+;h)8_cg}_(MJ?H_RZD*hU3CHjx&)^6PHE8+TDfv_C7KwgAI5876qBpN%|4I zRvK?Kn7dL_evbzgbF>u#uUo)$`zr$DigK_@BPa8`Ttj1jsH$3v^XJc_t*tF!Id`rN zGoPM?$O!d(e|*+X@@tJ&UXp52I&uHWCWh#8{|*t%`|1EFu;yosHEtH-#U@!eXDxLgvIV1N85wQNl?E0+!~G2*i_ zJ@RwM;nL;H0rOj1Ph-|IbNUt8cqA%PGnu#{wEsT0p4k+slIPCO)}v#c2`}aAuyWO! zfY}EQG+}gB_6=2(_BFMN46sAl-sP%|`;_@85p_X{n<+ zA|o_2*ctM-W{)w9EeH}9sn*S%mZ9L|MS2wEJ&ul!&SCT0D9$s|vq0-@rC3`M5w03T z>wh#nEXwEl-E3ascwVsSMDvLRa}4H=mGJz6h3N0^A2z?ey#w#nZpZrd8?kihGCDsK zyJekWAK8%cRPoGT*ueP2{;f_lG&ob&z?r%l5-(xhx;KZ-_MYH!xzN?sg?HZh3+!=; z7s-Y!%4a{bf$=q3wKLgV*t6XEJzkpFhImsR>g(&h)dl>_?AW~dU63Cd*+ zIxe9Mt0w(~6$S0cuot7T@w0$=z9x2bbRc)U<0i#Hh7bPKk=7^rDhn>-W#=WN$4|qN zmcU})7n`*W3=E*8{c7@nE zKF_~KepnLa4^}*=d)8buH2m*;vio&WN$Jo&urX)OoNfBvQz zKMB_AzaxHE3*?bwAxipxh+0v7KR(cEd1ix6mQ0Pd=#0KOv*+Q?ojYzmJ4Y@!fal(A<0&8#ipi)G1H6jIjx@y#5~S?;nCP#(~&3>X3T27v_>z zA*zK_q+4?@A9(g5B3%72{pV?JYC4GH$4^i$d>@l1Pr;^*HP}nJBqw|Pt(4@n^U)^D zF?y%o9L4@q=!~D}bBq41jLJsrpKIN0>mN5mpY4P`$LSI^VmagA%Ldj@cNFoX5AEBx zAG>#dfaji_j}5fWZQE**oSfE9cgT##eixyp`Voy<7$K;6j`W98ti2#9(f>3rS_#YY zx1b+ah=jdgB5unkkYrOUjnUo@zqG7^qjgnRR=(o)^QUwdmA+Vp7<245luPns%r>8S zOc$HP?1&M0sa6z~?wE=-NIH5M(X-1TMcZ5=uUkz0clCkCN0c+{CS%O!Nr|Z!O-A!E zRTRI9a;W0jBTvkD*Y2~Xm3~F6DUvzvq%v}>%iw$xwzqddXGu6sKH~4k2ekh|#0#VM zC7#};AEp0ILHEjI9$T1x{;_aQQ1Kdy{k3vZdZ(qb8v4fz2k7~!d+|Mb9<*j0Nj3%( zGgp)hUrG9ycJfP>hYyYm?kDLXxjrZ%R0|}TtiH%`p@%pwge3Sb!umrl4$gapYBtwB cpY#f(KXg#U5LZx7h%2N&*cFOkI@quM2eiR@Hvj+t literal 3150 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 MDeX2GIKR{Qf5okjU;qFB From e8860b2bc12fca825d50da4c6ba9dfb9238aa126 Mon Sep 17 00:00:00 2001 From: turtle96 Date: Sat, 31 Oct 2020 23:42:33 +0800 Subject: [PATCH 3/6] input basic colour palette --- src/App.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/App.scss b/src/App.scss index 0ae36bb..7e78f81 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,3 +2,10 @@ @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; From d06a572ad85fc4852444fba81baf69e4df8d872e Mon Sep 17 00:00:00 2001 From: turtle96 Date: Sun, 1 Nov 2020 00:44:30 +0800 Subject: [PATCH 4/6] add general layout --- public/images/family.svg | 1 + public/images/grow.svg | 1 + public/images/home.svg | 1 + public/images/sunbed.svg | 73 +++++++++++++++++++++++++++++++++++++++ public/images/unicorn.svg | 1 + public/index.html | 46 ++++++++++++------------ src/App.js | 54 ++++++++++++++++++++++++++--- src/App.scss | 14 ++++++++ 8 files changed, 164 insertions(+), 27 deletions(-) create mode 100644 public/images/family.svg create mode 100644 public/images/grow.svg create mode 100644 public/images/home.svg create mode 100644 public/images/sunbed.svg create mode 100644 public/images/unicorn.svg 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..535fe61 100644 --- a/src/App.js +++ b/src/App.js @@ -2,10 +2,56 @@ import React from "react"; import "./App.scss"; function App() { - return ( -
-
- ); + return ( +
+
+
+
+ +

+ calc.sg +

+

+ insert subtitle here +

+
+
+
+ {HomepageLayout()} +
+ ); +} + +function HomepageLayout() { + return ( +
+
+
+ {HomepageBox("home", "Housing")} + {HomepageBox("grow", "Financial Independence")} +
+
+
+
+ {HomepageBox("family", "Family")} + {HomepageBox("sunbed", "Luxury")} +
+
+
+ ); +} + +function HomepageBox(icon, label, link) { + return ( + + ); } export default App; diff --git a/src/App.scss b/src/App.scss index 7e78f81..30b1dae 100644 --- a/src/App.scss +++ b/src/App.scss @@ -9,3 +9,17 @@ $pink-two: #f47391; $blue-two: #7196d1; $yellow: #fec761; $black: #0d0809; + +.logo { + margin-bottom: 0.5rem; +} + +.homepage-box { + text-align: center; +} + +.homepage-box img { + width: 8rem; + height: 8rem; + margin: 0 auto; +} \ No newline at end of file From c855daa554e97f2988bb43149480e8fb39f7968b Mon Sep 17 00:00:00 2001 From: turtle96 Date: Sun, 1 Nov 2020 01:44:59 +0800 Subject: [PATCH 5/6] refine layout --- src/App.js | 29 ++++++++++++++----------- src/App.scss | 61 +++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 72 insertions(+), 18 deletions(-) diff --git a/src/App.js b/src/App.js index 535fe61..c4c667e 100644 --- a/src/App.js +++ b/src/App.js @@ -4,7 +4,7 @@ import "./App.scss"; function App() { return (
-
+
@@ -17,7 +17,10 @@ function App() {
- {HomepageLayout()} +
+ {HomepageLayout()} +
+
insert footer stuff here
); } @@ -26,28 +29,28 @@ function HomepageLayout() { return (
-
- {HomepageBox("home", "Housing")} - {HomepageBox("grow", "Financial Independence")} -
+
+ {HomepageTile("home", "Housing", "", "blue-one")} + {HomepageTile("grow", "Financial Independence", "", "pink-two")} +
-
- {HomepageBox("family", "Family")} - {HomepageBox("sunbed", "Luxury")} -
+
+ {HomepageTile("family", "Family", "", "yellow")} + {HomepageTile("sunbed", "Luxury", "", "blue-two")} +
); } -function HomepageBox(icon, label, link) { +function HomepageTile(icon, label, link, colour) { return (
- diff --git a/src/App.scss b/src/App.scss index 30b1dae..3f226dd 100644 --- a/src/App.scss +++ b/src/App.scss @@ -10,16 +10,67 @@ $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-box { +.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; } -.homepage-box img { - width: 8rem; - height: 8rem; - margin: 0 auto; +.bg-yellow { + background-color: $yellow; } \ No newline at end of file From c05f5cb0798de49220e41fbc84804a4290edd2a9 Mon Sep 17 00:00:00 2001 From: turtle96 Date: Sun, 1 Nov 2020 01:51:41 +0800 Subject: [PATCH 6/6] alternate layout (p.s. code needs cleanup) --- src/App.js | 36 +++++++++++++++++++++--------------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/src/App.js b/src/App.js index c4c667e..3544389 100644 --- a/src/App.js +++ b/src/App.js @@ -4,21 +4,27 @@ import "./App.scss"; function App() { return (
-
-
-
- -

- calc.sg -

-

- insert subtitle here -

+
+
+
+
+
+
+ +

+ calc.sg +

+

+ insert subtitle here +

+
+
+
+
+
+ {HomepageLayout()}
-
-
- {HomepageLayout()}
insert footer stuff here
@@ -29,13 +35,13 @@ function HomepageLayout() { return (
-
+ {/*
*/} {HomepageTile("home", "Housing", "", "blue-one")} {HomepageTile("grow", "Financial Independence", "", "pink-two")}
-
+ {/*
*/} {HomepageTile("family", "Family", "", "yellow")} {HomepageTile("sunbed", "Luxury", "", "blue-two")}