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..6c002ee 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..84974d4 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..58ca438 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..51f486f Binary files /dev/null and b/images/drone7.png differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..c265d58 --- /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..92e84e6 --- /dev/null +++ b/style.css @@ -0,0 +1,143 @@ +body{ + background-size: cover; + padding: 0; + margin: 0; + +} +p{ + font-size: 15px; +} + +img{ + width: 180px; +} +h1{ + font-size: : 150; + font-weight: bold; + text-decoration: underline; + margin:20px; + padding: 5px; +} + h2{ + font-size: 30px; + font-weight: bold; + text-decoration: underline; + margin: 30px; + padding: 20px; + height: 20px; + width: 400px; +} +h3{ + font-size: 15px; +} + +li{ + list-style: none; + } + +#grid-floats .grid-item{ + text-align: center; + float: left; + width: 22%; + margin: 0px; + padding: 0px 58px 0px 2px; + text-align: justify; +} + +#grid-floats .grid-item:nth-child(1), #grid-flex .grid-item:nth-child(1){ + width: 50%; +} + +#grid-flex{ + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + width: fit-content; + height: 400px; +} + +header{ + text-align: center; + padding: 20px 10px; + background-color: rgba(140, 110, 119, 0.5); +} + +@media(max-width: 1023px)and (min-width: 769px){ + #grid-floats .grid-item:nth-child(1), #grid-flex .grid-item:nth-child(1){ + width: 40%; + } + #grid-floats .grid-item{ + width: 30%; + padding: 10px; + height: 300px; + } + p{ + padding: 5px; + } + #grid-flex .grid-item{ + width: 32%; + padding: 33px 0px 0px 0px; + text-align: justify; + } + section{ + padding: 0px 78px 0px 0px; + } +} + +@media(max-width: 768px) { + #grid-floats .grid-item:nth-child(1), #grid-flex .grid-item:nth-child(1){ + width: 85%; + padding: 30px; + text-align: center; + } + p{ + padding: 10px; + } +#grid-floats .grid-item{ + width: 35%; + padding: 20px; + + } + +#grid-flex .grid-item { + width: 40%; + padding: 20px; +} +} +@media(min-width: 1024px) { + #grid-floats .grid-item:nth-child(1), #grid-flex .grid-item:nth-child(1){ + width: 40%; + padding: -2px; + margin: 0px; + text-align: left; + height: 400px; + } + #grid-floats .grid-item{ + text-align: center; + float: left; + width: 22%; + margin: 0px; + padding: 0px 10px 0px 2px; + text-align: justify; + height: 400px; + } + #grid-flex{ + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + width: fit-content; + height: 400px; + margin: 20px; + + } + + #grid-flex .grid-item{ + width: 20%; + padding: 0px 20px 0px 2px; + } + section{ + padding: 50px; + } +}