diff --git a/images/drone1.png b/images/drone1.png new file mode 100644 index 0000000..6c002ee Binary files /dev/null and b/images/drone1.png differ diff --git a/images/drone2.png b/images/drone2.png new file mode 100644 index 0000000..a863c19 Binary files /dev/null and b/images/drone2.png differ diff --git a/images/drone3.png b/images/drone3.png new file mode 100644 index 0000000..84974d4 Binary files /dev/null and b/images/drone3.png differ diff --git a/images/drone4.png b/images/drone4.png new file mode 100644 index 0000000..77e469e Binary files /dev/null and b/images/drone4.png differ diff --git a/images/drone5.png b/images/drone5.png new file mode 100644 index 0000000..58ca438 Binary files /dev/null and b/images/drone5.png differ diff --git a/images/drone6.png b/images/drone6.png new file mode 100644 index 0000000..69b554c Binary files /dev/null and b/images/drone6.png differ diff --git a/images/drone7.png b/images/drone7.png new file mode 100644 index 0000000..51f486f Binary files /dev/null and b/images/drone7.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..de3d2f5 --- /dev/null +++ b/index.html @@ -0,0 +1,290 @@ + + + + + + Grids + + + +
+

Grids

+
+
+
+

Grid with floats

+ +
+
+

Grid with flexbox

+ +
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..8642801 --- /dev/null +++ b/style.css @@ -0,0 +1,127 @@ +* { + list-style: none; +} + +body { + background-color: rgba(255, 255, 233, 0.445); +} +h1, +h2 { + text-align: center; + padding: 10px; +} +img { + max-width: 100%; + max-height: 300px; +} + +/* ------------ GRID -------vv-------- */ + +#grid-floats { + display: grid; + grid-template-columns: auto auto; + grid-gap: 10px; + background-color: #2196f3; + padding: 10px; +} + +.grid-item { + background-color: rgba(255, 255, 255, 0.8); + text-align: center; + padding: 10px; + border-radius: 5px; +} + +.grid-item:nth-child(1) { + grid-column-start: 1; + grid-column-end: 3; + flex: 100%; + max-width: 100%; +} + +/* ------------ FLEX --------------- */ + +#grid-flex { + display: flex; + flex-wrap: wrap; + background-color: #2196f3; + justify-content: flex-start; +} + +#grid-flex .grid-item { + flex: 1 100%; + margin: 10px; + max-width: 42%; +} + +#grid-flex .grid-item:nth-child(1) { + flex: 1 100%; + min-width: 90%; +} + +@media only screen and (min-width: 769px) { + #grid-floats { + grid-template-columns: auto auto auto; + } + + .grid-item { + background-color: rgba(255, 255, 255, 0.8); + text-align: center; + padding: 10px; + border-radius: 5px; + } + + .grid-item:nth-child(1) { + grid-column-start: 1; + grid-column-end: 3; + } + + .grid-item:nth-child(2) { + grid-column-start: 3; + grid-column-end: 4; + } + + #grid-flex .grid-item { + margin: 10px; + min-width: 25%; + } + + #grid-flex .grid-item:nth-child(1) { + flex: 1 45%; + } + + #grid-flex .grid-item:nth-child(2) { + flex: 1 45%; + } +} + +@media only screen and (min-width: 1023px) { + #grid-floats { + grid-template-columns: auto auto auto auto; + } + + .grid-item:nth-child(1) { + grid-column-start: 1; + grid-column-end: 3; + } + .grid-item:nth-child(2) { + grid-column-start: 3; + grid-column-end: 4; + } + + #grid-flex .grid-item { + margin: 10px; + min-width: 21%; + max-width: 25%; + } + + #grid-flex .grid-item:nth-child(1) { + flex: 0.5 45%; + max-width: 25%; + } + + #grid-flex .grid-item:nth-child(2) { + flex: 1 20%; + max-width: 25%; + } +}