anthony
/
PoliticDB
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modified: Countries/de/index.html

Browse Source 
modified:   Countries/de/style.css
main
anthony 4 months ago
parent d4295d1f82
commit 13bed63054
2 changed files with 103 additions and 84 deletions
Show Stats Download Patch File Download Diff File

121
Countries/de/index.html
Unescape Escape View File

@ -15,11 +15,18 @@
<info>
<maps> <img src="./map.svg" class="map" /> </maps>
<p>Anthem</p>
<audio controls>
<source src="./anthem.ogg" type="audio/ogg">
</audio>
<table>
<tr>
<th>
<div class="anthem">
<p><a href="https://en.wikipedia.org/wiki/Deutschlandlied" class="table-data">Das Lied der Deutschen</a></p>
<audio controls>
<source src="./anthem.ogg" type="audio/ogg">
</audio>
<p class="table-description">Anthem</p>
</th>
</tr>
<tr>
<th>
<div class="capital">
@ -84,6 +91,19 @@
</th>
</div>
</tr>
<tr>
<div class="unions-and-alliances">
<th>
<p><a href="https://europa.eu/" class="table-data" title="European Union">EU</a></p>
<p><a href="https://en.wikipedia.org/wiki/G7" class="table-data" title="Group of Seven">G7</a></p>
<p><a href="https://g20.org/" class="table-data" title="Group of 20">G20</a></p>
<p><a href="https://www.nato.int/" class="table-data" title="North Atlantic Treaty Organization">NATO</a></p>
<p><a href="https://www.oecd.org/" class="table-data" title="Organisation for Economic Co-operation and Development">OECD</a></p>
<p><a href="https://www.un.org/en/" class="table-data" title="United Nations">UN</a></p>
<p class="table-description">Unions and Alliances</p>
</th>
</div>
</tr>
</table>
</info>
@ -92,72 +112,69 @@
<p>Germany, a federal republic in Central Europe, stands as a testament to post-war democratic reconstruction. Its political system, deeply influenced by historical lessons, is a parliamentary democracy characterized by a delicate balance of power. At its core lies the principle of federalism, dividing authority between the federal government and its 16 constituent states (Länder). The Bundestag, the directly elected lower house of parliament, holds significant legislative power. Citizens cast two votes: one for a specific candidate and another for a party list. This mixed electoral system ensures both direct representation and proportional representation of parties. The Chancellor, the head of government, is elected by the Bundestag and typically leads a coalition government, as no single party usually secures an absolute majority. This multi-party system, while often leading to complex negotiations, fosters consensus-building and broad representation of diverse interests. The Bundesrat, representing the interests of the 16 states, plays a crucial role in the legislative process. States with larger populations have more voting power, ensuring regional concerns are considered. The Federal President, elected by a Federal Convention, primarily serves a ceremonial role, but holds certain reserve powers, such as the right to dissolve the Bundestag in exceptional circumstances. The judiciary, independent of the legislative and executive branches, plays a vital role in upholding the rule of law. The Federal Constitutional Court, established in 1951, acts as the guardian of the Basic Law (Grundgesetz), Germany's constitution. It has the power to review legislation and government actions for their constitutionality, ensuring individual rights and freedoms are protected. This intricate system, with its emphasis on checks and balances, reflects Germany's commitment to democracy, social justice, and the peaceful resolution of conflicts. It continues to evolve in response to contemporary challenges, while striving to uphold the principles enshrined in its founding documents.
</p>
</div>
</middle>
<heads>
<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)">
<div class="avatar-img">
<img src="./Head-of-State.png">
</div>
<p>Federal President</p>
<p>Frank-Walter Steinmeier</p>
<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)">
<div class="avatar-img">
<img src="./Head-of-State.png">
</div>
</a>
<a href="https://en.wikipedia.org/wiki/Olaf_Scholz">
<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)">
<div class="avatar-img">
<img src="./Head-of-Goverment.png">
</div>
<p>Chancellor</p>
<p>Olaf Scholz</p>
<p>Frank-Walter Steinmeier</p>
<p>Federal President</p>
</div>
</a>
<a href="https://en.wikipedia.org/wiki/Olaf_Scholz">
<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)">
<div class="avatar-img">
<img src="./Head-of-Goverment.png">
</div>
</a>
<p>Olaf Scholz</p>
<p>Chancellor</p>
</div>
</a>
<a href="https://en.wikipedia.org/wiki/Bettina_Limperg">
<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)">
<div class="avatar-img">
<img src="./Head-of-Justice.png">
</div>
<p>President of Federal Court of Justice</p>
<p>Bettina Limperg</p>
<a href="https://en.wikipedia.org/wiki/Bettina_Limperg">
<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)">
<div class="avatar-img">
<img src="./Head-of-Justice.png">
</div>
</a>
<p>Bettina Limperg</p>
<p>President of Federal Court of Justice</p>
</div>
</a>
</section>
</heads>
</heads>
</middle>
</heads>
<parliament>
<div class="parliament-seats">
JavaScript
<div class="graph" data-name="AfD"
Bundestag
<div class="graph" data-name="AfD" title="Alternative für Deutschland"
style="--percentage : 100; --fill: #009ee0 ;">
</div>
<div class="graph" data-name="CDU/CSU"
style="--percentage : 96.5893588; --fill: #000000 ;">
<div class="graph" data-name="CDU/CSU" title="Christlich Demokratische Union Deutschlands & Christlich-Soziale Union in Bayern"
style="--percentage : 89.631650751; --fill: #000000 ;">
</div>
<div class="graph" data-name="FDP"
style="--percentage : 69.849931788; --fill: #ffe30b ;">
<div class="graph" data-name="FDP" title="Freie Demokratische Partei"
style="--percentage : 62.892223739; --fill: #ffe30b ;">
</div>
<div class="graph" data-name="Die Grünen"
style="--percentage : 57.571623466; --fill: #005437 ;">
<div class="graph" data-name="Die Grünen" title="Bündnis 90/Die Grünen"
style="--percentage : 50.613915417; --fill: #005437 ;">
</div>
<div class="graph" data-name="SPD"
style="--percentage : 33.424283766; --fill: #e30613 ;">
<div class="graph" data-name="SPD" title="Sozialdemokratische Partei Deutschlands"
style="--percentage : 34.652114598; --fill: #e30613 ;">
</div>
<div class="graph" data-name="BSW"
style="--percentage : 5.184174625; --fill: #ef7a00 ;">
<div class="graph" data-name="BSW" title="Bündnis Sahra Wagenknecht"
style="--percentage : 6.412005457; --fill: #ef7a00 ;">
</div>
<div class="graph" data-name="Die Linke"
style="--percentage : 3.819918145; --fill: #ff0000 ;">
<div class="graph" data-name="Die Linke" title="Die Linke"
style="--percentage : 5.047748977; --fill: #ff0000 ;">
</div>
<div class="graph" data-name="Without Party" title="Without Party"
style="--percentage : 1.227830832; --fill: #979797 ;">
</div>
</div>
</parliament>

66
Countries/de/style.css
Unescape Escape View File

@ -108,23 +108,25 @@
.profiles{
--size: 200px;
--img-clip: "M 0 -50 L 200 -50 L 200 150 C 100 150 0 250 0 150 Z"; /* unfortunatly it isn't possible (as far as I know) to use custom properties in clip paths */
--name-txt-clr: #9c6868;
--bg-blur: 0; /* background image default blur */
--bg-blur-hover: 5px; /* background image blur on hover */
font-family: 'Ubuntu', sans-serif;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15%;
margin: auto auto;
font-family: 'Futura', sans-serif;
display: flex;
gap: 10vw;
margin: 2vw auto;
margin-bottom: 5vw;
width: auto;
align-content: center;
justify-content: center;
}
@media (min-width: 500px){
.profiles{
--grid-cols: 3 ;
margin: 23px 20%;
@media (max-width: 1100px) {
.profiles {
flex-direction: column;
margin: auto auto;
width: auto;
}
}
}
.avatar{
position: relative;
width: var(--size);
@ -161,8 +163,8 @@
.avatar > p{
text-align: right;
font-size: .9rem;
color: var(--name-txt-clr);
font-size: 1rem;
color: #060606;
bottom: .5rem;
right: 0;
translate: 0 var(--name-y,-50px);
@ -192,7 +194,7 @@
"heads heads info"
"parliament parliament info"
;
grid-template-rows: 22% 1fr 50px;
grid-template-rows: 22% 1fr 1fr 1fr;
grid-template-columns: 15% 1fr calc(20vw + 20px);
grid-gap: 0px;
height: 100vh;
@ -309,11 +311,11 @@ parliament {
}
.parliament-seats {
width: 300px;
height: 150px;
width: 50vw;
height: 25vw;
position: relative;
color: #00d791;
font-size: 22px;
font-size: 4vw;
font-weight: 600;
display: flex;
align-items: flex-end;
@ -323,25 +325,25 @@ parliament {
}
.parliament-seats:before {
content: '';
width: 300px;
height: 150px;
border: 50px solid rgba(0, 0, 0, 0.15);
width: 50vw;
height: 25vw;
border: 25vw solid rgba(0, 0, 0, 0);
border-bottom: none;
position: absolute;
box-sizing: border-box;
transform-origin: 50% 0%;
border-radius: 300px 300px 0 0;
border-radius: 100vw 100vw 0 0;
left: 0;
top: 0;
}
.parliament-seats .graph {
width: 300px;
height: 150px;
border: 50px solid var(--fill);
width: 50vw;
height: 25vw;
border: 12vw solid var(--fill);
border-top: none;
position: absolute;
transform-origin: 50% 0% 0;
border-radius: 0 0 300px 300px;
border-radius: 0 0 100vw 100vw;
left: 0;
top: 100%;
z-index: 5;
@ -355,16 +357,16 @@ parliament {
counter-reset: varible var(--percentage);
background: var(--fill);
box-sizing: border-box;
border-radius: 2px;
border-radius: 2vw;
color: #fff;
font-weight: 200;
font-size: 12px;
height: 20px;
padding: 3px 5px;
top: 0px;
font-size: 25vw;
height: 20vw;
padding: 3vw 5vw;
top: 0vw;
position: absolute;
left: 0;
transform: rotate(calc(-1deg * var(--percentage) * 1.8)) translate(-30px, 0px);
transform: rotate(calc(-1deg * var(--percentage) * 1.8)) translate(-30vw 0vw);
transition: 0.2s ease-in;
transform-origin: 0 50% 0;
opacity: 0;

Write Preview
Loading…
Cancel
Save