diff options
Diffstat (limited to 'ufund-ui/src/app/components')
3 files changed, 46 insertions, 4 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> diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css index 4bfcbb8..b56b4eb 100644 --- a/ufund-ui/src/app/components/login/login.component.css +++ b/ufund-ui/src/app/components/login/login.component.css @@ -3,7 +3,11 @@ align-items: center; justify-content: center; height: 100%; - background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg"); + /*background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");*/ + background: rgba(0, 0, 0, .65) url("https://4kwallpapers.com/images/wallpapers/blue-jellyfish-aquarium-underwater-glowing-marine-life-1920x1080-3546.jpg"); + background-blend-mode: darken; + margin-top: -66px + } #box { @@ -18,7 +22,7 @@ border-radius: 5px; border-style: solid; border-width: 1px; - border-color: white; + border-color: rgb(140, 140, 255); } .border { |