new file: Countries/af/Head-of-Goverment.png

new file:   Countries/af/Head-of-Justice.png
	new file:   Countries/af/Head-of-State.png
	modified:   Countries/af/index.html
	new file:   Countries/af/map.svg
	new file:   Countries/af/style.css
	new file:   Countries/countryrelations.json
	new file:   Countries/de/Head-of-Goverment.png
	new file:   Countries/de/Head-of-Justice.png
	new file:   Countries/de/Head-of-State.png
	modified:   Countries/de/index.html
	new file:   Countries/de/map.svg
	new file:   Countries/de/style.css
	modified:   Countries/index.html
	modified:   Countries/style.css
main
anthony 3 months ago
parent 2aa1357aec
commit d4c5119c0a

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

@ -1,9 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Afghanistan</title>
</head>
<body>
The Country of Afghanistan
</body>
<html>
<head>
<title>Afghanistan</title>
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
</div>
<img src="./map.svg" class="map" />
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_the_Taliban.svg" class="flag" />
<section class="profiles">
<a href="https://en.m.wikipedia.org/wiki/Hibatullah_Akhundzada">
<div class="avatar" style="--bg-img:url(https://upload.wikimedia.org/wikipedia/commons/8/8c/200229-D-AP390-1529_%2849603221753%29.jpg)">
<div class="avatar-img">
<img src="./Head-of-State.png">
</div>
<p>Supreme Leader</p>
<p>Mullah Hibatullah Akhundzada</p>
</div>
</a>
<a href="https://en.m.wikipedia.org/wiki/Hasan_Akhund">
<div class="avatar" style="--bg-img:url(https://upload.wikimedia.org/wikipedia/commons/8/8c/200229-D-AP390-1529_%2849603221753%29.jpg)">
<div class="avatar-img">
<img src="./Head-of-Goverment.png">
</div>
<p>Prime Minister</p>
<p>Mohammad Hasan Akhund</p>
</div>
</a>
<a href="https://en.m.wikipedia.org/wiki/Abdul_Hakim_Haqqani">
<div class="avatar" style="--bg-img:url(https://upload.wikimedia.org/wikipedia/commons/8/8c/200229-D-AP390-1529_%2849603221753%29.jpg)">
<div class="avatar-img">
<img src="./Head-of-Justice.png">
</div>
<p>Chief Justice</p>
<p>Abdul Hakim Haqqani</p>
</div>
</a>
</section>
</body>
</html>

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="26.093716mm"
height="20.775379mm"
viewBox="0 0 26.093716 20.775379"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1"
transform="translate(-102.65824,-100.54141)">
<path
id="af"
class="landxx af"
d="m 102.74199,110.61556 c -0.0714,-0.24553 0.0952,-0.43312 0.28575,-0.55615 0.30162,-0.19156 0.14023,-0.32226 -0.0265,-0.54901 0.508,-0.0577 0.48683,-0.70591 0.52123,-1.08294 0.0265,-0.19341 -0.20108,-0.41725 -0.09,-0.60457 0.0979,-0.16351 0.10054,-0.41593 0.12965,-0.59981 0.0688,-0.40349 0.61912,0.13837 0.79904,0.23071 0.26987,0.13865 0.47625,-0.04 0.74877,0.0349 0.29633,0.082 0.52123,0.36751 0.61648,0.65008 0.1905,-0.4019 0.69056,-0.18045 0.98425,-0.4445 0.1561,-0.14129 0.33073,-0.21325 0.42598,-0.41301 0.09,-0.18574 -0.10054,-0.26459 0.15081,-0.40005 -0.13494,-0.0939 -0.24871,-0.22543 -0.30427,-0.38074 0.82021,0.10583 1.69862,-0.45217 2.33362,-0.90382 0.62707,-0.4437 -0.16404,-1.84494 0.60855,-2.16164 0.28045,-0.1151 0.77258,0.0497 1.00277,-0.0971 0.24341,-0.15584 -0.045,-0.61251 0.30691,-0.66966 0.26723,-0.0431 0.56621,0.23256 0.78052,0.35136 0.32544,0.17807 0.60855,0.081 0.9578,0.0355 0.40481,-0.0529 0.76729,-0.0632 1.06362,0.24712 0.29898,0.31273 0.64823,-0.0212 1.00542,0.0783 0.14552,0.0394 0.41275,0.38788 0.53975,0.50377 0.2831,0.25374 0.31221,-0.0558 0.60325,0.005 -0.0503,-0.32808 0.50535,-0.34343 0.66675,-0.52308 0.16669,-0.18415 0.14287,0.0357 0.30427,-0.0296 0.0794,-0.032 0.0714,-0.2122 0.17727,-0.19553 0.2884,0.0442 0.38629,0.58341 0.74083,0.50191 0.42598,-0.0976 -0.0423,-0.63526 0.13229,-0.88556 0.36778,-0.52916 1.16417,0.10108 1.39436,-0.1516 0.28575,-0.30956 -0.14817,-0.42334 -0.19579,-0.64082 -0.0556,-0.25321 0.30162,-0.55139 0.39423,-0.80381 0.254,-0.69532 1.16152,-0.75512 1.55045,-0.069 0.09,0.16007 -0.0423,0.67151 0.1323,0.72866 0.17991,0.0587 0.4392,-0.18098 0.55033,0.0775 0.11642,0.27173 0.0476,0.85434 0.0609,1.15068 0,0.33363 0.0688,0.67548 0.1905,0.98716 0.37836,0.9652 0.94986,0.43418 1.4949,-0.0238 0.2249,-0.18812 0.67733,0.0212 0.79904,-0.26696 0.16404,-0.38788 0.40481,-0.6268 0.7964,-0.82286 0.29104,-0.14525 1.39964,-0.11535 0.92604,0.41328 0.33073,0.13865 0.87577,-0.23151 1.1721,-0.37914 0.24871,-0.12356 1.0504,0.10424 1.19063,0.39819 -0.22225,0.10055 -0.44186,-0.09 -0.66675,0.0185 -0.26459,0.12859 -0.09,0.35799 0.18785,0.44847 -0.23812,0.0815 -0.55298,0.1913 -0.73554,0.36142 -0.31221,0.29025 -0.53975,-0.13758 -0.84931,-0.069 -0.65617,0.14525 -1.33086,0.0688 -1.93411,0.16748 -0.28839,0.0466 -0.53445,0.21167 -0.81756,0.29051 -0.32014,0.0886 -0.38364,0.50245 -0.59002,0.61066 -0.2249,0.11853 -0.29633,-0.13573 -0.53446,0.20108 -0.11641,0.16378 -0.35189,0.39767 -0.40481,0.57997 -0.0635,0.20479 0.23812,0.34131 0.36512,0.43789 0.28575,0.3466 0.58738,0.65669 0.7329,1.17289 -0.26987,0.32703 0.14023,0.30666 0.13229,0.50562 -0.16669,0.12938 -0.13494,0.26141 -0.20637,0.44715 -0.14288,0.36274 -0.45244,0.44661 -0.55563,0.63235 -0.0503,0.0958 -0.0688,0.18891 -0.0291,0.29078 -0.0556,0.003 -0.23548,0.0132 -0.1905,0.12541 0.0661,0.15822 0.26194,0.25612 0.37571,0.37386 0.39952,0.41116 -0.2249,0.84508 -0.52388,0.91016 -0.28839,0.0635 -0.62706,0.008 -0.9181,-0.0503 -0.14288,-0.0288 -0.54769,-0.17885 -0.68527,-0.0415 -0.29634,0.29554 0.59266,0.5641 0.67733,0.9271 0.0423,0.18468 0.3519,0.4961 0.25929,0.67813 -0.09,0.17912 -0.508,0.43445 -0.73819,0.4318 -0.80433,-0.0106 -0.57679,0.23971 -0.54239,0.55748 0.0291,0.26008 0,0.56779 -0.18256,0.77417 -0.1958,0.22384 0,0.52017 0.0714,0.76332 0.11907,0.45509 0.0503,1.02367 -0.41539,1.26603 -0.27517,0.14394 -0.38894,-0.005 -0.52652,-0.22278 -0.0556,-0.0897 -0.30163,-0.16986 -0.41275,-0.1897 -0.0714,-0.0132 0.0529,0.0389 -0.0582,0.17409 -1.06098,-0.38893 -0.43392,0.36037 -1.64042,0.51435 0.0609,0.23601 0.32808,0.2458 0.47625,0.40005 -0.29104,0.15452 -0.61383,0.254 -0.94721,0.28761 -0.32279,0.0323 -0.45243,-0.19474 -0.62441,-0.2032 -0.30692,-0.0132 -0.46038,0.56462 -0.68263,0.72337 -0.26987,0.1897 -0.33073,0.18177 -0.35189,0.5916 -0.0265,0.37889 0.13229,0.67469 0.16404,1.04167 -0.0317,0.14446 -0.0344,0.24236 -0.0609,0.38814 0.0265,0.13891 0.14023,0.21828 0.1905,0.33153 0.17992,0.40851 -1.39435,0.67865 -1.59543,0.72628 -0.33603,0.0802 -0.58473,0.22992 -0.93928,0.21537 -0.35189,-0.0159 -0.78052,-0.14658 -1.1086,0.0291 -0.3175,0.17145 -0.52123,0.35031 -0.89165,0.24686 -0.3466,-0.0963 -0.74347,-0.20585 -1.10066,-0.1569 -0.79111,0.10954 -1.70127,0.27517 -2.49238,0.0429 -0.92604,-0.27305 -1.52664,-0.65987 -2.47385,-0.87312 0.40481,-0.46408 0.69056,-1.01177 1.03717,-1.51712 0.29897,-0.43445 0.59531,-0.91043 0.41539,-1.45944 -0.33073,-1.0041 -1.87589,-0.21114 -2.11931,-1.30969 -0.15346,-0.69639 -0.18256,-1.30122 -0.49742,-1.95739 -0.27516,-0.56568 -0.63764,-1.11363 -0.24606,-1.69995 0.31485,-0.47281 0.24342,-0.41989 -0.24871,-0.55351 -0.44714,-0.1225 -0.51858,-0.87233 -0.4736,-1.12289"
style="display:inline;fill:#c0c0c0;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.132292">
<title
id="title37">Afghanistan</title>
</path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.1 KiB

@ -0,0 +1,113 @@
.flag {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
border-radius: 0 0 300px 0; /* Top-left corner rounded */
height: 33.3%;
object-fit: cover;
border: 5px solid #000000;
}
.map {
width: 33.3%;
height: auto;
object-fit: cover;
filter: brightness(0);
margin-left: 33.3%;
margin-right: 33.3%;
margin-top: 33.3%;
}
.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 3 / 2; }
.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 */
--img-shadow: drop-shadow(5px 5px 2px rgba(0 0 0 / 0.5));
--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(2, 1fr);
gap: 25%;
margin: auto auto;
width: auto;
}
@media (min-width: 500px){
.profiles{
--grid-cols: 3 ;
margin: 23px 20%;
}
}
.avatar{
position: relative;
width: var(--size);
height: var(--size); /* for older browsers */
aspect-ratio: 1;
}
.avatar-img {
clip-path: path(var(--img-clip));
}
.avatar-img::before{
content: '';
position: absolute;
display: blocl;
inset: 50% 0 0 0;
z-index: -1;
border-radius: 20px;
background-color: var(--bg-clr); /* fallback if image not defined as custom property */
background-image: var(--bg-img);
background-size: cover;
background-position: center;
filter: blur(var(--bg-blur));
transition: filter 300ms ease-in-out;
}
.avatar-img > img{
width: 100%;
height: 100%;
object-fit: cover;
transition: scale 300ms, filter 300ms;
transform-origin: bottom;
scale: var(--img-scale, .9);
filter: var(--img-shadow);
}
.avatar > p{
text-align: right;
font-size: .9rem;
color: var(--name-txt-clr);
bottom: .5rem;
right: 0;
translate: 0 var(--name-y,-50px);
opacity: var(--name-opacity,0);
z-index: -1;
transition-name: translate, opacity;
transition-delay: 150ms;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.47, 1.64, 0.41, 0.8), ease-in-out;
}
/* all hover effects as custom properties */
.avatar:hover{
--img-scale: 1.2;
--img-shadow: drop-shadow(10px 15px 4px rgba(0 0 0 / 0.5));
--name-y: 0;
--name-opacity: 1;
--bg-blur: var(--bg-blur-hover);
}

@ -0,0 +1,337 @@
{
"nodes": [
{"id": "Myriel", "group": 1},
{"id": "Napoleon", "group": 1},
{"id": "Mlle.Baptistine", "group": 1},
{"id": "Mme.Magloire", "group": 1},
{"id": "CountessdeLo", "group": 1},
{"id": "Geborand", "group": 1},
{"id": "Champtercier", "group": 1},
{"id": "Cravatte", "group": 1},
{"id": "Count", "group": 1},
{"id": "OldMan", "group": 1},
{"id": "Labarre", "group": 2},
{"id": "Valjean", "group": 2},
{"id": "Marguerite", "group": 3},
{"id": "Mme.deR", "group": 2},
{"id": "Isabeau", "group": 2},
{"id": "Gervais", "group": 2},
{"id": "Tholomyes", "group": 3},
{"id": "Listolier", "group": 3},
{"id": "Fameuil", "group": 3},
{"id": "Blacheville", "group": 3},
{"id": "Favourite", "group": 3},
{"id": "Dahlia", "group": 3},
{"id": "Zephine", "group": 3},
{"id": "Fantine", "group": 3},
{"id": "Mme.Thenardier", "group": 4},
{"id": "Thenardier", "group": 4},
{"id": "Cosette", "group": 5},
{"id": "Javert", "group": 4},
{"id": "Fauchelevent", "group": 0},
{"id": "Bamatabois", "group": 2},
{"id": "Perpetue", "group": 3},
{"id": "Simplice", "group": 2},
{"id": "Scaufflaire", "group": 2},
{"id": "Woman1", "group": 2},
{"id": "Judge", "group": 2},
{"id": "Champmathieu", "group": 2},
{"id": "Brevet", "group": 2},
{"id": "Chenildieu", "group": 2},
{"id": "Cochepaille", "group": 2},
{"id": "Pontmercy", "group": 4},
{"id": "Boulatruelle", "group": 6},
{"id": "Eponine", "group": 4},
{"id": "Anzelma", "group": 4},
{"id": "Woman2", "group": 5},
{"id": "MotherInnocent", "group": 0},
{"id": "Gribier", "group": 0},
{"id": "Jondrette", "group": 7},
{"id": "Mme.Burgon", "group": 7},
{"id": "Gavroche", "group": 8},
{"id": "Gillenormand", "group": 5},
{"id": "Magnon", "group": 5},
{"id": "Mlle.Gillenormand", "group": 5},
{"id": "Mme.Pontmercy", "group": 5},
{"id": "Mlle.Vaubois", "group": 5},
{"id": "Lt.Gillenormand", "group": 5},
{"id": "Marius", "group": 8},
{"id": "BaronessT", "group": 5},
{"id": "Mabeuf", "group": 8},
{"id": "Enjolras", "group": 8},
{"id": "Combeferre", "group": 8},
{"id": "Prouvaire", "group": 8},
{"id": "Feuilly", "group": 8},
{"id": "Courfeyrac", "group": 8},
{"id": "Bahorel", "group": 8},
{"id": "Bossuet", "group": 8},
{"id": "Joly", "group": 8},
{"id": "Grantaire", "group": 8},
{"id": "MotherPlutarch", "group": 9},
{"id": "Gueulemer", "group": 4},
{"id": "Babet", "group": 4},
{"id": "Claquesous", "group": 4},
{"id": "Montparnasse", "group": 4},
{"id": "Toussaint", "group": 5},
{"id": "Child1", "group": 10},
{"id": "Child2", "group": 10},
{"id": "Brujon", "group": 4},
{"id": "Mme.Hucheloup", "group": 8}
],
"links": [
{"source": "Napoleon", "target": "Myriel", "value": 1},
{"source": "Mlle.Baptistine", "target": "Myriel", "value": 8},
{"source": "Mme.Magloire", "target": "Myriel", "value": 10},
{"source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6},
{"source": "CountessdeLo", "target": "Myriel", "value": 1},
{"source": "Geborand", "target": "Myriel", "value": 1},
{"source": "Champtercier", "target": "Myriel", "value": 1},
{"source": "Cravatte", "target": "Myriel", "value": 1},
{"source": "Count", "target": "Myriel", "value": 2},
{"source": "OldMan", "target": "Myriel", "value": 1},
{"source": "Valjean", "target": "Labarre", "value": 1},
{"source": "Valjean", "target": "Mme.Magloire", "value": 3},
{"source": "Valjean", "target": "Mlle.Baptistine", "value": 3},
{"source": "Valjean", "target": "Myriel", "value": 5},
{"source": "Marguerite", "target": "Valjean", "value": 1},
{"source": "Mme.deR", "target": "Valjean", "value": 1},
{"source": "Isabeau", "target": "Valjean", "value": 1},
{"source": "Gervais", "target": "Valjean", "value": 1},
{"source": "Listolier", "target": "Tholomyes", "value": 4},
{"source": "Fameuil", "target": "Tholomyes", "value": 4},
{"source": "Fameuil", "target": "Listolier", "value": 4},
{"source": "Blacheville", "target": "Tholomyes", "value": 4},
{"source": "Blacheville", "target": "Listolier", "value": 4},
{"source": "Blacheville", "target": "Fameuil", "value": 4},
{"source": "Favourite", "target": "Tholomyes", "value": 3},
{"source": "Favourite", "target": "Listolier", "value": 3},
{"source": "Favourite", "target": "Fameuil", "value": 3},
{"source": "Favourite", "target": "Blacheville", "value": 4},
{"source": "Dahlia", "target": "Tholomyes", "value": 3},
{"source": "Dahlia", "target": "Listolier", "value": 3},
{"source": "Dahlia", "target": "Fameuil", "value": 3},
{"source": "Dahlia", "target": "Blacheville", "value": 3},
{"source": "Dahlia", "target": "Favourite", "value": 5},
{"source": "Zephine", "target": "Tholomyes", "value": 3},
{"source": "Zephine", "target": "Listolier", "value": 3},
{"source": "Zephine", "target": "Fameuil", "value": 3},
{"source": "Zephine", "target": "Blacheville", "value": 3},
{"source": "Zephine", "target": "Favourite", "value": 4},
{"source": "Zephine", "target": "Dahlia", "value": 4},
{"source": "Fantine", "target": "Tholomyes", "value": 3},
{"source": "Fantine", "target": "Listolier", "value": 3},
{"source": "Fantine", "target": "Fameuil", "value": 3},
{"source": "Fantine", "target": "Blacheville", "value": 3},
{"source": "Fantine", "target": "Favourite", "value": 4},
{"source": "Fantine", "target": "Dahlia", "value": 4},
{"source": "Fantine", "target": "Zephine", "value": 4},
{"source": "Fantine", "target": "Marguerite", "value": 2},
{"source": "Fantine", "target": "Valjean", "value": 9},
{"source": "Mme.Thenardier", "target": "Fantine", "value": 2},
{"source": "Mme.Thenardier", "target": "Valjean", "value": 7},
{"source": "Thenardier", "target": "Mme.Thenardier", "value": 13},
{"source": "Thenardier", "target": "Fantine", "value": 1},
{"source": "Thenardier", "target": "Valjean", "value": 12},
{"source": "Cosette", "target": "Mme.Thenardier", "value": 4},
{"source": "Cosette", "target": "Valjean", "value": 31},
{"source": "Cosette", "target": "Tholomyes", "value": 1},
{"source": "Cosette", "target": "Thenardier", "value": 1},
{"source": "Javert", "target": "Valjean", "value": 17},
{"source": "Javert", "target": "Fantine", "value": 5},
{"source": "Javert", "target": "Thenardier", "value": 5},
{"source": "Javert", "target": "Mme.Thenardier", "value": 1},
{"source": "Javert", "target": "Cosette", "value": 1},
{"source": "Fauchelevent", "target": "Valjean", "value": 8},
{"source": "Fauchelevent", "target": "Javert", "value": 1},
{"source": "Bamatabois", "target": "Fantine", "value": 1},
{"source": "Bamatabois", "target": "Javert", "value": 1},
{"source": "Bamatabois", "target": "Valjean", "value": 2},
{"source": "Perpetue", "target": "Fantine", "value": 1},
{"source": "Simplice", "target": "Perpetue", "value": 2},
{"source": "Simplice", "target": "Valjean", "value": 3},
{"source": "Simplice", "target": "Fantine", "value": 2},
{"source": "Simplice", "target": "Javert", "value": 1},
{"source": "Scaufflaire", "target": "Valjean", "value": 1},
{"source": "Woman1", "target": "Valjean", "value": 2},
{"source": "Woman1", "target": "Javert", "value": 1},
{"source": "Judge", "target": "Valjean", "value": 3},
{"source": "Judge", "target": "Bamatabois", "value": 2},
{"source": "Champmathieu", "target": "Valjean", "value": 3},
{"source": "Champmathieu", "target": "Judge", "value": 3},
{"source": "Champmathieu", "target": "Bamatabois", "value": 2},
{"source": "Brevet", "target": "Judge", "value": 2},
{"source": "Brevet", "target": "Champmathieu", "value": 2},
{"source": "Brevet", "target": "Valjean", "value": 2},
{"source": "Brevet", "target": "Bamatabois", "value": 1},
{"source": "Chenildieu", "target": "Judge", "value": 2},
{"source": "Chenildieu", "target": "Champmathieu", "value": 2},
{"source": "Chenildieu", "target": "Brevet", "value": 2},
{"source": "Chenildieu", "target": "Valjean", "value": 2},
{"source": "Chenildieu", "target": "Bamatabois", "value": 1},
{"source": "Cochepaille", "target": "Judge", "value": 2},
{"source": "Cochepaille", "target": "Champmathieu", "value": 2},
{"source": "Cochepaille", "target": "Brevet", "value": 2},
{"source": "Cochepaille", "target": "Chenildieu", "value": 2},
{"source": "Cochepaille", "target": "Valjean", "value": 2},
{"source": "Cochepaille", "target": "Bamatabois", "value": 1},
{"source": "Pontmercy", "target": "Thenardier", "value": 1},
{"source": "Boulatruelle", "target": "Thenardier", "value": 1},
{"source": "Eponine", "target": "Mme.Thenardier", "value": 2},
{"source": "Eponine", "target": "Thenardier", "value": 3},
{"source": "Anzelma", "target": "Eponine", "value": 2},
{"source": "Anzelma", "target": "Thenardier", "value": 2},
{"source": "Anzelma", "target": "Mme.Thenardier", "value": 1},
{"source": "Woman2", "target": "Valjean", "value": 3},
{"source": "Woman2", "target": "Cosette", "value": 1},
{"source": "Woman2", "target": "Javert", "value": 1},
{"source": "MotherInnocent", "target": "Fauchelevent", "value": 3},
{"source": "MotherInnocent", "target": "Valjean", "value": 1},
{"source": "Gribier", "target": "Fauchelevent", "value": 2},
{"source": "Mme.Burgon", "target": "Jondrette", "value": 1},
{"source": "Gavroche", "target": "Mme.Burgon", "value": 2},
{"source": "Gavroche", "target": "Thenardier", "value": 1},
{"source": "Gavroche", "target": "Javert", "value": 1},
{"source": "Gavroche", "target": "Valjean", "value": 1},
{"source": "Gillenormand", "target": "Cosette", "value": 3},
{"source": "Gillenormand", "target": "Valjean", "value": 2},
{"source": "Magnon", "target": "Gillenormand", "value": 1},
{"source": "Magnon", "target": "Mme.Thenardier", "value": 1},
{"source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9},
{"source": "Mlle.Gillenormand", "target": "Cosette", "value": 2},
{"source": "Mlle.Gillenormand", "target": "Valjean", "value": 2},
{"source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1},
{"source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1},
{"source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1},
{"source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2},
{"source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1},
{"source": "Lt.Gillenormand", "target": "Cosette", "value": 1},
{"source": "Marius", "target": "Mlle.Gillenormand", "value": 6},
{"source": "Marius", "target": "Gillenormand", "value": 12},
{"source": "Marius", "target": "Pontmercy", "value": 1},
{"source": "Marius", "target": "Lt.Gillenormand", "value": 1},
{"source": "Marius", "target": "Cosette", "value": 21},
{"source": "Marius", "target": "Valjean", "value": 19},
{"source": "Marius", "target": "Tholomyes", "value": 1},
{"source": "Marius", "target": "Thenardier", "value": 2},
{"source": "Marius", "target": "Eponine", "value": 5},
{"source": "Marius", "target": "Gavroche", "value": 4},
{"source": "BaronessT", "target": "Gillenormand", "value": 1},
{"source": "BaronessT", "target": "Marius", "value": 1},
{"source": "Mabeuf", "target": "Marius", "value": 1},
{"source": "Mabeuf", "target": "Eponine", "value": 1},
{"source": "Mabeuf", "target": "Gavroche", "value": 1},
{"source": "Enjolras", "target": "Marius", "value": 7},
{"source": "Enjolras", "target": "Gavroche", "value": 7},
{"source": "Enjolras", "target": "Javert", "value": 6},
{"source": "Enjolras", "target": "Mabeuf", "value": 1},
{"source": "Enjolras", "target": "Valjean", "value": 4},
{"source": "Combeferre", "target": "Enjolras", "value": 15},
{"source": "Combeferre", "target": "Marius", "value": 5},
{"source": "Combeferre", "target": "Gavroche", "value": 6},
{"source": "Combeferre", "target": "Mabeuf", "value": 2},
{"source": "Prouvaire", "target": "Gavroche", "value": 1},
{"source": "Prouvaire", "target": "Enjolras", "value": 4},
{"source": "Prouvaire", "target": "Combeferre", "value": 2},
{"source": "Feuilly", "target": "Gavroche", "value": 2},
{"source": "Feuilly", "target": "Enjolras", "value": 6},
{"source": "Feuilly", "target": "Prouvaire", "value": 2},
{"source": "Feuilly", "target": "Combeferre", "value": 5},
{"source": "Feuilly", "target": "Mabeuf", "value": 1},
{"source": "Feuilly", "target": "Marius", "value": 1},
{"source": "Courfeyrac", "target": "Marius", "value": 9},
{"source": "Courfeyrac", "target": "Enjolras", "value": 17},
{"source": "Courfeyrac", "target": "Combeferre", "value": 13},
{"source": "Courfeyrac", "target": "Gavroche", "value": 7},
{"source": "Courfeyrac", "target": "Mabeuf", "value": 2},
{"source": "Courfeyrac", "target": "Eponine", "value": 1},
{"source": "Courfeyrac", "target": "Feuilly", "value": 6},
{"source": "Courfeyrac", "target": "Prouvaire", "value": 3},
{"source": "Bahorel", "target": "Combeferre", "value": 5},
{"source": "Bahorel", "target": "Gavroche", "value": 5},
{"source": "Bahorel", "target": "Courfeyrac", "value": 6},
{"source": "Bahorel", "target": "Mabeuf", "value": 2},
{"source": "Bahorel", "target": "Enjolras", "value": 4},
{"source": "Bahorel", "target": "Feuilly", "value": 3},
{"source": "Bahorel", "target": "Prouvaire", "value": 2},
{"source": "Bahorel", "target": "Marius", "value": 1},
{"source": "Bossuet", "target": "Marius", "value": 5},
{"source": "Bossuet", "target": "Courfeyrac", "value": 12},
{"source": "Bossuet", "target": "Gavroche", "value": 5},
{"source": "Bossuet", "target": "Bahorel", "value": 4},
{"source": "Bossuet", "target": "Enjolras", "value": 10},
{"source": "Bossuet", "target": "Feuilly", "value": 6},
{"source": "Bossuet", "target": "Prouvaire", "value": 2},
{"source": "Bossuet", "target": "Combeferre", "value": 9},
{"source": "Bossuet", "target": "Mabeuf", "value": 1},
{"source": "Bossuet", "target": "Valjean", "value": 1},
{"source": "Joly", "target": "Bahorel", "value": 5},
{"source": "Joly", "target": "Bossuet", "value": 7},
{"source": "Joly", "target": "Gavroche", "value": 3},
{"source": "Joly", "target": "Courfeyrac", "value": 5},
{"source": "Joly", "target": "Enjolras", "value": 5},
{"source": "Joly", "target": "Feuilly", "value": 5},
{"source": "Joly", "target": "Prouvaire", "value": 2},
{"source": "Joly", "target": "Combeferre", "value": 5},
{"source": "Joly", "target": "Mabeuf", "value": 1},
{"source": "Joly", "target": "Marius", "value": 2},
{"source": "Grantaire", "target": "Bossuet", "value": 3},
{"source": "Grantaire", "target": "Enjolras", "value": 3},
{"source": "Grantaire", "target": "Combeferre", "value": 1},
{"source": "Grantaire", "target": "Courfeyrac", "value": 2},
{"source": "Grantaire", "target": "Joly", "value": 2},
{"source": "Grantaire", "target": "Gavroche", "value": 1},
{"source": "Grantaire", "target": "Bahorel", "value": 1},
{"source": "Grantaire", "target": "Feuilly", "value": 1},
{"source": "Grantaire", "target": "Prouvaire", "value": 1},
{"source": "MotherPlutarch", "target": "Mabeuf", "value": 3},
{"source": "Gueulemer", "target": "Thenardier", "value": 5},
{"source": "Gueulemer", "target": "Valjean", "value": 1},
{"source": "Gueulemer", "target": "Mme.Thenardier", "value": 1},
{"source": "Gueulemer", "target": "Javert", "value": 1},
{"source": "Gueulemer", "target": "Gavroche", "value": 1},
{"source": "Gueulemer", "target": "Eponine", "value": 1},
{"source": "Babet", "target": "Thenardier", "value": 6},
{"source": "Babet", "target": "Gueulemer", "value": 6},
{"source": "Babet", "target": "Valjean", "value": 1},
{"source": "Babet", "target": "Mme.Thenardier", "value": 1},
{"source": "Babet", "target": "Javert", "value": 2},
{"source": "Babet", "target": "Gavroche", "value": 1},
{"source": "Babet", "target": "Eponine", "value": 1},
{"source": "Claquesous", "target": "Thenardier", "value": 4},
{"source": "Claquesous", "target": "Babet", "value": 4},
{"source": "Claquesous", "target": "Gueulemer", "value": 4},
{"source": "Claquesous", "target": "Valjean", "value": 1},
{"source": "Claquesous", "target": "Mme.Thenardier", "value": 1},
{"source": "Claquesous", "target": "Javert", "value": 1},
{"source": "Claquesous", "target": "Eponine", "value": 1},
{"source": "Claquesous", "target": "Enjolras", "value": 1},
{"source": "Montparnasse", "target": "Javert", "value": 1},
{"source": "Montparnasse", "target": "Babet", "value": 2},
{"source": "Montparnasse", "target": "Gueulemer", "value": 2},
{"source": "Montparnasse", "target": "Claquesous", "value": 2},
{"source": "Montparnasse", "target": "Valjean", "value": 1},
{"source": "Montparnasse", "target": "Gavroche", "value": 1},
{"source": "Montparnasse", "target": "Eponine", "value": 1},
{"source": "Montparnasse", "target": "Thenardier", "value": 1},
{"source": "Toussaint", "target": "Cosette", "value": 2},
{"source": "Toussaint", "target": "Javert", "value": 1},
{"source": "Toussaint", "target": "Valjean", "value": 1},
{"source": "Child1", "target": "Gavroche", "value": 2},
{"source": "Child2", "target": "Gavroche", "value": 2},
{"source": "Child2", "target": "Child1", "value": 3},
{"source": "Brujon", "target": "Babet", "value": 3},
{"source": "Brujon", "target": "Gueulemer", "value": 3},
{"source": "Brujon", "target": "Thenardier", "value": 3},
{"source": "Brujon", "target": "Gavroche", "value": 1},
{"source": "Brujon", "target": "Eponine", "value": 1},
{"source": "Brujon", "target": "Claquesous", "value": 1},
{"source": "Brujon", "target": "Montparnasse", "value": 1},
{"source": "Mme.Hucheloup", "target": "Bossuet", "value": 1},
{"source": "Mme.Hucheloup", "target": "Joly", "value": 1},
{"source": "Mme.Hucheloup", "target": "Grantaire", "value": 1},
{"source": "Mme.Hucheloup", "target": "Bahorel", "value": 1},
{"source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1},
{"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1},
{"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1}
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 255 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 212 KiB

@ -1,9 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Afghanistan</title>
</head>
<body>
The Country of Afghanistan
</body>
<html>
<head>
<title>Federal Republic of Germany</title>
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="parent">
<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" />
<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>
</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>
</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>
</div>
</a>
</section>
</body>
</html>

@ -0,0 +1,234 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
width="60.178589"
height="65.080475"
id="svg263"
sodipodi:docname="BlankMap-World.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs263" />
<sodipodi:namedview
id="namedview263"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1">
<inkscape:page
x="0"
y="0"
width="60.178589"
height="65.080475"
id="page2"
margin="0"
bleed="0" />
</sodipodi:namedview>
<title
id="title1">World Map</title>
<style
id="style_css_sheet"
type="text/css">
/*
* Below are Cascading Style Sheet (CSS) definitions in use in this file,
* which allow easily changing how countries are displayed.
*
* The styles are applied in the order in which they are defined (and re-defined) here in the preamble.
*/
/*
* Circles around small countries and territories
*
* Change opacity to 1 to display all circles
*/
.circlexx
{
opacity: 0;
fill: #c0c0c0;
stroke: #000000;
stroke-width: 0.5;
}
/*
* Smaller circles around subnational territories: Australian external territories, Chinese SARs, Dutch special municipalities, and French DOMs (overseas regions/departments) [but not French COMs (overseas collectivities)]
*
* Change opacity to 1 to display all circles
*/
.subxx
{
opacity: 0;
fill: #c0c0c0;
stroke: #000000;
stroke-width: 0.3;
}
/*
* Land
* (all land, as opposed to water, should belong to this class; in order to modify the coastline for land pieces with no borders on them a special class &quot;coastxx&quot; has been added below)
*/
.landxx
{
fill: #c0c0c0;
stroke: #ffffff;
stroke-width: 0.5;
fill-rule: evenodd;
}
/*
* Styles for coastlines of islands and continents with no borders on them
* (all of them should also belong to the class &quot;landxx&quot; - to allow for all land to be modified at once by refining &quot;landxx&quot; style's definition further down)
*/
.coastxx
{
stroke-width: 0.2;
}
/*
* Styles for territories without permanent population (the largest of which is Antarctica)
*
* Change opacity to 0 to hide all territories
*/
.antxx
{
opacity: 1;
fill: #c0c0c0;
}
/*
* Circles around small countries without permanent population
*
* Change opacity to 1 to display all circles
*/
.noxx
{
opacity: 0;
fill: #c0c0c0;
stroke: #000000;
stroke-width: 0.5;
}
/*
* Styles for territories with limited or no recognition
* (all of them - including Taiwan - are overlays (i.e. duplicate layers) over their &quot;host&quot; countries, and so not showing them doesn't leave any gaps on the map)
*
* Change opacity to 1 to display all territories
*/
.limitxx
{
opacity: 0;
fill: #c0c0c0;
stroke: #ffffff;
stroke-width: 0.2;
fill-rule: evenodd;
}
/*
* Smaller circles around small territories with limited or no recognition
*
* Change opacity to 1 to display all circles
*/
.unxx
{
opacity: 0;
fill: #c0c0c0;
stroke: #000000;
stroke-width: 0.3;
}
/*
* Oceans, seas, and large lakes
*/
.oceanxx
{
opacity: 1;
fill: #ffffff;
stroke: #000000;
stroke-width: 0.5;
}
/*
* Reserved class names:
*
* .eu - for members of European Union
* .eaeu - for members of Eurasian Economic Union
*/
/*
* Additional style rules
*
* The following are examples of colouring countries.
* These can be substituted with custom styles to colour the countries on the map.
*
* Colour a few countries:
*
* .gb, .au, .nc
* {
* fill: #ff0000;
* }
*
* Colour a few small-country circles (along with the countries):
*
* .ms, .ky
* {
* opacity: 1;
* fill: #ff0000;
* }
*
*/
</style>
<g
id="de"
class="landxx coastxx eu de"
transform="translate(-1350.0354,-225.74887)">
<title
id="title55">Germany</title>
<path
id="Germany_mainland"
class="landxx eu de"
d="m 1366.68,226.26 c -0.68,0.276 -0.75,1.235 -0.61,1.814 0,-0.392 0.36,-0.733 0.81,-0.907 -0.32,-0.107 -0.49,-0.419 -0.2,-0.907 z m 0.9,0.806 c -0.21,0 -0.4,0.04 -0.6,0.101 0.38,0.09 0.91,0.03 1.21,0 -0.2,-0.08 -0.39,-0.1 -0.61,-0.101 z m 1.75,-0.107 c -0.63,-0.06 -0.41,0.144 -1.04,0.208 0.42,0.212 0.87,1.512 1.11,1.915 0.21,0.355 1.19,1.046 0.91,1.512 -0.47,0.767 -1.79,0.342 -2.32,1.31 0.7,0.298 1.4,0.167 2.11,0 -1.6,0.736 0.13,1.241 0.41,2.117 -0.68,-0.03 -0.93,0.392 -0.41,0.907 0.58,0.561 1.41,0.387 2.12,0.604 0.75,0.231 1.13,0.832 1.61,1.412 0.58,0.695 1.35,0.778 2.02,1.31 -1.74,-0.189 -2.2,-1.634 -3.53,-2.419 -0.87,-0.514 -1.89,0.09 -2.82,0 -1.09,-0.108 -2.15,-0.461 -2.32,1.008 -0.1,0.586 0.41,1.047 0.4,1.612 -0.16,0.421 -0.22,0.868 -0.3,1.311 -0.1,-0.728 0.11,-1.425 -0.7,-1.814 -0.96,-0.456 -1.3,0.446 -0.71,1.108 -0.53,0.133 -0.98,0.02 -1.41,-0.302 2.37,-1.6 -4.05,-1.852 -4.74,-1.714 -0.79,0.158 -2.13,1.428 -2.11,2.319 0,0.739 2.77,1.13 2.31,0.907 -1.12,-0.548 -1.88,3.684 -2.11,4.636 -0.3,1.227 -1.34,0.315 -2.22,0.907 -1.38,0.923 1.19,1.355 1.53,1.928 0.99,1.641 -2.43,2.131 -1.36,3.355 1.03,1.196 -3.61,0.917 -4.24,0.593 0.41,1.153 -0.35,0.145 -1.17,0.676 0.1,0.267 -0.21,0.334 0,0.706 0.92,0.316 2.04,2.476 1.53,3.445 -0.45,0.868 -2.21,2.14 -1.36,3.326 0.46,0.635 0.1,1.515 0.19,1.748 0.27,0.711 1.93,0.746 1.15,1.761 0.99,-0.167 0.9,0.972 1.19,1.577 -2.97,-0.03 -3.47,2.321 -0.63,3.705 1.99,0.974 0,2.851 0.72,3.703 0.11,0.13 2.04,2.504 2.52,2.425 0.69,-0.114 0.14,-0.539 1.16,-0.405 0.54,0.07 0,0.96 0.92,0.723 0.35,-0.09 0.83,0 1.19,-0.03 1.28,-0.444 1.41,0.25 2.59,0.622 1.07,0.335 2.4,0.479 3.51,0.664 -0.9,0.795 -1.75,1.581 -2.49,2.538 -0.83,1.096 -1.12,2.764 -1.68,3.978 -0.37,0.812 -1.77,6.672 0.32,4.909 -0.72,0.839 2.91,0.25 3.58,0.285 1.3,0.07 2.44,0.02 2.72,-0.807 -1.56,0.581 -1.03,-1.517 0.81,-0.604 1.3,0.645 4.45,1.039 5.77,1.809 0.81,0.472 5.14,0.181 4.01,2.122 1.56,-0.05 1.67,-1.466 2.01,-2.621 0.67,0.595 2.19,0.583 3.03,0.504 -0.73,0.358 1.14,0.898 1.51,0.907 0.86,0.02 1.4,-0.725 2.22,-0.806 1.57,-0.158 3.09,-1.375 4.83,-0.807 0,-0.269 0,-0.547 -0.1,-0.806 0.81,0.1 1.6,0.504 2.42,0.504 0.4,-0.136 0.8,-0.222 1.21,-0.302 0.45,0.05 0.64,0.924 1.01,1.209 1.12,0.861 1.11,0.424 1.41,-0.605 0.3,-1.026 -0.98,-0.63 -0.91,-1.511 0.1,-1.075 0.13,-1.029 -0.7,-1.916 -0.63,-0.668 -0.2,-1.186 0.5,-1.511 0.81,-0.371 3.43,-0.819 3.43,-2.016 0,-2.107 1.44,-0.274 2.22,-1.21 1.4,-1.7 -1.05,-2.884 -2.12,-3.528 -1.26,-0.753 -2.32,-1.795 -3.63,-2.519 -1.64,-0.911 -1.97,-2.984 -3.53,-3.831 1.23,-0.978 0.66,-1.782 -0.5,-2.419 -0.9,-0.493 -1.1,-1.385 -1.51,-2.116 0.65,-0.1 1.16,0.165 1.41,1.108 0.25,-2.655 3.66,-1.621 5.04,-2.721 2.19,-1.756 5.85,-2.725 8.46,-3.729 -0.23,-0.222 -0.46,-0.395 -0.7,-0.605 1,-0.236 1.24,-0.523 2.1,0.611 2.12,2.734 3.47,-2.328 2.42,-3.64 -0.14,-0.816 -1.44,-0.857 -1.51,-1.507 -0.1,-0.883 0,-1.186 -0.69,-1.915 -0.45,-0.488 0.22,-0.881 0.4,-1.345 1.04,-2.665 -1.62,-3.381 -0.92,-4.181 1.4,-1.604 -2.47,-2.162 -3,-3.67 0.71,-0.558 2.96,-4.006 1.5,-4.209 -0.3,-1.109 -0.63,-2.284 -1.81,-2.722 -0.73,-0.269 -1.92,-0.466 -2.02,-1.411 0,-0.492 -0.27,-2.016 -1.01,-2.016 -0.44,0 -1.35,0 -1.11,0.504 -0.8,-0.471 -2.55,-2.551 -3.32,-2.62 -1.62,-0.145 -2.72,-0.01 -3.93,1.209 -0.2,-1.355 2.07,-1.451 2.92,-1.31 -1.65,-0.616 -1.89,-0.141 -3.12,0.806 -0.59,0.448 -1.86,0.947 -1.52,1.915 0.16,-1.634 -3.08,-0.178 -3.83,0.303 1.47,-0.715 -0.16,0.484 -0.4,1.209 -0.6,-0.562 -4.1,-1.343 -3.33,0 -0.14,-0.517 -0.5,-0.796 -1,-0.907 0.97,-1 1.85,-1.665 2.11,-3.125 -1.32,0.263 -2.11,0.794 -3.42,0.202 -0.82,-0.369 -2.12,-0.869 -2.52,0.302 -0.11,-0.52 -0.13,-0.55 0.2,-1.008 -0.67,-0.299 -1.46,-0.27 -2.12,0 0.5,-0.236 1.65,-1.744 0.4,-1.713 2,-0.907 -4.79,-1.513 -4.52,-1.364 -0.6,-0.331 -2.04,-0.59 -2.7,-0.658 z" />
<path
id="path3832"
d="m 1367.74,228.87 c 0.16,-0.763 -0.1,-0.811 -0.72,-0.145 0.24,0.05 0.48,0.1 0.72,0.145" />
<path
id="path3834"
d="m 1384.01,231.03 c 0.43,0.05 0.87,0.05 1.3,0 -0.3,-0.76 -1.07,-1.027 -1.8,-0.721 0.16,0.241 0.33,0.481 0.5,0.721" />
<path
id="path3892"
d="m 1396.9,231.68 c 1.08,-0.136 0.57,-1.164 0.22,-1.728 0.76,-0.07 1.48,0.207 2.16,0.504 -0.32,-0.887 -2.18,-0.628 -0.72,-1.584 -0.1,1.46 1.49,0.18 1.73,1.043 0.11,0.423 -0.62,0.963 -0.11,1.289 0.38,0.24 0.69,0.272 0.68,0.835 -0.71,-0.121 -1.34,-0.549 -1.95,-0.02 -0.53,0.459 -1.7,0.328 -2.01,-0.334" />
<path
id="path3894"
d="m 1401.37,234.05 c 0,-0.344 0,-0.68 -0.15,-1.008 0.69,0.875 2.13,0.861 2.75,1.821 0.61,0.937 -1.93,0.942 -2.39,0.699 1.02,-0.184 0.1,-1.227 1.23,-1.296 -0.5,0.04 -0.98,-0.03 -1.44,-0.216" />
</g>
<!--
/*
* Countries with subnational territories (Australia, China, France, Netherlands)
*
*/
-->
<!--
/*
* Small countries and territories with an optional circle around them
*
*/
-->
<!--
/*
* Territories without ISO 3166-1 codes are listed above inside their respective host countries' groupings:
*
* xa, xo, xj, xk, xs, xq, xn, xz, xv, xp, xd, xl, xc
*/
-->
</svg>

After

Width:  |  Height:  |  Size: 9.0 KiB

@ -0,0 +1,113 @@
.flag {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
border-radius: 0 0 300px 0; /* Top-left corner rounded */
height: 33.3%;
object-fit: cover;
border: 5px solid #dd0000;
}
.map {
width: 33.3%;
height: auto;
object-fit: cover;
filter: brightness(0);
margin-left: 33.3%;
margin-right: 33.3%;
margin-top: 33.3%;
}
.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 3 / 2; }
.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 */
--img-shadow: drop-shadow(5px 5px 2px rgba(0 0 0 / 0.5));
--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(2, 1fr);
gap: 25%;
margin: auto auto;
width: auto;
}
@media (min-width: 500px){
.profiles{
--grid-cols: 3 ;
margin: 23px 20%;
}
}
.avatar{
position: relative;
width: var(--size);
height: var(--size); /* for older browsers */
aspect-ratio: 1;
}
.avatar-img {
clip-path: path(var(--img-clip));
}
.avatar-img::before{
content: '';
position: absolute;
display: blocl;
inset: 50% 0 0 0;
z-index: -1;
border-radius: 20px;
background-color: var(--bg-clr); /* fallback if image not defined as custom property */
background-image: var(--bg-img);
background-size: cover;
background-position: center;
filter: blur(var(--bg-blur));
transition: filter 300ms ease-in-out;
}
.avatar-img > img{
width: 100%;
height: 100%;
object-fit: cover;
transition: scale 300ms, filter 300ms;
transform-origin: bottom;
scale: var(--img-scale, .9);
filter: var(--img-shadow);
}
.avatar > p{
text-align: right;
font-size: .9rem;
color: var(--name-txt-clr);
bottom: .5rem;
right: 0;
translate: 0 var(--name-y,-50px);
opacity: var(--name-opacity,0);
z-index: -1;
transition-name: translate, opacity;
transition-delay: 150ms;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.47, 1.64, 0.41, 0.8), ease-in-out;
}
/* all hover effects as custom properties */
.avatar:hover{
--img-scale: 1.2;
--img-shadow: drop-shadow(10px 15px 4px rgba(0 0 0 / 0.5));
--name-y: 0;
--name-opacity: 1;
--bg-blur: var(--bg-blur-hover);
}

File diff suppressed because it is too large Load Diff

@ -69,7 +69,7 @@
transform: translate3d(0%, -50px, 100px);
}
.character {
.coat-of-arms {
width: 75%;
opacity: 0;
transition: all 0.5s;
@ -77,7 +77,7 @@
z-index: -1;
}
.card:hover .character {
.card:hover .coat-of-arms {
opacity: 1;
transform: translate3d(0%, -30%, 100px);
}

Loading…
Cancel
Save