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

css cleanup

Browse source
This commit is contained in:
Rosia E Evans 2025-04-30 22:38:41 +01:00
parent fdd4ba41c2
commit c54bafaf2b
5 changed files with 46 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

3
Contact.html
View file

@ -2,6 +2,9 @@
<head> <head>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="effects.css">
<link rel="stylesheet" href="fontScaler.css">
<link rel="stylesheet" href="socials.css">
<script src="fontScaler.js" defer></script> <script src="fontScaler.js" defer></script>
</head> </head>

3
Gallery.html
View file

@ -2,6 +2,9 @@
<head> <head>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="gallery.css">
<link rel="stylesheet" href="effects.css">
<link rel="stylesheet" href="fontScaler.css">
<script src="gallery.js"></script> <script src="gallery.js"></script>
<script src="fontScaler.js" defer></script> <script src="fontScaler.js" defer></script>
</head> </head>

22
ServicesAndPrices.html
View file

@ -2,6 +2,8 @@
<head> <head>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="effects.css">
<link rel="stylesheet" href="fontScaler.css">
<script src="fontScaler.js" defer></script> <script src="fontScaler.js" defer></script>
</head> </head>
@ -16,22 +18,16 @@
<main class="white_backing"> <main class="white_backing">
<h1>Services And Prices</h1> <h1>Services And Prices</h1>
<h2>Overview</h2>
Pricing varies for size, breed, coat type and behaviour. Pricing varies for size, breed, coat type and behaviour.
<br>
Payment for the appointment is due at pickup of the dog after the appointment has taken place. Payment for the appointment is due at pickup of the dog after the appointment has taken place.
<br><br> <br><br>
<h2>Services not provided</h2>
I do not provide ear plucking or teeth cleaning I do not provide ear plucking or teeth cleaning
<br> <br>
I don’t take extra large dogs I don’t take extra large dogs
<br> <br>
Bad matting £15
<br>
Bad behavior £15
<br>
Cancellation or missed appointment £20
<br>
Fleas on your dog £20
<br>
<h2>Services</h2> <h2>Services</h2>
@ -82,6 +78,14 @@
</tr> </tr>
</table> </table>
<h3>Extra costs</h3>
<ul style="text-align: left;"">
<li>Bad matting £15</li>
<li>Bad behavior £15</li>
<li>Cancellation or missed appointment £20</li>
<li>Fleas on your dog £20</li>
</ul>
<h3>Additional Services</h3> <h3>Additional Services</h3>
<ul style="text-align: left;""> <ul style="text-align: left;"">
<li>Dog walking: £10 an hr</li> <li>Dog walking: £10 an hr</li>

3
index.html
View file

@ -2,6 +2,9 @@
<head> <head>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="effects.css">
<link rel="stylesheet" href="fontScaler.css">
<script src="fontScaler.js" defer></script> <script src="fontScaler.js" defer></script>
</head> </head>

211
style.css
View file

@ -1,4 +1,4 @@
root{ :root{
--text: #729b78; --text: #729b78;
--backing: white; --backing: white;
} }
@ -6,11 +6,11 @@ root{
body{ body{
background-image: url("wallpaper.png"); background-image: url("wallpaper.png");
background-size: 250px; background-size: 250px;
color: #729b78; color: var(--text);
} }
header, article, section{ header, article, section{
background-color: white; background-color: var(--backing);
padding: 10px; padding: 10px;
border-radius: 0 0 0px 0px; border-radius: 0 0 0px 0px;
} }
@ -24,29 +24,16 @@ main{
text-align: center; text-align: center;
} }
table{ /*
margin: auto; NAV BAR
width: 80%; */
}
.white_backing{
background-color: white;
}
.hover_rotate{
transition: transform 0.25s;
}
.hover_rotate:hover{
transform: rotate(5deg);
}
nav{ nav{
display:flex; display:flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
background-color: white; background-color: var(--backing);
color: #729b78; color: var(--text);
font-size: 1.5rem; font-size: 1.5rem;
gap: 20px; gap: 20px;
@ -56,149 +43,34 @@ nav{
nav a{ nav a{
font-size: 1.5rem; font-size: 1.5rem;
color: #729b78; color: var(--text);
text-decoration: none; text-decoration: none;
border-bottom: solid #729b78 0px; border-bottom: solid var(--text) 0px;
transition: border-bottom 0.1s,font-size 0.7s; transition: border-bottom 0.1s,font-size 0.7s;
} }
nav a:hover{ nav a:hover{
font-size: 1.6rem; font-size: 1.6rem;
border-bottom: solid #729b78 2px; border-bottom: solid var(--text) 2px;
} }
nav a:visited{ nav a:visited{
color: #729b78; color: var(--text);
text-decoration: none; text-decoration: none;
} }
a{ table{
color: #729b78;
transition: color 0.5s;
}
a:visited{
color: #729b78;
}
a:hover{
color: black;
}
#home_page_content{
display: grid;
gap: 7px;
grid-template-areas:
"head open"
"qual book";
grid-template-columns: 3fr 1fr;
}
#times{
text-align: center;
grid-area: open
}
#head{
grid-area: head;
}
#qual{
grid-area: qual
}
#book{
grid-area: book;
}
.socials{
display: flex;
flex-direction: row;
justify-content: center;
padding: 0 10% 0 10%;
}
.socials img{
width: 100px;
height: 100px;
}
main .socials{
margin: auto; margin: auto;
width: 80%;
} }
.gallery{ .white_backing{
display: flex; background-color: var(--backing);
flex-wrap: wrap;
justify-content: space-evenly;
} }
.gallery figure{ .hover_rotate{
width: 200px; transition: transform 0.25s;
height: 250px;
background-color: white;
transition: transform 0.5s;
} }
.hover_rotate:hover{
.gallery figure:hover:not(.maximised){ transform: rotate(5deg);
transform: rotate(-5deg);
}
.gallery figure img{
width: 90%;
height: 75%;
object-fit: fill;
margin: 5%;
}
.gallery figcaption{
text-align: center;
padding: 5px;
}
.maximised{
position: fixed;
left: 50%;
top: 50%;
/* left: 0; */
/* top: 0; */
z-index: 10;
height: 90vh !important;
width: 80vh !important;
transform: translate(-50%, -50%);
font-size: 3rem;
margin: 0;
}
.maximised:before{
background-color: white;
content: "click the photo again to close it";
font-size: 2rem;
}
.font_scaler{
position: fixed;
bottom: 0;
left: 0;
}
.font_scaler button{
background: none;
background-color: white;
border: none;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
transition: background-color 0.5s;
}
.font_scaler img{
width: 7vw;
height: 7vw;
}
.font_scaler button::hover, .font_scaler img::hover{
background-color: grey;
} }
@media screen and (max-width:1000px){ @media screen and (max-width:1000px){
@ -214,43 +86,13 @@ main .socials{
/* border-collapse: collapse; */ /* border-collapse: collapse; */
} }
.font_scaler_buttons img{
width: 15vw;
height: 15vw;
}
.columns{
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
}
header, article, section{ header, article, section{
background-color: white; background-color: var(--backing);
padding: 10px; padding: 10px;
padding-bottom: 20px; padding-bottom: 20px;
border-radius: 0 0 0px 0px; border-radius: 0 0 0px 0px;
} }
.maximised{
position: fixed;
left: 50%;
top: 50%;
/* left: 0; */
/* top: 0; */
z-index: 10;
height: 90vw !important;
width: 80vw !important;
transform: translate(-50%, -50%);
font-size: 3rem;
margin: 0;
}
main{ main{
width: 90vw; width: 90vw;
font-size:2rem; font-size:2rem;
@ -259,18 +101,13 @@ main .socials{
nav a{ nav a{
font-size: 2.5rem; font-size: 2.5rem;
color: #729b78; color: var(--text);
text-decoration: none; text-decoration: none;
border-bottom: solid #729b78 0px; border-bottom: solid var(--text) 0px;
transition: border-bottom 0.1s,font-size 0.7s; transition: border-bottom 0.1s,font-size 0.7s;
} }
nav a:hover{ nav a:hover{
font-size: 2.6rem; font-size: 2.6rem;
border-bottom: solid #729b78 2px; border-bottom: solid var(--text) 2px;
}
.gallery figure{
width: 350px;
height: 400px;
} }
} }