code refactoring and feature add

adjust paths in html and css to relative
for proper hosting
add div to give baxter headpats. style with css
This commit is contained in:
zepp 2025-02-06 08:06:04 -05:00
parent bd771947b8
commit b3f5f676b0
2 changed files with 21 additions and 9 deletions

View File

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>for you, emma</title>
<link rel="stylesheet" href="/style/style.css">
<link rel="stylesheet" href="./style/style.css">
</head>
<body>
@ -14,7 +14,7 @@
<section>
<div class="visitor-note">
<img class="read-this" src="/img/read.jpg"
<img class="read-this" src="./img/read.jpg"
alt="a piece of note paper that must be clicked on to read"
height="300" width="300"
>
@ -35,18 +35,19 @@
<div class="tileEleven tile"></div>
<div class="tileTwelve tile"></div>
<img src="/img/sweets.jpg" alt="a box of chocolate cupcakes"
<img src="./img/sweets.jpg" alt="a box of chocolate cupcakes"
height="1000" width="1000"
>
</div>
<div class="items">
<img class="baxter" src="/img/baxter.png"
<div class="headpats"></div>
<img class="baxter" src="./img/baxter.png"
alt="a picture of my cat baxter that can be petted"
height="300" width="300"
>
<img class="trans-pride-heart"
src="/img/transgender-pride-flag.svg"
src="./img/transgender-pride-flag.svg"
alt="the trans pride flag"
height="250" width="250"
>
@ -55,7 +56,7 @@
<script src="https://kit.fontawesome.com/821c138f8d.js"
crossorigin="anonymous">
</script>
<script src="/js/script.js" defer></script>
<script src="./js/script.js" defer></script>
<footer>
<p>happy valentine's day!</p>
</footer>

View File

@ -5,12 +5,12 @@
@font-face {
font-family: alwaysinmyheart;
src: url("/site/resources/fonts/alwaysinmyheart.woff2");
src: url("../site/resources/fonts/alwaysinmyheart.woff2");
}
@font-face {
font-family: learning-curve-regular;
src: url("/site/resources/fonts/learning-curve-regular.woff2");
src: url("../site/resources/fonts/learning-curve-regular.woff2");
}
*, *::before, *::after {
@ -26,7 +26,7 @@ html {
body {
height: 100vh;
width: auto;
background-image: url("/img/background.png");
background-image: url("../img/background.png");
display: flex;
flex-direction: column;
justify-content: space-between;
@ -206,6 +206,17 @@ section {
.baxter {
width: 300px;
height: auto;
z-index: 1;
}
.headpats {
position: absolute;
left: 87.12%;
top: 19.2%;
width: 3%;
height: 3.03%;
transform: rotate(17deg);
z-index: 2;
}
.trans-pride-heart {