styling loveletter.php
This commit is contained in:
parent
903ea588d4
commit
e448eb8508
|
@ -19,23 +19,15 @@
|
|||
Small showcases of the love that was to be ever present as you grew.
|
||||
</p>
|
||||
<div>
|
||||
<figure>
|
||||
<img class="cards" src="img/card-one.webp" alt="A young kitten era photo of Baxter. Laying his head against the arm of the couch.">
|
||||
</figure>
|
||||
<figure>
|
||||
<img class="cards" src="./img/baxter-window.jpg" alt="A young kitten era photo of baxter. He is lodged between the window and the screen for the window while it is open on a summer day.">
|
||||
</figure>
|
||||
<figure>
|
||||
<img class="cards" src="img/card-two.webp" alt="A young kitten era photo of Baxter. Flopped upside down on the couch and semi curled up.">
|
||||
</figure>
|
||||
<figure>
|
||||
<img class="cards" src="img/card-three.webp" alt="A young kitten era photo of Baxter. Partialy curled up sleeping on the couch.">
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Stuck in the middle with you...</h2>
|
||||
<div class="middle-years-text">
|
||||
|
||||
<section class="young-adult-baxter">
|
||||
<h3>Stuck in the middle with you...</h3>
|
||||
<p>
|
||||
As you reached a young adult, more of who you really were started to show. When we got our own place I saw so many
|
||||
new sides of you I had never yet seen. You loved sunbathing in the windows in the morning, I'd have my cup of coffee
|
||||
|
@ -43,14 +35,14 @@
|
|||
When the world got uncertain, I knew you were always at home waiting for me. When I was uncertain about life, I always knew
|
||||
you were the reason to keep going, to keep the fire lit.
|
||||
</p>
|
||||
</div>
|
||||
<div class="middle-years-pictures">
|
||||
<img class="cards" src="img/card-five.webp" alt="My cat Baxter laying against a wall looking at the camera.">
|
||||
<img class="cards" src="img/card-six.webp" alt="My cat Baxter laying in bed tucked under a blanket sleeping.">
|
||||
<img class="cards" src="img/card-seven.webp" alt="My cat Baxter curled up in a box looking up at the camera.">
|
||||
<img class="cards" src="img/card-eight.webp" alt="My cat Baxter stretched out on the floor flipped upside down, exposing his stomach.">
|
||||
<div>
|
||||
<img class="cards" src="./img/baxter-floor-apartment.jpg" alt="My cat Baxter laying against a wall looking at the camera.">
|
||||
<img class="cards" src="img/card-six.webp" alt="My cat Baxter laying in bed tucked under a blanket sleeping.">
|
||||
<img class="cards" src="img/card-seven.webp" alt="My cat Baxter curled up in a box looking up at the camera.">
|
||||
<img class="cards" src="img/card-eight.webp" alt="My cat Baxter stretched out on the floor flipped upside down, exposing his stomach.">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>And here we are...</h2>
|
||||
<div class="current-years-text">
|
||||
|
|
|
@ -94,24 +94,30 @@ main {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.favorite-baxter-photos img, .growing-up img {
|
||||
.growing-up figure, .young-adult-baxter figure {
|
||||
height: 50vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.favorite-baxter-photos img, .growing-up img, .young-adult-baxter img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.growing-up h3, .growing-up p {
|
||||
.growing-up h3, .young-adult-baxter h3, .growing-up p, .young-adult-baxter p {
|
||||
padding: 1rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.growing-up div {
|
||||
.growing-up div, .young-adult-baxter div {
|
||||
padding-top: 2rem;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
display: grid;
|
||||
grid-template-rows: 22.5rem 15rem;
|
||||
grid-template-columns: 25rem 25rem;
|
||||
justify-content: space-evenly;
|
||||
align-items: baseline;
|
||||
grid-template-columns: 27vw 27vw;
|
||||
align-items: stretch;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
Loading…
Reference in New Issue