further index.php styling
This commit is contained in:
parent
5e0225ed12
commit
18bef40af8
|
@ -34,8 +34,9 @@
|
|||
|
||||
</section>
|
||||
|
||||
<h3 class="facts-header">Baxter facts!</h3>
|
||||
|
||||
<section class="baxter-info">
|
||||
<h3 class="facts-header">Baxter facts!</h3>
|
||||
<div class="baxter-is">
|
||||
<p>Baxter is:</p>
|
||||
<ul>
|
||||
|
@ -74,8 +75,9 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<h3>My favorite photos of Baxter</h3>
|
||||
|
||||
<section class="favorite-baxter-photos">
|
||||
<h3>My favorite photos of Baxter</h3>
|
||||
<figure>
|
||||
<img src="./img/posed-baxter.jpg" alt="My cat Baxter laying on my chest over a blanket in bed looking at the camera. The many details and patterns of his mackeral tabby fur pattern are fully visible">
|
||||
|
||||
|
|
|
@ -64,3 +64,22 @@ main {
|
|||
grid-row: 2/3;
|
||||
padding-left: 5rem;
|
||||
}
|
||||
|
||||
.favorite-baxter-photos {
|
||||
display: grid;
|
||||
grid-template-rows: 25rem 25rem;
|
||||
grid-template-columns: 20rem 20rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.favorite-baxter-photos figure {
|
||||
height: 20rem;
|
||||
width: 15rem;
|
||||
text-wrap: wrap;
|
||||
}
|
||||
|
||||
.favorite-baxter-photos img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue