Started building HTML for home page

class_registration_app/index.html

@@ -10,4 +10,5 @@
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
+
 </html>

class_registration_app/src/App.vue

@@ -1,23 +1,10 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
+import Home from './components/Home.vue'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-
-  <RouterView />
+    <Home></Home>
 </template>
 
 <style scoped>

class_registration_app/src/components/Home.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div class="backdrop">
+
+    <div class="top">
+        <img class="logos" src="https://logos-world.net/wp-content/uploads/2022/01/UConn-Huskies-Logo-1970.png">
+        <div>
+            <h1>UCONN Class Registration</h1>
+            <h3>Welcome!</h3>
+        </div>
+        <img class="logos" src="https://1000logos.net/wp-content/uploads/2017/08/UConn-Huskies-Logo-1959.png">
+
+    </div>
+
+    <div class="login">
+        <button>Login with your NetID here</button>
+    </div>
+</div>
+</template>
+
+<style scoped>
+
+.top {
+    height: 10vh;
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    /*border:1px solid #000;*/
+    top: 5%;
+    left: 0%;
+    width: 100vw;
+    text-align: center;
+    background-color: white;
+}
+
+.login {
+    border: 1px solid black;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 30vw;
+    height: 30vh;
+    background-color: white;
+}
+
+.backdrop {
+    height: 100vh;
+    width: 100vw;
+    background-image: url("https://today.uconn.edu/wp-content/uploads/2020/03/Aerial131009a125.jpg");
+    background-size: contain;
+}
+
+.logos {
+    height: 20vh;
+
+}
+</style>