From 625c6ced9b4c38d773bc6c1b3c7b07797bcbb799 Mon Sep 17 00:00:00 2001
From: cuqmbr <dr.juniorf@gmail.com>
Date: Mon, 4 Apr 2022 19:28:27 +0300
Subject: [PATCH] feat: add home page design

---
 TicketOffice/Pages/Index.cshtml    | 15 ++++++-
 TicketOffice/wwwroot/css/Index.css | 67 ++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 TicketOffice/wwwroot/css/Index.css

diff --git a/TicketOffice/Pages/Index.cshtml b/TicketOffice/Pages/Index.cshtml
index 50fa2cc..76e49c8 100644
--- a/TicketOffice/Pages/Index.cshtml
+++ b/TicketOffice/Pages/Index.cshtml
@@ -1,6 +1,19 @@
 @page
 @model TicketOffice.Pages.IndexModel
 @{
-    ViewData["Title"] = "Home page";
+    ViewData["Title"] = "Головна";
 }
 
+<link rel="stylesheet" href="~/css/Index.css"/>
+
+<div class="background">
+    <div class="background-shadow"></div>
+    <div class="title-block">
+        <div class="title-header">
+            auto.bus - пошук автобусніх рейсів
+        </div>
+        <div class="title-footer">
+            <a class="link-btn" href="/Routes">Знайти рейс</a>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/TicketOffice/wwwroot/css/Index.css b/TicketOffice/wwwroot/css/Index.css
new file mode 100644
index 0000000..9d53808
--- /dev/null
+++ b/TicketOffice/wwwroot/css/Index.css
@@ -0,0 +1,67 @@
+html {
+    font-size: 16px;
+    min-height: 100%;
+    font-family: 'Roboto', sans-serif;
+    background-color: #eaeef1;
+}
+
+body {
+    margin: 0;
+    background-color: black;
+}
+
+div.background {
+    background-image: url("https://tinyurl.com/24kx479s");
+    height: calc(100vh - 3.15rem);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: -2;
+}
+
+div.background-shadow {
+    height: 100%;
+    width: 100%;
+    
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: -1;
+}
+
+div.title-block {
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    
+    text-align: center;
+}
+
+div.title-header {
+    color: white;
+    font-size: 2rem;
+    font-weight: 700;
+    height: fit-content;
+    margin-bottom: 1rem;
+}
+
+div.title-footer {
+    
+}
+
+.link-btn {
+    line-height: 2.5rem;
+    padding: 0 1rem;
+    display: inline-block;
+    color: #1d4965;
+    font-weight: 500;
+    background: linear-gradient(0deg,#79b6db,#b3dbf2);
+    border: none;
+    border-radius: .3rem;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.link-btn:hover {
+    opacity: 0.9;
+}
\ No newline at end of file