diff --git a/README.md b/README.md index a47aefc..61f32d7 100644 --- a/README.md +++ b/README.md @@ -14,3 +14,5 @@ - How about some nice colors, fonts? - According to the grid specification, some products are bigger than others. Maybe these are "highlighted" products, so the rest of the styling could also be different. - Read the [style guide](https://www.w3schools.com/html/html5_syntax.asp) and check your files + +![Layout](https://user-images.githubusercontent.com/1719156/62662582-8c0aaa00-b942-11e9-9a59-e76f88466896.png) 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..61542d9 --- /dev/null +++ b/index.html @@ -0,0 +1,167 @@ + + + + + + Grids + + + +
+

Grids

+
+
+
+

Grid with floats

+ + +
+
+

Grid with flexbox

+ +
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f809cb9 --- /dev/null +++ b/style.css @@ -0,0 +1,69 @@ +*{ + border: 1px solid red; + box-sizing: border-box; + margin: 0; + padding: 0; +} + +/* Grid Float*/ +.grid-item{ + width: 50%; + padding: 20px; + min-height: 450px; +} + +img{ + max-width: 100%; + max-height: 300px; +} + +#grid-floats .grid-item{ + float: left; +} + +#grid-floats{ + overflow: hidden; +} + +.grid-item:nth-child(odd){ + background-color: teal; +} +.grid-item:nth-child(even){ + background-color: tomato; +} + +.grid-item:nth-child(1){ + background-color: thistle; + width: 100%; +} + +ul{ + list-style: none; +} + +/* Grid Flex*/ + +#grid-flex{ + display: flex; + flex-wrap: wrap; +} + + + +@media (min-width: 768px){ + .grid-item:nth-child(1), .grid-item:nth-child(2) { + width: 50%; + } + .grid-item:nth-child(n+3) { + width: calc(100% / 3); + } +} + +@media (min-width: 1023px){ + .grid-item:nth-child(1){ + width: 50%; + } + .grid-item:nth-child(n+2){ + width: 25%; + } +} \ No newline at end of file