diff --git a/README.md b/README.md index 61d9ab6..4bdea41 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,13 @@ # Grid Components - -In this exercise, we're going to spend more time with CSS grid implementing specific layouts to really nail down our -Grid skills. +In this exercise, we're going to spend more time with CSS grid implementing specific layouts to really nail down our Grid skills. ## Instructions +The `index.html` file in this repoistory contains place holder sections for you to implement different layouts. Take this file and implement Grid layouts in each section according to the requirements defined by the heading. -The [HTML file](src/index.html) in this repository contains placeholder sections for you to implement different -layouts. -Take this file and implement Grid layouts in each section according to the requirements defined by the heading. - -Do not edit the HTML elements within the body tag, only the styles in the [CSS file](src/styles.css). The end -result should achieve layouts that look like so: +The end result should achieve layouts that look like so: ![Final Result](images/final-result.png) ## Tips - - Again, work with little coloured blocks using div tags and align them using grid. -- Use div tags to create your blocks give them coloured borders to be able to see them more clearly, while you are -- trying to line them up. - -## Extension Criteria - -Try to replicate the Grid Madness section from the image! +- Use div tags to create your blocks give them coloured borders to be able to see them more clearly, while you are trying to line them up. \ No newline at end of file diff --git a/images/final-result.png b/images/final-result.png index 8dd30d8..081ebe7 100644 Binary files a/images/final-result.png and b/images/final-result.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..9ebe494 --- /dev/null +++ b/index.html @@ -0,0 +1,184 @@ + + + + + + + Static Template + + + + +
+

Two Column Grid (Icon Pattern)

+
+ +
+
+
+
+

Three Column Grid

+
+
+
+
+
+
+
+

Three Column Grid with Expansion

+
+
+
+
+
+
+
+

Five Column Grid

+
+
+
+
+
+
+
+
+
+

Center Grid

+
+
+
+
+
+

Grid within Grid #1

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Grid within Grid #2 (Expansion)

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +