Change style

assets/css/main.css

@@ -1,24 +1,29 @@
+* {
+	box-sizing: border-box;
+	margin: 0;
+}
 html, body {
 	height: 100%;
 }
 body {
-	background: #0A3D62;
+	background: #F0F0F0;
 	font-family: sans-serif;
 	font-size: 21px;
-	color: white;
 }
 h1 {
-	color: white;
+	color: #505050;
 	text-align: center;
 }
-a {
+header {
-	color: white;
+	background-color: #E0E0E0;
+	margin-bottom: 25px;
+	padding: 10px;
 }
 #codeContainer {
-	display: block;
+	display: inline-block;
-	width: 80%;
+	width: 50%;
-	margin: auto;
 	height: 500px;
+	vertical-align: top;
 }
 #code {
 	position: relative;
@@ -28,30 +33,45 @@ a {
 	background-color: #079992;
 	color: white;
 	display: block;
-	width: 80%;
+	width: 100%;
-	margin: auto;
 	border: none;
-	margin-top: 10px;
 	line-height: 3rem;
+	transition: 0.3s;
+}
+#runBtn:hover {
+	background-color: #007972;
 }
 #console {
+	font-family: monospace;
 	color: white;
-	width: 80%;
+	display: inline-block;
-	margin: auto;
+	background-color: #303030;
-	margin-top: 10px;
+	width: 50%;
+	height: 500px;
+	vertical-align: top;
+	overflow: auto;
 }
 .error {
+	margin: 5px;
+	padding: 5px;
+	border-radius: 5px;
 	background-color: #FF0000;
-	color: white;
+}
+.message {
+	margin: 5px;
 }
 footer {
 	font-size: 10px;
-	color: white;
+	margin-top: 25px;
-	margin-top: 10px;
+	padding: 10px;
+}
+p {
+	padding: 10px;
 }
 .cards {
 	display: flex;
 	justify-content: space-around;
+	margin-bottom: 20px;
 }
 .card {
 	position: relative;
@@ -60,6 +80,7 @@ footer {
 	background-color: #C0C0C0;
 	width: 150px;
 	transition: 0.3s;
+	padding: 15px;
 }
 .bg-img {
 	height: 120px;

js.html

@@ -10,10 +10,10 @@
 		<header>
 			<h1>Javascript Playground</h1>
 		</header>
-		<div id="codeContainer"><div id="code"></div></div>
+		<div id="codeContainer"><div id="code"></div></div><!--
-		<input type="button" onclick="run()" value="Exécuter !" id="runBtn" />
+		--><div id="console">
-		<div id="console">
 		</div>
+		<input type="button" onclick="run()" value="Exécuter !" id="runBtn" />
 		<footer>
 			Romain de Laage - CC0
 		</footer>

python.html

@@ -13,10 +13,10 @@
 		<header>
 			<h1>Python Playground</h1>
 		</header>
-		<div id="codeContainer"><div id="code"></div></div>
+		<div id="codeContainer"><div id="code"></div></div><!--
-		<input type="button" onclick="run()" value="Exécuter !" id="runBtn" />
+		--><div id="console">
-		<div id="console">
 		</div>
+		<input type="button" onclick="run()" value="Exécuter !" id="runBtn" />
 		<footer>
 			Romain de Laage - CC0
 		</footer>