From 1c3bb1405e5a0a1e86a59a50d7925e419806815f Mon Sep 17 00:00:00 2001 From: Pugliese-Alessandro Date: Wed, 16 Apr 2025 01:34:55 +0200 Subject: [PATCH 1/2] Add files via upload --- .../css/pugliese_esercizio_css_44.css | 17 ++++++++++ .../css/pugliese_esercizio_css_44.html | 20 ++++++++++++ .../css/pugliese_esercizio_css_45.css | 20 ++++++++++++ .../css/pugliese_esercizio_css_45.html | 23 ++++++++++++++ .../css/pugliese_esercizio_css_46.css | 20 ++++++++++++ .../css/pugliese_esercizio_css_46.html | 19 ++++++++++++ .../css/pugliese_esercizio_css_47.css | 20 ++++++++++++ .../css/pugliese_esercizio_css_47.html | 31 +++++++++++++++++++ 8 files changed, 170 insertions(+) create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_44.css create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_44.html create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_45.css create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_45.html create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_46.css create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_46.html create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_47.css create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_47.html diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_44.css b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_44.css new file mode 100644 index 00000000..c74024bf --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_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/pugliese_alessandro/css/pugliese_esercizio_css_44.html b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_44.html new file mode 100644 index 00000000..c806580c --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_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/pugliese_alessandro/css/pugliese_esercizio_css_45.css b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_45.css new file mode 100644 index 00000000..818611f2 --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_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/pugliese_alessandro/css/pugliese_esercizio_css_45.html b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_45.html new file mode 100644 index 00000000..383fe021 --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_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/pugliese_alessandro/css/pugliese_esercizio_css_46.css b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_46.css new file mode 100644 index 00000000..afe51277 --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_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/pugliese_alessandro/css/pugliese_esercizio_css_46.html b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_46.html new file mode 100644 index 00000000..c6a9452a --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_46.html @@ -0,0 +1,19 @@ + + + + + css_46 + + + + + + + + +
+
Center me.
+
+
+ + \ No newline at end of file diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_47.css b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_47.css new file mode 100644 index 00000000..afd299f4 --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_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/pugliese_alessandro/css/pugliese_esercizio_css_47.html b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_47.html new file mode 100644 index 00000000..5d8b898d --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_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 48d2a3933a00e2df7d1c49f31457d30ef05477e0 Mon Sep 17 00:00:00 2001 From: Pugliese-Alessandro Date: Wed, 7 May 2025 02:25:10 +0200 Subject: [PATCH 2/2] Add files via upload --- .../css/pugliese_esercizio_css_48.css | 19 ++++++++++ .../css/pugliese_esercizio_css_48.html | 29 ++++++++++++++ .../css/pugliese_esercizio_css_49.css | 32 ++++++++++++++++ .../css/pugliese_esercizio_css_49.html | 38 +++++++++++++++++++ .../css/pugliese_esercizio_css_50.css | 15 ++++++++ .../css/pugliese_esercizio_css_50.html | 20 ++++++++++ .../css/pugliese_esercizio_css_51.css | 23 +++++++++++ .../css/pugliese_esercizio_css_51.html | 18 +++++++++ .../css/pugliese_esercizio_css_52.css | 27 +++++++++++++ .../css/pugliese_esercizio_css_52.html | 19 ++++++++++ .../css/pugliese_esercizio_css_53.css | 32 ++++++++++++++++ .../css/pugliese_esercizio_css_53.html | 19 ++++++++++ .../css/pugliese_esercizio_css_54.css | 30 +++++++++++++++ .../css/pugliese_esercizio_css_54.html | 18 +++++++++ 14 files changed, 339 insertions(+) create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_48.css create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_48.html create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_49.css create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_49.html create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_50.css create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_50.html create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_51.css create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_51.html create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_52.css create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_52.html create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_53.css create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_53.html create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_54.css create mode 100644 TPSI/pugliese_alessandro/css/pugliese_esercizio_css_54.html diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_48.css b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_48.css new file mode 100644 index 00000000..11b0778a --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_48.css @@ -0,0 +1,19 @@ +.grid-container{ + display: grid; + grid-template-columns: repeat(4,1fr); + justify-content: center; + align-content: center; + width: calc(102px *4); +} + +.grid-container > div{ + background-color: orange; + border: 1px solid black; + width: 100px; + height: 100px; + text-align: center; + align-content: center; + font-size: xx-large; + font-weight: bold; +} + diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_48.html b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_48.html new file mode 100644 index 00000000..92fe759d --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_48.html @@ -0,0 +1,29 @@ + + + + + + + Esercizio 48 + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
+
+ + \ No newline at end of file diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_49.css b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_49.css new file mode 100644 index 00000000..da5ad89d --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_49.css @@ -0,0 +1,32 @@ +.cont { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(7, minmax(50px,1fr)); +} + +.cont > div { + border: 1px solid red; + background-color: white; + display: flex; + align-items: center; + justify-content: center; + font-weight: bolder; +} + +.lunga { + grid-column: 2 / 5; +} + +.alta { + grid-row: 2 / 5; +} + +.grossa { + grid-column: 2 / 5; + grid-row: 2 / 5; +} + +.media { + grid-column: 5 / 7; + grid-row: 5 / 8; +} diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_49.html b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_49.html new file mode 100644 index 00000000..eb7e1b19 --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_49.html @@ -0,0 +1,38 @@ + + + + + + + Esercizio 49 + + + +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+ + \ No newline at end of file diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_50.css b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_50.css new file mode 100644 index 00000000..b3042d7e --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_50.css @@ -0,0 +1,15 @@ +.cont{ + display: grid; + grid-template-columns: repeat(3,100px); + grid-template-rows: repeat(2,minmax(50px,1fr)); + gap: 10px; +} + +.cont > div{ + background-color: rgb(71, 71, 71); + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + color: white; +} diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_50.html b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_50.html new file mode 100644 index 00000000..20abcc36 --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_50.html @@ -0,0 +1,20 @@ + + + + + + + Esercizio 50 + + + +
+
A
+
B
+
C
+
D
+
E
+
F
+
+ + \ No newline at end of file diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_51.css b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_51.css new file mode 100644 index 00000000..ea468b6c --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_51.css @@ -0,0 +1,23 @@ +.cont{ + display: grid; + grid-template-columns: repeat(3,100px); + grid-template-rows: repeat(2,minmax(50px,1fr)); + gap: 10px; +} + +.cont > div{ + background-color: rgb(71, 71, 71); + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + color: white; +} +.a{ + grid-column: 1 / 3; + +} +.b{ + grid-row: 1 / 3; + grid-column: 3; +} \ No newline at end of file diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_51.html b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_51.html new file mode 100644 index 00000000..f58f3492 --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_51.html @@ -0,0 +1,18 @@ + + + + + + + Esercizio 51 + + + +
+
A
+
B
+
C
+
D
+
+ + \ No newline at end of file diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_52.css b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_52.css new file mode 100644 index 00000000..81e417fa --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_52.css @@ -0,0 +1,27 @@ +.cont{ + display: grid; + grid-template-columns: repeat(4,100px); + grid-template-rows: repeat(3,minmax(50px,1fr)); + gap: 10px; +} + +.cont > div{ + background-color: rgb(71, 71, 71); + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + color: white; +} +.a{ + grid-column: 1 / 3; +} +.b{ + grid-column: 3 / 5; +} +.d{ + grid-column: 2 / 5; +} +.e{ + grid-column: 1 / 5; +} \ No newline at end of file diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_52.html b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_52.html new file mode 100644 index 00000000..21d2c40a --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_52.html @@ -0,0 +1,19 @@ + + + + + + + Esercizio 52 + + + +
+
A
+
B
+
C
+
D
+
E
+
+ + \ No newline at end of file diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_53.css b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_53.css new file mode 100644 index 00000000..00dd8739 --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_53.css @@ -0,0 +1,32 @@ +.cont{ + display: grid; + grid-template-columns: repeat(3,10%); + grid-template-rows: repeat(3,auto); + gap: 10px; + grid-template-areas: "header header header""sidebar content sidebar2""footer footer footer"; +} + +.cont > div{ + background-color: rgb(71, 71, 71); + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + color: white; + padding: 10px; +} +.h{ + grid-area: header; +} +.s1{ + grid-area: sidebar; +} +.s2{ + grid-area: sidebar2; +} +.c{ + grid-area: content; +} +.f{ + grid-area: footer; +} \ No newline at end of file diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_53.html b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_53.html new file mode 100644 index 00000000..5b1bce2d --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_53.html @@ -0,0 +1,19 @@ + + + + + + + Esercizio 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/pugliese_alessandro/css/pugliese_esercizio_css_54.css b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_54.css new file mode 100644 index 00000000..cee8b5a4 --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_54.css @@ -0,0 +1,30 @@ +.cont{ + display: grid; + grid-template-columns: repeat(2,auto); + grid-template-rows: repeat(3,auto); + gap: 10px; + width: 250px; + grid-template-areas: ". header""sidebar content""footer footer"; +} + +.cont > div{ + background-color: rgb(71, 71, 71); + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + color: white; + padding: 10px; +} +.h{ + grid-area: header; +} +.s{ + grid-area: sidebar; +} +.c{ + grid-area: content; +} +.f{ + grid-area: footer; +} \ No newline at end of file diff --git a/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_54.html b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_54.html new file mode 100644 index 00000000..2c1150c1 --- /dev/null +++ b/TPSI/pugliese_alessandro/css/pugliese_esercizio_css_54.html @@ -0,0 +1,18 @@ + + + + + + + Esercizio 54 + + + +
+
Header
+
Sidebar
+
Content
More content than we had before so this column is now quite tall.
+
Footer
+
+ + \ No newline at end of file