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..21ed2cb --- /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..c26fd95 --- /dev/null +++ b/style.css @@ -0,0 +1,104 @@ +body { + text-align: justify; + margin: 0; +} + +* { + box-sizing: border-box; +} + +header{ + font-size: 40px; + font-family: 'Rock Salt', cursive; + color: white; + text-align: center; + background-color: #0988ba; + text-shadow: 2px 5px 9px rgba(102,0,51,0.98); +} + +h2{ +font-family: 'El Messiri', sans-serif; + text-align: left; + font-size: 40px; +text-shadow: 2px 5px 9px rgba(102,0,51,0.98); +} + +h3{ + text-align: center; + font-size: 18px; + background-color: rgba(102, 0, 51,.8); + color: white; +} + + +ul { + list-style-type: none; + padding:0px; +} + +img { + max-width: 100%; + max-height: 250px; +} + + +.grid-item { + background-color: rgba(120, 187, 214, .1); +border: 5px outset #0988ba; +border-radius: 5%; + width:calc(50% - 2 * 10px); + margin:10px; + padding:10px; + min-height:500px; +} + + +.grid-item:hover{ + -webkit-box-shadow: 0px 0px 7px 4px rgba(255,146,0,0.75); +box-shadow: 0px 0px 7px 4px rgba(255,146,0,0.75); + color:rgb(27, 141, 145); + transform:scale(1.1); +} + + +#grid-floats .grid-item { + float: left; +} + +#grid-floats { + overflow: hidden; +} + +#grid-flex { + display:flex; + flex-wrap:wrap; +} + +.grid-item:nth-child(1) { + width: calc(100% - 2 * 10px); +} + + + +@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); + } + +} +}