From 276e98f8e1a1364c13b5ca518d5bb6dd0607e0fa Mon Sep 17 00:00:00 2001 From: Zoe Davis Date: Tue, 1 Oct 2024 19:46:03 -0400 Subject: [PATCH 1/4] Added cursor types --- ...encast from 31-10-23 07_12_05 PM IST.webm} | Bin Cursor/index.html | 18 +++++++++++++ Cursor/style.css | 25 ++++++++++++++++++ 3 files changed, 43 insertions(+) rename 3D Rotation Square/{Screencast from 31-10-23 07:12:05 PM IST.webm => Screencast from 31-10-23 07_12_05 PM IST.webm} (100%) create mode 100644 Cursor/index.html create mode 100644 Cursor/style.css diff --git a/3D Rotation Square/Screencast from 31-10-23 07:12:05 PM IST.webm b/3D Rotation Square/Screencast from 31-10-23 07_12_05 PM IST.webm similarity index 100% rename from 3D Rotation Square/Screencast from 31-10-23 07:12:05 PM IST.webm rename to 3D Rotation Square/Screencast from 31-10-23 07_12_05 PM IST.webm diff --git a/Cursor/index.html b/Cursor/index.html new file mode 100644 index 00000000..93f41011 --- /dev/null +++ b/Cursor/index.html @@ -0,0 +1,18 @@ + + + + + + + Cursors - Zoe Davis + + +
+
Hover over me (auto)
+
Hover over me (default)
+
Hover over me (crosshair)
+
Hover over me (wait)
+
Hover over me (text)
+
+ + \ No newline at end of file diff --git a/Cursor/style.css b/Cursor/style.css new file mode 100644 index 00000000..82d23174 --- /dev/null +++ b/Cursor/style.css @@ -0,0 +1,25 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway:300,400'); +body { + background: #2D3142; + font-family: 'Raleway', sans-serif; +} + +.cursor-auto { + cursor: auto; +} + +.cursor-default { + cursor: default; +} + +.cursor-crosshair { + cursor: crosshair; +} + +.cursor-wait { + cursor: wait; +} + +.cursor-text { + cursor: text; +} \ No newline at end of file From 5f032964ac584abe67391904a30591ff8b6e1709 Mon Sep 17 00:00:00 2001 From: Zoe Davis Date: Wed, 2 Oct 2024 19:36:59 -0400 Subject: [PATCH 2/4] added style flex, icons, and transitions --- Cursor/index.html | 10 +++++----- Cursor/style.css | 51 ++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/Cursor/index.html b/Cursor/index.html index 93f41011..1cd4fe29 100644 --- a/Cursor/index.html +++ b/Cursor/index.html @@ -8,11 +8,11 @@
-
Hover over me (auto)
-
Hover over me (default)
-
Hover over me (crosshair)
-
Hover over me (wait)
-
Hover over me (text)
+
🖱️ Hover over me (auto)
+
➡️ Hover over me (default)
+
🎯 Hover over me (crosshair)
+
⏳ Hover over me (wait)
+
✏️ Hover over me (text)
\ No newline at end of file diff --git a/Cursor/style.css b/Cursor/style.css index 82d23174..1f5df071 100644 --- a/Cursor/style.css +++ b/Cursor/style.css @@ -1,25 +1,74 @@ @import url('https://fonts.googleapis.com/css?family=Raleway:300,400'); body { - background: #2D3142; + background: #e1e2dd; font-family: 'Raleway', sans-serif; } .cursor-auto { cursor: auto; + width: 300px; + height: 50px; + font-size: 25px; + transition: color 2s ease-out 100ms; +} + +.cursor-auto:hover{ + color: #7ae615; } .cursor-default { cursor: default; + width: 350px; + height: 50px; + font-size: 25px; + transition: color 2s ease-out 100ms; +} + +.cursor-default:hover{ + color: #7ae615; } .cursor-crosshair { cursor: crosshair; + width: 350px; + height: 50px; + font-size: 25px; + transition: color 2s ease-out 100ms; +} + +.cursor-crosshair:hover{ + color: #7ae615; } .cursor-wait { cursor: wait; + width: 300px; + height: 50px; + font-size: 25px; + transition: color 2s ease-out 100ms; +} + +.cursor-wait:hover{ + color: #7ae615; } .cursor-text { cursor: text; + width: 300px; + height: 50px; + font-size: 25px; + transition: color 2s ease-out 100ms; +} + +.cursor-text:hover{ + color: #7ae615; +} + +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; + height: 100vh; } \ No newline at end of file From 942653330427af4202922489c799e3984a57d858 Mon Sep 17 00:00:00 2001 From: Zoe Davis Date: Wed, 2 Oct 2024 19:38:51 -0400 Subject: [PATCH 3/4] changed width --- Cursor/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Cursor/style.css b/Cursor/style.css index 1f5df071..b7450209 100644 --- a/Cursor/style.css +++ b/Cursor/style.css @@ -6,7 +6,7 @@ body { .cursor-auto { cursor: auto; - width: 300px; + width: 350px; height: 50px; font-size: 25px; transition: color 2s ease-out 100ms; @@ -42,7 +42,7 @@ body { .cursor-wait { cursor: wait; - width: 300px; + width: 350px; height: 50px; font-size: 25px; transition: color 2s ease-out 100ms; @@ -54,7 +54,7 @@ body { .cursor-text { cursor: text; - width: 300px; + width: 350px; height: 50px; font-size: 25px; transition: color 2s ease-out 100ms; From ea89b17eedfdfe76fd96ac84b9a735ae7b2ce52a Mon Sep 17 00:00:00 2001 From: Zoe Davis Date: Wed, 2 Oct 2024 19:46:53 -0400 Subject: [PATCH 4/4] refactorded for common code and styling --- Cursor/index.html | 10 +++++----- Cursor/style.css | 41 ++++++----------------------------------- 2 files changed, 11 insertions(+), 40 deletions(-) diff --git a/Cursor/index.html b/Cursor/index.html index 1cd4fe29..27021460 100644 --- a/Cursor/index.html +++ b/Cursor/index.html @@ -8,11 +8,11 @@
-
🖱️ Hover over me (auto)
-
➡️ Hover over me (default)
-
🎯 Hover over me (crosshair)
-
⏳ Hover over me (wait)
-
✏️ Hover over me (text)
+
🖱️ Hover over me (auto)
+
➡️ Hover over me (default)
+
🎯 Hover over me (crosshair)
+
⏳ Hover over me (wait)
+
✏️ Hover over me (text)
\ No newline at end of file diff --git a/Cursor/style.css b/Cursor/style.css index b7450209..63e066e2 100644 --- a/Cursor/style.css +++ b/Cursor/style.css @@ -4,64 +4,35 @@ body { font-family: 'Raleway', sans-serif; } -.cursor-auto { - cursor: auto; +.cursor-common { width: 350px; height: 50px; font-size: 25px; transition: color 2s ease-out 100ms; } -.cursor-auto:hover{ +.cursor-common:hover { color: #7ae615; } -.cursor-default { - cursor: default; - width: 350px; - height: 50px; - font-size: 25px; - transition: color 2s ease-out 100ms; +.cursor-auto { + cursor: auto; } -.cursor-default:hover{ - color: #7ae615; +.cursor-default { + cursor: default; } .cursor-crosshair { cursor: crosshair; - width: 350px; - height: 50px; - font-size: 25px; - transition: color 2s ease-out 100ms; -} - -.cursor-crosshair:hover{ - color: #7ae615; } .cursor-wait { cursor: wait; - width: 350px; - height: 50px; - font-size: 25px; - transition: color 2s ease-out 100ms; -} - -.cursor-wait:hover{ - color: #7ae615; } .cursor-text { cursor: text; - width: 350px; - height: 50px; - font-size: 25px; - transition: color 2s ease-out 100ms; -} - -.cursor-text:hover{ - color: #7ae615; } .container {