mirror of
https://gitlab.com/etc404/software-engineering-project.git
synced 2026-05-10 20:52:58 +00:00
added swirl decor to login and create account
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user