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