diff options
| -rw-r--r-- | img/AnteaterantsAa.jpg | bin | 0 -> 458464 bytes | |||
| -rw-r--r-- | img/BeeEaterblossombeestext.jpg | bin | 0 -> 2981123 bytes | |||
| -rw-r--r-- | img/BeeblossomBb.jpg | bin | 0 -> 563536 bytes | |||
| -rw-r--r-- | img/Bugsonwhite.jpg | bin | 0 -> 728677 bytes | |||
| -rw-r--r-- | img/Butterfliesx5squarewhite.jpg | bin | 0 -> 1443535 bytes | |||
| -rw-r--r-- | img/CrabclamsCc.jpg | bin | 0 -> 861353 bytes | |||
| -rw-r--r-- | img/DalmationdogdragonflyDd.jpg | bin | 0 -> 382749 bytes | |||
| -rw-r--r-- | img/ElephantEe.jpg | bin | 0 -> 373656 bytes | |||
| -rw-r--r-- | img/Flamingofish.jpg | bin | 0 -> 640848 bytes | |||
| -rw-r--r-- | img/Gardenbirdswhite.jpg | bin | 0 -> 2084010 bytes | |||
| -rw-r--r-- | img/GeesegoslingsGg.jpg | bin | 0 -> 1066314 bytes | |||
| -rw-r--r-- | img/Hoverflydandelion.jpg | bin | 0 -> 1107647 bytes | |||
| -rw-r--r-- | img/KangarookoalaKk.jpg | bin | 0 -> 649722 bytes | |||
| -rw-r--r-- | img/LadybirdleafLl.jpg | bin | 0 -> 688172 bytes | |||
| -rw-r--r-- | img/PoemInmygarden.jpg | bin | 0 -> 2565183 bytes | |||
| -rw-r--r-- | img/PoemSquirrel.jpg | bin | 0 -> 1754432 bytes | |||
| -rw-r--r-- | img/RhinoRockHyraxRr.jpg | bin | 0 -> 658172 bytes | |||
| -rw-r--r-- | img/Robincaterpillartext.jpg | bin | 0 -> 1345035 bytes | |||
| -rw-r--r-- | img/SnowleopardssnowSs.jpg | bin | 0 -> 999592 bytes | |||
| -rw-r--r-- | img/Springthings.jpg | bin | 0 -> 1240033 bytes | |||
| -rw-r--r-- | img/TigerTocotoucanTt.jpg | bin | 0 -> 947471 bytes | |||
| -rw-r--r-- | img/VulturevoleVv.jpg | bin | 0 -> 624902 bytes | |||
| -rw-r--r-- | img/WhaleWw.jpg | bin | 0 -> 563472 bytes | |||
| -rw-r--r-- | img/YakyellowYy.jpg | bin | 0 -> 502651 bytes | |||
| -rw-r--r-- | img/ZebraZz.jpg | bin | 0 -> 522717 bytes | |||
| -rw-r--r-- | index.html | 123 | ||||
| -rw-r--r-- | style.css | 18 |
27 files changed, 96 insertions, 45 deletions
diff --git a/img/AnteaterantsAa.jpg b/img/AnteaterantsAa.jpg Binary files differnew file mode 100644 index 0000000..94408b0 --- /dev/null +++ b/img/AnteaterantsAa.jpg diff --git a/img/BeeEaterblossombeestext.jpg b/img/BeeEaterblossombeestext.jpg Binary files differnew file mode 100644 index 0000000..9f5037c --- /dev/null +++ b/img/BeeEaterblossombeestext.jpg diff --git a/img/BeeblossomBb.jpg b/img/BeeblossomBb.jpg Binary files differnew file mode 100644 index 0000000..4538ac1 --- /dev/null +++ b/img/BeeblossomBb.jpg diff --git a/img/Bugsonwhite.jpg b/img/Bugsonwhite.jpg Binary files differnew file mode 100644 index 0000000..6b9831b --- /dev/null +++ b/img/Bugsonwhite.jpg diff --git a/img/Butterfliesx5squarewhite.jpg b/img/Butterfliesx5squarewhite.jpg Binary files differnew file mode 100644 index 0000000..06184a7 --- /dev/null +++ b/img/Butterfliesx5squarewhite.jpg diff --git a/img/CrabclamsCc.jpg b/img/CrabclamsCc.jpg Binary files differnew file mode 100644 index 0000000..decba8a --- /dev/null +++ b/img/CrabclamsCc.jpg diff --git a/img/DalmationdogdragonflyDd.jpg b/img/DalmationdogdragonflyDd.jpg Binary files differnew file mode 100644 index 0000000..a34d23c --- /dev/null +++ b/img/DalmationdogdragonflyDd.jpg diff --git a/img/ElephantEe.jpg b/img/ElephantEe.jpg Binary files differnew file mode 100644 index 0000000..016506c --- /dev/null +++ b/img/ElephantEe.jpg diff --git a/img/Flamingofish.jpg b/img/Flamingofish.jpg Binary files differnew file mode 100644 index 0000000..2ff2f6b --- /dev/null +++ b/img/Flamingofish.jpg diff --git a/img/Gardenbirdswhite.jpg b/img/Gardenbirdswhite.jpg Binary files differnew file mode 100644 index 0000000..6a242a5 --- /dev/null +++ b/img/Gardenbirdswhite.jpg diff --git a/img/GeesegoslingsGg.jpg b/img/GeesegoslingsGg.jpg Binary files differnew file mode 100644 index 0000000..3a5f1b0 --- /dev/null +++ b/img/GeesegoslingsGg.jpg diff --git a/img/Hoverflydandelion.jpg b/img/Hoverflydandelion.jpg Binary files differnew file mode 100644 index 0000000..8777c04 --- /dev/null +++ b/img/Hoverflydandelion.jpg diff --git a/img/KangarookoalaKk.jpg b/img/KangarookoalaKk.jpg Binary files differnew file mode 100644 index 0000000..948cf50 --- /dev/null +++ b/img/KangarookoalaKk.jpg diff --git a/img/LadybirdleafLl.jpg b/img/LadybirdleafLl.jpg Binary files differnew file mode 100644 index 0000000..6740c99 --- /dev/null +++ b/img/LadybirdleafLl.jpg diff --git a/img/PoemInmygarden.jpg b/img/PoemInmygarden.jpg Binary files differnew file mode 100644 index 0000000..fdeb5a6 --- /dev/null +++ b/img/PoemInmygarden.jpg diff --git a/img/PoemSquirrel.jpg b/img/PoemSquirrel.jpg Binary files differnew file mode 100644 index 0000000..5408654 --- /dev/null +++ b/img/PoemSquirrel.jpg diff --git a/img/RhinoRockHyraxRr.jpg b/img/RhinoRockHyraxRr.jpg Binary files differnew file mode 100644 index 0000000..c4e6d03 --- /dev/null +++ b/img/RhinoRockHyraxRr.jpg diff --git a/img/Robincaterpillartext.jpg b/img/Robincaterpillartext.jpg Binary files differnew file mode 100644 index 0000000..56a8a77 --- /dev/null +++ b/img/Robincaterpillartext.jpg diff --git a/img/SnowleopardssnowSs.jpg b/img/SnowleopardssnowSs.jpg Binary files differnew file mode 100644 index 0000000..b746ed6 --- /dev/null +++ b/img/SnowleopardssnowSs.jpg diff --git a/img/Springthings.jpg b/img/Springthings.jpg Binary files differnew file mode 100644 index 0000000..724d813 --- /dev/null +++ b/img/Springthings.jpg diff --git a/img/TigerTocotoucanTt.jpg b/img/TigerTocotoucanTt.jpg Binary files differnew file mode 100644 index 0000000..608ca65 --- /dev/null +++ b/img/TigerTocotoucanTt.jpg diff --git a/img/VulturevoleVv.jpg b/img/VulturevoleVv.jpg Binary files differnew file mode 100644 index 0000000..1ee2a94 --- /dev/null +++ b/img/VulturevoleVv.jpg diff --git a/img/WhaleWw.jpg b/img/WhaleWw.jpg Binary files differnew file mode 100644 index 0000000..af9a8bd --- /dev/null +++ b/img/WhaleWw.jpg diff --git a/img/YakyellowYy.jpg b/img/YakyellowYy.jpg Binary files differnew file mode 100644 index 0000000..b76075f --- /dev/null +++ b/img/YakyellowYy.jpg diff --git a/img/ZebraZz.jpg b/img/ZebraZz.jpg Binary files differnew file mode 100644 index 0000000..ce2f649 --- /dev/null +++ b/img/ZebraZz.jpg @@ -38,59 +38,100 @@ </header> <main> <div class="container"> - <div> - <div class="cell"> - <h2>Paper based resources</h2> - <hr class="divider"> - <div class="inner-grid"> - <div> - <img src="img/alphabet_cards.jpg" alt=""/> - </div> - <div> - <p> - I design quality, clear educational resources which can be downloaded - from my <a href="#" target="_blank">TES shop</a> for free. - </p> - </div> - </div> - </div> - <div class="cell"> - <h2>Hand sewn resources</h2> - <hr class="divider"> - <div class="inner-grid"> - <div> - <img src="img/alphabet_sq.jpg" alt="Alphabet square"/> - </div> - <div> - <p> - I design quality, clear educational resources which can be downloaded - from my <a href="#" target="_blank">TES shop</a> for free. - </p> - </div> + <div class="cell"> + <h2>Paper based resources</h2> + <hr class="divider"> + <div class="inner-grid_1"> + <div> + <img src="img/Springthings.jpg" alt=""/> + </div> + <div> + <p> + I design quality, clear educational resources which can be downloaded + from my <a href="#" target="_blank">TES shop</a> for free. + </p> </div> </div> - - <div class="cell"> - <h2>Section 2 title</h2> - <p> - Welcome to my gallery of creativity. Here you'll find a collection of my latest works, from paintings to pottery, all lovingly crafted by hand. - </p> + <div class="inner-grid_2"> + <div> + <img src="img/PoemInmygarden.jpg" alt=""/> + </div> + <div> + <img src="img/PoemSquirrel.jpg" alt=""/> + </div> + <div> + <img src="img/Gardenbirdswhite.jpg" alt=""/> + </div> </div> - </div> + + <div class="cell"> + <h2>Hand sewn resources</h2> + <hr class="divider"> + <div class="inner-grid_1"> + <div> + <img src="img/alphabet_cards.jpg" alt=""/> + </div> + <div> + <p> + I design quality, clear educational resources which can be downloaded + from my <a href="#" target="_blank">TES shop</a> for free. + </p> + </div> + </div> + <div class="inner-grid_2"> + <div> + <img src="img/Butterfliesx5squarewhite.jpg" alt=""/> + </div> + <div> + <img src="img/Butterfliesx5squarewhite.jpg" alt=""/> + </div> + <div> + <img src="img/Butterfliesx5squarewhite.jpg" alt=""/> + </div> + </div> + </div> + + <div class="cell"> + <h2>Collaged resources</h2> + <hr class="divider"> + <div class="inner-grid_1"> + <div> + <img src="img/alphabet_cards.jpg" alt=""/> + </div> + <div> + <p> + I design quality, clear educational resources which can be downloaded + from my <a href="#" target="_blank">TES shop</a> for free. + </p> + </div> + </div> + <div class="inner-grid_2"> + <div> + <img src="img/Butterfliesx5squarewhite.jpg" alt=""/> + </div> + <div> + <img src="img/Butterfliesx5squarewhite.jpg" alt=""/> + </div> + <div> + <img src="img/Butterfliesx5squarewhite.jpg" alt=""/> + </div> + </div> + </div> + <div class="cell"> <h2>Reviews</h2> <hr class="divider"> <div> <p> - <q>Joanna is a talented resource maker!</q> - <p>- Amanda Bobbinson</p> + <q>Joanna is a talented resource maker!</q> + <p>- Amanda Bobbinson</p> - <hr class="divider"> + <hr class="divider"> <p> - <q>Joanna is a REALLY talented resource maker!</q> - <p>- Teresa McEwan</p> + <q>Joanna is a REALLY talented resource maker!</q> + <p>- Teresa McEwan</p> </p> </p> @@ -68,30 +68,40 @@ img { } -.inner-grid { +.inner-grid_1 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 10px 10px 10px 0px; } -.inner-grid p { +.inner-grid_1 p { font-size: 1.6rem; color: darkgray; padding-right: 50px; text-align: right; } +.inner-grid_2 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + margin: 10px 10px 10px 0px; +} + /* Media query for narrow screens */ @media only screen and (max-width: 600px) { - .inner-grid { + .inner-grid_1 { grid-template-columns: 1fr; /* Switch to single column layout */ } - .inner-grid p { + .inner-grid_1 p { text-align: left; font-size: 1.5rem; padding: 0; } + .inner-grid_2 { + grid-template-columns: 1fr; /* Switch to single column layout */ + } } |
