From 430eb28ca81d153fae2283b051b0f20e4aa885a8 Mon Sep 17 00:00:00 2001 From: Montique Stevens Date: Wed, 3 Feb 2021 19:27:38 -0500 Subject: [PATCH 1/6] rework added props to alter shape into sphere --- canvas-style.css | 31 ++++++++++++++++++++++++++++--- canvas.html | 12 ++++++------ 2 files changed, 34 insertions(+), 9 deletions(-) diff --git a/canvas-style.css b/canvas-style.css index 4f1f9b8..c4f5dbd 100644 --- a/canvas-style.css +++ b/canvas-style.css @@ -16,11 +16,36 @@ body { border-radius: 50%; width: 500px; height: 500px; - position: relative; - box-shadow: 0 0 0 1px #fcfcfc; + position: absolute; margin: 0 auto; + background: radial-gradient(circle at 100px 100px, #3b0944, #000) + +} + +/* for shadow and 3d effect */ + +.stage { + width: 500px; + height: 500px; + display: inline-block; + margin: 100px; + perspective: 1200px; + perspective-origin: 50% 50%; + position: relative; +} + +.outer-circle .shadow { + position: absolute; + width: 100%; + height: 100%; + background: radical-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%); + transform: rotateX(90deg) translateZ(-150px); + z-index: -1; } + + + /* for inner circle div */ .inner-circle { background-color: #5f1854; @@ -46,4 +71,4 @@ body { top: 50%; left: 50%; box-shadow: 0 0 0 1px #fcfcfc; -} \ No newline at end of file +} \ No newline at end of file diff --git a/canvas.html b/canvas.html index e41b1e3..b515b1e 100644 --- a/canvas.html +++ b/canvas.html @@ -8,16 +8,16 @@ -
-
-
+
-
+
+
+
- +
- + From 581230034b61919e982f897d28bcf904cd4df5cf Mon Sep 17 00:00:00 2001 From: Montique Stevens Date: Fri, 2 Apr 2021 08:17:32 -0400 Subject: [PATCH 2/6] Update canvas-style.css Altered divs for inner and center --- canvas-style.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/canvas-style.css b/canvas-style.css index c4f5dbd..2b8052e 100644 --- a/canvas-style.css +++ b/canvas-style.css @@ -46,24 +46,25 @@ body { -/* for inner circle div */ +/* for inner circle div .inner-circle { background-color: #5f1854; border-radius: 50%; width: 350px; height: 350px; - /* code below this line for centering inner-circle div */ + /* code below this line for centering inner-circle div margin: -175px 0 0 -175px; position: absolute; top: 50%; left: 50%; box-shadow: 0 0 0 1px #fcfcfc; -} -/* for center div */ +} */ + +/* for center div .center { background-color: #a12559; border-radius: 50%; - /* code below this line for centering inner-circle div */ + /* code below this line for centering inner-circle div width: 175px; height: 175px; margin: -87.5px 0 0 -87.5px; @@ -71,4 +72,4 @@ body { top: 50%; left: 50%; box-shadow: 0 0 0 1px #fcfcfc; -} \ No newline at end of file +} */ \ No newline at end of file From 4922227d5d74df2aa44afd525486f5b737681665 Mon Sep 17 00:00:00 2001 From: Montique Stevens Date: Wed, 14 Jul 2021 12:46:30 -0400 Subject: [PATCH 3/6] Color updates --- .vscode/settings.json | 3 +++ canvas-style.css | 16 ++++++++-------- 2 files changed, 11 insertions(+), 8 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/canvas-style.css b/canvas-style.css index 2b8052e..6e03411 100644 --- a/canvas-style.css +++ b/canvas-style.css @@ -12,13 +12,13 @@ body { /* for outer circle div */ .outer-circle { - background-color: #3b0944; + background-color: #2e38bd; border-radius: 50%; width: 500px; height: 500px; position: absolute; margin: 0 auto; - background: radial-gradient(circle at 100px 100px, #3b0944, #000) + background: radial-gradient(circle at 100px 100px, #2e38bd, #000) } @@ -46,13 +46,13 @@ body { -/* for inner circle div +/* for inner circle div */ .inner-circle { - background-color: #5f1854; + background-color: #2e38bd; border-radius: 50%; width: 350px; height: 350px; - /* code below this line for centering inner-circle div + /* code below this line for centering inner-circle div */ margin: -175px 0 0 -175px; position: absolute; top: 50%; @@ -60,11 +60,11 @@ body { box-shadow: 0 0 0 1px #fcfcfc; } */ -/* for center div +/* for center div */ .center { - background-color: #a12559; + background-color: #2e38bd; border-radius: 50%; - /* code below this line for centering inner-circle div + /* code below this line for centering inner-circle div */ width: 175px; height: 175px; margin: -87.5px 0 0 -87.5px; From 51565c170c2d85fcb92fbfe31b893c116fda8524 Mon Sep 17 00:00:00 2001 From: Montique Stevens Date: Thu, 15 Jul 2021 11:56:39 -0400 Subject: [PATCH 4/6] code cleanup --- canvas-style.css | 6 +++--- canvas.html | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/canvas-style.css b/canvas-style.css index 6e03411..8ba36c4 100644 --- a/canvas-style.css +++ b/canvas-style.css @@ -6,7 +6,7 @@ } body { - background-color: #f1bbd5; /* main background color */ + background-color: #ffffff; /* main background color */ } @@ -58,7 +58,7 @@ body { top: 50%; left: 50%; box-shadow: 0 0 0 1px #fcfcfc; -} */ +} /* for center div */ .center { @@ -72,4 +72,4 @@ body { top: 50%; left: 50%; box-shadow: 0 0 0 1px #fcfcfc; -} */ \ No newline at end of file +} \ No newline at end of file diff --git a/canvas.html b/canvas.html index b515b1e..224f0d0 100644 --- a/canvas.html +++ b/canvas.html @@ -17,7 +17,7 @@
- + From 5d783c10aab561fd094035f9533ea1bb38b19903 Mon Sep 17 00:00:00 2001 From: Montique Stevens Date: Thu, 15 Jul 2021 12:01:23 -0400 Subject: [PATCH 5/6] Update canvas-style.css --- canvas-style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/canvas-style.css b/canvas-style.css index 8ba36c4..5d685ce 100644 --- a/canvas-style.css +++ b/canvas-style.css @@ -6,7 +6,7 @@ } body { - background-color: #ffffff; /* main background color */ + background-color: #89c9b8; /* main background color */ } From 644ea2b48441c9e7f7fcedcf022935f049ac7a71 Mon Sep 17 00:00:00 2001 From: Montique Stevens Date: Sun, 2 Oct 2022 19:56:20 -0400 Subject: [PATCH 6/6] Create .DS_Store --- .DS_Store | Bin 0 -> 6148 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..0521d8a743fec95ff19dd2388d80c59beb48f5e8 GIT binary patch literal 6148 zcmeHKJ5B>J5SC}LHWBgcshSc^h-eHI937$gM#L{VkWsdXlVy(eYC2yw^=1(1hQG>y zyt{(VXhrw**nNL5pKV{=l;vXGEMSwI_lviW^RB=8(Z9KCeH%qWDjj0oXL_I|HB`|} zcXc`)Ms)X(ZeOo-550NnroEG0QJwwh_b*#=aR!_LXJ9WFK+P5z9~*k>3^)VMz?K2| zKLn^?%$N-I*MUZ_0Kfuf74+pUAvqyq%$N+}fv}|lEtT^XgY!|0Egk-t)_d> s)&}S`R7B#E;Wh;wEyakHQhWkcfjvkE7&9hASRj57P#U~(27Z-+FP