th/th-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

duck and books

Browse Source
This commit is contained in:
thinkpad
2026-06-21 18:31:43 +02:00
parent 078bb93a89
commit de7b289b8c
6 changed files with 391 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/views/BooksShow.vue Normal file
View File

@@ -0,0 +1,184 @@
<template>
<div class="parent">
<div class="div2">Ordnung: Gänsevögel </div>
<div class="div3"><img class="mainImg" :src=mainDuck></div>
<div class="div4" style="text-align: center;"> <h2 >Books</h2></div>
<div class="div5">Familie: Entenvögel (Anatidae)</div>
<div class="div6">Unterfamilie: Anatinae</div>
<div class="div8">Tribus: Schwimmenten (Anatini)</div>
<div class="div9">9</div>
<div class="div10">10</div>
<div class="div11">11</div>
<div class="div12">12</div>
<div class="div13">13</div>
<div class="div14">14</div>
<div class="div15">15</div>
<div class="div16">16</div>
<div class="div17">17</div>
<div class="div18">18</div>
<div class="div19">19</div>
<div class="div20">20</div>
<div class="div21">21</div>
<div class="div22">22</div>
<div class="div23">23</div>
<div class="div24">24</div>
<div class="div25">25</div>
<div class="div26">26</div>
</div>
</template>
<script setup lang="js">
import mainDuck from './../assets/ducks/stockEnteMain.jpg'
</script>
<style lang="scss" scoped>
.parent {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(7, 1fr);
gap: 9px;
}
.div2 {
grid-column: span 3 / span 3;
grid-column-start: 1;
grid-row-start: 2;
}
.div3 {
grid-column: span 4 / span 4;
grid-row: span 4 / span 4;
grid-column-start: 4;
grid-row-start: 2;
}
.div4 {
grid-column: span 4 / span 4;
grid-column-start: 4;
grid-row-start: 1;
}
.div5 {
grid-column: span 3 / span 3;
grid-column-start: 1;
grid-row-start: 3;
}
.div6 {
grid-column: span 3 / span 3;
grid-column-start: 8;
grid-row-start: 2;
}
.div8 {
grid-column: span 3 / span 3;
grid-column-start: 8;
grid-row-start: 3;
}
.div9 {
grid-column: span 3 / span 3;
grid-column-start: 8;
grid-row-start: 4;
}
.div10 {
grid-column: span 3 / span 3;
grid-column-start: 1;
grid-row-start: 4;
}
.div11 {
grid-column-start: 3;
grid-row-start: 6;
}
.div12 {
grid-column-start: 2;
grid-row-start: 6;
}
.div13 {
grid-column-start: 2;
grid-row-start: 7;
}
.div14 {
grid-column-start: 3;
grid-row-start: 7;
}
.div15 {
grid-column-start: 4;
grid-row-start: 7;
}
.div16 {
grid-column-start: 4;
grid-row-start: 6;
}
.div17 {
grid-column-start: 5;
grid-row-start: 6;
}
.div18 {
grid-column-start: 5;
grid-row-start: 7;
}
.div19 {
grid-column-start: 6;
grid-row-start: 7;
}
.div20 {
grid-column-start: 6;
grid-row-start: 6;
}
.div21 {
grid-column-start: 7;
grid-row-start: 6;
}
.div22 {
grid-column-start: 7;
grid-row-start: 7;
}
.div23 {
grid-column-start: 8;
grid-row-start: 7;
}
.div24 {
grid-column-start: 8;
grid-row-start: 6;
}
.div25 {
grid-column-start: 9;
grid-row-start: 6;
}
.div26 {
grid-column-start: 9;
grid-row-start: 7;
}
.mainImg {
width: 100%;
}
</style>

184
src/views/InfoDucks.vue Normal file
View File

@@ -0,0 +1,184 @@
<template>
<div class="parent">
<div class="div2">Ordnung: Gänsevögel </div>
<div class="div3"><img class="mainImg" :src=mainDuck></div>
<div class="div4" style="text-align: center;"> <h2 >Stockente</h2></div>
<div class="div5">Familie: Entenvögel (Anatidae)</div>
<div class="div6">Unterfamilie: Anatinae</div>
<div class="div8">Tribus: Schwimmenten (Anatini)</div>
<div class="div9">9</div>
<div class="div10">10</div>
<div class="div11">11</div>
<div class="div12">12</div>
<div class="div13">13</div>
<div class="div14">14</div>
<div class="div15">15</div>
<div class="div16">16</div>
<div class="div17">17</div>
<div class="div18">18</div>
<div class="div19">19</div>
<div class="div20">20</div>
<div class="div21">21</div>
<div class="div22">22</div>
<div class="div23">23</div>
<div class="div24">24</div>
<div class="div25">25</div>
<div class="div26">26</div>
</div>
</template>
<script setup lang="js">
import mainDuck from './../assets/ducks/stockEnteMain.jpg'
</script>
<style lang="scss" scoped>
.parent {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(7, 1fr);
gap: 9px;
}
.div2 {
grid-column: span 3 / span 3;
grid-column-start: 1;
grid-row-start: 2;
}
.div3 {
grid-column: span 4 / span 4;
grid-row: span 4 / span 4;
grid-column-start: 4;
grid-row-start: 2;
}
.div4 {
grid-column: span 4 / span 4;
grid-column-start: 4;
grid-row-start: 1;
}
.div5 {
grid-column: span 3 / span 3;
grid-column-start: 1;
grid-row-start: 3;
}
.div6 {
grid-column: span 3 / span 3;
grid-column-start: 8;
grid-row-start: 2;
}
.div8 {
grid-column: span 3 / span 3;
grid-column-start: 8;
grid-row-start: 3;
}
.div9 {
grid-column: span 3 / span 3;
grid-column-start: 8;
grid-row-start: 4;
}
.div10 {
grid-column: span 3 / span 3;
grid-column-start: 1;
grid-row-start: 4;
}
.div11 {
grid-column-start: 3;
grid-row-start: 6;
}
.div12 {
grid-column-start: 2;
grid-row-start: 6;
}
.div13 {
grid-column-start: 2;
grid-row-start: 7;
}
.div14 {
grid-column-start: 3;
grid-row-start: 7;
}
.div15 {
grid-column-start: 4;
grid-row-start: 7;
}
.div16 {
grid-column-start: 4;
grid-row-start: 6;
}
.div17 {
grid-column-start: 5;
grid-row-start: 6;
}
.div18 {
grid-column-start: 5;
grid-row-start: 7;
}
.div19 {
grid-column-start: 6;
grid-row-start: 7;
}
.div20 {
grid-column-start: 6;
grid-row-start: 6;
}
.div21 {
grid-column-start: 7;
grid-row-start: 6;
}
.div22 {
grid-column-start: 7;
grid-row-start: 7;
}
.div23 {
grid-column-start: 8;
grid-row-start: 7;
}
.div24 {
grid-column-start: 8;
grid-row-start: 6;
}
.div25 {
grid-column-start: 9;
grid-row-start: 6;
}
.div26 {
grid-column-start: 9;
grid-row-start: 7;
}
.mainImg {
width: 100%;
}
</style>