zepp
/
thiscat.rocks
1
0
Fork 0
Code Issues Activity

initial styling for index.php

This commit is contained in:
emma 2025-01-01 06:42:24 -05:00
parent 22f0f0bad1
commit 56f1e88172
2 changed files with 92 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
index.php
View File

@ -35,39 +35,43 @@
</section> </section>
<section class="baxter-info"> <section class="baxter-info">
<h3>Baxter facts!</h3> <h3 class="facts-header">Baxter facts!</h3>
<div class="baxter-is">
<p>Baxter is:</p> <p>Baxter is:</p>
<ul> <ul>
<li>A cat</li> <li>A cat</li>
<li>Loving to those he knows</li> <li>Loving to those he knows</li>
<li>The fastest gun in the West</li> <li>The fastest gun in the West</li>
<li>Always comfy</li> <li>Always comfy</li>
</ul> </ul>
<p>Baxter is not:</p> <p>Baxter is not:</p>
<ul> <ul>
<li>A dog</li> <li>A dog</li>
<li>Automatically friendly to everyone</li> <li>Automatically friendly to everyone</li>
<li>A fan of changes in routine</li> <li>A fan of changes in routine</li>
<li>Anything other than amazing</li> <li>Anything other than amazing</li>
</ul> </ul>
</div>
<p>Baxter loves:</p> <div class="baxter-loves">
<ul> <p>Baxter loves:</p>
<li>Pets</li> <ul>
<li>Places to cuddle</li> <li>Pets</li>
<li>Food</li> <li>Places to cuddle</li>
<li>The people who care about him most</li> <li>Food</li>
</ul> <li>The people who care about him most</li>
</ul>
<p>Baxter hates:</p> <p>Baxter hates:</p>
<ul> <ul>
<li>Loud noises</li> <li>Loud noises</li>
<li>Loud people</li> <li>Loud people</li>
<li>Closed doors</li> <li>Closed doors</li>
<li>Not getting enough cuddle time</li> <li>Not getting enough cuddle time</li>
</ul> </ul>
</div>
</section> </section>
<section class="favorite-baxter-photos"> <section class="favorite-baxter-photos">

60
style/style.css
View File

@ -0,0 +1,60 @@
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
main {
display: flex;
flex-direction: column;
align-items: center;
}
.welcome-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
width: 50rem;
height: auto;
}
.baxter-info {
display: grid;
grid-template-rows: 1.5rem 1fr;
grid-template-columns: 1fr 1fr;
justify-items: center;
gap: 2rem;
width: 50rem;
height: auto;
}
.baxter-info p {
margin: 1rem;
}
.baxter-info ul {
margin: 1rem;
list-style-type: none;
}
.facts-header {
grid-column: 1/4;
grid-row: 1/2;
}
.baxter-is {
grid-column: 1/3;
grid-row: 2/3;
padding-right: 20rem;
}
.baxter-loves {
grid-column: 2/4;
grid-row: 2/3;
padding-left: 5rem;
}