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 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