diff options
| -rw-r--r-- | www/index.html | 87 |
1 files changed, 80 insertions, 7 deletions
diff --git a/www/index.html b/www/index.html index 49298ad..1d2393d 100644 --- a/www/index.html +++ b/www/index.html @@ -5,21 +5,94 @@ <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>The Woman in my Eye</title> -<!-- <link rel='stylesheet' - type='text/css' - href='/index.css'> --> <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + :root { + --twhite: #fff; + --tblue: #4ac2fe; + --tpink: #ef95ae; + --flagheight: 60px; + --flagwidth: 90px; + --bgcolor: #e4e4ff; + } + html, body { + margin: 16px; + line-height: 1.5em; + background-color: var(--bgcolor); + } + header { + text-align: center; + } + footer { + display: flex; + justify-content: center; + font-size: 0.9em; + } + article { + background-color: white; + } + .content article { + margin: auto auto; + padding: 16px; + max-width: 1000px; + border-radius: 8px; + margin-bottom: 32px; + } + .content article:last-child { + margin-bottom: none; + } + + .transflag { + width: var(--flagwidth); + height: var(--flagheight); + margin: 16px auto; + } + .transflag .blue { + width: 100%; + min-height: calc(var(--flagheight) / 5); + background-color: var(--tblue); + } + .transflag .pink { + width: 100%; + min-height: calc(var(--flagheight) / 5); + background-color: var(--tpink); + } + .transflag .white { + width: 100%; + min-height: calc(var(--flagheight) / 5); + background-color: var(--twhite); + } + </style> </head> <body> - <h1> Hello, the woman in my eye. </h1> + <header> + <h1>Hello, the woman in my eye</h1> + </header> + <section> + <div class='transflag'> + <div class='blue'></div> + <div class='pink'></div> + <div class='white'></div> + <div class='pink'></div> + <div class='blue'></div> + </div> + </section> + <section class='content'> + <article> + Welcome to my blog. My name is Steph and I am a 30 something transgender woman. This blog focuses on my journey transitioning and discovering my gender. I am not a medical professional or an expert on the subject. I am simply a girl trying to share her story in the hopes it might actually help someone else find themselves...or entertain; either works! + </article> + <article> + This would be where my first article would be... if I didn't just start this site! Please look forward to it. + </article> + </section> <footer> - <div id='copyright'> + <p> © 2023 thewomaninmyeye dot org - <a rel="license external noopener noreferrer" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> - unless otherwise noted. - </div> + unless otherwise noted. + </p> </footer> </body> </html> |