From 5c61d84f5e92232dd99ceffe76c209f5c2f1182d Mon Sep 17 00:00:00 2001 From: Lorenzo Ruscica <152178455+Lorenzo-Ruscica@users.noreply.github.com> Date: Tue, 15 Apr 2025 23:20:16 +0200 Subject: [PATCH 1/3] Inserite esercitazioni css 44,45,46,47 --- .../ruscica_esercizio_css_44.css | 17 ++++++++++ .../ruscica_esercizio_css_44.html | 20 ++++++++++++ .../ruscica_esercizio_css_45.css | 20 ++++++++++++ .../ruscica_esercizio_css_45.html | 23 ++++++++++++++ .../ruscica_esercizio_css_46.css | 20 ++++++++++++ .../ruscica_esercizio_css_46.html | 19 ++++++++++++ .../ruscica_esercizio_css_47.css | 20 ++++++++++++ .../ruscica_esercizio_css_47.html | 31 +++++++++++++++++++ 8 files changed, 170 insertions(+) create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_44.css create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_44.html create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_45.css create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_45.html create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_46.css create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_46.html create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_47.css create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_47.html diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_44.css b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_44.css new file mode 100644 index 00000000..c74024bf --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_44.css @@ -0,0 +1,17 @@ +.container { + display: flex; + width: 100%; + gap: 10px; + background-color: #cbb8cc; + padding: 10px; +} + +.item { + font-size: 2em; + background-color: #4961ff; + border: 2px solid #6aa2f0; + color: white; + padding: 10px; + border-radius: 10px; + flex: 1; +} \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_44.html b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_44.html new file mode 100644 index 00000000..8ebf053c --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_44.html @@ -0,0 +1,20 @@ + + + + + css_44 + + + + + + + + +
+
home
+
About Us
+
Our Products
+
Contact Us
+ + \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_45.css b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_45.css new file mode 100644 index 00000000..818611f2 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_45.css @@ -0,0 +1,20 @@ +.container { + height: 95vh; + border: 1px solid blue; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: center; + border-radius: 20px; + } + +.item { + border-radius: 10px; + background-color: #4961ff; + color: white; + flex: 0 1 auto; + align-self: auto; + width: 15%; +padding: 10px; + } \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_45.html b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_45.html new file mode 100644 index 00000000..abc9fd6e --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_45.html @@ -0,0 +1,23 @@ + + + + + css_45 + + + + + + + + +
+
I am small
+
I have more content than the very small item.
+
I have lots of content. + So much content that I don't know where it is all going to go. + I'm glad that CSS is pretty good at dealing with situations where we + end up with more words than expected!
+
+ + \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_46.css b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_46.css new file mode 100644 index 00000000..afe51277 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_46.css @@ -0,0 +1,20 @@ +.container { + height: 95vh; + border: 1px solid blue; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: center; + border-radius: 20px; + } + +.block { + border-radius: 10px; + background-color: #4961ff; + color: white; + flex: 0 1 auto; + align-self: auto; + width: 15%; +padding: 10px; + } diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_46.html b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_46.html new file mode 100644 index 00000000..fb14a331 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_46.html @@ -0,0 +1,19 @@ + + + + + css_46 + + + + + + + + +
+
Center me.
+
+
+ + \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_47.css b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_47.css new file mode 100644 index 00000000..afd299f4 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_47.css @@ -0,0 +1,20 @@ +.container { + display: flex; + justify-content: space-around; + background-color: #ddd9d9; + width: 98%; + padding: 10px ; + + gap: 100px; +} + +.block + { + background-color: #4961ff; + border: 2px solid #6aa2f0; + color: white; + font-weight: bold; + border-radius: 8px; + padding: 18px; + flex: 1; +} \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_47.html b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_47.html new file mode 100644 index 00000000..366423d9 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_47.html @@ -0,0 +1,31 @@ + + + + + css_47 + + + + + + + + +
+
Turnip
+
greens
+
yarrow
+
ricebean
+
+
+
rutabaga
+
endive
+
cauliflower
+
+
+
sea lettuce
+
kohlrabi
+
amaranth
+
+ + \ No newline at end of file From 0cac1ae387e56e2bf20cd00a55a3a952a45a5ade Mon Sep 17 00:00:00 2001 From: "lorenzo.ruscica" Date: Wed, 30 Apr 2025 13:26:40 +0200 Subject: [PATCH 2/3] Inserita es css 48 --- TPSI/ruscica_lorenzo/esercitazioni_css/c.css | 16 +++++++++ TPSI/ruscica_lorenzo/esercitazioni_css/c.html | 6 ++++ .../ruscica_esercizio_css_48.css | 16 +++++++++ .../ruscica_esercizio_css_48.html | 34 +++++++++++++++++++ 4 files changed, 72 insertions(+) create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/c.css create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/c.html create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_48.css create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_48.html diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/c.css b/TPSI/ruscica_lorenzo/esercitazioni_css/c.css new file mode 100644 index 00000000..cf26b0e3 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/c.css @@ -0,0 +1,16 @@ +.container { + display: flex; + flex-direction: column; + justify-content:stretch; + background-color: #881D8D; + width: 300px; + height: 500px; + padding: 10px; +} + +.item { + background-color: #FFAD49; + border: 1px solid #FF920D; + padding: 10px; + text-align:center; +} \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/c.html b/TPSI/ruscica_lorenzo/esercitazioni_css/c.html new file mode 100644 index 00000000..a8079050 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/c.html @@ -0,0 +1,6 @@ + +
+
1
+
2
+
3
+
\ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_48.css b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_48.css new file mode 100644 index 00000000..3970e429 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_48.css @@ -0,0 +1,16 @@ +.grid-container { + display: grid; + width: 20vw; + height: 20vw; + margin-top: 8%; + margin: auto; + grid-template-columns: 25% 25% 25% 25%; + grid-template-rows: 25% 25% 25% 25%; +} + +.grid-item { + border: 1px solid black; + width: 100%; + text-align: center; + background-color: orange; +} \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_48.html b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_48.html new file mode 100644 index 00000000..6e493b4e --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_48.html @@ -0,0 +1,34 @@ + + + + + css_48 + + + + + + + + +

Gioco del 15

+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
+
+ + \ No newline at end of file From c5e07bce7171d6a2489767857b1014b4b6d4227f Mon Sep 17 00:00:00 2001 From: Lorenzo Ruscica <152178455+Lorenzo-Ruscica@users.noreply.github.com> Date: Tue, 6 May 2025 17:33:16 +0200 Subject: [PATCH 3/3] Inserite esercitazioni css 49 50 51 52 53 54 --- .../ruscica_esercizio_css_49.css | 11 +++++++ .../ruscica_esercizio_css_49.html | 31 +++++++++++++++++++ .../ruscica_esercizio_css_50.css | 13 ++++++++ .../ruscica_esercizio_css_50.html | 19 ++++++++++++ .../ruscica_esercizio_css_51.css | 17 ++++++++++ .../ruscica_esercizio_css_51.html | 21 +++++++++++++ .../ruscica_esercizio_css_52.css | 14 +++++++++ .../ruscica_esercizio_css_52.html | 20 ++++++++++++ .../ruscica_esercizio_css_53.css | 24 ++++++++++++++ .../ruscica_esercizio_css_53.html | 22 +++++++++++++ .../ruscica_esercizio_css_54.css | 28 +++++++++++++++++ .../ruscica_esercizio_css_54.html | 21 +++++++++++++ 12 files changed, 241 insertions(+) create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_49.css create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_49.html create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_50.css create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_50.html create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_51.css create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_51.html create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_52.css create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_52.html create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_53.css create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_53.html create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_54.css create mode 100644 TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_54.html diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_49.css b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_49.css new file mode 100644 index 00000000..932f9665 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_49.css @@ -0,0 +1,11 @@ +.grid1 { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(6, 50px); + gap: 1px; + border: 1px solid red; +} +.grid1 > div { + border: 1px solid red; + text-align: center; +} \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_49.html b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_49.html new file mode 100644 index 00000000..9c936ee3 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_49.html @@ -0,0 +1,31 @@ + + + + + css_49 + + + + + + + + +
+
Turnip
+
greens
+
yarrow
+
ricebean
+
+
+
rutabaga
+
endive
+
cauliflower
+
+
+
sea lettuce
+
kohlrabi
+
amaranth
+
+ + \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_50.css b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_50.css new file mode 100644 index 00000000..d3487de9 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_50.css @@ -0,0 +1,13 @@ +.grid2 { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(2, 80px); + gap: 10px; +} +.grid2 div { + background: #333; + color: white; + display: flex; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_50.html b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_50.html new file mode 100644 index 00000000..063498b2 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_50.html @@ -0,0 +1,19 @@ + + + + + css_50 + + + + + + + + +
+
A
B
C
+
D
E
F
+
+ + \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_51.css b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_51.css new file mode 100644 index 00000000..47ac8217 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_51.css @@ -0,0 +1,17 @@ +.grid3 { + display: grid; + grid-template-columns: 1fr 1fr 100px; + grid-template-rows: 60px 60px; + gap: 10px; +} +.grid3 div { + background: #333; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.a { grid-column: 1 / 3; +} + .b { grid-column: 3 / 4; grid-row: 1 / 3; + } diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_51.html b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_51.html new file mode 100644 index 00000000..440953f3 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_51.html @@ -0,0 +1,21 @@ + + + + + css_51 + + + + + + + + +
+
A
+
B
+
C
+
D
+
+ + \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_52.css b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_52.css new file mode 100644 index 00000000..2747cdca --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_52.css @@ -0,0 +1,14 @@ +.grid4 { + display: grid; + grid-template-columns: 1fr 2fr; + grid-auto-rows: 60px; + gap: 10px; +} +.grid4 div { + background: #333; + color: white; + display: flex; + justify-content: center; + align-items: center; +} +.e { grid-column: 1 / 3; } \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_52.html b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_52.html new file mode 100644 index 00000000..3314c9e4 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_52.html @@ -0,0 +1,20 @@ + + + + + css_52 + + + + + + + + +
+
A
B
+
C
D
+
E
+
+ + \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_53.css b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_53.css new file mode 100644 index 00000000..bf86e0e0 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_53.css @@ -0,0 +1,24 @@ +.grid5 { + display: grid; + grid-template-columns: 1fr 2fr 1fr; + grid-template-rows: auto auto auto; + gap: 10px; + background: #eee; +} +.grid5 > div { + padding: 10px; + border-radius: 5px; +} +.header, .footer { + grid-column: 1 / 4; + background: #999; +} +.sidebar { + background: #333; color: white; +} +.content { + background: #333; color: white; +} +.sidebar2 { + background: #ccc; +} \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_53.html b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_53.html new file mode 100644 index 00000000..33d11458 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_53.html @@ -0,0 +1,22 @@ + + + + + css_53 + + + + + + + + +
+
Header
+
Sidebar
+
Content
More content than we had before so this column is now quite tall.
+
Sidebar 2
+
Footer
+
+ + \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_54.css b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_54.css new file mode 100644 index 00000000..7a08c432 --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_54.css @@ -0,0 +1,28 @@ +.grid6 { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-rows: auto auto auto; + gap: 10px; + background: #eee; +} +.grid6 > div { + padding: 10px; + border-radius: 5px; +} +.header { + grid-column: 2 / 3; + background: #999; +} +.sidebar { + grid-row: 2 / 3; + background: #333; color: white; +} +.content { + grid-column: 2 / 3; + grid-row: 2 / 3; + background: #333; color: white; +} +.footer { + grid-column: 1 / 3; + background: #999; +} \ No newline at end of file diff --git a/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_54.html b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_54.html new file mode 100644 index 00000000..9ceeb88f --- /dev/null +++ b/TPSI/ruscica_lorenzo/esercitazioni_css/ruscica_esercizio_css_54.html @@ -0,0 +1,21 @@ + + + + + css_54 + + + + + + + + +
+
Header
+
Sidebar
+
Content
More content than we had before so this column is now quite tall.
+
Footer
+
+ + \ No newline at end of file