ausrichtung produkte

pull/1/head
Eline Steinbrecher 2023-04-26 20:16:19 +02:00
parent 25ae0c6504
commit ba737a7d78
2 changed files with 26 additions and 19 deletions

View File

@ -227,20 +227,27 @@ label {
margin-left: 100px;
}
.produkte{
border:#606060 3px solid;
display: inline-block;
margin: 10px;
.produktueberschrift{
text-align: center;
margin:50px;
}
.produktbild{
.parent{
display: flex;
justify-content: space-around;
flex-wrap:wrap;
align-content: center;
}
.produkte{
display: flex;
border:#606060 3px solid;
display: inline-block;
margin: 25px;
}
.produktbottom{
justify-content: space-between;
display: flex;
margin:10px;
}
}

View File

@ -24,11 +24,11 @@
</nav>
</header>
<div class="content">
<h1> Produkte</h1>
<h1 class = produktueberschrift> Produkte</h1>
<div class="parent">
<div class="produkte">
<img src="pictures/karotten.png" width = "250" height="250" alt="Karotten">
<img src="pictures/karotten.png" width = "300" height="300" alt="Karotten">
<div class ="produktbottom">
<img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
<select name="quantity">
@ -40,7 +40,7 @@
</div>
<div class="produkte">
<img src="pictures/sellerie.png" width = "250" height="250" alt="Sellerie">
<img src="pictures/sellerie.png" width = "300" height="300" alt="Sellerie">
<div class ="produktbottom">
<img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
<select name="quantity" >
@ -52,7 +52,7 @@
</div>
<div class="produkte">
<img src="pictures/birnen.png" width = "250" height="250" alt="Birnen">
<img src="pictures/birnen.png" width = "300" height= "300" alt="Birnen">
<div class ="produktbottom">
<img src ="pictures/FoodAmpel_rot.png" width = "50" height="50" alt="FoodAmpel gelb">
<select name="quantity">
@ -64,7 +64,7 @@
</div>
<div class="produkte">
<img src="pictures/kiwi.png" width = "250" height="250" alt="Kiwi">
<img src="pictures/birnen.png" width = "300" height="300" alt="Kiwi">
<div class ="produktbottom">
<img src ="pictures/FoodAmpel_gruen.png" width = "50" height="50" alt="FoodAmpel gelb">
<select name="quantity" >
@ -76,7 +76,7 @@
</div>
<div class="produkte">
<img src="pictures/orangen.png" width = "250" height="250" alt="Orangen">
<img src="pictures/birnen.png" width = "300" height="300" alt="Orangen">
<div class ="produktbottom">
<img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
<select name="quantity">
@ -88,7 +88,7 @@
</div>
<div class="produkte">
<img src="pictures/aepfel.png" width = "250" height="250" alt="Äpfel">
<img src="pictures/birnen.png" width = "300" height="300" alt="Äpfel">
<div class ="produktbottom">
<img src ="pictures/FoodAmpel_gelb.png" width ="50" height="50" alt="FoodAmpel gelb">
<select name="quantity">