Upload Aufgabe 04.2

Aufgaben/Aufgabe_04_2020-05-20/.vs/VSWorkspaceState.json

@@ -0,0 +1,6 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}

Aufgaben/Aufgabe_04_2020-05-20/product-big.css

@@ -0,0 +1,89 @@
+#übersicht {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin: 10px 0px;
+    padding: 0px 10px;
+}
+    
+.container .product {
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 10px;
+    align-items: center;
+    border: solid #006a4e;
+    background-color: #b8d5cd;
+    border-radius: 40px;
+}
+
+.container .product img {
+    width: 90%;
+    height: auto;
+    max-height: 300px;
+    border: solid #006a4e;
+    border-radius: 40px;
+    overflow: hidden;
+    object-fit: fill;
+}
+
+.container .product p, h3 {
+    margin: 5px 0px;
+}
+
+.container .product .title {
+    font-size: 20px;
+}
+
+.container .product .shopIn {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    vertical-align: middle;
+}
+
+.container .product .shopIn span,button{
+    display: flex;
+    vertical-align: middle;
+    margin: 10px 10px;
+    font-size: 30px;
+}
+
+.container .product .shopIn button>span.buttonModifier {
+    text-align: center;
+    margin: 0px;
+    padding: 3px;
+}
+
+.container .product .shopIn button{
+    border-radius: 30px;
+    border-color: #006a4e;
+    background-color: #2e856e;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    padding: 0px 10px;
+    color: #b8d5cd;
+    font-size: 30px;
+}
+
+.container .product .size {
+    font-size: 20px;
+}
+
+.container .product .description{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: justify;
+    height: 150px;
+    font-size: 20px;
+}

Aufgaben/Aufgabe_04_2020-05-20/product-medium.css

@@ -0,0 +1,94 @@
+#übersicht {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin: 10px 0px;
+    padding: 0px 10px;
+}
+    
+.container .product {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 10px;
+    align-items: center;
+    border: solid #006a4e;
+    background-color: #b8d5cd;
+    border-radius: 40px;
+    margin: 10px 20px;
+    width: 40%;
+}
+
+.container .product img {
+    width: 90%;
+    height: width;
+    max-height: 400px;
+    border: solid #006a4e;
+    border-radius: 40px;
+    overflow: hidden;
+    object-fit: fill;
+}
+
+.container .product p, h3 {
+    margin: 5px 0px;
+}
+
+.container .product .title {
+    font-size: 30px;
+}
+
+.container .product .shopIn {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    vertical-align: middle;
+}
+
+.container .product .shopIn span,button{
+    display: flex;
+    vertical-align: middle;
+    margin: 10px 10px;
+    font-size: 30px;
+}
+
+.container .product .shopIn button>span.buttonModifier {
+    text-align: center;
+    margin: 0px;
+    padding: 3px;
+}
+
+.container .product .shopIn button{
+    border-radius: 30px;
+    border-color: #006a4e;
+    background-color: #2e856e;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    padding: 0px 10px;
+    color: #b8d5cd;
+    font-size: 30px;
+}
+
+.container .product .size {
+    font-size: 25px;
+}
+
+.container .product .description{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: justify;
+    height: 150px;
+}
+
+#bunt,#grün,#special {
+    font-size: 50px;
+    color: #006a4e;
+}

Aufgaben/Aufgabe_04_2020-05-20/product-small.css

@@ -0,0 +1,87 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 10px 0px;
+    padding: 0px 10px;
+}
+    
+.container .product {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 10px;
+    align-items: center;
+    border: solid #006a4e;
+    background-color: #b8d5cd;
+    border-radius: 40px;
+    margin: 10px 0px;
+}
+
+.container .product img {
+    width: 90%;
+    height: auto;
+    max-height: 300px;
+    border: solid #006a4e;
+    border-radius: 40px;
+    overflow: hidden;
+    object-fit: fill;
+}
+
+.container .product p, h3 {
+    margin: 5px 0px;
+}
+
+.container .product .title {
+    font-size: 20px;
+}
+
+.container .product .shopIn {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    vertical-align: middle;
+}
+
+.container .product .shopIn span,button{
+    display: flex;
+    vertical-align: middle;
+    margin: 10px 10px;
+    font-size: 30px;
+}
+
+.container .product .shopIn button>span.buttonModifier {
+    text-align: center;
+    margin: 0px;
+    padding: 3px;
+}
+
+.container .product .shopIn button{
+    border-radius: 30px;
+    border-color: #006a4e;
+    background-color: #2e856e;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    padding: 0px 10px;
+    color: #b8d5cd;
+    font-size: 30px;
+}
+
+.container .product .size {
+    font-size: 20px;
+}
+
+.container .product .description{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: justify;
+    height: 100px;
+}
+
+#bunt,#grün,#special {
+    text-align: center;
+    font-size: 30px;
+    color: #006a4e;
+}

Aufgaben/Aufgabe_04_2020-05-20/product.css

@@ -0,0 +1,76 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 10px 0px;
+    padding: 0px 10px;
+}
+    
+.container .product {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 10px;
+    align-items: center;
+    border: solid #006a4e;
+    background-color: #b8d5cd;
+    border-radius: 40px;
+}
+
+.container .product img {
+    width: 90%;
+    height: auto;
+    max-height: 300px;
+    border: solid #006a4e;
+    border-radius: 40px;
+    overflow: hidden;
+    object-fit: none;
+}
+
+.container .product p, h3 {
+    margin: 5px 0px;
+}
+
+.container .product .title {
+    font-size: 20px;
+}
+
+.container .product .shopIn {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    vertical-align: middle;
+}
+
+.container .product .shopIn span,button{
+    display: flex;
+    vertical-align: middle;
+    margin: 10px 10px;
+    font-size: 30px;
+}
+
+.container .product .shopIn button>span.buttonModifier {
+    text-align: center;
+    margin: 0px;
+    padding: 3px;
+}
+
+.container .product .shopIn button{
+border-radius: 30px;
+border-color: #006a4e;
+background-color: #2e856e;
+width: 40px;
+height: 40px;
+text-align: center;
+padding: 0px 10px;
+color: #b8d5cd;
+font-size: 30px;
+}
+
+.container .product .size {
+    font-size: 20px;
+}
+
+.container .product .description{
+    text-align: justify;
+}

Aufgaben/Aufgabe_04_2020-05-20/shop.css

@@ -1,5 +1,6 @@
 body {
     margin: 0;
+    font-family: Chelsea Market;
 }
 
 header {
@@ -9,7 +10,6 @@ header {
     width: 100%;
     background-color: #006a4e;
     color: #b8d5cd;
-    
 }
 
 header ul {
@@ -57,6 +57,7 @@ header #shopping_cart {
     margin: 10px 5px 0px 5px;
     padding: 10px 0px;
     width: 60px;
+    height: 30px;
 }
 
 header #shopping_cart a {
@@ -121,13 +122,3 @@ footer {
 footer p {
     margin: 0px 0px 10px;
 }
-
-/* Tablet */
-@media screen and (min-width: 600px) {
-
-}
-
-/* Desktop */
-@media screen and (min-width: 1025px) {
-
-}

Aufgaben/Aufgabe_04_2020-05-20/shop.html

@@ -1,7 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <script src='https://kit.fontawesome.com/a076d05399.js'></script>
+    <link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
+    <link rel="stylesheet" media="screen and (max-width: 600px)" href="product-small.css">
+    <link rel="stylesheet" media="screen and (min-width: 601px)" href="product-medium.css">
+    <link rel="stylesheet" media="screen and (min-width: 1025px)" href="product-big.css">
     <link rel="stylesheet" href="shop.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -19,27 +24,279 @@
             <div class="dropdown">
                 <span>Categories</span>
                 <ul class="dropdown-content">
-                    <li><a href="#">~ Eins ~</a></li>
-                    <li><a href="#">~ Zwei ~</a></li>
-                    <li><a href="#">~ Drei ~</a></li>
+                    <li><a href="#special">~ Special Offers ~</a></li>
+                    <li><a href="#bunt">~ Colored Grass ~</a></li>
+                    <li><a href="#grün">~ Green-Tones ~</a></li>
                 </ul>
             </div>
             <div id="shopping_cart">
                 <a href=""><i class="fas fa-shopping-cart" style='font-size:24px'></i></a>
             </div>
         </div>
-        
     </header>
-    <div>
-        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-        Hallo
+
+    <div id="übersicht">
+        <h1 id="special">Special Offers!</h1>
+        <div class="container">
+            <div class="product">
+                <h3 class="title"> Color: Rainbow </h3>
+                <div class=shopIn>
+                    <span class="price"> 3279,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
                 </div>
+                <img src="/files/grass-rainbow-square.png" alt="Product" />
+                <p class="size"> Size: 4m²</p>
+                <div class="description"> 
+                    <p> If you can't choose one color, go and catch them all!</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Color: White </h3>
+                <div class=shopIn>
+                    <span class="price"> 3279,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-white.png" alt="Product" />
+                <p class="size"> Size: 4m²</p>
+                <p class="description"> The appearance of many sparkling stars on your garden floor.</p>
+            </div>
+            <div class="product">
+                <h3 class="title"> Color: Black </h3>
+                <div class=shopIn>
+                    <span class="price"> 3279,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-black.png" alt="Product" />
+                <p class="size"> Size: 4m²</p>
+                <div class="description">
+                    <p> Dark as the night. Be careful not to form a black hole!</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Pattern: Murica </h3>
+                <div class=shopIn>
+                    <span class="price"> 3279,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-green-murica.png" alt="Product" />
+                <p class="size"> Size: 4m²</p>
+                <div class="description">
+                    <p> Texas, Trump, Guns & Hamburgers</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Pattern: Schachbrett </h3>
+                <div class=shopIn>
+                    <span class="price"> 3279,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-green-chess-square.png" alt="Product" />
+                <p class="size"> Size: 4m²</p>
+                <div class="description">
+                    <p> Show your intellect on your own lawn and embarrass your opponents!</p>
+                </div>
+            </div>
+        </div>
+        <h1 id="bunt">Bunte Gräser!</h1>
+        <div class="container">
+            <div class="product">
+                <h3 class="title"> Color: Green </h3>
+                <div class=shopIn>
+                    <span class="price"> 2339,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-green.png" alt="Product" />
+                <p class="size"> Size: 4m²</p>
+                <div class="description">
+                    <p> The standard model in our range. Ensures a natural look and pleasant freshness in your living room!</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Color: Desert </h3>
+                <div class=shopIn>
+                    <span class="price"> 2339,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-yellow.png" alt="Product" />
+                <p class="size"> Size: 4m²</p>
+                <div class="description">
+                    <p> Summer, sun and oh my god, I'm hot! Are they pyramids in my garden ?!</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Color: Beach </h3>
+                <div class=shopIn>
+                    <span class="price"> 2339,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-orange.png" alt="Product" />
+                <p class="size"> Size: 4m²</p>
+                <div class="description">
+                    <p> Summer, sun and hot feelings!</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Color: Hell </h3>
+                <div class=shopIn>
+                    <span class="price"> 2339,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-red.png" alt="Product" />
+                <p class="size"> Size: 4m²</p>
+                <div class="description">
+                    <p> Look into the abyss that could await you after your death and invite guests to it!</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Color: Unicorn </h3>
+                <div class=shopIn>
+                    <span class="price"> 2339,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-pink.png" alt="Product" />
+                <p class="size"> Size: 4m²</p>
+                <div class="description">
+                    <p> PINK FLUFFY UNICORN, DANCING ON RAINBOWS (which you can also buy in here) !!!</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Color: Grape </h3>
+                <div class=shopIn>
+                    <span class="price"> 2339,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-purple.png" alt="Product" />
+                <p class="size"> Size: 4m²</p>
+                <div class="description">
+                    <p> It looks purple. Do you have to say more?</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Color: Atlantic </h3>
+                <div class=shopIn>
+                    <span class="price"> 2339,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-blue.png" alt="Product" />
+                <p class="size"> Size: 4m²</p>
+                <div class="description">
+                    <p>Blue like the ocean. A deep look and mysterious nature.</p>
+                </div>
+            </div>
+        </div>
+        <h1 id="grün">Green-Tones!</h1>
+        <div class="container">
+            <div class="product">
+                <h3 class="title"> Green: 3B </h3>
+                <div class=shopIn>
+                    <span class="price"> 3499,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-green-dark-3.png" alt="Product" />
+                <p class="size"> Size: 10m²</p>
+                <div class="description">
+                    <p>Green in every way. Nothing more to know about it.</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Green: 2B </h3>
+                <div class=shopIn>
+                    <span class="price"> 3499,99 </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-green-dark-2.png" alt="Product" />
+                <p class="size"> Size: 10m²</p>
+                <div class="description">
+                    <p>Green in every way. Nothing more to know about it.</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Green: B </h3>
+                <div class=shopIn>
+                    <span class="price"> 3499,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-green-dark-1.png" alt="Product" />
+                <p class="size"> Size: 10m²</p>
+                <div class="description">
+                    <p>Green in every way. Nothing more to know about it.</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Green: HB </h3>
+                <div class=shopIn>
+                    <span class="price"> 2339,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-green.png" alt="Product" />
+                <p class="size"> Size: 10m²</p>
+                <div class="description">
+                    <p>The standard model in our range. Ensures a natural look and pleasant freshness in your living room!</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Size: H </h3>
+                <div class=shopIn>
+                    <span class="price"> 3499,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-green-light-1.png" alt="Product" />
+                <p class="size"> Size: 10m²</p>
+                <div class="description">
+                    <p>Green in every way. Nothing more to know about it.</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Size: 2H </h3>
+                <div class=shopIn>
+                    <span class="price"> 3499,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-green-light-2.png" alt="Product" />
+                <p class="size"> Size: 10m²</p>
+                <div class="description">
+                    <p>Green in every way. Nothing more to know about it.</p>
+                </div>
+            </div>
+            <div class="product">
+                <h3 class="title"> Green: 3H </h3>
+                <div class=shopIn>
+                    <span class="price"> 3499,99 ¥ </span>
+                    <button>+</button>
+                    <button>-</button>
+                </div>
+                <img src="/files/grass-green-light-3.png" alt="Product" />
+                <p class="size"> Size: 10m²</p>
+                <div class="description">
+                    <p>Green in every way. Nothing more to know about it.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <footer>
         <h1>Disclaimer</h1>
-        <p>Diese Website wird nicht monetär verwendet </p>
-        <p>Auch nicht, wenn hier vermeintlich Sachen verkauft werden!</p>
+        <p>This website is not used monetarily </p>
+        <p>Not even if things seem to be sold here!</p>
     </footer>
 </body>
+
 </html>