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

43
index.html
View file

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

38
style.css
View file

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