From 340ea19834e61f5585b16d9b4919aa66ec94fec9 Mon Sep 17 00:00:00 2001
From: Romain de Laage <romain.delaage@rdelaage.ovh>
Date: Sat, 3 Apr 2021 19:56:35 +0200
Subject: [PATCH] Change index style

---
 assets/css/main.css   | 79 +++++++++++++++++++++++++++++++++++++++++++
 assets/img/html.svg   |  8 +++++
 assets/img/js.svg     |  4 +++
 assets/img/lua.svg    | 16 +++++++++
 assets/img/py.svg     | 31 +++++++++++++++++
 assets/img/sqlite.svg |  3 ++
 index.html            | 10 ++++--
 7 files changed, 148 insertions(+), 3 deletions(-)
 create mode 100644 assets/img/html.svg
 create mode 100644 assets/img/js.svg
 create mode 100644 assets/img/lua.svg
 create mode 100644 assets/img/py.svg
 create mode 100644 assets/img/sqlite.svg

diff --git a/assets/css/main.css b/assets/css/main.css
index 3f15b30..ffea5c9 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -5,11 +5,15 @@ body {
 	background: #0A3D62;
 	font-family: sans-serif;
 	font-size: 21px;
+	color: white;
 }
 h1 {
 	color: white;
 	text-align: center;
 }
+a {
+	color: white;
+}
 #codeContainer {
 	display: block;
 	width: 80%;
@@ -45,3 +49,78 @@ footer {
 	color: white;
 	margin-top: 10px;
 }
+.cards {
+	display: flex;
+	justify-content: space-around;
+}
+.card {
+	position: relative;
+	display: inline-block;
+	border-radius: 15px;
+	background-color: #C0C0C0;
+	width: 150px;
+	transition: 0.3s;
+}
+.bg-img {
+	height: 120px;
+	border-radius: 15px;
+	background-repeat: no-repeat;
+	background-size: contain;
+	background-position: center center;
+	margin: 5px;
+}
+.card p {
+	text-align: center;
+	color: black;
+}
+.card:hover {
+	transform: scale(1.1);
+}
+#js-card {
+	background-image: url("../img/js.svg");
+}
+#py-card {
+	background-image: url("../img/py.svg");
+}
+#lua-card {
+	background-image: url("../img/lua.svg");
+}
+#sqlite-card {
+	background-image: url("../img/sqlite.svg");
+}
+#html-card {
+	background-image: url("../img/html.svg");
+}
+#html-card:hover::before {
+	display: inline-block;
+	content: "Bientôt";
+	color: white;
+	height: 100%;
+	width: 100%;
+	background-color: black;
+	opacity: 0.7;
+	text-align: center;
+	line-height: 100px;
+}
+#sqlite-card:hover::before {
+	display: inline-block;
+	content: "Bientôt";
+	color: white;
+	height: 100%;
+	width: 100%;
+	background-color: black;
+	opacity: 0.7;
+	text-align: center;
+	line-height: 100px;
+}
+#lua-card:hover::before {
+	display: inline-block;
+	content: "Bientôt";
+	color: white;
+	height: 100%;
+	width: 100%;
+	background-color: black;
+	opacity: 0.7;
+	text-align: center;
+	line-height: 100px;
+}
diff --git a/assets/img/html.svg b/assets/img/html.svg
new file mode 100644
index 0000000..b8b075f
--- /dev/null
+++ b/assets/img/html.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<title>HTML5 Logo</title>
+	<path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
+	<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
+	<path fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
+	<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>
+	<path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"/>
+</svg>
\ No newline at end of file
diff --git a/assets/img/js.svg b/assets/img/js.svg
new file mode 100644
index 0000000..9650ca7
--- /dev/null
+++ b/assets/img/js.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
+<rect width="630" height="630" fill="#f7df1e"/>
+<path d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/>
+</svg>
\ No newline at end of file
diff --git a/assets/img/lua.svg b/assets/img/lua.svg
new file mode 100644
index 0000000..6b49c68
--- /dev/null
+++ b/assets/img/lua.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="947px" height="947px" viewBox="0 0 947 947" enable-background="new 0 0 947 947" xml:space="preserve">
+<g>
+	<path fill="#000080" d="M835.5,473.6c0-199.8-162.2-362-362-362s-362,162.2-362,362c0,199.8,162.2,362,362,362   S835.5,673.4,835.5,473.6"/>
+	<path fill="#FFFFFF" d="M729.5,323.6c0-58.5-47.5-106-106-106s-106,47.5-106,106c0,58.5,47.5,106,106,106S729.5,382.1,729.5,323.6"/>
+	<path fill="#000080" d="M941.5,111.5c0-58.5-47.5-106-106-106s-106,47.5-106,106c0,58.5,47.5,106,106,106S941.5,170.1,941.5,111.5"/>
+	<g>
+		<path fill="#FFFFFF" d="M258.1,627.8h117.3v26.7H227.8V417h30.3V627.8z"/>
+		<path fill="#FFFFFF" d="M515.5,654.5v-23.8c-16,22.5-31.9,31.3-57,31.3c-33.2,0-54.4-18.2-54.4-46.6V483.8h27v120.9    c0,20.5,13.7,33.6,35.2,33.6c28.3,0,46.6-22.8,46.6-57.7v-96.8h27v170.7H515.5z"/>
+		<path fill="#FFFFFF" d="M738.4,659.1c-8.8,2.3-13,2.9-18.6,2.9c-17.6,0-26.1-7.8-28-25.1c-19.2,17.6-36.5,25.1-58,25.1    c-34.5,0-56-19.5-56-50.5c0-22.2,10.1-37.5,30-45.6c10.4-4.2,16.3-5.5,54.7-10.4c21.5-2.6,28.3-7.5,28.3-18.9v-7.2    c0-16.3-13.7-25.4-38.1-25.4c-25.4,0-37.8,9.4-40.1,30.3h-27.4c0.7-16.9,3.9-26.7,11.7-35.5c11.4-12.7,31.9-19.9,56.7-19.9    c42,0,64.2,16.3,64.2,46.6v100.4c0,8.5,5.2,13.4,14.7,13.4c1.6,0,2.9,0,5.9-0.7V659.1z M690.8,570.1c-9.1,4.2-15,5.5-43.7,9.4    c-29,4.2-41.1,13.4-41.1,31.3c0,17.3,12.4,27.4,33.6,27.4c16,0,29.3-5.2,40.4-15.3c8.1-7.5,10.8-13,10.8-22.2V570.1z"/>
+	</g>
+	<path fill="none" stroke="#808080" stroke-width="10.8612" stroke-miterlimit="10" stroke-dasharray="40.8475" d="M890.6,261   c33.5,65.8,51,138.6,51,212.5c0,258.4-209.7,468.1-468.1,468.1S5.4,731.9,5.4,473.5C5.4,215.1,215.1,5.4,473.5,5.4   c83.1,0,164.6,22.1,236.2,63.9"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/assets/img/py.svg b/assets/img/py.svg
new file mode 100644
index 0000000..23bd5a2
--- /dev/null
+++ b/assets/img/py.svg
@@ -0,0 +1,31 @@
+<?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://web.resource.org/cc/" 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:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="110.4211" height="109.8461" id="svg2169" sodipodi:version="0.32" inkscape:version="0.45.1" version="1.0" sodipodi:docbase="/home/bene/Desktop" sodipodi:docname="dessin-1.svg" inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <defs id="defs2171">
+    <linearGradient id="linearGradient11301" inkscape:collect="always">
+      <stop id="stop11303" offset="0" style="stop-color:#ffe052;stop-opacity:1"/>
+      <stop id="stop11305" offset="1" style="stop-color:#ffc331;stop-opacity:1"/>
+    </linearGradient>
+    <linearGradient gradientUnits="userSpaceOnUse" y2="168.1012" x2="147.77737" y1="111.92053" x1="89.136749" id="linearGradient11307" xlink:href="#linearGradient11301" inkscape:collect="always"/>
+    <linearGradient id="linearGradient9515" inkscape:collect="always">
+      <stop id="stop9517" offset="0" style="stop-color:#387eb8;stop-opacity:1"/>
+      <stop id="stop9519" offset="1" style="stop-color:#366994;stop-opacity:1"/>
+    </linearGradient>
+    <linearGradient gradientUnits="userSpaceOnUse" y2="131.85291" x2="110.14919" y1="77.070274" x1="55.549179" id="linearGradient9521" xlink:href="#linearGradient9515" inkscape:collect="always"/>
+  </defs>
+  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.24748737" inkscape:cx="-260.46312" inkscape:cy="316.02744" inkscape:document-units="px" inkscape:current-layer="layer1" width="131.10236px" height="184.25197px" inkscape:window-width="872" inkscape:window-height="624" inkscape:window-x="5" inkscape:window-y="48"/>
+  <metadata id="metadata2174">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g inkscape:label="Calque 1" inkscape:groupmode="layer" id="layer1" transform="translate(-473.36088,-251.72485)">
+    <g id="g1894" transform="translate(428.42338,184.2561)">
+      <path style="opacity:1;color:#000000;fill:url(#linearGradient9521);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible" d="M 99.75,67.46875 C 71.718268,67.468752 73.46875,79.625 73.46875,79.625 L 73.5,92.21875 L 100.25,92.21875 L 100.25,96 L 62.875,96 C 62.875,96 44.9375,93.965724 44.9375,122.25 C 44.937498,150.53427 60.59375,149.53125 60.59375,149.53125 L 69.9375,149.53125 L 69.9375,136.40625 C 69.9375,136.40625 69.433848,120.75 85.34375,120.75 C 101.25365,120.75 111.875,120.75 111.875,120.75 C 111.875,120.75 126.78125,120.99096 126.78125,106.34375 C 126.78125,91.696544 126.78125,82.125 126.78125,82.125 C 126.78125,82.124998 129.04443,67.46875 99.75,67.46875 z M 85,75.9375 C 87.661429,75.937498 89.8125,78.088571 89.8125,80.75 C 89.812502,83.411429 87.661429,85.5625 85,85.5625 C 82.338571,85.562502 80.1875,83.411429 80.1875,80.75 C 80.187498,78.088571 82.338571,75.9375 85,75.9375 z " id="path8615"/>
+      <path id="path8620" d="M 100.5461,177.31485 C 128.57784,177.31485 126.82735,165.1586 126.82735,165.1586 L 126.7961,152.56485 L 100.0461,152.56485 L 100.0461,148.7836 L 137.4211,148.7836 C 137.4211,148.7836 155.3586,150.81787 155.3586,122.53359 C 155.35861,94.249323 139.70235,95.252343 139.70235,95.252343 L 130.3586,95.252343 L 130.3586,108.37734 C 130.3586,108.37734 130.86226,124.03359 114.95235,124.03359 C 99.042448,124.03359 88.421098,124.03359 88.421098,124.03359 C 88.421098,124.03359 73.514848,123.79263 73.514848,138.43985 C 73.514848,153.08705 73.514848,162.6586 73.514848,162.6586 C 73.514848,162.6586 71.251668,177.31485 100.5461,177.31485 z M 115.2961,168.8461 C 112.63467,168.8461 110.4836,166.69503 110.4836,164.0336 C 110.4836,161.37217 112.63467,159.2211 115.2961,159.2211 C 117.95753,159.2211 120.1086,161.37217 120.1086,164.0336 C 120.10861,166.69503 117.95753,168.8461 115.2961,168.8461 z " style="opacity:1;color:#000000;fill:url(#linearGradient11307);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/assets/img/sqlite.svg b/assets/img/sqlite.svg
new file mode 100644
index 0000000..8132bfc
--- /dev/null
+++ b/assets/img/sqlite.svg
@@ -0,0 +1,3 @@
+<?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:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg2985" version="1.1" inkscape:version="0.48.4 r9939" width="256" height="256" xml:space="preserve" sodipodi:docname="sqlite-square-icon.svg"><metadata id="metadata2991"><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/></cc:Work></rdf:RDF></metadata><defs id="defs2989"><linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-4.02e-6,-91.8907,-91.8907,4.02e-6,85.8809,161.434)" spreadMethod="pad" id="linearGradient3027"><stop style="stop-opacity:1;stop-color:#97d9f6" offset="0" id="stop3029"/><stop style="stop-opacity:1;stop-color:#0f80cc" offset="0.920245" id="stop3031"/><stop style="stop-opacity:1;stop-color:#0f80cc" offset="1" id="stop3033"/></linearGradient><linearGradient inkscape:collect="always" xlink:href="#linearGradient3027" id="linearGradient5421" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-4.02e-7,-9.18907,-9.18907,4.02e-7,8.58809,16.1434)" spreadMethod="pad" x1="-15.614694" y1="-9.1082983" x2="-6.7410073" y2="-9.1082983"/><linearGradient inkscape:collect="always" xlink:href="#linearGradient3027" id="linearGradient3003" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-4.02e-7,-9.18907,-9.18907,4.02e-7,8.58809,16.1434)" spreadMethod="pad" x1="-15.614694" y1="-9.1082983" x2="-6.7410073" y2="-9.1082983"/></defs><sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1017" id="namedview2987" showgrid="false" inkscape:zoom="0.73710525" inkscape:cx="217.03271" inkscape:cy="157.19018" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="g2993" fit-margin-top="10" fit-margin-left="10" fit-margin-right="10" fit-margin-bottom="10" inkscape:snap-page="true" inkscape:snap-bbox="true"/><g id="g2993" inkscape:groupmode="layer" inkscape:label="ink_ext_XXXXXX" transform="matrix(1.25,0,0,-1.25,-41.57475,299.78375)"><g id="g2998" transform="matrix(1.5512433,0,0,1.5512433,-16.326028,-27.718348)"><path d="m 103.096,71.5961 c -0.057,0.7219 -0.091,1.191 -0.091,1.191 0,0 -2.189,14.7578 -4.7948,19.1617 -0.4122,0.6981 0.0449,3.5653 1.1953,7.8121 0.6725,-1.1629 3.5115,-6.1371 4.0815,-7.7398 0.642,-1.8121 0.777,-2.3313 0.777,-2.3313 0,0 -1.557,8.0114 -4.112,12.6862 0.56,1.89 1.229,3.979 1.986,6.212 0.968,-1.698 3.285,-5.809 3.795,-7.235 0.103,-0.293 0.19,-0.542 0.268,-0.77 0.025,0.137 0.05,0.274 0.075,0.411 -0.585,2.482 -1.734,6.801 -3.307,9.992 3.49,18.165 15.393,42.445 27.596,53.278 l -79.6048,0 c -5.3352,0 -9.7004,-4.366 -9.7004,-9.701 l 0,-87.7892 c 0,-5.3347 4.3652,-9.7 9.7004,-9.7 l 52.4298,0 c -0.378,4.5762 -0.504,9.6391 -0.294,14.5223" style="fill:#0f80cc;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3005" inkscape:connector-curvature="0"/><path d="m 99.4055,99.7609 c 0.6725,-1.1629 3.5115,-6.1371 4.0815,-7.7398 0.642,-1.8121 0.777,-2.3313 0.777,-2.3313 0,0 -1.557,8.0114 -4.112,12.6862 0.56,1.89 1.229,3.979 1.986,6.212 0.885,-1.553 2.896,-5.12 3.623,-6.81 0.027,0.319 0.054,0.638 0.082,0.954 -0.644,2.475 -1.622,5.715 -2.874,8.254 3.214,16.725 13.559,38.625 24.704,50.448 l -76.7128,0 c -3.7883,0 -6.8711,-3.082 -6.8711,-6.871 l 0,-81.3841 c 17.3738,6.668 38.323,12.7633 56.3529,12.502 -0.6693,2.5812 -1.4315,4.9152 -2.2318,6.2679 -0.4122,0.6981 0.0449,3.5653 1.1953,7.8121" style="fill:url(#linearGradient3003);fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3035" inkscape:connector-curvature="0"/><path d="m 149.133,167.137 c -5.452,4.862 -12.053,2.909 -18.568,-2.873 -0.967,-0.859 -1.932,-1.812 -2.892,-2.83 -11.145,-11.823 -21.49,-33.723 -24.704,-50.448 1.252,-2.539 2.23,-5.779 2.874,-8.254 0.165,-0.635 0.314,-1.231 0.433,-1.738 0.283,-1.1999 0.435,-1.978 0.435,-1.978 0,0 -0.1,0.3781 -0.51,1.567 -0.078,0.228 -0.165,0.477 -0.268,0.77 -0.044,0.121 -0.105,0.268 -0.172,0.425 -0.727,1.69 -2.738,5.257 -3.623,6.81 -0.757,-2.233 -1.426,-4.322 -1.986,-6.212 2.555,-4.6748 4.112,-12.6862 4.112,-12.6862 0,0 -0.135,0.5192 -0.777,2.3313 -0.57,1.6027 -3.409,6.5769 -4.0815,7.7398 -1.1504,-4.2468 -1.6075,-7.114 -1.1953,-7.8121 0.8003,-1.3527 1.5625,-3.6867 2.2318,-6.2679 1.512,-5.8149 2.563,-12.8938 2.563,-12.8938 0,0 0.034,-0.4691 0.091,-1.191 -0.21,-4.8832 -0.084,-9.9461 0.294,-14.5223 0.501,-6.0578 1.444,-11.2617 2.646,-14.0468 l 0.816,0.4449 c -1.765,5.4871 -2.482,12.6781 -2.168,20.9711 0.475,12.6761 3.392,27.9629 8.782,43.896 9.106,24.052 21.74,43.35 33.303,52.566 -10.539,-9.518 -24.803,-40.327 -29.073,-51.736 -4.781,-12.776 -8.169,-24.7651 -10.211,-36.2518 3.523,10.7687 14.914,15.3976 14.914,15.3976 0,0 5.587,6.8903 12.116,16.7342 -3.911,-0.892 -10.333,-2.419 -12.484,-3.323 -3.173,-1.331 -4.028,-1.785 -4.028,-1.785 0,0 10.278,6.259 19.096,9.093 12.127,19.1 25.339,46.234 12.034,58.103" style="fill:#003b57;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3045" inkscape:connector-curvature="0"/></g></g></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index ff7d7d5..b771a9e 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,13 @@
 		<header>
 			<h1>Code Playground</h1>
 		</header>
-		<ul>
-			<li><a href="js.html">Javascript</a></li>
-		</ul>
+		<div class="cards">
+			<a class="card" href="js.html"><div class="bg-img" id="js-card"></div><p>Javascript</p></a>
+			<a class="card" href="python.html"><div class="bg-img" id="py-card"></div><p>Python</p></a>
+			<a class="card"><div class="bg-img" id="html-card"></div><p>HTML</p></a>
+			<a class="card"><div class="bg-img" id="sqlite-card"></div><p>SQLite</p></a>
+			<a class="card"><div class="bg-img" id="lua-card"></div><p>Lua</p></a>
+		</div>
 		<p>
 		Ce projet vous permet de tester rapidement des codes Javascript depuis le navigateur en profitant de la coloration syntaxique, il n'envoie aucune autre donnée au serveur que celles requises pour télécharger les pages, les scripts et les styles, tout le reste se passe sur votre ordinateur.<br />
 		Ce projet est publié sous licence libre, licence <a href="https://creativecommons.org/publicdomain/zero/1.0/legalcode" target="_blank">CC0</a>.