DressOrc/PawsAndPetals
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

grid layout

Browse source
This commit is contained in:
Rosia E Evans 2025-04-28 22:27:19 +01:00
parent 1f6d3b1118
commit 790f09088c
2 changed files with 39 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

17
index.html
View file

@ -14,10 +14,8 @@
<a href="Contact.html">Contact</a> <a href="Contact.html">Contact</a>
</nav> </nav>
<main> <main id="home_page_content">
<div class='columns'> <header id="head">
<div class='rows'>
<header>
<h1>Paws And Petals</h1> <h1>Paws And Petals</h1>
Paws And Petals is a small local dog grooming business Paws And Petals is a small local dog grooming business
started up by Arianwen Evans to allow her to work in started up by Arianwen Evans to allow her to work in
@ -26,7 +24,7 @@
Starting out with the pets of friends and family, she hopes to Starting out with the pets of friends and family, she hopes to
slowly develop a small userbase of friends and local-clientelle. slowly develop a small userbase of friends and local-clientelle.
</header> </header>
<section> <section id="qual">
<h2>Qualifications</h2> <h2>Qualifications</h2>
Arianwen Evans holds: Arianwen Evans holds:
<ul> <ul>
@ -34,22 +32,17 @@
<li>Level 3 Diploma in dog grooming</li> <li>Level 3 Diploma in dog grooming</li>
</ul> </ul>
</section> </section>
</div> <section id='times'>
<div class='rows'>
<section id='contact'>
<h2>Opening Times</h2> <h2>Opening Times</h2>
Monday-Friday: 10am - 5pm Monday-Friday: 10am - 5pm
<br> <br>
Saturday-Sunday: Closed Saturday-Sunday: Closed
</section> </section>
<section> <section id="book">
<h2>How To Book</h2> <h2>How To Book</h2>
To book, see our <a href="Contact.html">contact</a> To book, see our <a href="Contact.html">contact</a>
page and email us. page and email us.
</section> </section>
</div>
</div>
</main> </main>
</body> </body>

38
style.css
View file

@ -81,26 +81,30 @@ a:hover{
color: black; color: black;
} }
.columns{ #home_page_content{
display: flex; display: grid;
flex-direction: row; gap: 7px;
gap: 10px; grid-template-areas:
justify-content: space-between; "head open"
align-content: stetch; "qual book";
align-items: stretch; grid-template-columns: 3fr 1fr;
} }
.rows{ #times{
display: flex;
flex-direction: column;
gap: 10px;
align-content: stretch;
align-items: stretch;
}
#contact{
text-align: center; text-align: center;
grid-area: open
}
#head{
grid-area: head;
}
#qual{
grid-area: qual
}
#book{
grid-area: book;
} }
.socials{ .socials{