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