diff options
| author | sowgro <tpoke.ferrari@gmail.com> | 2025-03-28 19:09:53 -0400 |
|---|---|---|
| committer | sowgro <tpoke.ferrari@gmail.com> | 2025-03-28 19:09:53 -0400 |
| commit | fb4e2bc3eb66ca861eb8393ade21811e4510669a (patch) | |
| tree | 2ea81b40956165d9483c30032c51d6ed16957b07 /ufund-ui/src/app/components/home-page | |
| parent | d6f4aad157baad7d9b25d56ce056b80805e88f5f (diff) | |
| download | JellySolutions-fb4e2bc3eb66ca861eb8393ade21811e4510669a.tar.gz JellySolutions-fb4e2bc3eb66ca861eb8393ade21811e4510669a.tar.bz2 JellySolutions-fb4e2bc3eb66ca861eb8393ade21811e4510669a.zip | |
Start implementation new design
Diffstat (limited to '')
| -rw-r--r-- | ufund-ui/src/app/components/home-page/home-page.component.css | 30 | ||||
| -rw-r--r-- | ufund-ui/src/app/components/home-page/home-page.component.html | 12 |
2 files changed, 40 insertions, 2 deletions
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css index 5f65225..16f3140 100644 --- a/ufund-ui/src/app/components/home-page/home-page.component.css +++ b/ufund-ui/src/app/components/home-page/home-page.component.css @@ -5,3 +5,33 @@ align-items: center; justify-content: center; } + +#hero { + display: flex; + /*flex-direction: column;*/ + /*align-items: start;*/ + /*justify-content: center;*/ +} + +h1 { + font-size: 50px; + max-width: 1200px; +} + +#jf { + /*position: absolute;*/ +} + +#right { + max-width: 500px; + max-height: 500px; + display: flex; + justify-content: center; + align-items: center; + /*z-index: -0.5;*/ +} + +#left { + max-width: 500px; + z-index: 1; +} diff --git a/ufund-ui/src/app/components/home-page/home-page.component.html b/ufund-ui/src/app/components/home-page/home-page.component.html index b2eed0b..7a7ff96 100644 --- a/ufund-ui/src/app/components/home-page/home-page.component.html +++ b/ufund-ui/src/app/components/home-page/home-page.component.html @@ -1,2 +1,10 @@ -<h1>Helping fund coral reef and marine life conservation</h1> -<button routerLink="/cupboard">View needs</button> +<div id="hero"> + <div id="left"> + <h1>Helping fund coral reef and marine life conservation</h1> + <p>View our online cupboard holding all needs related to sea life preservation</p> + <button class="button2" routerLink="/cupboard">View needs</button> + </div> + <div id="right"> + <img id="jf" src="jf.png" height="1024" width="1024"/> + </div> +</div> |