Start work on Styling

2026-02-16 16:37:50 -08:00
parent 37687b64c7
commit a24ea523a8
4 changed files with 45 additions and 10 deletions
@@ -3,11 +3,24 @@

 <PageTitle>Home</PageTitle>

-<h1>Hello, world!</h1>
+<div class="card-holder">
+    <a class="card">
+        HOME
+    </a>
+    <a class="card">
+        S&P Chart
+    </a>
+    <a class="card">
+        Connect
+    </a>
+    <a class="card">
+        About
+    </a>
+</div>

-Welcome to your new app.
-
-<button @onclick="pullData">@buttonText</button>
+<div class="main-area">
+    <button @onclick="pullData">@buttonText</button>
+</div>


@code {
@@ -0,0 +1,25 @@
+.card-holder {
+    display: flex;
+    float: left;
+    flex-direction: column;
+    background-color: red;
+    width: 300px;
+    height: calc(100vh - 3.5rem);
+}
+
+.card {
+    background-color: blue;
+    margin: 5px;
+    height: 45px;
+    color: white;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+.main-area {
+    float: left;
+    background-color: aqua;
+    height: calc(100vh - 3.5rem);
+    width: calc(100vw - 300px);
+}