diff options
| -rw-r--r-- | index.html | 60 | ||||
| -rw-r--r-- | style.css | 47 |
2 files changed, 87 insertions, 20 deletions
@@ -4,32 +4,72 @@ <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"> - <title>Jo signpost page</title> </head> <body> <header> - <h1>Joanna Lemon Learning</h1> + <div class="inner-header"> + <div> + </div> + <div class="info"> + <h1>Joanna Lemon Learning</h1> + <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> + <div> + </div> + + <div> + </div> + <div class="info"> + <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> + </div> + + </div> </header> - <nav> - </nav> <main> <div class="wrapper"> - <div class="child"> - <p>Here is the left bit of content.</p> + <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> + + <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> + + <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> + </div> <div class="child"> - <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> - <p>For information: please contact <a href="#">hello@joannalemon.com</a></p> + <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>Here is the right bit of content.</p> + <p></p> </div> <div class="child"> <p>Here is the left bit of content.</p> @@ -1,17 +1,39 @@ .wrapper { display: grid; - height: 200px; - grid-template-columns: 1fr 3fr 1fr; + /* height: 200px; */ + grid-template-columns: 3fr 1fr; gap: 10px; } +.child { + background: white; + padding: 1.2em; + border: 1px solid; + border-color: lightgray; + border-radius: 5px; +} + +.left-section { + background: white; + padding: 1.2em; + border: 1px solid; + border-color: lightgray; + border-radius: 5px; + margin-bottom: 10px; +} + +.inner { + display: grid; + grid-template-columns: 1fr 1fr; +} + @font-face { font-family: 'OpenSans'; src: url(OpenSans-VariableFont_wdth,wght.ttf); } * { - font-size: 14pt; + font-size: 12pt; font-family: 'OpenSans'; } @@ -20,14 +42,23 @@ header { max-width: fit-content; margin-left: auto; margin-right: auto; - margin-top: 100px; + margin-top: 50px; } -.inner { +.inner-header { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; + gap: 10px; + margin-bottom: 20px; } +.info { + margin-left: auto; + margin-right: auto; + text-align: center; +} + + .jumplist { display: grid; grid-template-columns: repeat(3, 1fr); @@ -38,10 +69,6 @@ h1 { font-size: 2.4em; } -.child { - background: white; - padding: 1.2em; -} .objectpic { max-width: fit-content; |