finished catalog

src/routes/(app)/catalog/+page.svelte

@@ -3,6 +3,54 @@
 	<title>Catalog - Rowblox</title>
 </svelte:head>
 
+
+
+
+<div class="row-auto">
+    <div class="float-left my-16 border-2 rounded-lg">
+        <div class="card card-body p-3 shadow-lg">
+           <h4>
+            <b>Catergories</b>
+           </h4>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Hats</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Shirts</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Pants</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">T-Shirts</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Faces</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Heads</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Gears</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Packages</label>
+        </div>
+        <div class="form-check">
+            <input class="form-check-input" type="radio" id="hats" name="category">
+            <label class="form-check-label"for="hats">Models</label>
+        </div>
+       </div>
+   </div>
+   
    <div class="flex items-center">
        <p class="font-bold text-3xl my-1">Catalog</p>
        <span class="flex-grow" />
@@ -10,27 +58,25 @@
        <button class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500 mr-2">Search</button>
        <a class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500" href="/Create/Asset">Create Asset</a>
    </div>
-<div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-6 pb-3 px-2">
+   <div class="mx-48 pb-3 px-2 py-6">
-    <div class="card card-body shadow-lg p-2 rounded-lg w-40">
+       <div class="card card-body shadow-lg p-2 rounded-lg w-40 border-2 py-2">
            <a href="/catalog/items">
                <!-- svelte-ignore a11y-missing-attribute -->
-            <img src="/img/workercap.png">
+               <img src="/img/hatrowblox.png">
-            <div class="mt-1 text-truncate">Rowblox Cap HD 4k Quality 120 FPS</div>
+               <div class="mt-1 text-truncate">Traffic Cone</div>
            </a>
            <hr class="my-2">
            <div class="text-s mt-1 mb-1">
                <small> 
-
                 <img src="/img/rowbux.png" width="20" height="50" style="float:left">
                 <p class="text-xs font-bold"> -21</p>
+                <p class="text-xs font-bold"> By: Row</p>
    
                    </small>
    
                    </div>
-       
+       </div>
-
    </div>
 </div>
 
 
-

src/routes/(app)/catalog/items/+page.svelte

@@ -2,25 +2,53 @@
 	<title>Catalog - Rowblox</title>
 </svelte:head>
 
+
+
+
+<div class="container-lg">
   <div class="row justify-content-center">
-    <div class="col-md-8">
+    <div class="shadow-lg rounded-lg float-left px-48 border-2">
-    <div class="card shadow-lg rounded-lg">
+     <div class="card-body text-center text-2xl font-bold h-72">
-     <div class="card-body text-center">
+        <h2>Rowblox Cone</h2>
-        <h2>Rowblox Hat</h2>
       <div id="thumbnail-container" class="my-2 position-relative">
         <!-- svelte-ignore a11y-missing-attribute -->
-        <img src="/img/workercap.png" style="object-fit: contain;" alt="Rowblox Hat" width="250" height="250">
+        <img src="/img/hatrowblox.png" style="object-fit: contain;" alt="Rowblox Hat" width="250" height="250" class="mx-auto">
-      </div>
       </div>
      </div>
      <hr>
-   <span class="text-bold font-bold mx-auto">
+     <span class="text-bold font-bold mx-28">
-<small>Description</small>
+       <small>Description:</small>
      </span>
      <br>
-   <span>its the best rowblox hat!</span>
+     <span class="text-xs mx-28">Very Coney!</span>
-   <div class="col-md-3">
+   </div>
+   <div class="col-md-12 rounded-lg shadow-lg float-right my-10 border-2 mt-8">
    <div class="card shadow-lg">
+   <div class="card-header text-center font-bold text-bold h-6">Details</div>
+   <div class="card-body text-center">
+   <a href="/users/2/profile">
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <img src="/img/derpecated.png" width="100" height="100" class="mx-24">
+    </a>
+    <p class="text-bold mt-0 pd-0 font-bold">
+       <small>
+       Creator:
+       <a href="/users/2/profile">row</a>
+       <br>
+       Sales: 238
+       <br>
+       Created: 10/20/22
+       <br>
+       Updated: 10/20/22
+       </small>
+    </p>
+    <hr>
+  <div class="py-2">  
+    <button class="my-auto px-3 py-1 rounded border-2 border-green-500 text-green-500 shadow-lg hover:bg-green-200 w-48">
+      21
+    </button>
+  </div> 
+   </div>
 
    </div>
   
@@ -28,3 +56,4 @@
 
 </div>
 </div>
+