Upload Aufgabe 06.1

Aufgaben/Aufgabe_06_2020-06-03/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_06_2020-06-03/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_06_2020-06-03/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_06_2020-06-03/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_06_2020-06-03/script.js

@@ -0,0 +1,227 @@
+"use strict";
+// Datensammlung für Produkte
+var Aufgabe06;
+(function (Aufgabe06) {
+    let categories = [
+        {
+            title: "Special Offers!",
+            id: "special",
+            products: [
+                {
+                    title: "Color: Rainbow",
+                    price: 3279.99,
+                    size: "4m²",
+                    imgName: "grass-rainbow-square.png",
+                    description: "If you can't choose one color, go and catch them all!"
+                }, {
+                    title: "Color: White",
+                    price: 3279.99,
+                    size: "4m²",
+                    imgName: "grass-white.png",
+                    description: "The appearance of many sparkling stars on your garden floor."
+                }, {
+                    title: "Color: Black",
+                    price: 3279.99,
+                    size: "4m²",
+                    imgName: "grass-black.png",
+                    description: "Dark as the night. Be careful not to form a black hole!"
+                }, {
+                    title: "Pattern: Murica",
+                    price: 3279.99,
+                    size: "4m²",
+                    imgName: "grass-green-murica.png",
+                    description: "Texas, Trump, Guns & Hamburgers"
+                }, {
+                    title: "Pattern: Schachbrett",
+                    price: 3279.99,
+                    size: "4m²",
+                    imgName: "grass-green-chess-square.png",
+                    description: "Show your intellect on your own lawn and embarrass your opponents!"
+                }
+            ]
+        }, {
+            title: "Bunte Gräser",
+            id: "bunt",
+            products: [
+                {
+                    title: "Color: Green",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-green.png",
+                    description: "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!"
+                }, {
+                    title: "Color: Desert",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-yellow.png",
+                    description: "Summer, sun and oh my god, I'm hot! Are they pyramids in my garden ?!"
+                }, {
+                    title: "Color: Beach",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-orange.png",
+                    description: "Summer, sun and hot feelings!"
+                }, {
+                    title: "Pattern: Hell",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-red.png",
+                    description: "Look into the abyss that could await you after your death and invite guests to it!"
+                }, {
+                    title: "Pattern: Unicorn",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-pink.png",
+                    description: "PINK FLUFFY UNICORN, DANCING ON RAINBOWS (which you can also buy in here) !!!"
+                }, {
+                    title: "Pattern: Grape",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-purple.png",
+                    description: "It looks purple. Do you have to say more?"
+                }, {
+                    title: "Pattern: Atlantic",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-blue.png",
+                    description: "Blue like the ocean. A deep look and mysterious nature."
+                }
+            ]
+        }, {
+            title: "Green-Tones",
+            id: "grün",
+            products: [
+                {
+                    title: "Green: 3B",
+                    price: 3499.99,
+                    size: "10m²",
+                    imgName: "grass-green-dark-3.png",
+                    description: "Green in every way. Nothing more to know about it."
+                }, {
+                    title: "Green: 2B",
+                    price: 3499.99,
+                    size: "10m²",
+                    imgName: "grass-green-dark-2.png",
+                    description: "Green in every way. Nothing more to know about it."
+                }, {
+                    title: "Green: B",
+                    price: 3499.99,
+                    size: "10m²",
+                    imgName: "grass-green-dark-1.png",
+                    description: "Green in every way. Nothing more to know about it."
+                }, {
+                    title: "Green: HB",
+                    price: 2339.99,
+                    size: "10m²",
+                    imgName: "grass-green.png",
+                    description: "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!"
+                }, {
+                    title: "Green: H",
+                    price: 3499.99,
+                    size: "10m²",
+                    imgName: "grass-green-light-1.png",
+                    description: "Green in every way. Nothing more to know about it."
+                }, {
+                    title: "Green: 2H",
+                    price: 3499.99,
+                    size: "10m²",
+                    imgName: "grass-green-light-2.png",
+                    description: "Green in every way. Nothing more to know about it."
+                }, {
+                    title: "Green: 3H",
+                    price: 3499.99,
+                    size: "10m²",
+                    imgName: "grass-green-light-3.png",
+                    description: "Green in every way. Nothing more to know about it."
+                }
+            ]
+        }
+    ];
+    printProducts();
+    //create Structure;
+    function printProducts() {
+        for (let nummer = 0; nummer < categories.length; nummer++) {
+            let heading = document.createElement("h1");
+            heading.setAttribute("id", categories[nummer].id);
+            heading.innerHTML = `${categories[nummer].title}`;
+            document.querySelector("#übersicht").appendChild(heading);
+            let container = document.createElement("div");
+            container.classList.add("container");
+            document.querySelector("#übersicht").appendChild(container);
+            for (let index = 0; index < categories[nummer].products.length; index++) {
+                let product = document.createElement("div");
+                product.classList.add("product");
+                product.innerHTML = `                                                
+                <h3 class="title"> ${categories[nummer].products[index].title} </h3>                                
+                <div class=shopIn>                                                     
+                    <span class="price"> ${categories[nummer].products[index].price} ¥</span>                            
+                    <button>+</button>                                               
+                    <button>-</button>                                               
+                </div>
+                <img src="files/${categories[nummer].products[index].imgName}" alt="Product" />            
+                <p class="size"> Size: ${categories[nummer].products[index].size}</p>
+                <div class="description">                                            
+                    <p> ${categories[nummer].products[index].description}</p>
+                </div>
+            `;
+                container.appendChild(product);
+            }
+        }
+    }
+    function myFunction() {
+        console.log("Ich wurde geklickt");
+        for (let nummer = 0; nummer < categories.length; nummer++) {
+            let heading = document.querySelector(`#${categories[nummer].id}`);
+            document.querySelector("#übersicht").removeChild(heading);
+            /*let container: HTMLDivElement = document.createElement("div");
+            container.classList.add("container");
+            (<HTMLDivElement>document.querySelector("#übersicht")).appendChild(container);
+
+            for (let index: number = 0; index < categories[nummer].products.length; index++) {
+                let product: HTMLDivElement = document.createElement("div");
+                product.classList.add("product");
+                product.innerHTML = "";
+                container.appendChild(product);
+            } */
+        }
+    }
+    document.querySelector("#special_a").addEventListener("click", myFunction);
+})(Aufgabe06 || (Aufgabe06 = {}));
+// Folgender auskommentierter Code dient mir als Archiv für Gedankenansätze oder Verläufe. 
+// Wenn dies nicht gerne gesehen ist, gebt mir kurz Bescheid und ich werde es entfernen
+/*
+function zeichnen(tagArray: Tag[]): void {
+    for (let i: number = 0; i < tagArray.length ; i++){
+        let title: HTMLElement = document.createElement(tagArray[i].tag);
+        title.innerHTML = "I bims title";
+        title.classList.add("title");
+        if (tagArray[i].image) {
+            title.setAttribute("src", "value");
+            title.setAttribute("alt", "value");
+        }
+        document.body.appendChild(title);
+    }
+}
+*/
+/*
+console.log("Hello Console");
+let theName: String = "Justin" + "Dretvic" + 20;
+console.log(theName);
+*/
+/*
+# Template für ein Produkt in HTML
+<div class="product">                                                       tag     class
+    <h3 class="title"> Color: Rainbow </h3>                                 tag     class   content
+    <div class=shopIn>                                                      tag     class
+        <span class="price"> 3279,99 ¥ </span>                              tag     class   content
+        <button>+</button>                                                  tag             content
+        <button>-</button>                                                  tag             content
+    </div>
+    <img src="files/grass-rainbow-square.png" alt="Product" />              tag                         attribute1  attribute2
+    <p class="size"> Size: 4m²</p>                                          tag     class   content
+    <div class="description">                                               tag     class
+        <p> If you can't choose one color, go and catch them all!</p>       tag             content
+    </div>
+</div>
+*/ 
+//# sourceMappingURL=script.js.map

Aufgaben/Aufgabe_06_2020-06-03/script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"script.js","sourceRoot":"","sources":["script.ts"],"names":[],"mappings":"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"}

Aufgaben/Aufgabe_06_2020-06-03/script.ts

@@ -0,0 +1,258 @@
+// Datensammlung für Produkte
+
+namespace Aufgabe06 {
+
+    interface Product {
+        title: string;
+        price: number;
+        size: string;
+        imgName: string;
+        description: string;
+    }
+
+    interface Category {
+        title: string;
+        id: string;
+        products: Product[];
+    }
+
+    let categories: Category[] = [
+        {
+            title: "Special Offers!",
+            id: "special",
+            products: [
+                {
+                    title: "Color: Rainbow",
+                    price: 3279.99,
+                    size: "4m²",
+                    imgName: "grass-rainbow-square.png",
+                    description: "If you can't choose one color, go and catch them all!"
+                }, {
+                    title: "Color: White",
+                    price: 3279.99,
+                    size: "4m²",
+                    imgName: "grass-white.png",
+                    description: "The appearance of many sparkling stars on your garden floor."
+                }, {
+                    title: "Color: Black",
+                    price: 3279.99,
+                    size: "4m²",
+                    imgName: "grass-black.png",
+                    description: "Dark as the night. Be careful not to form a black hole!"
+                }, {
+                    title: "Pattern: Murica",
+                    price: 3279.99,
+                    size: "4m²",
+                    imgName: "grass-green-murica.png",
+                    description: "Texas, Trump, Guns & Hamburgers"
+                }, {
+                    title: "Pattern: Schachbrett",
+                    price: 3279.99,
+                    size: "4m²",
+                    imgName: "grass-green-chess-square.png",
+                    description: "Show your intellect on your own lawn and embarrass your opponents!"
+                }
+            ]
+        }, {
+            title: "Bunte Gräser",
+            id: "bunt",
+            products: [
+                {
+                    title: "Color: Green",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-green.png",
+                    description: "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!"
+                }, {
+                    title: "Color: Desert",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-yellow.png",
+                    description: "Summer, sun and oh my god, I'm hot! Are they pyramids in my garden ?!"
+                }, {
+                    title: "Color: Beach",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-orange.png",
+                    description: "Summer, sun and hot feelings!"
+                }, {
+                    title: "Pattern: Hell",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-red.png",
+                    description: "Look into the abyss that could await you after your death and invite guests to it!"
+                }, {
+                    title: "Pattern: Unicorn",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-pink.png",
+                    description: "PINK FLUFFY UNICORN, DANCING ON RAINBOWS (which you can also buy in here) !!!"
+                }, {
+                    title: "Pattern: Grape",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-purple.png",
+                    description: "It looks purple. Do you have to say more?"
+                }, {
+                    title: "Pattern: Atlantic",
+                    price: 2339.99,
+                    size: "4m²",
+                    imgName: "grass-blue.png",
+                    description: "Blue like the ocean. A deep look and mysterious nature."
+                }
+            ]
+        }, {
+            title: "Green-Tones",
+            id: "grün",
+            products: [
+                {
+                    title: "Green: 3B",
+                    price: 3499.99,
+                    size: "10m²",
+                    imgName: "grass-green-dark-3.png",
+                    description: "Green in every way. Nothing more to know about it."
+                }, {
+                    title: "Green: 2B",
+                    price: 3499.99,
+                    size: "10m²",
+                    imgName: "grass-green-dark-2.png",
+                    description: "Green in every way. Nothing more to know about it."
+                }, {
+                    title: "Green: B",
+                    price: 3499.99,
+                    size: "10m²",
+                    imgName: "grass-green-dark-1.png",
+                    description: "Green in every way. Nothing more to know about it."
+                }, {
+                    title: "Green: HB",
+                    price: 2339.99,
+                    size: "10m²",
+                    imgName: "grass-green.png",
+                    description: "The standard model in our range. Ensures a natural look and pleasant freshness in your living room!"
+                }, {
+                    title: "Green: H",
+                    price: 3499.99,
+                    size: "10m²",
+                    imgName: "grass-green-light-1.png",
+                    description: "Green in every way. Nothing more to know about it."
+                }, {
+                    title: "Green: 2H",
+                    price: 3499.99,
+                    size: "10m²",
+                    imgName: "grass-green-light-2.png",
+                    description: "Green in every way. Nothing more to know about it."
+                }, {
+                    title: "Green: 3H",
+                    price: 3499.99,
+                    size: "10m²",
+                    imgName: "grass-green-light-3.png",
+                    description: "Green in every way. Nothing more to know about it."
+                }
+            ]
+        }
+    ];
+
+    printProducts();
+
+    //create Structure;
+
+    function printProducts(): void {
+        for (let nummer: number = 0; nummer < categories.length; nummer++) {
+
+            let heading: HTMLHeadingElement = document.createElement("h1");
+            heading.setAttribute("id", categories[nummer].id);
+            heading.innerHTML = `${categories[nummer].title}`;
+            (<HTMLDivElement>document.querySelector("#übersicht")).appendChild(heading);
+
+            let container: HTMLDivElement = document.createElement("div");
+            container.classList.add("container");
+            (<HTMLDivElement>document.querySelector("#übersicht")).appendChild(container);
+
+            for (let index: number = 0; index < categories[nummer].products.length; index++) {
+                let product: HTMLDivElement = document.createElement("div");
+                product.classList.add("product");
+                product.innerHTML = `                                                
+                <h3 class="title"> ${categories[nummer].products[index].title} </h3>                                
+                <div class=shopIn>                                                     
+                    <span class="price"> ${categories[nummer].products[index].price} ¥</span>                            
+                    <button>+</button>                                               
+                    <button>-</button>                                               
+                </div>
+                <img src="files/${categories[nummer].products[index].imgName}" alt="Product" />            
+                <p class="size"> Size: ${categories[nummer].products[index].size}</p>
+                <div class="description">                                            
+                    <p> ${categories[nummer].products[index].description}</p>
+                </div>
+            `;
+                container.appendChild(product);
+            }
+
+        }
+
+    }
+
+    function myFunction(): void {
+        console.log("Ich wurde geklickt");
+        for (let nummer: number = 0; nummer < categories.length; nummer++) {
+
+            let heading: HTMLHeadingElement = (<HTMLHeadingElement>document.querySelector(`#${categories[nummer].id}`));
+            (<HTMLDivElement>document.querySelector("#übersicht")).removeChild(heading);
+            
+            /*let container: HTMLDivElement = document.createElement("div");
+            container.classList.add("container");
+            (<HTMLDivElement>document.querySelector("#übersicht")).appendChild(container);
+
+            for (let index: number = 0; index < categories[nummer].products.length; index++) {
+                let product: HTMLDivElement = document.createElement("div");
+                product.classList.add("product");
+                product.innerHTML = "";
+                container.appendChild(product); 
+            } */
+        }
+
+    }
+
+    (<HTMLLIElement>document.querySelector("#special_a")).addEventListener("click", myFunction);
+
+}
+
+// Folgender auskommentierter Code dient mir als Archiv für Gedankenansätze oder Verläufe. 
+// Wenn dies nicht gerne gesehen ist, gebt mir kurz Bescheid und ich werde es entfernen
+
+/*
+function zeichnen(tagArray: Tag[]): void {
+    for (let i: number = 0; i < tagArray.length ; i++){
+        let title: HTMLElement = document.createElement(tagArray[i].tag);
+        title.innerHTML = "I bims title";
+        title.classList.add("title");
+        if (tagArray[i].image) {
+            title.setAttribute("src", "value");
+            title.setAttribute("alt", "value");
+        }
+        document.body.appendChild(title);
+    }
+}
+*/
+
+/*
+console.log("Hello Console");
+let theName: String = "Justin" + "Dretvic" + 20;
+console.log(theName);
+*/
+
+/*
+# Template für ein Produkt in HTML
+<div class="product">                                                       tag     class
+    <h3 class="title"> Color: Rainbow </h3>                                 tag     class   content
+    <div class=shopIn>                                                      tag     class
+        <span class="price"> 3279,99 ¥ </span>                              tag     class   content
+        <button>+</button>                                                  tag             content
+        <button>-</button>                                                  tag             content
+    </div>
+    <img src="files/grass-rainbow-square.png" alt="Product" />              tag                         attribute1  attribute2
+    <p class="size"> Size: 4m²</p>                                          tag     class   content
+    <div class="description">                                               tag     class
+        <p> If you can't choose one color, go and catch them all!</p>       tag             content
+    </div>
+</div>
+*/

Aufgaben/Aufgabe_06_2020-06-03/shop.css

@@ -0,0 +1,124 @@
+body {
+    margin: 0;
+    font-family: Chelsea Market;
+}
+
+header {
+    padding: 10px 0px;
+    position: relative;
+    top: 0;
+    width: 100%;
+    background-color: #006a4e;
+    color: #b8d5cd;
+}
+
+header ul {
+    list-style: none;
+    padding: 0px;
+}
+
+header li {
+    display: block;
+    margin: 10px auto 0px;
+}
+
+header li a {
+    text-decoration: none;
+    color: #b8d5cd;
+}
+
+header .dropdown {
+    text-align: center;
+    font-size: 20px;
+    position: relative;
+    display: block;
+    background-color: #2e856e;
+    border-radius: 40px;
+    margin: 10px 5px 0px 5px;
+    padding: 10px 0px;
+    width: 80%;
+}
+
+header .dropdown-content {
+    display: none;
+}
+
+header .dropdown:hover .dropdown-content {
+    display: block;
+    margin-bottom: 0px;
+}
+
+header #shopping_cart {
+    text-align: center;
+    position: relative;
+    display: block;
+    background-color: #2e856e;
+    border-radius: 40px;
+    margin: 10px 5px 0px 5px;
+    padding: 10px 0px;
+    width: 60px;
+    height: 30px;
+}
+
+header #shopping_cart a {
+    text-decoration: none;
+    color: #b8d5cd;
+    font-size:24px
+}
+
+header #shopping_cart a:hover {
+    color: white;
+}
+
+header .title_bar img {
+    width: 40px;
+    height: 40px;
+    margin: 5px 15px;
+}
+
+header .title_bar span {
+    font-size: 27px;
+    line-height: 50px;
+    margin: auto 0px;
+}
+
+header .title_bar {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    background-color: #2e856e;
+    border-radius: 40px;
+    padding: 5px;
+    margin: 5px
+}
+
+header #bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+header #shopping_cart {
+    margin: 10px auto;
+    text-align: center;
+    color: #b8d5cd;
+    display: block;
+    background-color: #2e856e;
+    border-radius: 40px;
+    margin: 10px 5px 0px 5px;
+    padding: 10px 0px;
+}
+
+footer {
+    text-align: center;
+    padding: 10px 5px;
+    position: relative;
+    bottom: 0;
+    width: calc(100%-10px);
+    background-color: #272727;
+    color: white;
+}
+
+footer p {
+    margin: 0px 0px 10px;
+}

Aufgaben/Aufgabe_06_2020-06-03/shop.html

@@ -0,0 +1,50 @@
+<!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">
+    <script src="script.js" defer></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>green grass</title>
+</head>
+
+<body>
+    <header>
+        <div class="title_bar">
+            <img src="files/grass_icon_left.png" alt="grass" />
+            <span>GREEEN GRASS</span>
+            <img src="files/grass_icon_right.png" alt="grass" />
+        </div>
+        <div id="bottom">
+            <div class="dropdown">
+                <span>Categories</span>
+                <ul class="dropdown-content">
+                    <li id="special_a"><a href="">~ Special Offers ~</a></li>
+                    <li id="bunt_a"><a href="#bunt">~ Colored Grass ~</a></li>
+                    <li id="grün_a"><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 id="übersicht">
+
+    </div>
+
+    <footer>
+        <h1>Disclaimer</h1>
+        <p>This website is not used monetarily </p>
+        <p>Not even if things seem to be sold here!</p>
+    </footer>
+</body>
+
+</html>

Steckbrief/steckbrief.htm

@@ -14,6 +14,7 @@ body {
 <body>
 	<!-- Hier die Links zu den gelösten Aufgaben einstellen, aktuelle oben, alte stehen lassen! Format: Aufgabenbezeichnung, Datum -->
 	<a href="https://github.com/YamiDesu/GIS-SoSe-2020/issues" taget="_blank">										 	Github Reposiroty → Issues 	<br> </a>
+	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_06_2020-06-03/shop.html" target="_blank"> 		Aufgabe_06_2020-06-03 		<br> </a>
 	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_05_2020-05-27/shop.html" target="_blank">  		Aufgabe_05_2020-05-27 		<br> </a>
 	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_04_2020-05-20/shop.html" target="_blank"> 		Aufgabe_04_2020-05-20 		<br> </a>
 	<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_03_2020-05-13/portfolio.html" target="_blank"> 	Aufgabe_03_2020-05-13 		<br> </a>