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..2d15145 --- /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..d206686 --- /dev/null +++ b/style.css @@ -0,0 +1,142 @@ +*{ + margin: 0; + padding: 0; +} + +body{ + font-family: 'Raleway', sans-serif; + text-align: center; +} + + +h1, h2, h3{ + font-family: 'Lexend Deca', sans-serif; + margin-bottom: 10px; + margin: 15px; +} + +h2{ + padding: 20px 0; + border-bottom: 1px dotted #e3e3e3; + border-top: 1px dotted #e3e3e3; + background-color: #eeeeee; +} + +p{ + text-align: justify; + padding: 10px; +} + +li.grid-item{ + list-style: none; +} + + + +/* Grid with floats */ +ul#grid-floats li.grid-item{ + width: 24%; + float: left; + margin: 4px; + height: 455px; + border: 1px dotted #ffffff; + border-radius: 5px; + +} + + + +/* Grid with flex */ +#grid-flex{ + display: flex; + flex-wrap: wrap; + +} + +#grid-flex li.grid-item{ + width: 24%; + margin: 4px; +} + +#grid-flex li.grid-item p{ + margin-top:auto; +} + + + + + +li.grid-item:hover{ + border: 1px dotted #e2e2e2 !important; + background-color: #fcfcfc; +} + +li.grid-item img{ + max-width: 80%; + border: 0px solid gray; + transition: border-width 0.3s linear; +} + +li.grid-item:hover > img{ + border: 3px solid gray; + background-color: white; + border-radius: 10px; +} + + +section{ + width: 100%; + clear: both; +} + + + + + + +@media(max-width: 768px){ + ul#grid-floats li.grid-item:first-child, ul#grid-flex li.grid-item:first-child{ + width: 98%; + height: auto; + } + + ul#grid-floats li.grid-item, ul#grid-flex li.grid-item{ + width: 45%; + height: auto; + font-size: 14px; + } + + ul#grid-floats li:nth-child(even) { + clear: both; + } +} + + +@media(min-width: 768px) and (max-width: 1023px){ + ul#grid-floats li.grid-item:nth-child(1), ul#grid-floats li.grid-item:nth-child(2), ul#grid-flex li.grid-item:nth-child(1), ul#grid-flex li.grid-item:nth-child(2){ + width: 48%; + height: 380px; + } + + ul#grid-floats li.grid-item, ul#grid-flex li.grid-item{ + width: 32%; + height: auto; + font-size: 14px; + height: 360px; + } +} + + + +@media(min-width: 1024px){ + ul#grid-floats li.grid-item:first-child, ul#grid-flex li.grid-item:first-child{ + width: 48.5%; + } + ul#grid-floats li.grid-item:first-child p, ul#grid-flex li.grid-item:first-child p{ + margin-top: 20px; + } + + ul#grid-floats li.grid-item:first-child img, ul#grid-flex li.grid-item:first-child img{ + width: 45%; + } +}