diff --git a/frontend/img/background.jpg b/frontend/img/background.jpg new file mode 100644 index 0000000..c179474 Binary files /dev/null and b/frontend/img/background.jpg differ diff --git a/frontend/img/background2.jpg b/frontend/img/background2.jpg new file mode 100644 index 0000000..9f343f8 Binary files /dev/null and b/frontend/img/background2.jpg differ diff --git a/frontend/index.html b/frontend/index.html index 21d8d3a..271d790 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1 +1,25 @@ - + + + + + Temperature Alarm + + + +
+
+

Temperature Alarm

+ + +
+
+ + + diff --git a/frontend/styles/frontpage.css b/frontend/styles/frontpage.css new file mode 100644 index 0000000..3de40fe --- /dev/null +++ b/frontend/styles/frontpage.css @@ -0,0 +1,60 @@ +body { + margin: 0; + font-family: sans-serif; +} + +main { + width: 100vw; + height: 100vh; + background-image: url("/img/background2.jpg"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-color: rgba(255, 255, 255, 0.5); +} + +h1 { + margin: 0; + font-size: 4rem; + text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); +} + +#title { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +#buttons-wrapper { + display: flex; + justify-content: center; + gap: 2rem; + margin-top: 2rem; +} + +button { + border-radius: 4px; + padding: 1rem 2rem; + cursor: pointer; + transition-duration: 100ms; +} + +button:hover { + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); +} + +button:active { + filter: brightness(0.9); +} + +button.secondary { + background-color: white; + border: 1px solid #04aa6d; +} + +button.primary { + background-color: #04aa6d; + border: none; +} +