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 100755 index 0000000..9952de0 Binary files /dev/null and b/images/drone1.png differ diff --git a/images/drone2.png b/images/drone2.png new file mode 100755 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 100755 index 0000000..6e4c2c3 Binary files /dev/null and b/images/drone3.png differ diff --git a/images/drone4.png b/images/drone4.png new file mode 100755 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 100755 index 0000000..79f15f3 Binary files /dev/null and b/images/drone5.png differ diff --git a/images/drone6.png b/images/drone6.png new file mode 100755 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 100755 index 0000000..ada2f97 Binary files /dev/null and b/images/drone7.png differ diff --git a/images/i1.jpg b/images/i1.jpg new file mode 100755 index 0000000..c93e177 Binary files /dev/null and b/images/i1.jpg differ diff --git a/images/i2.jpg b/images/i2.jpg new file mode 100755 index 0000000..d66ee12 Binary files /dev/null and b/images/i2.jpg differ diff --git a/images/i3.jpg b/images/i3.jpg new file mode 100755 index 0000000..6a2fd21 Binary files /dev/null and b/images/i3.jpg differ diff --git a/images/i4.jpg b/images/i4.jpg new file mode 100755 index 0000000..e1f267a Binary files /dev/null and b/images/i4.jpg differ diff --git a/images/i5.jpg b/images/i5.jpg new file mode 100755 index 0000000..3375ad0 --- /dev/null +++ b/images/i5.jpg @@ -0,0 +1 @@ +TrueThis work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.plain green solid color one colour single light green 1920x1080 #c2dec8xmple.complain green solid color one colour single light green 1920x1080 #c2dec8plain green solid color one colour single light green 1920x1080 #c2dec8© xmple.comxmple.com \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..3900baa --- /dev/null +++ b/index.html @@ -0,0 +1,169 @@ + + + + + + Grids + + + + + +
+

Grids

+
+
+
+

Grid with floats

+ + +
+
+

Grid with flexbox

+ +
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..8f9a7ec --- /dev/null +++ b/style.css @@ -0,0 +1,106 @@ +body{ + margin:auto; + padding: auto; + background-color:white; + background-size:cover; + margin-left:5%; + + +} + + + +h3{ + text-align: center; + background-color: rgb(39, 226, 95); + color:white; + padding: 10px; + margin-top: 0; + + +} + + +ul{ + list-style: none; + padding: 0; + color:black; + + +} + + + + +img{ + max-width: 100%; + max-height: 200px; +} + + + +.grid-item{ + + width: calc(43% - 2 * 10px); + min-height: 510px; + float: left; + margin: 10px; + padding: 10px; + box-shadow: 1px 1px 20px 5px rgb(71, 23, 23); + + + + +} + + + +#grid-floats{ + float: left; + +} + + + +.grid-item:nth-child(1) { + + width: calc(89% - 2 * 10px); +} + + + +#grid-flex{ + display: flex; + flex-wrap: wrap; +} + + +@media only screen and (min-width:769px) and ( max-width:1023px) +{ + .grid-item:nth-child(1), + .grid-item:nth-child(2) { + width: calc(38.6% - 2 * 10px); + } + + .grid-item:nth-child(n+3) { + width: calc(25% - 2 * 10px); + } + + + + } + + @media only screen and (min-width:1024px) + { + .grid-item:nth-child(1) + { + width: calc(40.5% - 2 * 5px); + } + + .grid-item:nth-child(n+2){ + width: calc(20% - 2 * 10px); + max-height: 450px; + + } + + } \ No newline at end of file