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..ee2247a --- /dev/null +++ b/index.html @@ -0,0 +1,167 @@ + + + + + + Grids + + + +
+

Grids

+
+
+
+

Grid with floats

+ + +
+
+

Grid with flexbox

+ +
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..d079021 --- /dev/null +++ b/style.css @@ -0,0 +1,65 @@ +* { + + box-sizing: border-box; +} + +body { + margin: 0; +} + +ul { + padding:0px; + list-style: none; +} + +img { + max-width: 100%; + max-height: 250px; +} +.grid-item { + width:calc(50% - 2 * 10px); + border: 1px solid grey; + margin:10px; + padding:10px; + min-height:500px; +} + +#grid-floats .grid-item { + float: left; +} + +#grid-floats { + overflow: hidden; +} + +.grid-item:nth-child(1) { + width: calc(100% - 2 * 10px); +} + +#grid-flex { + display:flex; + flex-wrap:wrap; +} + +@media (min-width:769px) { + .grid-item:nth-child(1), + .grid-item:nth-child(2) { + width:calc(50% - 2 * 10); + } + + .grid-item:nth-child(n + 3 ){ + width: calc(100% / 3 - 2 * 10px) + } + + +@media (min-width:1024px) { + .grid-item:nth-child(1) { + width: calc(50% - 2 * 10px); + } + + .grid-item:nth-child(n + 2 ){ + width: calc(25% - 2 * 10px); + } + +} +} \ No newline at end of file