2021-04-13

Esperanto Flag in CSS

I'm not very good at CSS, but after some experimentation I managed to build the Verda Stelo with one unicode character, a p tag, a couple of divs and a bunch of CSS rules.

Uhm. Yeah. I had a long meeting, okay? 😆️


<div style="width:300px;height:200px;background-color:green;margin:10px auto;">
  <div style="width:100px;height:100px;background-color:white;align-content:center;display:grid;">
    <p style="font-size:110px;text-align:center;color:green">
      ★
    </p>
  </div>
</div>

Update, 2021-04-16:

I love nerds! The cross section of people interested in CSS, Esperanto, and reading my gemlog or blog must be tiny, but even so ~thumb was kind enough to give me another version of this flag, with slightly different proportions and colours:


<!DOCTYPE html>
<html lang="en">
<head>
<title>Esperanto Flag in css & html</title>
<style>
main {
        width:324px;
        height:216px;
        background-color:#009900;
        margin:10px auto;
}
div {
        width:111px;
        height:111px;
        background-color:#ffffff;
        align-content:center;
        display:grid;
}
p {
        font-size:93px;
        text-align:center;
        color:#009900;  
        padding-bottom:10px;
}
</style>
</head>
<main>
<div><p>★</p></div>
</main>
</html>

~thumb gave me permission to publish this under the CC0 license, just like my original version. 😊️

-- CC0 Björn Wärmedal