diff options
| -rw-r--r-- | LibreFranklin-VariableFont_wght.ttf | bin | 0 -> 103512 bytes | |||
| -rw-r--r-- | index.html | 89 | ||||
| -rw-r--r-- | style.css | 137 |
3 files changed, 153 insertions, 73 deletions
diff --git a/LibreFranklin-VariableFont_wght.ttf b/LibreFranklin-VariableFont_wght.ttf Binary files differnew file mode 100644 index 0000000..4c4c09c --- /dev/null +++ b/LibreFranklin-VariableFont_wght.ttf @@ -38,21 +38,33 @@ <main> <div class="wrapper"> <div> - <div class="left-section"> - <h2>Section 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="right-section"> + <h2>Paper based resources</h2> + <hr class="divider"> + <div class="left-section-grid"> + <div> + <img src="img/alphabet_cards_sq.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> + <p> + More explanatory text here... + </p> + </div> + </div> </div> - <div class="left-section"> - <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="right-section"> + <h2>Hand sewn resources</h2> + <div> + <img src="img/alphabet_sq.jpg" alt="Alphabet square"/> + </div> </div> - <div class="left-section"> + <div class="right-section"> <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. @@ -60,48 +72,23 @@ </div> </div> - <div class="child"> - <p>For information: please contact <a href="#">joanna@joannalemon.com</a></p> - <div class="jumplist"> - <div align="center"><a href="#">Etsy</a></div> - <div align="center"><a href="#">Blog</a></div> - <div align="center"><a href="#">Another place</a></div> - </div> - </div> - <div class="child"> - <p></p> - </div> - <div class="child"> - <p>Here is the left bit of content.</p> - <div class="objectpic"> - <img src="img/tk.jpg" class="objectpic" alt=""/> - </div> - <div class="objectpic"> - <img src="img/tk.jpg" class="objectpic" alt=""/> - </div> - <div class="objectpic"> - <img src="img/tk.jpg" class="objectpic" alt=""/> - </div> - </div> - <div class="child"> - <p>Here is the middle bit of content.</p> - <div class="inner"> - <div class="objectpic"> - <img src="img/wp.jpg" alt=""/> - </div> - <div class="objectpic"> - <img src="img/wp.jpg" alt=""/> - </div> + <div class="right-section"> + <h2>Reviews</h2> + <hr class="divider"> + <div> + <p> + <q>Joanna is a talented resource maker!</q> + <p>- Amanda Bobbinson</p> + + <hr class="divider"> + <p> + <q>Joanna is a REALLY talented resource maker!</q> + <p>- Teresa McEwan</p> + </p> + + </p> </div> </div> - <div class="child"> - <p>Other things are available</p> - <ul> - <li>This item</li> - <li>This item</li> - <li>This item</li> - </ul> - </div> </div> </main> </body> @@ -1,25 +1,104 @@ -.wrapper { +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + font-family: 'Franklin'; + margin: 0; + padding: 0; +} + +@font-face { + font-family: 'Franklin'; + src: url(LibreFranklin-VariableFont_wght.ttf); +} + +body { + background: rgb(224, 221, 217, 0.27); +} + +@media (min-width: 600px) { + .wrapper { grid-template-columns: 3fr 1fr; } + .right-section p { font-size: 1.4em; } +} + + +.container { + max-width: 1200px; + margin: 0 auto; display: grid; - /* height: 200px; */ - grid-template-columns: 3fr 1fr; - gap: 10px; + gap: 0.2rem; } -.child { - background: white; - padding: 1.2em; - border: 1px solid; - border-color: lightgray; - border-radius: 5px; +.cell { + } -.left-section { +.right-section { background: white; - padding: 1.2em; - border: 1px solid; + margin-right: 20px; + padding-left: 50px; + padding-top: 20px; + border: 0px solid; border-color: lightgray; border-radius: 5px; - margin-bottom: 10px; +} + +/* .left-section { */ +/* background: white; */ +/* /1* background: rgb(h24, 221, 217, 0.27); *1/ */ +/* padding-left: 50px; */ +/* padding-top: 20px; */ +/* padding-bottom: 50px; */ +/* border: 0px solid; */ +/* border-color: lightgray; */ +/* border-radius: 5px; */ +/* margin-bottom: 10px; */ +/* margin-left: 20px; */ +/* } */ + +.right-section p { + color: rgb(37, 95, 140, 0.8); + font-size: 1.2rem; + padding-left: 15px; +} + +q { + display: inline; +} + + +q:before { + content: open-quote; +} + +q:after { + content: close-quote; +} + +img { + border-radius: 20px; + box-shadow: 5px 10px 2px lightgray; + max-width: 400px; + height: auto; + width: 100%; +} + + +.left-section-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + margin: 10px 10px 10px 0px; +} + +.left-section-grid p { + font-size: 1.6rem; + color: darkgray; + padding-right: 50px; + text-align: right; } .inner { @@ -27,14 +106,16 @@ grid-template-columns: 1fr 1fr; } -@font-face { - font-family: 'OpenSans'; - src: url(OpenSans-VariableFont_wdth,wght.ttf); + +a { + font-size: inherit; + color: #394f49; } -* { - font-size: 12pt; - font-family: 'OpenSans'; +.divider { + color: #e0d9de; + border-width: 1; + margin: 10px 20px 20px 0px; } header { @@ -55,18 +136,30 @@ header { .info { margin-left: auto; margin-right: auto; + color: darkgray; text-align: center; } +.info p { + font-size: 1.1rem; +} + .jumplist { + font-size: 1.1rem; display: grid; grid-template-columns: repeat(3, 1fr); + margin-top: 20px; } h1 { - color: green; - font-size: 2.4em; + color: #657c76; + font-size: 2.0rem; +} + +h2 { + color: #4e8273; + font-size: 1.8rem; } |