new file: Countries/de/anthem.ogg

modified:   Countries/de/index.html
	modified:   Countries/de/style.css

Countries/de/index.html

@@ -9,9 +9,20 @@
             <div class="div1"> </div>
             <div class="div2"> </div>
             </div>
-        <img src="./map.svg" class="map" />
-        <img src="https://upload.wikimedia.org/wikipedia/en/b/ba/Flag_of_Germany.svg" class="flag" />
+        <flag> <img src="https://upload.wikimedia.org/wikipedia/en/b/ba/Flag_of_Germany.svg" class="flag" /> </flag>
+        <name> <h>Bundesrepublik Deutschland</h> </name>
+        <coat>  
+        <img src="https://upload.wikimedia.org/wikipedia/commons/d/da/Coat_of_arms_of_Germany.svg" class="coat"> 
+          <audio controls>
+            <source src="./anthem.ogg" type="audio/ogg">
+            <source src="horse.mp3" type="audio/mpeg">
+          </audio>
+        </coat>
 
+        <middle>
+        <maps> <img src="./map.svg" class="map" /> </maps>
+
+        <heads>
         <section class="profiles">
             <a href="https://en.wikipedia.org/wiki/Frank-Walter_Steinmeier">
             <div class="avatar"  style="--bg-img:url(https://upload.wikimedia.org/wikipedia/commons/7/7c/Reichstag%2C_Berl%C3%ADn%2C_Alemania%2C_2016-04-21%2C_DD_46-48_HDR.jpg)">
@@ -43,6 +54,10 @@
             </div>
             </a>
         </section>
-    
+        </heads>
+      </middle>
+
+
+        </heads>
     </body>
 </html>

Countries/de/style.css

@@ -1,12 +1,31 @@
+@font-face {
+  font-family: "Futura";
+  src: url("../../FuturaLT-Heavy.ttf") format("truetype");
+}
+
 .flag {
-    position: absolute;
+  display: block;
+    position: relative;
     top: 0;
     left: 0;
     overflow: hidden;
-    border-radius: 0 0 300px 0; /* Top-left corner rounded */
-    height: 33.3%;
+    border-radius: 0 0 50pt 0; /* Top-left corner rounded */
+    height: 95%;
+    width: 95%;
+    object-fit: cover;
+    border-right: 5px solid #000000;
+    border-bottom: 5px solid #000000;
+  }
+
+  .coat {
+    display: block;
+    position: relative;
+    margin: auto auto;
+    overflow: hidden;
+    height: auto;
+    height: 100%;
+    width: auto;
     object-fit: cover;
-    border: 5px solid #dd0000;
   }
 
   .map {
@@ -16,7 +35,6 @@
     filter: brightness(0);
     margin-left: 33.3%;
     margin-right: 33.3%;
-    margin-top: 33.3%;
   }
   
   .parent {
@@ -109,5 +127,68 @@
       --bg-blur: var(--bg-blur-hover);
     }
     
+    body {
+      display: grid;
+      grid-template-areas: 
+        "flag name coat"
+        "middle middle right"
+        "heads heads heads"
+    ;
+      grid-template-rows: 22% 1fr 50px;
+      grid-template-columns: 15% 1fr 18%;
+      grid-gap: 0px;
+      height: 100vh;
+      margin: 0px;  
+    }
+    
+    right {
+      background-color:#000000;
+      margin: auto auto;
+    }
+
+    flag {
+      grid-area: flag;
+    }
+
+    name {
+      grid-area: name;
+      text-align: center;
+      font-family: Futura;
+      margin-top: auto;
+      margin-bottom: auto;
+      font-size: 4vw;
+    }
+
+    coat {
+      grid-area: coat;
+      margin: 2.5%;
+    }
 
+    header {
+      background: #707070;
+      grid-area: header;
+    }
+    
+    nav {
+      background: #C9BFBF;
+      grid-area: nav; 
+    }
+    
+    middle {
+      background: #ABABAB;
+      grid-area: middle;    
+    }
+    
+    aside {
+      background: #C9C9C9;
+      grid-area: aside; 
+    }
+    
+    heads {
+      grid-area: heads;
+    }
+    
+    header, nav, section, aside, footer {
+      padding: 5px;
+    }