diff --git a/assets/css/main.css b/assets/css/main.css index ffea5c9..815dacf 100644 --- a/assets/css/main.css +++ b/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 { - color: white; +header { + background-color: #E0E0E0; + margin-bottom: 25px; + padding: 10px; } #codeContainer { - display: block; - width: 80%; - margin: auto; + display: inline-block; + width: 50%; height: 500px; + vertical-align: top; } #code { position: relative; @@ -28,30 +33,45 @@ a { background-color: #079992; color: white; display: block; - width: 80%; - margin: auto; + width: 100%; border: none; - margin-top: 10px; line-height: 3rem; + transition: 0.3s; +} +#runBtn:hover { + background-color: #007972; } #console { + font-family: monospace; color: white; - width: 80%; - margin: auto; - margin-top: 10px; + display: inline-block; + background-color: #303030; + 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: 10px; + margin-top: 25px; + 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; diff --git a/js.html b/js.html index 248b76d..00fc728 100644 --- a/js.html +++ b/js.html @@ -10,10 +10,10 @@

Javascript Playground

-
- -
+
+ diff --git a/python.html b/python.html index 86e73da..0716f12 100644 --- a/python.html +++ b/python.html @@ -13,10 +13,10 @@

Python Playground

-
- -
+
+