From e951afcb97bc3b16e1ba148263140b0cd7993e78 Mon Sep 17 00:00:00 2001 From: Chirag Mathur Date: Sun, 9 Oct 2022 17:33:56 +0530 Subject: [PATCH 1/2] UI changes --- index.html | 62 ++++++++++++++++++++++++++++++++++++++---------------- styles.css | 47 ++++++++++++++++++++++++++++++++++------- 2 files changed, 83 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 0f2d1a7..02b7e4b 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,56 @@ + - + + + + Document + + + -
-
-
Board Color :
- -
-
-
Pen Color :
- -
+
+

Welcome to  

+

The Board

-
- - -
- +
+
+ + +
+ +
+
+
+
+
+
Board Color :
+ +
+
+
Pen Color :    
+ +
+
-
- + +
+ + + - + + \ No newline at end of file diff --git a/styles.css b/styles.css index 11cf91d..c6fb27b 100644 --- a/styles.css +++ b/styles.css @@ -6,18 +6,29 @@ html { body { font-family: "Poppins", sans-serif; - background: #121212; + background: #2c3131; + color: white; height: 100%; + +} + +.container { display: flex; - flex-direction: column; + /* flex-direction: column; */ align-items: center; justify-content: center; } .selectors { display: flex; + flex-direction: column; align-items: center; + padding-top: 0; + margin-top: 0; + font-size: large; justify-content: center; + /* height: 80%; */ + } .color-selection { @@ -25,26 +36,45 @@ body { align-items: center; justify-content: center; margin: 0px 20px; + margin-bottom: 0; } .color-header { - color: white; + /* color: white; */ margin: 20px; } .canvas-container { height: 100%; + width: 70%; display: flex; + margin-top: 0; + flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; } +.container-fluid { + /* margin: 50px; */ + display: inline-flex; + align-items: center; + justify-content: center; + padding: 30px; + margin-bottom: 40px; + background-color: hsla(0, 0%, 0%, 0.3); + backdrop-filter: saturate(180%) blur(10px); + /* opacity: 0.5; */ + /* width: 98%; */ +} + canvas { background: #000000; - border: 3px solid rgba(192, 192, 192, 0.5); - width: 40rem; - height: 24rem; + border: 3px solid rgba(255, 255, 255, 0.5); + box-shadow: 20px 20px 50px rgb(29, 29, 29); + border-radius: 30px; + width: 90%; + height: 28rem; cursor: url(./assets/ico/pen-cursor.ico) 0 50, pointer; } @@ -72,7 +102,8 @@ canvas { } canvas:active { - border-color: rgb(192, 192, 192); + border-color: rgb(151, 151, 151); + box-shadow: rgba(164, 164, 164, 0.56) 0px 2px 10px 4px; } @media screen and (max-width: 768px) { @@ -82,4 +113,4 @@ canvas:active { height: 85vh; cursor: grabbing; } -} +} \ No newline at end of file From 428ab96cd2cdd509cbf89a01b7eea239476261c2 Mon Sep 17 00:00:00 2001 From: Chirag Mathur Date: Sun, 9 Oct 2022 17:42:30 +0530 Subject: [PATCH 2/2] updated UI changes --- styles.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index ded7b9a..ab3838e 100644 --- a/styles.css +++ b/styles.css @@ -24,6 +24,7 @@ body { display: flex; flex-direction: column; align-items: center; + color: white; padding-top: 0; margin-top: 0; font-size: large; @@ -40,7 +41,7 @@ body { } .color-header { - color: rgb(44, 39, 39); + /* color: rgb(44, 39, 39); */ margin: 20px; } @@ -81,7 +82,7 @@ canvas { .clear-button { padding: 30px; - position: absolute; + /* position: absolute; */ right: 200px; }