layout and initial design work done

This commit is contained in:
emma 2024-12-12 08:06:46 -05:00
parent f454c16bc3
commit b2f7cc084b
8 changed files with 64 additions and 51 deletions

View File

@ -8,8 +8,8 @@
</head> </head>
<body> <body>
<?php include "./includes/header.php" ?>
<main> <main>
<?php include "./includes/header.php" ?>
<?php include "./includes/nav.php" ?> <?php include "./includes/nav.php" ?>
<section> <section>
<h1>welcome to emma's place</h1> <h1>welcome to emma's place</h1>
@ -36,9 +36,7 @@
12-05-2024 - i've begun using picrew to explore my identity and sense of self. while creating this site i added a picrew page with a few images of how i see myself. with time i will certainly add more 12-05-2024 - i've begun using picrew to explore my identity and sense of self. while creating this site i added a picrew page with a few images of how i see myself. with time i will certainly add more
</li> </li>
</ul> </ul>
</section>
<section>
<h2>other things of mine you might like</h2> <h2>other things of mine you might like</h2>
<h3>cat-related website projects</h3> <h3>cat-related website projects</h3>
@ -62,7 +60,7 @@
<li><a href="https://blog.hypertext.city" target="_blank">walk with me for a moment</a></li> <li><a href="https://blog.hypertext.city" target="_blank">walk with me for a moment</a></li>
</ul> </ul>
</section> </section>
<?php include "./includes/footer.php" ?>
</main> </main>
<?php include "./includes/footer.php" ?>
</body> </body>
</html> </html>

View File

@ -8,8 +8,8 @@
</head> </head>
<body> <body>
<?php include "../includes/header.php" ?>
<main> <main>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?> <?php include "../includes/nav.php" ?>
<section> <section>

View File

@ -8,8 +8,8 @@
</head> </head>
<body> <body>
<?php include "../includes/header.php" ?>
<main> <main>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?> <?php include "../includes/nav.php" ?>
<section> <section>

View File

@ -8,8 +8,8 @@
</head> </head>
<body> <body>
<?php include "../includes/header.php" ?>
<main> <main>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?> <?php include "../includes/nav.php" ?>
<section> <section>

View File

@ -8,46 +8,47 @@
</head> </head>
<body> <body>
<?php include "../includes/header.php" ?>
<main> <main>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?> <?php include "../includes/nav.php" ?>
<section> <section>
<h1>a gallery of emma</h1> <h1>a gallery of emma</h1>
<p> <p>
picrew has been a wonderful help in figuring who i am. how i want to present when everything is right for me to do so. the below pictures all capture different parts of me, i see myself in all of them in some way. some picrew allowed me to add things that others didn't. for example, a top i really want to have one day, or the fact that i have freckles on my face. i love that picrew makes it acccessible to discover my identity. it is such a friendly tool. over time i've found that people have different image makeers that capture so many wonderful parts of myself, and humanity in general picrew has been a wonderful help in figuring who i am. how i want to present when everything is right for me to do so. the below pictures all capture different parts of me, i see myself in all of them in some way. some picrew allowed me to add things that others didn't. for example, a top i really want to have one day, or the fact that i have freckles on my face. i love that picrew makes it acccessible to discover my identity. it is such a friendly tool. over time i've found that people have different image makeers that capture so many wonderful parts of myself, and humanity in general
</p> </p>
<h2>gallery</h2> <h2>gallery</h2>
<div> <div>
<figure> <figure>
<img src="../img/life/picrews/self-one.jpg" alt="an image of emma created in picrew. the image is fem presenting and represent characteristics that emma sees of herself when she can be fem presenting in her physical space" height="300" width="300"> <img src="../img/life/picrews/self-one.jpg" alt="an image of emma created in picrew. the image is fem presenting and represent characteristics that emma sees of herself when she can be fem presenting in her physical space" height="300" width="300">
<figcaption> <figcaption>
<a href="https://picrew.me/en/image_maker/94097">picrew image maker</a> by sangled <a href="https://picrew.me/en/image_maker/94097">picrew image maker</a> by sangled
</figcaption> </figcaption>
</figure> </figure>
<figure> <figure>
<img src="../img/life/picrews/self-two.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores charactersitcs such as hair styles and clothing that emma sees herself wearing and expressing" height="300" width="300"> <img src="../img/life/picrews/self-two.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores charactersitcs such as hair styles and clothing that emma sees herself wearing and expressing" height="300" width="300">
<figcaption> <figcaption>
<a href="https://picrew.me/en/image_maker/2446448"> picrew image maker</a> by seyimOn <a href="https://picrew.me/en/image_maker/2446448"> picrew image maker</a> by seyimOn
</figcaption> </figcaption>
</figure> </figure>
<figure> <figure>
<img src="../img/life/picrews/self-three.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores characteristics such as hair styles, jewlery, transitioning, and features of emma like freckles" height="300" width="300"> <img src="../img/life/picrews/self-three.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores characteristics such as hair styles, jewlery, transitioning, and features of emma like freckles" height="300" width="300">
<figcaption> <figcaption>
<a href="https://picrew.me/en/image_maker/644129">picrew image maker</a> by makowka <a href="https://picrew.me/en/image_maker/644129">picrew image maker</a> by makowka
</figcaption> </figcaption>
</figure> </figure>
<figure> <figure>
<img src="../img/life/picrews/self-four.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores characteristics such as shorter, lighter hair and makeup as well as feature of emma such as her current style of glasses and freckles" height="300" width="300"> <img src="../img/life/picrews/self-four.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores characteristics such as shorter, lighter hair and makeup as well as feature of emma such as her current style of glasses and freckles" height="300" width="300">
<figcaption> <figcaption>
<a href="https://picrew.me/en/image_maker/426722"> picrew image maker</a> by grgikau <a href="https://picrew.me/en/image_maker/426722"> picrew image maker</a> by grgikau
</figcaption> </figcaption>
</figure> </figure>
</div> </div>
</section> </section>
<script src="../script/image-enlarger.js"></script> <script src="../script/image-enlarger.js"></script>
</main>
<?php include "../includes/footer.php" ?> <?php include "../includes/footer.php" ?>
</body> </body>
</html> </html>

View File

@ -8,8 +8,8 @@
</head> </head>
<body> <body>
<?php include "../includes/header.php" ?>
<main> <main>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?> <?php include "../includes/nav.php" ?>
<section> <section>

View File

@ -8,8 +8,8 @@
</head> </head>
<body> <body>
<?php include "../includes/header.php" ?>
<main> <main>
<?php include "../includes/header.php" ?>
<?php include "../includes/nav.php" ?> <?php include "../includes/nav.php" ?>
<section> <section>

View File

@ -12,30 +12,44 @@ html {
} }
body { body {
height: 100vh; display: grid;
width: auto; grid-template-rows: 5vh 2fr 5vh;
justify-content: center;
align-content: space-evenly;
} }
main { main {
height: auto;
width: 70vw;
display: grid; display: grid;
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 2fr 1fr; gap: 2rem;
} }
header { header {
grid-column: 1/3;
grid-row: 1/2; grid-row: 1/2;
height: 5vh;
width: auto;
text-align: center;
} }
footer { footer {
grid-column: 1/3; grid-row: 3/4;
grid-row: 4/5; height: 5vh;
width: auto;
text-align: center;
align-self: end;
} }
nav { nav {
grid-column: 1/2; grid-row: 2/3;
width: 10vw;
height: auto;
justify-self: end;
} }
section { section {
grid-column: 2/3; grid-column: 2/3;
grid-row: 2/3;
width: 55vw;
} }