From 0ee0e9d66df5662521a09b17e0cc6d02ebf6909c Mon Sep 17 00:00:00 2001 From: Arnau Costa Date: Wed, 25 Sep 2024 13:12:47 +0200 Subject: [PATCH 1/5] semantic html css preliminary phase with the finished structure --- index.html | 45 +++++++++++++++ sanitize.css | 5 ++ style.css | 152 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 202 insertions(+) create mode 100644 index.html create mode 100644 sanitize.css create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..c408dc3 --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + + + + + + My Notes Application + + + + +
+
+

Create a New Note

+ + + + + + + +
+ + +
+ + + + + + + + diff --git a/sanitize.css b/sanitize.css new file mode 100644 index 0000000..a76c5af --- /dev/null +++ b/sanitize.css @@ -0,0 +1,5 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..737ca75 --- /dev/null +++ b/style.css @@ -0,0 +1,152 @@ +body { + margin: 0; + font-family: Arial, sans-serif; + background-color: #f0f4f8; +} + +header.banner { + background-color: #4a90e2; + color: white; + padding: 20px; + text-align: center; +} + +header.banner h2 { + margin: 0; + font-size: 2em; +} + +section.container { + display: flex; + justify-content: space-between; + padding: 20px; + max-width: 1200px; + margin: 0 auto; + gap: 20px; + align-items: flex-start; +} + +article.block { + background-color: #ffffff; + width: 45%; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin-top: 20px; +} + +article.note-block { + width: 60%; + text-align: left; + padding: 15px; +} + +article.note-block h3 { + text-align: left; + margin-bottom: 20px; + font-size: 1.2em; +} + +article.resource-block { + width: 35%; + background-color: #f7f9fc; +} + +article.block h2 { + margin-bottom: 10px; + font-size: 1.5em; +} + +article.block h3 { + font-size: 1.2em; + margin-bottom: 10px; +} + +article.block input { + width: 100%; + padding: 10px; + margin: 10px 0; + border: 1px solid #d3d3d3; + border-radius: 5px; + box-sizing: border-box; + font-size: 0.9em; +} + +article.block textarea { + width: 100%; + padding: 10px; + margin: 10px 0; + border: 1px solid #d3d3d3; + border-radius: 5px; + box-sizing: border-box; + font-size: 0.9em; +} + +article.block textarea { + min-height: 150px; +} + +article.block button { + background-color: #ff5723; + color: white; + padding: 10px; + border: none; + width: 100%; + border-radius: 5px; + font-size: 1em; + cursor: pointer; + margin-top: 10px; +} + +article.block button:hover { + background-color: #e64a19; +} + +article.block button:focus { + outline: 2px solid #ccc; +} + +ul.resources-list { + list-style-type: none; + padding: 0; + margin: 0; +} + +ul.resources-list li { + margin-bottom: 10px; +} + +ul.resources-list a { + text-decoration: none; + color: #794da4; + font-size: 1em; +} + +ul.resources-list a:hover { + text-decoration: underline; +} + +footer.underbanner { + background-color: #4a90e2; + color: white; + padding: 10px; + text-align: center; + position: fixed; + width: 100%; + bottom: 0; +} + +footer.underbanner p { + margin: 0; + font-size: 0.9em; +} + + + + + + + + + + + From 9397fc3c173ccf97cfe1a5f5da1bae78057d8351 Mon Sep 17 00:00:00 2001 From: Arnau Costa Date: Wed, 25 Sep 2024 14:45:47 +0200 Subject: [PATCH 2/5] px changed % --- style.css | 44 +++++++++++++++++++++----------------------- 1 file changed, 21 insertions(+), 23 deletions(-) diff --git a/style.css b/style.css index 737ca75..a3acab6 100644 --- a/style.css +++ b/style.css @@ -7,7 +7,7 @@ body { header.banner { background-color: #4a90e2; color: white; - padding: 20px; + padding: 2%; text-align: center; } @@ -19,30 +19,30 @@ header.banner h2 { section.container { display: flex; justify-content: space-between; - padding: 20px; - max-width: 1200px; + padding: 2%; + max-width: 100%; margin: 0 auto; - gap: 20px; + gap: 2%; align-items: flex-start; } article.block { background-color: #ffffff; width: 45%; - padding: 20px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - margin-top: 20px; + padding: 2%; + box-shadow: 0 0.4% 0.8% rgba(0, 0, 0, 0.1); + margin-top: 2%; } article.note-block { width: 60%; text-align: left; - padding: 15px; + padding: 1.5%; } article.note-block h3 { text-align: left; - margin-bottom: 20px; + margin-bottom: 2%; font-size: 1.2em; } @@ -52,19 +52,19 @@ article.resource-block { } article.block h2 { - margin-bottom: 10px; + margin-bottom: 1%; font-size: 1.5em; } article.block h3 { font-size: 1.2em; - margin-bottom: 10px; + margin-bottom: 1%; } article.block input { width: 100%; - padding: 10px; - margin: 10px 0; + padding: 1%; + margin: 1% 0; border: 1px solid #d3d3d3; border-radius: 5px; box-sizing: border-box; @@ -73,28 +73,25 @@ article.block input { article.block textarea { width: 100%; - padding: 10px; - margin: 10px 0; + padding: 1%; + margin: 1% 0; border: 1px solid #d3d3d3; border-radius: 5px; box-sizing: border-box; font-size: 0.9em; -} - -article.block textarea { - min-height: 150px; + min-height: 15%; } article.block button { background-color: #ff5723; color: white; - padding: 10px; + padding: 1%; border: none; width: 100%; border-radius: 5px; font-size: 1em; cursor: pointer; - margin-top: 10px; + margin-top: 1%; } article.block button:hover { @@ -112,7 +109,7 @@ ul.resources-list { } ul.resources-list li { - margin-bottom: 10px; + margin-bottom: 1%; } ul.resources-list a { @@ -128,7 +125,7 @@ ul.resources-list a:hover { footer.underbanner { background-color: #4a90e2; color: white; - padding: 10px; + padding: 1%; text-align: center; position: fixed; width: 100%; @@ -150,3 +147,4 @@ footer.underbanner p { + From 013fd747a612c48db82695ae5a9275b13e032aba Mon Sep 17 00:00:00 2001 From: Arnau Costa Date: Wed, 25 Sep 2024 15:35:02 +0200 Subject: [PATCH 3/5] routes --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index c408dc3..0dd2f99 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,8 @@ - - + + My Notes Application From 14ad9976191fee46240b7c079bbb205dbe8b63e7 Mon Sep 17 00:00:00 2001 From: ArnauACR <145784953+ArnauACR@users.noreply.github.com> Date: Mon, 14 Oct 2024 10:21:57 +0200 Subject: [PATCH 4/5] Fix: resolve problems in HTML and CSS --- index.html | 13 ++++++++----- style.css | 57 +++++++++++++++++++++++++++--------------------------- 2 files changed, 37 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 0dd2f99..53026a4 100644 --- a/index.html +++ b/index.html @@ -26,11 +26,13 @@

Create a New Note

@@ -43,3 +45,4 @@

Resources

+ diff --git a/style.css b/style.css index a3acab6..37b0fd2 100644 --- a/style.css +++ b/style.css @@ -7,43 +7,43 @@ body { header.banner { background-color: #4a90e2; color: white; - padding: 2%; + padding: 20px; text-align: center; } header.banner h2 { margin: 0; - font-size: 2em; + font-size: 2rem; } section.container { display: flex; justify-content: space-between; - padding: 2%; + padding: 20px; max-width: 100%; margin: 0 auto; - gap: 2%; + gap: 20px; align-items: flex-start; } article.block { background-color: #ffffff; width: 45%; - padding: 2%; - box-shadow: 0 0.4% 0.8% rgba(0, 0, 0, 0.1); - margin-top: 2%; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin-top: 20px; } article.note-block { width: 60%; text-align: left; - padding: 1.5%; + padding: 15px; } article.note-block h3 { text-align: left; - margin-bottom: 2%; - font-size: 1.2em; + margin-bottom: 20px; + font-size: 1.2rem; } article.resource-block { @@ -52,46 +52,46 @@ article.resource-block { } article.block h2 { - margin-bottom: 1%; - font-size: 1.5em; + margin-bottom: 10px; + font-size: 1.5rem; } article.block h3 { - font-size: 1.2em; - margin-bottom: 1%; + font-size: 1.2rem; + margin-bottom: 10px; } article.block input { width: 100%; - padding: 1%; - margin: 1% 0; + padding: 10px; + margin: 10px 0; border: 1px solid #d3d3d3; border-radius: 5px; box-sizing: border-box; - font-size: 0.9em; + font-size: 0.9rem; } article.block textarea { width: 100%; - padding: 1%; - margin: 1% 0; + padding: 10px; + margin: 10px 0; border: 1px solid #d3d3d3; border-radius: 5px; box-sizing: border-box; - font-size: 0.9em; - min-height: 15%; + font-size: 0.9rem; + min-height: 150px; } article.block button { background-color: #ff5723; color: white; - padding: 1%; + padding: 10px; border: none; width: 100%; border-radius: 5px; - font-size: 1em; + font-size: 1rem; cursor: pointer; - margin-top: 1%; + margin-top: 10px; } article.block button:hover { @@ -109,13 +109,13 @@ ul.resources-list { } ul.resources-list li { - margin-bottom: 1%; + margin-bottom: 10px; } ul.resources-list a { text-decoration: none; color: #794da4; - font-size: 1em; + font-size: 1rem; } ul.resources-list a:hover { @@ -125,7 +125,7 @@ ul.resources-list a:hover { footer.underbanner { background-color: #4a90e2; color: white; - padding: 1%; + padding: 10px; text-align: center; position: fixed; width: 100%; @@ -134,7 +134,7 @@ footer.underbanner { footer.underbanner p { margin: 0; - font-size: 0.9em; + font-size: 0.9rem; } @@ -148,3 +148,4 @@ footer.underbanner p { + From 54b6ab54bed5b853d41ce773e8423db26951f5d5 Mon Sep 17 00:00:00 2001 From: ArnauACR <145784953+ArnauACR@users.noreply.github.com> Date: Mon, 14 Oct 2024 20:58:01 +0200 Subject: [PATCH 5/5] empty --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 53026a4..980b9f4 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,7 @@

Resources

- +//empty