diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_44.css b/TPSI/dalipi_andi/dalipi_esercitazione_css_44.css new file mode 100644 index 00000000..ab255bb0 --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_css_44.css @@ -0,0 +1,28 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + margin-top: 100px; + background-color: #f9f9f9; +} + +.navbar { + display: flex; + gap: 80px; +} + +.navbar button { + background-color: #2d6ca2; + color: white; + border: none; + padding: 15px 25px; + border-radius: 10px; + font-size: 16px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + cursor: pointer; + transition: background-color 0.3s ease; +} + +.navbar button:hover { + background-color: #1e4e79; +} diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_44.html b/TPSI/dalipi_andi/dalipi_esercitazione_css_44.html new file mode 100644 index 00000000..99c9f2d2 --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_css_44.html @@ -0,0 +1,16 @@ + + + + + Esercizio CSS 44 + + + +
+ + + + +
+ + diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_45.css b/TPSI/dalipi_andi/dalipi_esercitazione_css_45.css new file mode 100644 index 00000000..c74883cd --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_css_45.css @@ -0,0 +1,33 @@ +body { + font-family: Arial, sans-serif; + } + + .container { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: flex; + width: 70%; + padding: 8px; + border: #5e5e5e solid 1px; + border-radius: 2px; + flex-direction: row; + align-items: stretch; + gap: 10px; + } + + .box { + flex: 1; + background-color: #476b98; + border: 1px #6dabba solid; + border-radius: 10px; + padding: 10px; + color: #fff; + font-size: 1.4em; + line-height: 1.8; + box-sizing: border-box; + word-wrap: break-word; + } + + \ No newline at end of file diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_45.html b/TPSI/dalipi_andi/dalipi_esercitazione_css_45.html new file mode 100644 index 00000000..7cb22f32 --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_css_45.html @@ -0,0 +1,20 @@ + + + + + + + ESERCIZIO CSS 44 + + +
+
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! +
+
+ + diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_46.css b/TPSI/dalipi_andi/dalipi_esercitazione_css_46.css new file mode 100644 index 00000000..078af1d8 --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_css_46.css @@ -0,0 +1,27 @@ +body, html { + height: 100%; + margin: 0; + padding: 0; + } + + .container { + display: flex; + justify-content: center; + align-items: center; + height: 300px; + width: 400px; + margin: 50px auto; + border: 1.5px solid #67a8c7; + border-radius: 6px; + box-sizing: border-box; + } + + button { + padding: 10px 20px; + background-color: #4b77b9; + color: white; + border: none; + font-family: sans-serif; + font-size: 14px; + cursor: pointer; + } diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_46.html b/TPSI/dalipi_andi/dalipi_esercitazione_css_46.html new file mode 100644 index 00000000..a268b4d6 --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_css_46.html @@ -0,0 +1,14 @@ + + + + + + Esercizio CSS 46 + + + +
+ +
+ + diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_47.css b/TPSI/dalipi_andi/dalipi_esercitazione_css_47.css new file mode 100644 index 00000000..960c0b75 --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_css_47.css @@ -0,0 +1,31 @@ +body { + margin: 0; + font-family: sans-serif; + background-color: #fff; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + } + + .container { + display: flex; + flex-wrap: wrap; + width: 400px; + justify-content: center; + border: 1px solid #ccc; + padding: 20px; + border-radius: 6px; + background-color: white; + } + + .item { + background-color: #4b77b9; + color: white; + padding: 10px 20px; + margin: 5px; + border-radius: 10px; + text-align: center; + font-size: 14px; + } + \ No newline at end of file diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_47.html b/TPSI/dalipi_andi/dalipi_esercitazione_css_47.html new file mode 100644 index 00000000..775da7ee --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_css_47.html @@ -0,0 +1,25 @@ + + + + + + Esercizio CSS 47 + + + +
+
Turnip
+
greens
+
yarrow
+
ricebean
+ +
rutabaga
+
endive
+
cauliflower
+ +
sea lettuce
+
kohlrabi
+
amaranth
+
+ + diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_49.css b/TPSI/dalipi_andi/dalipi_esercitazione_css_49.css new file mode 100644 index 00000000..73eaf850 --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_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; + } \ No newline at end of file diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_49.html b/TPSI/dalipi_andi/dalipi_esercitazione_css_49.html new file mode 100644 index 00000000..e7ca7050 --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_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
+
+ + diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_50.css b/TPSI/dalipi_andi/dalipi_esercitazione_css_50.css new file mode 100644 index 00000000..d9f8b9ae --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_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; +} \ No newline at end of file diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_50.html b/TPSI/dalipi_andi/dalipi_esercitazione_css_50.html new file mode 100644 index 00000000..f0eba0af --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_css_50.html @@ -0,0 +1,20 @@ + + + + + + + Esercizio 50 + + + +
+
A
+
B
+
C
+
D
+
E
+
F
+
+ + diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_51.css b/TPSI/dalipi_andi/dalipi_esercitazione_css_51.css new file mode 100644 index 00000000..ea468b6c --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_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/dalipi_andi/dalipi_esercitazione_css_51.html b/TPSI/dalipi_andi/dalipi_esercitazione_css_51.html new file mode 100644 index 00000000..b58f69da --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_css_51.html @@ -0,0 +1,18 @@ + + + + + + + Esercizio 51 + + + +
+
A
+
B
+
C
+
D
+
+ + \ No newline at end of file diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_52.css b/TPSI/dalipi_andi/dalipi_esercitazione_css_52.css new file mode 100644 index 00000000..8cd417bd --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_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; +} diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_52.html b/TPSI/dalipi_andi/dalipi_esercitazione_css_52.html new file mode 100644 index 00000000..8e5d18ca --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_css_52.html @@ -0,0 +1,19 @@ + + + + + + + Esercizio 52 + + + +
+
A
+
B
+
C
+
D
+
E
+
+ + \ No newline at end of file diff --git a/TPSI/dalipi_andi/dalipi_esercitazione_css_53.css b/TPSI/dalipi_andi/dalipi_esercitazione_css_53.css new file mode 100644 index 00000000..00dd8739 --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_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/dalipi_andi/dalipi_esercitazione_css_53.html b/TPSI/dalipi_andi/dalipi_esercitazione_css_53.html new file mode 100644 index 00000000..c7e3adf0 --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_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/dalipi_andi/dalipi_esercitazione_css_54.css b/TPSI/dalipi_andi/dalipi_esercitazione_css_54.css new file mode 100644 index 00000000..cee8b5a4 --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_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/dalipi_andi/dalipi_esercitazione_css_54.html b/TPSI/dalipi_andi/dalipi_esercitazione_css_54.html new file mode 100644 index 00000000..b2fefa19 --- /dev/null +++ b/TPSI/dalipi_andi/dalipi_esercitazione_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
+
+ + diff --git a/dalipi_esercitazione_css_49.css b/dalipi_esercitazione_css_49.css new file mode 100644 index 00000000..73eaf850 --- /dev/null +++ b/dalipi_esercitazione_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; + } \ No newline at end of file diff --git a/dalipi_esercitazione_css_49.html b/dalipi_esercitazione_css_49.html new file mode 100644 index 00000000..e7ca7050 --- /dev/null +++ b/dalipi_esercitazione_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
+
+ + diff --git a/dalipi_esercitazione_css_50.css b/dalipi_esercitazione_css_50.css new file mode 100644 index 00000000..d9f8b9ae --- /dev/null +++ b/dalipi_esercitazione_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; +} \ No newline at end of file diff --git a/dalipi_esercitazione_css_50.html b/dalipi_esercitazione_css_50.html new file mode 100644 index 00000000..f0eba0af --- /dev/null +++ b/dalipi_esercitazione_css_50.html @@ -0,0 +1,20 @@ + + + + + + + Esercizio 50 + + + +
+
A
+
B
+
C
+
D
+
E
+
F
+
+ + diff --git a/dalipi_esercitazione_css_51.css b/dalipi_esercitazione_css_51.css new file mode 100644 index 00000000..ea468b6c --- /dev/null +++ b/dalipi_esercitazione_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/dalipi_esercitazione_css_51.html b/dalipi_esercitazione_css_51.html new file mode 100644 index 00000000..b58f69da --- /dev/null +++ b/dalipi_esercitazione_css_51.html @@ -0,0 +1,18 @@ + + + + + + + Esercizio 51 + + + +
+
A
+
B
+
C
+
D
+
+ + \ No newline at end of file diff --git a/dalipi_esercitazione_css_52.css b/dalipi_esercitazione_css_52.css new file mode 100644 index 00000000..8cd417bd --- /dev/null +++ b/dalipi_esercitazione_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; +} diff --git a/dalipi_esercitazione_css_52.html b/dalipi_esercitazione_css_52.html new file mode 100644 index 00000000..8e5d18ca --- /dev/null +++ b/dalipi_esercitazione_css_52.html @@ -0,0 +1,19 @@ + + + + + + + Esercizio 52 + + + +
+
A
+
B
+
C
+
D
+
E
+
+ + \ No newline at end of file diff --git a/dalipi_esercitazione_css_53.css b/dalipi_esercitazione_css_53.css new file mode 100644 index 00000000..00dd8739 --- /dev/null +++ b/dalipi_esercitazione_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/dalipi_esercitazione_css_53.html b/dalipi_esercitazione_css_53.html new file mode 100644 index 00000000..c7e3adf0 --- /dev/null +++ b/dalipi_esercitazione_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/dalipi_esercitazione_css_54.css b/dalipi_esercitazione_css_54.css new file mode 100644 index 00000000..cee8b5a4 --- /dev/null +++ b/dalipi_esercitazione_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/dalipi_esercitazione_css_54.html b/dalipi_esercitazione_css_54.html new file mode 100644 index 00000000..b2fefa19 --- /dev/null +++ b/dalipi_esercitazione_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
+
+ +