update

2024-01-11 09:27:03 +01:00
parent e584aeb36a
commit 59f399c866
12 changed files with 295 additions and 11 deletions
--- a/assets/images/city.png
+++ b/assets/images/city.png
--- a/assets/style.css
+++ b/assets/style.css
@@ -0,0 +1,146 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
+
+:root {
+    --primary-bg: rgb(27, 21, 41);
+    --secondary-bg: #1a1a1a;
+    --primary-text: #d2d6e5;
+    --error: rgb(255, 55, 0);
+    --primary: #2a9dd6;
+    --primary-hover: #2489bb;
+}
+
+body {
+    background: linear-gradient(127deg, var(--secondary-bg), var(--primary-bg));
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    height: 100%;
+    width: 100%;
+    font-family: 'Poppins', sans-serif;
+    color: var(--primary-text);
+    margin: 0;
+    padding: 0;
+}
+
+nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 1.2rem 1rem;
+    background-color: rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: 0px 20px 28px 0px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px 20px 28px 0px rgba(0,0,0,0.2);
+    box-shadow: 0px 20px 28px 0px rgba(0,0,0,0.2);
+}
+
+nav #login {
+    color: var(--primary-text);
+    text-decoration: none;
+    background-color: #2a9dd6;
+    padding: 0.35rem 0.65rem;
+    transition: all 0.3s ease;
+    border-radius: 15px;
+}
+
+nav #login:hover, nav #login.active{
+    transition: all 0.3s ease;
+    background-color: var(--primary-hover);
+    color: var(--primary-text);
+}
+
+nav #login:hover::after, nav #login.active::after {
+    width: 0;
+}
+
+ul {
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+}
+
+li {
+    list-style: none;
+}
+
+li a {
+    position: relative;
+    padding-bottom: 0.45rem;
+    color: var(--primary-text);
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+li a::after {
+    content: "";
+    position: absolute;
+    height: 4px;
+    width: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--primary);
+    transition: all 0.3s ease;
+    border-radius: 15px;
+}
+
+li a:hover::after {
+    width: 85%;
+}
+
+li a:hover, li a.active {
+    color: var(--primary);
+    transition: all 0.3s ease;
+}
+
+.wrapper-404 {
+    text-align: center;
+}
+
+.wrapper-404 h1 {
+    font-size: 10rem;
+    margin: 0;
+}
+
+.wrapper-404 .error {
+    color: var(--error);
+}
+
+.wrapper-404 h3 {
+    margin-bottom: 2rem;
+}
+
+.error-code {
+    color: var(--primary);
+}
+
+.back {
+    color: var(--primary-text);
+    text-decoration: none;
+    background-color: #2a9dd6;
+    padding: 0.35rem 0.65rem;
+    transition: all 0.3s ease;
+    border-radius: 15px;
+}
+
+.back:hover {
+    transition: all 0.3s ease;
+    background-color: var(--primary-hover);
+}
+
+header {
+    width: 100%;
+    align-items: center;
+    text-align: center;
+}
+header h1 {
+    margin: 0;
+    padding: 0;
+}
+header a {
+    color: var(--primary);
+}
+
+header hr {
+    border-color: var(--primary);
+    opacity: 0.5;
+    width: 30%;
+}