From aec3cbe4b00f96de4f5d120f62eec3e46e5b6557 Mon Sep 17 00:00:00 2001 From: Crateeeee Date: Fri, 28 Nov 2025 08:28:09 +0800 Subject: [PATCH 1/8] CSS Grid --- introduction/css/css-grid.css | 14 ++++++++++++++ introduction/index.html | 15 ++++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 introduction/css/css-grid.css diff --git a/introduction/css/css-grid.css b/introduction/css/css-grid.css new file mode 100644 index 0000000..be6c06f --- /dev/null +++ b/introduction/css/css-grid.css @@ -0,0 +1,14 @@ +.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + background-color: rgb(34, 207, 66); + padding: 5px; + gap: 5px; +} +.container div { + background-color: #f5a5ed; + color: #000; + padding: 10px; + font-size: 30px; + text-align: center; +} \ No newline at end of file diff --git a/introduction/index.html b/introduction/index.html index 265fcb0..08e256c 100644 --- a/introduction/index.html +++ b/introduction/index.html @@ -1,7 +1,7 @@ - + WEBPROG IT-241 @@ -45,6 +45,19 @@

Goals

Crochet Cat

+ +

The grid-template-columns Property

+ +

Here, each column will take up 33.3% of the container width, splitting it equally (1fr):

+ +
+
1
+
2
+
3
+
4
+
5
+
6
+
From 9516bcdcc3432de2dc679387a5516d7dc85ab753 Mon Sep 17 00:00:00 2001 From: Crateeeee Date: Fri, 28 Nov 2025 08:50:09 +0800 Subject: [PATCH 2/8] CSS grid applied --- introduction/css/css-grid.css | 70 ++++++++++++++++++++++----- introduction/index.html | 89 +++++++++++++++++------------------ 2 files changed, 101 insertions(+), 58 deletions(-) diff --git a/introduction/css/css-grid.css b/introduction/css/css-grid.css index be6c06f..c22c0ef 100644 --- a/introduction/css/css-grid.css +++ b/introduction/css/css-grid.css @@ -1,14 +1,62 @@ +* { + box-sizing: border-box; +} .container { display: grid; - grid-template-columns: 1fr 1fr 1fr; - background-color: rgb(34, 207, 66); - padding: 5px; - gap: 5px; -} -.container div { - background-color: #f5a5ed; - color: #000; + grid-template-columns: repeat(12, [col-start] 1fr); + gap: 20px; +} +/* Mobile first */ +.container > * { + border: 1px solid green; + background-color: beige; padding: 10px; - font-size: 30px; - text-align: center; -} \ No newline at end of file + grid-column: col-start / span 12; +} +.container h2 { + margin-top: 0; +} +.container ul { + margin: 10px 0; + padding-left: 20px; +} +@media (min-width: 576px) { + .about { + grid-column: col-start / span 6; + } + .education { + grid-column: col-start 7 / span 6; + } + .achievements { + grid-column: col-start / span 6; + } + .experience { + grid-column: col-start 7 / span 6; + } + .hobbies { + grid-column: col-start / span 6; + } + .goals { + grid-column: col-start 7 / span 6; + } +} +@media (min-width: 768px) { + .about { + grid-column: col-start / span 4; + } + .education { + grid-column: col-start 5 / span 4; + } + .achievements { + grid-column: col-start 9 / span 4; + } + .experience { + grid-column: col-start / span 4; + } + .hobbies { + grid-column: col-start 5 / span 4; + } + .goals { + grid-column: col-start 9 / span 4; + } +} diff --git a/introduction/index.html b/introduction/index.html index 08e256c..39e25cf 100644 --- a/introduction/index.html +++ b/introduction/index.html @@ -6,59 +6,54 @@ -

My Personal Profile Web page

-

- -

About Me


-

Hi folks! I'm Crate Marshall Pinlac! I'm studying WEBPROG (Professor Joe Gene). And currently practicing my HTML and CSS skills!
+

My Personal Profile Web page

-

Education

- - -

Achievements

- - +
+
+

About Me

+

Hi folks! I'm Crate Marshall Pinlac! I'm studying WEBPROG (Professor Joe Gene). And currently practicing my HTML and CSS skills!

+
-

IT Experience

-

Python, Java, HTML, CSS, OutSystems, OS(MacOS, Windows, Linux) Github

-
+
+

Education

+
    +
  • Asia Pacific College, BS Information Technology
    • +
  • Asia Pacific College, Senior High School
    • +
  • Bangkal High School, Elementary & Junior High School
    • +
+
-

Hobbies and Interests

-
    -
  • Music
    • -
  • Programming
    • -
  • Watching movies
    • -
  • Online games
    • -
+
+

Achievements

+
    +
  • Scrum Foundation Professional Certificate, Consistent honors
    • +
+
-

Goals

-

- To graduate with flying colors! Have stable career. Working in the industry related to my course. -

-Picture Gallery
- Crochet Cat -

- +
+

IT Experience

+

Python, Java, HTML, CSS, OutSystems, OS(MacOS, Windows, Linux) Github

+
+ +
+

Hobbies and Interests

+
    +
  • Music
    • +
  • Programming
    • +
  • Watching movies
    • +
  • Online games
    • +
+
-

The grid-template-columns Property

+
+

Goals

+

To graduate with flying colors! Have stable career. Working in the industry related to my course.

+
+
-

Here, each column will take up 33.3% of the container width, splitting it equally (1fr):

+

Picture Gallery

+Crochet Cat -
-
1
-
2
-
3
-
4
-
5
-
6
-
- - + From cbe9cf688ea375260d1a0530513e50129970f691 Mon Sep 17 00:00:00 2001 From: Crateeeee Date: Fri, 28 Nov 2025 08:56:30 +0800 Subject: [PATCH 3/8] Updated CSS Grid --- introduction/css/css-grid.css | 115 +++++++++++++++++++++------------- 1 file changed, 70 insertions(+), 45 deletions(-) diff --git a/introduction/css/css-grid.css b/introduction/css/css-grid.css index c22c0ef..01d4611 100644 --- a/introduction/css/css-grid.css +++ b/introduction/css/css-grid.css @@ -1,62 +1,87 @@ * { box-sizing: border-box; } +body { + margin: 0; + font-family: Arial, sans-serif; +} .container { display: grid; - grid-template-columns: repeat(12, [col-start] 1fr); - gap: 20px; + grid-template-areas: + 'header header header header header header' + 'about about education education achievements achievements' + 'experience experience hobbies hobbies goals goals' + 'footer footer footer footer footer footer'; + background-color: dodgerblue; + padding: 10px; + gap: 10px; + min-height: 100vh; } -/* Mobile first */ .container > * { - border: 1px solid green; - background-color: beige; - padding: 10px; - grid-column: col-start / span 12; + background-color: #f1f1f1; + color: #000; + padding: 20px; + font-size: 16px; +} +.header { + grid-area: header; + text-align: center; + background-color: #2c3e50; + color: white; + align-self: start; +} +.header h1 { + margin: 0; + font-size: 36px; +} +.about { + grid-area: about; + align-self: center; +} +.education { + grid-area: education; +} +.achievements { + grid-area: achievements; + align-self: start; +} +.experience { + grid-area: experience; +} +.hobbies { + grid-area: hobbies; + align-self: center; +} +.goals { + grid-area: goals; +} +.footer { + grid-area: footer; + text-align: center; + background-color: #34495e; + color: white; } .container h2 { margin-top: 0; + color: dodgerblue; + border-bottom: 2px solid dodgerblue; + padding-bottom: 10px; } .container ul { margin: 10px 0; padding-left: 20px; } -@media (min-width: 576px) { - .about { - grid-column: col-start / span 6; - } - .education { - grid-column: col-start 7 / span 6; - } - .achievements { - grid-column: col-start / span 6; - } - .experience { - grid-column: col-start 7 / span 6; - } - .hobbies { - grid-column: col-start / span 6; - } - .goals { - grid-column: col-start 7 / span 6; - } -} -@media (min-width: 768px) { - .about { - grid-column: col-start / span 4; - } - .education { - grid-column: col-start 5 / span 4; - } - .achievements { - grid-column: col-start 9 / span 4; - } - .experience { - grid-column: col-start / span 4; - } - .hobbies { - grid-column: col-start 5 / span 4; - } - .goals { - grid-column: col-start 9 / span 4; +/* Responsive Design */ +@media (max-width: 768px) { + .container { + grid-template-areas: + 'header' + 'about' + 'education' + 'achievements' + 'experience' + 'hobbies' + 'goals' + 'footer'; } } From bfb5baa76fe4646b115c416222767a7a7456d6fa Mon Sep 17 00:00:00 2001 From: Crateeeee Date: Fri, 28 Nov 2025 09:00:50 +0800 Subject: [PATCH 4/8] updated link CSS --- introduction/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/introduction/index.html b/introduction/index.html index 39e25cf..a3f0d35 100644 --- a/introduction/index.html +++ b/introduction/index.html @@ -1,7 +1,7 @@ - + WEBPROG IT-241 From d96c85e2bc2fc2a606351c0b9e0b46d2cb6793cb Mon Sep 17 00:00:00 2001 From: Crateeeee Date: Fri, 28 Nov 2025 09:02:24 +0800 Subject: [PATCH 5/8] back to orig css-grid --- introduction/css/css-grid.css | 115 +++++++++++++--------------------- introduction/index.html | 2 +- 2 files changed, 46 insertions(+), 71 deletions(-) diff --git a/introduction/css/css-grid.css b/introduction/css/css-grid.css index 01d4611..c22c0ef 100644 --- a/introduction/css/css-grid.css +++ b/introduction/css/css-grid.css @@ -1,87 +1,62 @@ * { box-sizing: border-box; } -body { - margin: 0; - font-family: Arial, sans-serif; -} .container { display: grid; - grid-template-areas: - 'header header header header header header' - 'about about education education achievements achievements' - 'experience experience hobbies hobbies goals goals' - 'footer footer footer footer footer footer'; - background-color: dodgerblue; - padding: 10px; - gap: 10px; - min-height: 100vh; + grid-template-columns: repeat(12, [col-start] 1fr); + gap: 20px; } +/* Mobile first */ .container > * { - background-color: #f1f1f1; - color: #000; - padding: 20px; - font-size: 16px; -} -.header { - grid-area: header; - text-align: center; - background-color: #2c3e50; - color: white; - align-self: start; -} -.header h1 { - margin: 0; - font-size: 36px; -} -.about { - grid-area: about; - align-self: center; -} -.education { - grid-area: education; -} -.achievements { - grid-area: achievements; - align-self: start; -} -.experience { - grid-area: experience; -} -.hobbies { - grid-area: hobbies; - align-self: center; -} -.goals { - grid-area: goals; -} -.footer { - grid-area: footer; - text-align: center; - background-color: #34495e; - color: white; + border: 1px solid green; + background-color: beige; + padding: 10px; + grid-column: col-start / span 12; } .container h2 { margin-top: 0; - color: dodgerblue; - border-bottom: 2px solid dodgerblue; - padding-bottom: 10px; } .container ul { margin: 10px 0; padding-left: 20px; } -/* Responsive Design */ -@media (max-width: 768px) { - .container { - grid-template-areas: - 'header' - 'about' - 'education' - 'achievements' - 'experience' - 'hobbies' - 'goals' - 'footer'; +@media (min-width: 576px) { + .about { + grid-column: col-start / span 6; + } + .education { + grid-column: col-start 7 / span 6; + } + .achievements { + grid-column: col-start / span 6; + } + .experience { + grid-column: col-start 7 / span 6; + } + .hobbies { + grid-column: col-start / span 6; + } + .goals { + grid-column: col-start 7 / span 6; + } +} +@media (min-width: 768px) { + .about { + grid-column: col-start / span 4; + } + .education { + grid-column: col-start 5 / span 4; + } + .achievements { + grid-column: col-start 9 / span 4; + } + .experience { + grid-column: col-start / span 4; + } + .hobbies { + grid-column: col-start 5 / span 4; + } + .goals { + grid-column: col-start 9 / span 4; } } diff --git a/introduction/index.html b/introduction/index.html index a3f0d35..39e25cf 100644 --- a/introduction/index.html +++ b/introduction/index.html @@ -1,7 +1,7 @@ - + WEBPROG IT-241 From a32fd69e547bb4b62e12f38dd5c68697e37fccc2 Mon Sep 17 00:00:00 2001 From: Crateeeee Date: Fri, 28 Nov 2025 09:03:33 +0800 Subject: [PATCH 6/8] link updated --- introduction/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/introduction/index.html b/introduction/index.html index 39e25cf..f4faec6 100644 --- a/introduction/index.html +++ b/introduction/index.html @@ -1,7 +1,7 @@ - + WEBPROG IT-241 From 7b681d85d6b5c70bbe12f5cd4704acec6b9cdfbf Mon Sep 17 00:00:00 2001 From: Crateeeee Date: Fri, 28 Nov 2025 09:08:43 +0800 Subject: [PATCH 7/8] add more design css grid --- introduction/css/css-grid.css | 167 +++++++++++++++++++++++++--------- introduction/index.html | 2 +- 2 files changed, 127 insertions(+), 42 deletions(-) diff --git a/introduction/css/css-grid.css b/introduction/css/css-grid.css index c22c0ef..9a3e8b8 100644 --- a/introduction/css/css-grid.css +++ b/introduction/css/css-grid.css @@ -1,62 +1,147 @@ * { box-sizing: border-box; } +body { + margin: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + padding: 20px; +} +.header { + background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); + color: white; + text-align: center; + padding: 40px 20px; + border-radius: 15px; + margin-bottom: 30px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} +.header h1 { + margin: 0; + font-size: 48px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); + letter-spacing: 2px; +} +.header p { + margin: 10px 0 0 0; + font-size: 18px; + opacity: 0.9; +} .container { display: grid; - grid-template-columns: repeat(12, [col-start] 1fr); + grid-template-areas: + 'about about education education achievements achievements' + 'experience experience hobbies hobbies goals goals'; + background-color: transparent; + padding: 0; gap: 20px; + margin-bottom: 30px; } -/* Mobile first */ .container > * { - border: 1px solid green; - background-color: beige; - padding: 10px; - grid-column: col-start / span 12; + background: rgba(255, 255, 255, 0.95); + color: #333; + padding: 30px; + font-size: 16px; + border-radius: 12px; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); + transition: transform 0.3s ease, box-shadow 0.3s ease; + border-left: 5px solid #667eea; +} +.container > *:hover { + transform: translateY(-5px); + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); +} +.about { + grid-area: about; +} +.education { + grid-area: education; +} +.achievements { + grid-area: achievements; +} +.experience { + grid-area: experience; +} +.hobbies { + grid-area: hobbies; +} +.goals { + grid-area: goals; } .container h2 { margin-top: 0; + color: #1e3c72; + font-size: 28px; + border-bottom: 3px solid #667eea; + padding-bottom: 12px; + margin-bottom: 20px; } .container ul { margin: 10px 0; - padding-left: 20px; + padding-left: 25px; + line-height: 1.8; } -@media (min-width: 576px) { - .about { - grid-column: col-start / span 6; - } - .education { - grid-column: col-start 7 / span 6; - } - .achievements { - grid-column: col-start / span 6; - } - .experience { - grid-column: col-start 7 / span 6; - } - .hobbies { - grid-column: col-start / span 6; - } - .goals { - grid-column: col-start 7 / span 6; - } +.container ul li { + margin-bottom: 8px; } -@media (min-width: 768px) { - .about { - grid-column: col-start / span 4; - } - .education { - grid-column: col-start 5 / span 4; - } - .achievements { - grid-column: col-start 9 / span 4; +.container p { + line-height: 1.8; + color: #555; +} +.gallery-section { + background: rgba(255, 255, 255, 0.95); + border-radius: 12px; + padding: 30px; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); + text-align: center; +} +.gallery-header { + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + color: white; + padding: 20px; + border-radius: 10px; + margin-bottom: 25px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); +} +.gallery-header h2 { + margin: 0; + font-size: 36px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); +} +.gallery-section img { + max-width: 100%; + height: auto; + border-radius: 15px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); + transition: transform 0.3s ease; +} +.gallery-section img:hover { + transform: scale(1.05); +} +/* Responsive Design */ +@media (max-width: 1024px) { + .container { + grid-template-areas: + 'about about education education' + 'achievements achievements hobbies hobbies' + 'experience experience goals goals'; } - .experience { - grid-column: col-start / span 4; +} +@media (max-width: 768px) { + .container { + grid-template-areas: + 'about' + 'education' + 'achievements' + 'experience' + 'hobbies' + 'goals'; } - .hobbies { - grid-column: col-start 5 / span 4; + .header h1 { + font-size: 32px; } - .goals { - grid-column: col-start 9 / span 4; + .gallery-header h2 { + font-size: 28px; } } diff --git a/introduction/index.html b/introduction/index.html index f4faec6..4111f2b 100644 --- a/introduction/index.html +++ b/introduction/index.html @@ -1,7 +1,7 @@ - + WEBPROG IT-241 From ffc42e7f54c0a4ed54a827cd40c99a0b4210b4df Mon Sep 17 00:00:00 2001 From: Crateeeee Date: Fri, 28 Nov 2025 09:11:16 +0800 Subject: [PATCH 8/8] change font color css grid --- introduction/css/css-grid.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/introduction/css/css-grid.css b/introduction/css/css-grid.css index 9a3e8b8..94f57d2 100644 --- a/introduction/css/css-grid.css +++ b/introduction/css/css-grid.css @@ -19,7 +19,7 @@ body { .header h1 { margin: 0; font-size: 48px; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); + text-shadow: 2px 2px 4px rgb(255, 255, 255); letter-spacing: 2px; } .header p { @@ -107,7 +107,7 @@ body { .gallery-header h2 { margin: 0; font-size: 36px; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + text-shadow: 2px 2px 4px rgb(255, 255, 255); } .gallery-section img { max-width: 100%;