From a5c02536fc816aafd862dce7081955fd69cd8bec Mon Sep 17 00:00:00 2001 From: Abel Date: Tue, 20 Jan 2026 23:49:28 +0100 Subject: [PATCH 1/3] implement/layout & styles --- index.html | 25 +++++++++++++++++++++ styles.css | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 index.html create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..b27e303 --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + + JavaScript Basics + + + + +
+

JavaScript Basics

+
+
+
+
+ +

+
+
+
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..27a06f8 --- /dev/null +++ b/styles.css @@ -0,0 +1,64 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body { + height: 100%; + font-family: Arial, sans-serif; +} + +body { + display: flex; + flex-direction: column; + font-size: 16px; +} + +header { + background-color: darksalmon; + border-bottom: 1px solid gray; + padding: 1.5rem; + text-align: center; +} + +header h1 { + color: brown; + margin: 0; +} + +main { + flex: 1; + display: flex; + flex-direction: column; + min-height: 0; + background-color: lavender; +} + +section { + display: flex; + padding: 1.5rem; + background-color: #f9f9f9; + overflow-y: auto; +} + +.section { + margin: 24px auto; + max-width: 400px; +} + +.smile-content { + text-align: center; +} + +button { + background-color: blueviolet; + color: bisque; + border: none; + padding: 0.7rem 1.5rem; + border-radius: 5px; + font-size: 1rem; + cursor: pointer; + margin: 1rem; +} \ No newline at end of file From cf3bbffacb021a1fa7436bc54bfcec3531c01e32 Mon Sep 17 00:00:00 2001 From: Abel Date: Tue, 20 Jan 2026 23:52:09 +0100 Subject: [PATCH 2/3] implement/JavaScript logic --- index.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/index.html b/index.html index b27e303..368dbad 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,14 @@

+ + + \ No newline at end of file From 861ba679f9365426a0f2a720fbe6eea53e808bbd Mon Sep 17 00:00:00 2001 From: Abel Date: Wed, 21 Jan 2026 20:11:11 +0100 Subject: [PATCH 3/3] add/sum section --- index.html | 24 +++++++++++++++++++++++- styles.css | 50 +++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 72 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 368dbad..6f92b3a 100644 --- a/index.html +++ b/index.html @@ -19,13 +19,35 @@

JavaScript Basics

+
+

Sum two numbers

+
+
+ + +
+
+ + +
+
+ +

+
diff --git a/styles.css b/styles.css index 27a06f8..a2e1344 100644 --- a/styles.css +++ b/styles.css @@ -8,6 +8,7 @@ html, body { height: 100%; font-family: Arial, sans-serif; + color: darkslategray; } body { @@ -41,17 +42,41 @@ section { padding: 1.5rem; background-color: #f9f9f9; overflow-y: auto; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; } .section { margin: 24px auto; max-width: 400px; + display: flex; + flex-direction: column; +} + +.section-content{ + display: grid; + grid-template-columns: 1fr 1fr; + margin-bottom: 1rem; + gap: 2rem; } .smile-content { text-align: center; } +.sum-title{ + color: chocolate; + font-size: 1.5rem; + margin-bottom: 2rem; +} + +span{ + color: chocolate; + font-size: 1.5rem; +} + button { background-color: blueviolet; color: bisque; @@ -61,4 +86,27 @@ button { font-size: 1rem; cursor: pointer; margin: 1rem; -} \ No newline at end of file + max-width: fit-content; + align-self: center; +} + +label { + display: block; + margin-bottom: 0.7rem; + font-weight: 600; +} + +input { + width: 100%; + padding: 0.8rem 1rem; + border: 1px solid gray; + border-radius: 5px; + font-family: inherit; + font-size: 1rem; +} + +input:focus { + outline: none; + border-color: blueviolet; + box-shadow: 0 0 5px rgba(138, 43, 226, 0.5); +}