feat: improve selector

src/assets/css/style.css

@@ -47,6 +47,7 @@ h1, h2 {
 
 label {
     font-weight: bold;
+    word-break: break-word;;
 
 }
 
@@ -115,15 +116,34 @@ label {
     height: 36px;
 }
 
+.cage-selector{
+    gap: 15px;
+}
+
+.card {
+    text-align: center;
+    color: var(--text-two);
+}
 .card-photo {
-    flex: 5 16%;
+    height: 200px;
-    margin: 10px;
+    width: 200px;
+    background-color: #ffffff;
+    box-shadow: 0 0 25px rgba(17, 1, 68, 0.08);
+    border-radius: 8px;
+    position: relative;
+    cursor: pointer;
 }
 
 .card-photo img {
-    max-width: 100%;
+    width: 70%;
-    max-height: 200px;
+    height: 95%;
-    border-radius: 10%;
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    cursor: pointer;
 }
 
 .cage-selector {
@@ -151,3 +171,10 @@ input[type="checkbox"]:checked:after {
     content: "X";
     color: #478bfb;
 }
+
+.form-measurements {
+    max-height: 90%;
+}
+input.measurement {
+    margin-top: 5%;
+}

src/index.html

@@ -12,21 +12,56 @@
 <div class="content">
     <div class="container-form">
         <div class="cage-selector">
+            <div class="card">
                 <div class="card-photo">
                     <input type="checkbox" id="savic-xl"/>
-                <label for="savic-95">
+                    <div>
                         <img src="assets/img/savic-xl.jpeg">
-                </label>
+                    </div>
+                </div>
+                <label for="savic-xl"> Savic Suite Royale XL</label>
             </div>
 
 
+            <div class="card">
                 <div class="card-photo">
                     <input type="checkbox" id="savic-95"/>
-                <label for="savic-95">
+                    <div>
                         <img src="assets/img/savic-95-double.jpg">
-                </label>
                     </div>
                 </div>
+                <label for="savic-95">Savic Suite Royale 95 Double</label>
+            </div>
+
+
+            <div class="card">
+                <div class="card-photo">
+                    <input type="checkbox" id="tiaki"/>
+                    <div>
+                        <img src="assets/img/tiaki.jpeg">
+                    </div>
+                </div>
+                <label>TIAKI Kleintierkäfig Étagère</label>
+            </div>
+
+            <div class="card">
+                <div class="card-photo">
+                    <input type="checkbox" id="tiaki"/>
+                    <form class="form-measurements">
+                        <input class="measurement" type="number" id="width">
+                        <label for="width">Breite</label>
+
+                        <input class="measurement" type="number" id="depth">
+                        <label for="depth">Tiefe</label>
+
+                        <input class="measurement" type="number" id="height">
+                        <label for="height">Höhe</label>
+                    </form>
+                </div>
+                <label>Anderer Käfig</label>
+            </div>
+
+        </div>
         <div class="input-element">
             <div class="slidecontainer">
                 <label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label>