diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_44.css b/TPSI/busca_matteo/CSS/busca_esercizio_css_44.css new file mode 100644 index 00000000..ac7c8201 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_44.css @@ -0,0 +1,23 @@ +body{ + margin-left: 450px; + text-align: center; +} + +#container { + border: 1px lightgray solid; + display: flex; + flex-direction: row; + justify-content: space-between; + width: 600px; + padding: 10px; +} + +.item { + border-radius: 10px; + color: white; + background-color: #424c99; + border: 3px solid #636fcb; + width: 80px; + padding: 10px; + text-align:center; +} \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_44.html b/TPSI/busca_matteo/CSS/busca_esercizio_css_44.html new file mode 100644 index 00000000..7af67d3a --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_44.html @@ -0,0 +1,19 @@ + + + + + + + + + + busca_esercizio_css_44 + + +
+
Home
+
About Us
+
Our Product
+
Contact Us
+
+ diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_45.css b/TPSI/busca_matteo/CSS/busca_esercizio_css_45.css new file mode 100644 index 00000000..5031bc91 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_45.css @@ -0,0 +1,24 @@ +body{ + margin-left: 450px; + text-align: center; +} + +#container { + border: 1px lightgray solid; + display: flex; + flex-direction: row; + align-items: stretch; + width: 533px; + height: 187px; + padding: 8px; +} + +.item { + border-radius: 10px; + color: white; + background-color: #424c99; + border: 3px solid #636fcb; + width: 155px; + padding: 10px; + text-align: left; +} \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_45.html b/TPSI/busca_matteo/CSS/busca_esercizio_css_45.html new file mode 100644 index 00000000..678c8155 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_45.html @@ -0,0 +1,20 @@ + + + + + + + + + + busca_esercizio_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/busca_matteo/CSS/busca_esercizio_css_46.css b/TPSI/busca_matteo/CSS/busca_esercizio_css_46.css new file mode 100644 index 00000000..1d4b1ba1 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_46.css @@ -0,0 +1,25 @@ +body{ + margin-left: 600px; + text-align: center; +} + +#container { + border: 1px rgb(54, 55, 125) solid; + display: flex; + justify-content: space-evenly; + flex-direction: row; + align-items: center; + width: 320px; + height: 230px; + padding: 10px; + border-radius: 10px; +} + +#item { + font-size: larger; + color: white; + background-color: #424c99; + width: 155px; + padding: 10px; + text-align: left; +} \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_46.html b/TPSI/busca_matteo/CSS/busca_esercizio_css_46.html new file mode 100644 index 00000000..0c3db0e2 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_46.html @@ -0,0 +1,17 @@ + + + + + + + + + + busca_esercizio_css_46 + + +
+
Center me.
+
+ + \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_47.css b/TPSI/busca_matteo/CSS/busca_esercizio_css_47.css new file mode 100644 index 00000000..494d44b0 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_47.css @@ -0,0 +1,27 @@ +body{ + margin-left: 500px; + text-align: center; +} + +#container { + text-align: justify; + border: 1px lightgray solid; + display: flex; + justify-items: stretch; + flex-wrap: wrap; + align-content: stretch; + width: 450px; + height: 180px; + padding: 20px; + border-radius: 10px; +} + +.item { + color: white; + background-color: #424c99; + border: 3px solid #636fcb; + border-radius: 10px; + margin: 10px; + padding: 10px 20px; + text-align: left; +} \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_47.html b/TPSI/busca_matteo/CSS/busca_esercizio_css_47.html new file mode 100644 index 00000000..121cb5c6 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_47.html @@ -0,0 +1,26 @@ + + + + + + + + + + busca_esercizio_css_47 + + +
+
Turnip
+
greens
+
yarrow
+
ricebean
+
rutabaga
+
endive
+
cauliflower
+
sea lettuce
+
kohlrabi
+
amaranth
+
+ + \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_48.css b/TPSI/busca_matteo/CSS/busca_esercizio_css_48.css new file mode 100644 index 00000000..de3aae65 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_48.css @@ -0,0 +1,29 @@ +body{ + display:flex; + justify-content: center; +} + +.grid-container { + display: grid; + grid-template-columns: 84px 84px 84px 84px; + padding: 20px; + margin-top: 100px; + } + + .grid-item { + display: flex; + background-color: orange; + border: 1px solid black; + width: 80px; + height: 80px; + padding: 3px; + justify-content: center; + align-items: center; + } + + + #box{ + text-align: center; + width: 376px; + height: 528px; + } \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_48.html b/TPSI/busca_matteo/CSS/busca_esercizio_css_48.html new file mode 100644 index 00000000..5414025f --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_48.html @@ -0,0 +1,35 @@ + + + + + + + + + + busca_esercizio_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/busca_matteo/CSS/busca_esercizio_css_49.css b/TPSI/busca_matteo/CSS/busca_esercizio_css_49.css new file mode 100644 index 00000000..0beab64a --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_49.css @@ -0,0 +1,27 @@ +.grid-container { + display: grid; + grid-template-columns: + repeat(6, 1fr); +} +.grid-item { + border: 1px solid red; + padding: 10px; + text-align: center; +} +#a { + grid-column: 2 / 5; +} + +#b { + grid-row: 2 / 5; +} + +#c { + grid-column: 2 / 5; + grid-row: 2 / 5; +} + +#d { + grid-column: 5 / 7; + grid-row: 5 / 8; +} \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_49.html b/TPSI/busca_matteo/CSS/busca_esercizio_css_49.html new file mode 100644 index 00000000..d26a92fa --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_49.html @@ -0,0 +1,40 @@ + + + + + + + + + + busca_esercizio_css_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/busca_matteo/CSS/busca_esercizio_css_50.css b/TPSI/busca_matteo/CSS/busca_esercizio_css_50.css new file mode 100644 index 00000000..d0b5f059 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_50.css @@ -0,0 +1,20 @@ +body{ + display:flex; + justify-content: center; + } + +.grid-container { + display: grid; + grid-template-columns: 100px 100px 100px; + grid-template-rows: 60px 60px; + grid-column-gap: 10px; + grid-row-gap: 10px; +} + +.item { + background-color: #3c3b3a; + color: white; + padding: 10px; + border-radius: 6px; + align-content: center; +} \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_50.html b/TPSI/busca_matteo/CSS/busca_esercizio_css_50.html new file mode 100644 index 00000000..000ef344 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_50.html @@ -0,0 +1,22 @@ + + + + + + + + + + busca_esercizio_css_50 + + +
+
A
+
B
+
C
+
D
+
E
+
F
+
+ + \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_51.css b/TPSI/busca_matteo/CSS/busca_esercizio_css_51.css new file mode 100644 index 00000000..08b65807 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_51.css @@ -0,0 +1,28 @@ +body{ + display:flex; + justify-content: center; + } + +.grid-container { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-column-gap: 10px; + grid-row-gap: 10px; +} + +.item { + background-color: #3c3b3a; + color: white; + padding: 10px; + border-radius: 6px; + align-content: center; +} + +.a { + grid-column: 1 / 3; +} + +.b { + grid-column-start: 3; + grid-row: 1 / 3; +} \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_51.html b/TPSI/busca_matteo/CSS/busca_esercizio_css_51.html new file mode 100644 index 00000000..67b2b9f8 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_51.html @@ -0,0 +1,20 @@ + + + + + + + + + + busca_esercizio_css_51 + + +
+
A
+
B
+
C
+
D
+
+ + \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_52.css b/TPSI/busca_matteo/CSS/busca_esercizio_css_52.css new file mode 100644 index 00000000..59e3d234 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_52.css @@ -0,0 +1,37 @@ +body{ + display:flex; + justify-content: center; + } + +.grid-container { + display: grid; + grid-template-columns: repeat(4, 100px); + grid-column-gap: 10px; + grid-row-gap: 10px; +} + +.item { + background-color: #3c3b3a; + color: white; + padding: 10px; + border-radius: 6px; + align-content: center; +} + +#a { + grid-column: 1 / 3; +} + +#b { + grid-column: 3 / 5; +} + +#d { + grid-row-start: 2; + grid-column: 2 / 5; +} + +#e { + grid-row-start: 3; + grid-column: 1 / 5; +} \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_52.html b/TPSI/busca_matteo/CSS/busca_esercizio_css_52.html new file mode 100644 index 00000000..a0d8281d --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_52.html @@ -0,0 +1,21 @@ + + + + + + + + + + busca_esercizio_css_52 + + +
+
A
+
B
+
C
+
D
+
E
+
+ + \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_53.css b/TPSI/busca_matteo/CSS/busca_esercizio_css_53.css new file mode 100644 index 00000000..36ceff6c --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_53.css @@ -0,0 +1,42 @@ +body{ + display:flex; + justify-content: center; + } + +.grid-container { + display: grid; + grid-template-columns: 100px 100px 100px 100px; + grid-template-rows: auto; + grid-template-areas: + "header header header header" + "sidebar main main sidebar-2" + "footer footer footer footer"; + gap: 10px; +} + +.item { + color: white; + padding: 10px; + border-radius: 5px; +} + +.area-h { + grid-area: header; + background-color: rgb(123, 124, 124); +} +.area-s { + grid-area: sidebar; + background-color: rgb(68, 70, 70); +} +.area-m { + grid-area: main; + background-color: rgb(68, 70, 70); +} +.area-s2 { + grid-area: sidebar-2; + background-color: rgb(194, 196, 196); +} +.area-f { + grid-area: footer; + background-color: rgb(123, 124, 124); +} \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_53.html b/TPSI/busca_matteo/CSS/busca_esercizio_css_53.html new file mode 100644 index 00000000..89fa3260 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_53.html @@ -0,0 +1,21 @@ + + + + + + + + + + busca_esercizio_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/busca_matteo/CSS/busca_esercizio_css_54.css b/TPSI/busca_matteo/CSS/busca_esercizio_css_54.css new file mode 100644 index 00000000..c4f39186 --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_54.css @@ -0,0 +1,52 @@ +body { + display:flex; + justify-content: center; + margin: 0; + font-family: sans-serif; + + } + + .container { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-rows: auto auto auto; + gap: 10px; + padding: 10px; + width: 280px; + height: 200px; + } + + .header { + grid-column: 1 / 3; + background-color: #999; + padding: 10px; + border-radius: 8px; + color: white; + } + + .sidebar { + grid-column: 1 / 2; + background-color: #333; + padding: 10px; + border-radius: 8px; + color: white; + } + + .content { + grid-column: 2 / 3; + background-color: #444; + padding: 10px; + border-radius: 8px; + color: white; + } + + .footer { + grid-column: 1 / 3; + background-color: #999; + padding: 10px; + border-radius: 8px; + color: white; + } + + + \ No newline at end of file diff --git a/TPSI/busca_matteo/CSS/busca_esercizio_css_54.html b/TPSI/busca_matteo/CSS/busca_esercizio_css_54.html new file mode 100644 index 00000000..109882bb --- /dev/null +++ b/TPSI/busca_matteo/CSS/busca_esercizio_css_54.html @@ -0,0 +1,23 @@ + + + + + + + + + + busca_esercizio_css_54 + + +
+
Header
+
Sidebar
+
+ Content
+ More content than we had before so this column is now quite tall. +
+
Footer
+
+ +