Add some style to the bile.

This commit is contained in:
Niels G. W. Serup 2016-08-26 12:06:49 +02:00
parent 9261e119cb
commit be2a25ea4f
6 changed files with 265 additions and 3 deletions

4
.gitignore vendored
View File

@ -1,2 +1,2 @@
*#*#
/.old
/web-serve
*.pyc

View File

@ -1,6 +1,6 @@
server_name metanohi.name www.metanohi.name;
root /var/www/metanohi.name/web;
root /var/www/metanohi.name/web-serve;
index index.html;
location / {

View File

@ -0,0 +1,70 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="800"
height="100"
viewBox="0 0 800.00001 100"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="logo.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="0.891875"
inkscape:cx="440.30656"
inkscape:cy="117.54132"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1920"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-952.36216)">
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:85.62496185px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
x="120.12894"
y="1044.1141"
id="text4136"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4138"
x="120.12894"
y="1044.1141"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff;">metanohi.name</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

87
site/logo/logo.svg Normal file
View File

@ -0,0 +1,87 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg2"
viewBox="0 0 800.00001 100"
height="100"
width="800">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0,-952.36216)"
id="layer1">
<g
id="text4136"
style="font-style:normal;font-weight:normal;font-size:85.62496185px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
<path
id="path4179"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff"
d="m 189.74203,1044.1141 0,-2.6543 c -4.4525,0 -6.59312,0 -6.67875,-2.5688 l 0,-16.3544 c 0,-7.3637 0,-10.0181 -2.65437,-13.1006 -1.19875,-1.4556 -4.02437,-3.1681 -8.99062,-3.1681 -7.1925,0 -10.96,5.1375 -12.41562,8.3912 -1.19875,-7.4493 -7.535,-8.3912 -11.38812,-8.3912 -6.25062,0 -10.275,3.6819 -12.58687,8.8194 l -0.0856,0 0,-8.8194 -12.07312,0.9419 0,2.6544 c 5.99374,0 6.67874,0.5993 6.67874,4.7949 l 0,22.9475 c 0,3.8532 -0.94187,3.8532 -6.67874,3.8532 l 0,2.6543 9.67562,-0.2568 9.58999,0.2568 0,-2.6543 c -5.73687,0 -6.67875,0 -6.67875,-3.8532 l 0,-15.755 c 0,-8.905 6.07938,-13.6999 11.55937,-13.6999 5.39438,0 6.33625,4.6237 6.33625,9.5043 l 0,19.9506 c 0,3.8532 -0.94187,3.8532 -6.67875,3.8532 l 0,2.6543 9.67563,-0.2568 9.58999,0.2568 0,-2.6543 c -5.73687,0 -6.67875,0 -6.67875,-3.8532 l 0,-15.755 c 0,-8.905 6.07938,-13.6999 11.55937,-13.6999 5.39438,0 6.33625,4.6237 6.33625,9.5043 l 0,19.9506 c 0,3.8532 -0.94187,3.8532 -6.67875,3.8532 l 0,2.6543 9.67563,-0.2568 9.58999,0.2568 z" />
<path
id="path4181"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff"
d="m 227.07318,1033.9248 c 0,-0.8563 -0.685,-1.0275 -1.11313,-1.0275 -0.77062,0 -0.94187,0.5137 -1.11312,1.1987 -2.99688,8.8194 -10.70312,8.8194 -11.55937,8.8194 -4.28125,0 -7.70625,-2.5688 -9.67562,-5.7369 -2.56875,-4.11 -2.56875,-9.7612 -2.56875,-12.8437 l 23.88936,0 c 1.88375,0 2.14063,0 2.14063,-1.7982 0,-8.4768 -4.62375,-16.7824 -15.32687,-16.7824 -9.9325,0 -17.80999,8.8193 -17.80999,19.5224 0,11.4738 8.99062,19.7794 18.83749,19.7794 10.44624,0 14.29937,-9.5044 14.29937,-11.1312 z m -5.65125,-11.3882 -20.29312,0 c 0.51375,-12.7581 7.70625,-14.8987 10.6175,-14.8987 8.81937,0 9.67562,11.5594 9.67562,14.8987 z" />
<path
id="path4183"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff"
d="m 257.92894,1033.4966 0,-4.8806 -2.14063,0 0,4.7094 c 0,6.3362 -2.56875,9.59 -5.73687,9.59 -5.73687,0 -5.73687,-7.7919 -5.73687,-9.2475 l 0,-23.8037 12.24437,0 0,-2.6544 -12.24437,0 0,-15.75502 -2.14063,0 c -0.0856,7.02125 -2.65437,16.18312 -11.04562,16.52562 l 0,1.8838 7.27813,0 0,23.6324 c 0,10.5319 7.96312,11.5594 11.04562,11.5594 6.07937,0 8.47687,-6.0794 8.47687,-11.5594 z" />
<path
id="path4185"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff"
d="m 304.13832,1036.4935 0,-4.795 -2.14062,0 0,4.795 c 0,4.9663 -2.14063,5.48 -3.0825,5.48 -2.82563,0 -3.16813,-3.8531 -3.16813,-4.2812 l 0,-17.125 c 0,-3.5963 0,-6.9357 -3.08249,-10.1038 -3.33938,-3.3393 -7.62063,-4.7093 -11.73062,-4.7093 -7.02125,0 -12.92937,4.0243 -12.92937,9.6756 0,2.5687 1.7125,4.0243 3.93874,4.0243 2.3975,0 3.93875,-1.7125 3.93875,-3.9387 0,-1.0275 -0.42812,-3.8531 -4.36687,-3.9387 2.31187,-2.9969 6.5075,-3.9388 9.2475,-3.9388 4.19562,0 9.07624,3.3394 9.07624,10.96 l 0,3.1681 c -4.36687,0.2569 -10.36062,0.5138 -15.75499,3.0825 -6.42187,2.9113 -8.5625,7.3638 -8.5625,11.1313 0,6.9356 8.30562,9.0762 13.7,9.0762 5.65124,0 9.58999,-3.425 11.21687,-7.4494 0.3425,3.425 2.65437,7.0213 6.67874,7.0213 1.79813,0 7.02125,-1.1988 7.02125,-8.1344 z m -14.29937,-4.3669 c 0,8.1344 -6.165,11.0457 -10.01812,11.0457 -4.19562,0 -7.70625,-2.9969 -7.70625,-7.2782 0,-4.7093 3.59625,-11.8162 17.72437,-12.33 l 0,8.5625 z" />
<path
id="path4187"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff"
d="m 351.4033,1044.1141 0,-2.6543 c -4.4525,0 -6.59312,0 -6.67874,-2.5688 l 0,-16.3544 c 0,-7.3637 0,-10.0181 -2.65438,-13.1006 -1.19875,-1.4556 -4.02437,-3.1681 -8.99062,-3.1681 -6.25062,0 -10.27499,3.6819 -12.58687,8.8194 l -0.0856,0 0,-8.8194 -12.07312,0.9419 0,2.6544 c 5.99374,0 6.67874,0.5993 6.67874,4.7949 l 0,22.9475 c 0,3.8532 -0.94187,3.8532 -6.67874,3.8532 l 0,2.6543 9.67562,-0.2568 9.58999,0.2568 0,-2.6543 c -5.73687,0 -6.67874,0 -6.67874,-3.8532 l 0,-15.755 c 0,-8.905 6.07937,-13.6999 11.55937,-13.6999 5.39437,0 6.33624,4.6237 6.33624,9.5043 l 0,19.9506 c 0,3.8532 -0.94187,3.8532 -6.67874,3.8532 l 0,2.6543 9.67562,-0.2568 9.58999,0.2568 z" />
<path
id="path4189"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff"
d="m 393.58563,1025.7904 c 0,-10.96 -8.5625,-20.0362 -18.92312,-20.0362 -10.70312,0 -19.00874,9.3331 -19.00874,20.0362 0,11.0456 8.905,19.2656 18.92312,19.2656 10.36062,0 19.00874,-8.3912 19.00874,-19.2656 z m -7.10687,-0.685 c 0,3.0825 0,7.7062 -1.88375,11.4737 -1.88375,3.8532 -5.65125,6.3363 -9.9325,6.3363 -3.68187,0 -7.44937,-1.7981 -9.76124,-5.7369 -2.14063,-3.7675 -2.14063,-8.9906 -2.14063,-12.0731 0,-3.3394 0,-7.9631 2.055,-11.7306 2.31188,-3.9388 6.33625,-5.7369 9.76125,-5.7369 3.7675,0 7.44937,1.8838 9.67562,5.5656 2.22625,3.6819 2.22625,8.6481 2.22625,11.9019 z" />
<path
id="path4191"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff"
d="m 441.87811,1044.1141 0,-2.6543 c -4.4525,0 -6.59312,0 -6.67875,-2.5688 l 0,-16.3544 c 0,-7.3637 0,-10.0181 -2.65437,-13.1006 -1.19875,-1.4556 -4.02437,-3.1681 -8.99062,-3.1681 -7.1925,0 -10.96,5.1375 -12.33,8.22 l -0.0856,0 0,-53.60123 -12.33,0.94188 0,2.65437 c 5.99375,0 6.67875,0.59938 6.67875,4.795 l 0,68.32868 c 0,3.8532 -0.94187,3.8532 -6.67875,3.8532 l 0,2.6543 9.67563,-0.2568 9.58999,0.2568 0,-2.6543 c -5.73687,0 -6.67875,0 -6.67875,-3.8532 l 0,-15.755 c 0,-8.905 6.07938,-13.6999 11.55937,-13.6999 5.39438,0 6.33625,4.6237 6.33625,9.5043 l 0,19.9506 c 0,3.8532 -0.94187,3.8532 -6.67875,3.8532 l 0,2.6543 9.67562,-0.2568 9.59,0.2568 z" />
<path
id="path4193"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff"
d="m 464.88044,1044.1141 0,-2.6543 c -5.65124,0 -5.99374,-0.4282 -5.99374,-3.7675 l 0,-31.4244 -11.9875,0.9419 0,2.6544 c 5.56563,0 6.33625,0.5137 6.33625,4.7093 l 0,23.0331 c 0,3.8532 -0.94187,3.8532 -6.67875,3.8532 l 0,2.6543 9.41875,-0.2568 c 2.99687,0 5.99375,0.1712 8.90499,0.2568 z m -4.70937,-61.30744 c 0,-2.31187 -1.96937,-4.53812 -4.53812,-4.53812 -2.91125,0 -4.62375,2.3975 -4.62375,4.53812 0,2.31188 1.96937,4.53813 4.53812,4.53813 2.91125,0 4.62375,-2.3975 4.62375,-4.53813 z" />
<path
id="path4195"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff"
d="m 483.91863,1039.576 c 0,-2.4831 -2.055,-4.5381 -4.53812,-4.5381 -2.48313,0 -4.53813,2.055 -4.53813,4.5381 0,2.4831 2.055,4.5381 4.53813,4.5381 2.48312,0 4.53812,-2.055 4.53812,-4.5381 z" />
<path
id="path4197"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff"
d="m 537.03552,1044.1141 0,-2.6543 c -4.4525,0 -6.59312,0 -6.67875,-2.5688 l 0,-16.3544 c 0,-7.3637 0,-10.0181 -2.65437,-13.1006 -1.19875,-1.4556 -4.02437,-3.1681 -8.99062,-3.1681 -6.25062,0 -10.275,3.6819 -12.58687,8.8194 l -0.0856,0 0,-8.8194 -12.07312,0.9419 0,2.6544 c 5.99375,0 6.67875,0.5993 6.67875,4.7949 l 0,22.9475 c 0,3.8532 -0.94187,3.8532 -6.67875,3.8532 l 0,2.6543 9.67563,-0.2568 9.58999,0.2568 0,-2.6543 c -5.73687,0 -6.67875,0 -6.67875,-3.8532 l 0,-15.755 c 0,-8.905 6.07938,-13.6999 11.55937,-13.6999 5.39438,0 6.33625,4.6237 6.33625,9.5043 l 0,19.9506 c 0,3.8532 -0.94187,3.8532 -6.67875,3.8532 l 0,2.6543 9.67562,-0.2568 9.59,0.2568 z" />
<path
id="path4199"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff"
d="m 580.24538,1036.4935 0,-4.795 -2.14063,0 0,4.795 c 0,4.9663 -2.14062,5.48 -3.0825,5.48 -2.82562,0 -3.16812,-3.8531 -3.16812,-4.2812 l 0,-17.125 c 0,-3.5963 0,-6.9357 -3.0825,-10.1038 -3.33937,-3.3393 -7.62062,-4.7093 -11.73062,-4.7093 -7.02125,0 -12.92937,4.0243 -12.92937,9.6756 0,2.5687 1.7125,4.0243 3.93875,4.0243 2.3975,0 3.93875,-1.7125 3.93875,-3.9387 0,-1.0275 -0.42813,-3.8531 -4.36687,-3.9387 2.31187,-2.9969 6.50749,-3.9388 9.24749,-3.9388 4.19562,0 9.07625,3.3394 9.07625,10.96 l 0,3.1681 c -4.36688,0.2569 -10.36062,0.5138 -15.755,3.0825 -6.42187,2.9113 -8.56249,7.3638 -8.56249,11.1313 0,6.9356 8.30562,9.0762 13.69999,9.0762 5.65125,0 9.59,-3.425 11.21687,-7.4494 0.3425,3.425 2.65438,7.0213 6.67875,7.0213 1.79812,0 7.02125,-1.1988 7.02125,-8.1344 z m -14.29937,-4.3669 c 0,8.1344 -6.165,11.0457 -10.01812,11.0457 -4.19563,0 -7.70625,-2.9969 -7.70625,-7.2782 0,-4.7093 3.59625,-11.8162 17.72437,-12.33 l 0,8.5625 z" />
<path
id="path4201"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff"
d="m 651.31408,1044.1141 0,-2.6543 c -4.4525,0 -6.59312,0 -6.67874,-2.5688 l 0,-16.3544 c 0,-7.3637 0,-10.0181 -2.65438,-13.1006 -1.19875,-1.4556 -4.02437,-3.1681 -8.99062,-3.1681 -7.1925,0 -10.95999,5.1375 -12.41562,8.3912 -1.19875,-7.4493 -7.535,-8.3912 -11.38812,-8.3912 -6.25062,0 -10.27499,3.6819 -12.58687,8.8194 l -0.0856,0 0,-8.8194 -12.07312,0.9419 0,2.6544 c 5.99374,0 6.67874,0.5993 6.67874,4.7949 l 0,22.9475 c 0,3.8532 -0.94187,3.8532 -6.67874,3.8532 l 0,2.6543 9.67562,-0.2568 9.58999,0.2568 0,-2.6543 c -5.73687,0 -6.67874,0 -6.67874,-3.8532 l 0,-15.755 c 0,-8.905 6.07937,-13.6999 11.55937,-13.6999 5.39437,0 6.33624,4.6237 6.33624,9.5043 l 0,19.9506 c 0,3.8532 -0.94187,3.8532 -6.67874,3.8532 l 0,2.6543 9.67562,-0.2568 9.58999,0.2568 0,-2.6543 c -5.73687,0 -6.67874,0 -6.67874,-3.8532 l 0,-15.755 c 0,-8.905 6.07937,-13.6999 11.55937,-13.6999 5.39437,0 6.33624,4.6237 6.33624,9.5043 l 0,19.9506 c 0,3.8532 -0.94187,3.8532 -6.67874,3.8532 l 0,2.6543 9.67562,-0.2568 9.58999,0.2568 z" />
<path
id="path4203"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Latin Modern Roman Dunhill';-inkscape-font-specification:'Latin Modern Roman Dunhill';fill:#ffffff"
d="m 688.64523,1033.9248 c 0,-0.8563 -0.685,-1.0275 -1.11312,-1.0275 -0.77063,0 -0.94188,0.5137 -1.11313,1.1987 -2.99687,8.8194 -10.70312,8.8194 -11.55937,8.8194 -4.28125,0 -7.70625,-2.5688 -9.67562,-5.7369 -2.56875,-4.11 -2.56875,-9.7612 -2.56875,-12.8437 l 23.88937,0 c 1.88374,0 2.14062,0 2.14062,-1.7982 0,-8.4768 -4.62375,-16.7824 -15.32687,-16.7824 -9.93249,0 -17.80999,8.8193 -17.80999,19.5224 0,11.4738 8.99062,19.7794 18.83749,19.7794 10.44625,0 14.29937,-9.5044 14.29937,-11.1312 z m -5.65125,-11.3882 -20.29311,0 c 0.51375,-12.7581 7.70624,-14.8987 10.61749,-14.8987 8.81937,0 9.67562,11.5594 9.67562,14.8987 z" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 13 KiB

66
site/style.css Normal file
View File

@ -0,0 +1,66 @@
body {
font-family: sans;
}
* {
margin: 0;
}
#body {
width: 800px;
margin: 0 auto;
}
#body header {
height: 100px;
background-color: rgba(0, 0, 0, 0.8);
}
#body header img {
width: 800px;
height: 100px;
}
#body nav {
background-color: #333333;
padding: 1px 0 5px 0;
}
#body nav ul {
list-style: none;
padding: 0;
text-align: center;
font-size: 24px;
}
#body nav ul li {
display: inline;
margin-left: 25px;
}
#body nav ul li:first-child {
margin-left: 0;
}
#body nav a, #body nav a:visited {
color: #51B7FF;
text-decoration: none;
}
#content {
padding: 10px;
background-color: rgba(0, 0, 0, 0.8);
color: #eeeeee;
}
p {
margin-top: 0.5em;
}
#background div {
position: fixed;
top: 0;
width: 10%;
height: 100%;
z-index: -1;
}

39
template/base.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>metanohi.name: {title}</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="body">
<header>
<a href="/"><img src="/logo/logo.svg" alt="Logo"></a>
</header>
<nav>
<ul>
<li><a href="https://git.metanohi.name/">projects</a></li>
<li><a href="https://media.metanohi.name/">media</a></li>
<li><a href="/misc">misc</a></li>
<li><a href="/about">about</a></li>
</ul>
</nav>
<div id="content">
{content}
</div>
</div>
<div id="background">
<div style="left: 00%; background-color: #A6CE52;"></div>
<div style="left: 10%; background-color: #6CCA80;"></div>
<div style="left: 20%; background-color: #218F08;"></div>
<div style="left: 30%; background-color: #57A543;"></div>
<div style="left: 40%; background-color: #97D165;"></div>
<div style="left: 50%; background-color: #6A9248;"></div>
<div style="left: 60%; background-color: #47AA4D;"></div>
<div style="left: 70%; background-color: #48E283;"></div>
<div style="left: 80%; background-color: #9CC66E;"></div>
<div style="left: 90%; background-color: #93B748;"></div>
</div>
</body>
</html>