diff --git a/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_44.css b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_44.css new file mode 100644 index 00000000..7d17708f --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_44.css @@ -0,0 +1,18 @@ +.container { + border: 1px gray solid; + display: flex; + flex-direction: row; + justify-content: space-between; + width: 600px; + padding: 10px; +} + +.item { + border-radius: 10px; + color: white; + background-color: #4a57b7; + border: 1px solid #191e4577; + width: 80px; + padding: 10px; + text-align:center; +} \ No newline at end of file diff --git a/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_44.html b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_44.html new file mode 100644 index 00000000..2400dbe4 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_44.html @@ -0,0 +1,18 @@ + + + + Flexbox + + + + + + + +
+
Home
+
About Us
+
Our Product
+
Contact Us
+
+ diff --git a/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_45.css b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_45.css new file mode 100644 index 00000000..d45890c4 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_45.css @@ -0,0 +1,19 @@ +.container { + border: 1px rgb(54, 55, 125) solid; + display: flex; + flex-direction: row; + align-items: stretch; + width: 533px; + height: 187px; + padding: 10px; +} + +.item { + border-radius: 10px; + color: white; + background-color: #4a57b7; + border: 1px solid #191e4577; + width: 155px; + padding: 10px; + text-align: left; +} \ No newline at end of file diff --git a/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_45.html b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_45.html new file mode 100644 index 00000000..1c94e805 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_45.html @@ -0,0 +1,19 @@ + + + + Flexbox + + + + + + + +
+
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/ramirez_giorgio/css/ramirez_esercizio_css_46.css b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_46.css new file mode 100644 index 00000000..dca162a9 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_46.css @@ -0,0 +1,20 @@ +.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 { + color: white; + background-color: #4a57b7; + border: 1px solid #191e4577; + width: 155px; + padding: 10px; + text-align: left; +} \ No newline at end of file diff --git a/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_46.html b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_46.html new file mode 100644 index 00000000..2d1d7cdf --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_46.html @@ -0,0 +1,16 @@ + + + + Flexbox + + + + + + + +
+
center me.
+
+ + \ No newline at end of file diff --git a/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_47.css b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_47.css new file mode 100644 index 00000000..815c19e2 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_47.css @@ -0,0 +1,21 @@ +.container { + border: 1px rgb(54, 55, 125) 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: #4a57b7; + border: 1px solid #191e4577; + border-radius: 10px; + margin: 10px; + padding: 10px 20px; + text-align: left; +} \ No newline at end of file diff --git a/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_47.html b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_47.html new file mode 100644 index 00000000..f92a9107 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_47.html @@ -0,0 +1,25 @@ + + + + Flexbox + + + + + + + +
+
Turnip
+
greens
+
yarrow
+
ricebean
+
rutabaga
+
endive
+
cauliflower
+
sea lettuce
+
kohlrabi
+
amaranth
+
+ + \ No newline at end of file diff --git a/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_48.css b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_48.css new file mode 100644 index 00000000..6508e0c8 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_48.css @@ -0,0 +1,31 @@ +body{ + text-align: center; + display: flex; + justify-content: center; + font-size: 20px; +} + +.grid-container { + display: grid; + width: 200px; + grid-template-columns: 25% 25% 25% 25%; + border: 1px solid black; + +} + +.box{ + width: 200px; + height: 300px; +} + +.item { + background-color: orange; + border: 1px solid; + height: 50px; + width: 50px; + margin-top: auto; + margin-left: auto; + text-align: center; +} + + diff --git a/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_48.html b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_48.html new file mode 100644 index 00000000..7b97612d --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_48.html @@ -0,0 +1,34 @@ + + + + Grid layout + + + + + + + +
+

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/ramirez_giorgio/css/ramirez_esercizio_css_49.css b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_49.css new file mode 100644 index 00000000..6882e1ed --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_49.css @@ -0,0 +1,28 @@ +.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/ramirez_giorgio/css/ramirez_esercizio_css_49.html b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_49.html new file mode 100644 index 00000000..ac2d19f3 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_49.html @@ -0,0 +1,39 @@ + + + + Grid Layout + + + + + + + +
+
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/ramirez_giorgio/css/ramirez_esercizio_css_50.css b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_50.css new file mode 100644 index 00000000..4f584db2 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_50.css @@ -0,0 +1,15 @@ +.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: #646361; + color: white; + padding: 10px; + border-radius: 6px; + align-content: center; + } diff --git a/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_50.html b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_50.html new file mode 100644 index 00000000..ccdadac9 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_50.html @@ -0,0 +1,21 @@ + + + + Grid Layout + + + + + + + +
+
A
+
B
+
C
+
D
+
E
+
F
+
+ + \ No newline at end of file diff --git a/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_51.css b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_51.css new file mode 100644 index 00000000..0c095efd --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_51.css @@ -0,0 +1,23 @@ +.grid-container { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-column-gap: 10px; + grid-row-gap: 10px; +} + +.item { + background-color: #646361; + 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/ramirez_giorgio/css/ramirez_esercizio_css_51.html b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_51.html new file mode 100644 index 00000000..107ea034 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_51.html @@ -0,0 +1,19 @@ + + + + Grid Layout + + + + + + + +
+
A
+
B
+
C
+
D
+
+ + \ No newline at end of file diff --git a/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_52.css b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_52.css new file mode 100644 index 00000000..38ba35d1 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_52.css @@ -0,0 +1,32 @@ +.grid-container { + display: grid; + grid-template-columns: repeat(4, 100px); + grid-column-gap: 10px; + grid-row-gap: 10px; +} + +.item { + background-color: #646361; + 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/ramirez_giorgio/css/ramirez_esercizio_css_52.html b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_52.html new file mode 100644 index 00000000..85fd3633 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_52.html @@ -0,0 +1,20 @@ + + + + Grid Layout + + + + + + + +
+
A
+
B
+
C
+
D
+
E
+
+ + \ No newline at end of file diff --git a/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_53.css b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_53.css new file mode 100644 index 00000000..f8ac26d0 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_53.css @@ -0,0 +1,37 @@ +.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/ramirez_giorgio/css/ramirez_esercizio_css_53.html b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_53.html new file mode 100644 index 00000000..672c11b5 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_53.html @@ -0,0 +1,20 @@ + + + + Grid Layout + + + + + + + +
+
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/ramirez_giorgio/css/ramirez_esercizio_css_54.css b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_54.css new file mode 100644 index 00000000..1b817447 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_54.css @@ -0,0 +1,47 @@ +body { + 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/ramirez_giorgio/css/ramirez_esercizio_css_54.html b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_54.html new file mode 100644 index 00000000..ba0843a9 --- /dev/null +++ b/TPSI/ramirez_giorgio/css/ramirez_esercizio_css_54.html @@ -0,0 +1,22 @@ + + + + Grid Layout + + + + + + + +
+
Header
+
Sidebar
+
+ Content
+ More content than we had before so this column is now quite tall. +
+
Footer
+
+ +