feat: Start selecting cages
This commit is contained in:
parent
7167d275b6
commit
9e3c89f94d
@ -113,4 +113,41 @@ label {
|
|||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
background-color: var(--secondary-light-one);
|
background-color: var(--secondary-light-one);
|
||||||
height: 36px;
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-photo {
|
||||||
|
flex: 5 16%;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-photo img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 200px;
|
||||||
|
border-radius: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cage-selector {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
input[type="checkbox"]:after {
|
||||||
|
position: absolute;
|
||||||
|
font-weight: 400;
|
||||||
|
content: "0";
|
||||||
|
font-size: 18px;
|
||||||
|
color: #478bfb;
|
||||||
|
right: 10px;
|
||||||
|
top: -5px;
|
||||||
|
}
|
||||||
|
input[type="checkbox"]:checked:after {
|
||||||
|
font-weight: 900;
|
||||||
|
content: "X";
|
||||||
|
color: #478bfb;
|
||||||
}
|
}
|
BIN
src/assets/img/savic-95-double.jpg
Normal file
BIN
src/assets/img/savic-95-double.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.2 MiB |
BIN
src/assets/img/savic-xl.jpeg
Normal file
BIN
src/assets/img/savic-xl.jpeg
Normal file
Binary file not shown.
After Width: | Height: | Size: 25 KiB |
BIN
src/assets/img/tiaki.jpeg
Normal file
BIN
src/assets/img/tiaki.jpeg
Normal file
Binary file not shown.
After Width: | Height: | Size: 68 KiB |
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Knastrechner</title>
|
<title>Knastrechner</title>
|
||||||
@ -11,6 +11,22 @@
|
|||||||
<h1>Käfigrechner</h1>
|
<h1>Käfigrechner</h1>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="container-form">
|
<div class="container-form">
|
||||||
|
<div class="cage-selector">
|
||||||
|
<div class="card-photo">
|
||||||
|
<input type="checkbox" id="savic-xl"/>
|
||||||
|
<label for="savic-95">
|
||||||
|
<img src="assets/img/savic-xl.jpeg">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="card-photo">
|
||||||
|
<input type="checkbox" id="savic-95"/>
|
||||||
|
<label for="savic-95">
|
||||||
|
<img src="assets/img/savic-95-double.jpg">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="input-element">
|
<div class="input-element">
|
||||||
<div class="slidecontainer">
|
<div class="slidecontainer">
|
||||||
<label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label>
|
<label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label>
|
||||||
|
Loading…
Reference in New Issue
Block a user