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 @@
+
+ HTML5 Logo
+
\ 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 @@
+
+
\ 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 @@
+
+
+
+
+
+
+
+
+
\ 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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ image/svg+xml
+
+
+
+
+
+
+
+
\ 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 @@
+
+
+image/svg+xml
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.CC0 .