Removed unused components, added header, made logo.

CropSQL/Layout/MainLayout.razor

@@ -1,12 +1,7 @@
 @inherits LayoutComponentBase
 <div class="page">
-
     <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
-
-        <article class="content px-4">
+        <article class="content">
             @Body
         </article>
     </main>

CropSQL/Layout/NavMenu.razor

@@ -16,16 +16,6 @@
                 <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
             </NavLink>
         </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="weather">
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
-            </NavLink>
-        </div>
     </nav>
 </div>
 

CropSQL/Pages/Components/Header.razor

@@ -0,0 +1,4 @@
+<div class="header-1">
+    <p class="github"><a href="https://github.com/Oia20/CropSQL">Github</a></p>
+    <img src="Crop__2_-removebg-preview.png" class="carrot-img" alt="CropSQL logo"/>
+</div>

CropSQL/Pages/Components/Header.razor.css

@@ -0,0 +1,30 @@
+.header-1 {
+    position: relative; /* Make the container a positioned parent */
+    width: 100%;
+    height: 75px;
+    background-image: linear-gradient(140deg, #5e8d61,#5e8d61 );
+    border-bottom: 1px solid;
+    border-color: #302910;
+}
+
+
+.carrot-img {
+    height:100px;
+    width: 150px;
+    overflow: hidden;
+    margin-left: 10px;
+    margin-bottom: 20px;
+}
+
+.github {
+    position: absolute; /* Position the element absolutely */
+    top: 50%; /* Move the element 50% down from the top of the container */
+    right: 0; /* Align the element to the right */
+    transform: translateY(-20%); /* Adjust for the height of the element */
+    margin-right: 25px;
+    font-size: 1.5em;
+}
+
+a {
+    color:darkgreen;
+}

CropSQL/Pages/Home.razor → CropSQL/Pages/Components/Home.razor

@@ -3,6 +3,7 @@
 
 <PageTitle>Home</PageTitle>
 <WelcomeModal />
+<Header />
 
 <h1>Hello, world!</h1>
 <p>   

CropSQL/wwwroot/css/app.css

@@ -2,7 +2,8 @@
 
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    height: 100vh
+    height: 100vh;
+    background-color: #a2b780;
 }
 
 h1:focus {
@@ -23,9 +24,9 @@ a, .btn-link {
   box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
 }
 
-.content {
+/* .content {
     padding-top: 1.1rem;
-}
+} */
 
 .valid.modified:not([type=checkbox]) {
     outline: 1px solid #26b050;

README.md

@@ -13,7 +13,7 @@ Matrix: #b0545a
 
 
 
-1. Hello welcome to CropSQL, in this game you will use SQL commands and queries to build and manage your farm.
+1. Hello welcome to CropSQL, in this game you will learn and use SQL commands and queries to build and manage your farm.
 
 2. Let's start by creating your farm with "CREATE DATABASE" followed by the name of your farm. ex: CREATE DATABASE myFarm; don't forget the semi-colon, this is how sql knows where your command ends.