added swirl decor to login and create account

This commit is contained in:
kaipher7
2026-04-18 23:51:48 -06:00
parent b32b3d3a03
commit 0c71ecf4a5
4 changed files with 50 additions and 3 deletions
@@ -61,20 +61,35 @@ body, html {
/* Main Content */
.align-decor {
display: flex;
flex-direction: row;
height: 100%;
justify-content: center;
align-items: center;
}
.main-content {
flex-grow: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 40px;}
margin-top: 40px;
}
.vert_swirl {
height: 65%;
width: auto;
margin: 0 50px;
}
/* Login Box */
/* Create Account Box */
.login-box {
background-color: var(--peach);
padding: 45px;
border-radius: 20px;
width: 600px;
width: 80%;
color: var(--dark);
}
+14
View File
@@ -75,6 +75,14 @@ html {
/* =========================
Main Content Area
========================= */
.align-decor {
display: flex;
flex-direction: row;
height: 100%;
justify-content: center;
align-items: center;
}
.main-content {
display: flex;
flex-direction: column;
@@ -85,6 +93,12 @@ html {
margin-top: 40px;
}
.vert_swirl {
height: 65%;
width: auto;
margin: 0 50px;
}
/* =========================
Login Box
========================= */
@@ -14,6 +14,10 @@
<img th:src="@{images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
</header>
<div class="align-decor">
<!-- Decor Left -->
<img th:src="@{images/decor_left.png}" alt="Violin f-hole shape to the left of header." class="vert_swirl">
<!-- Main Content -->
<main class="main-content">
<div class="login-box">
@@ -42,6 +46,11 @@
</form>
</div>
</main>
<!-- Decor Right -->
<img th:src="@{images/decor_right.png}" alt="Violin f-hole shape to the left of header." class="vert_swirl">
</div>
</body>
</html>
+9
View File
@@ -14,6 +14,10 @@
<img th:src="@{images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
</header>
<div class="align-decor">
<!-- Decor Left -->
<img th:src="@{images/decor_left.png}" alt="Violin f-hole shape to the left of header." class="vert_swirl">
<!-- Main Content -->
<main class="main-content">
@@ -37,5 +41,10 @@
<h3> OR <a th:href="@{/register}"><b>SIGN UP</b></a> FOR AN ACCOUNT </h3>
</div>
</main>
<!-- Decor Right -->
<img th:src="@{images/decor_right.png}" alt="Violin f-hole shape to the left of header." class="vert_swirl">
</div>
</body>
</html>