diff --git a/ServicesAndPrices.html b/ServicesAndPrices.html new file mode 100644 index 0000000..18d1153 --- /dev/null +++ b/ServicesAndPrices.html @@ -0,0 +1,94 @@ + + + + + + + + + + +
+

Services And Prices

+ Pricing varies for size, breed, coat type and behaviour. +
+ Payment for the appointment is due at pickup of the dog after the appointment has taken place. +

+ I do not provide ear plucking or teeth cleaning +
+ I don’t take extra large dogs +
+ Bad matting £15 +
+ Bad behavior £15 +
+ Cancellation or missed appointment £20 +
+ Fleas on your dog £20 +
+ +

Services

+ +

Grooming

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ToySmallMediumLarge
Nails Only£10£20£20£30
Hand Strip£50£60£70£80
Deshed£20£30£40£50
Bath And Blow Dry£20£20£30£40
Puppy Intro£35£35£45£45
+ +

Additional Services

+ +
+ + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..2f67de5 --- /dev/null +++ b/style.css @@ -0,0 +1,233 @@ +root{ + --text: #729b78; + --backing: white; +} + +body{ + background-image: url("wallpaper.png"); + background-size: 250px; + color: #729b78; +} + +header, article, section{ + background-color: white; + padding: 10px; + border-radius: 0 0 0px 0px; +} + +main{ + border-radius: 0 0 0px 0px; + width: 60vw; + margin: auto; + margin-top: 15px; + padding: 5px; + text-align: center; +} + +table{ + margin: auto; +} + + +.white_backing{ + background-color: white; +} + +.hover_rotate{ + transition: transform 0.25s; +} +.hover_rotate:hover{ + transform: rotate(5deg); +} + +nav{ + display:flex; + flex-direction: row; + justify-content: center; + background-color: white; + color: #729b78; + font-size: 1.5rem; + gap: 20px; + + padding: 10px; + margin-top: 20vh; +} + +nav a{ + font-size: 1.5rem; + color: #729b78; + text-decoration: none; + border-bottom: solid #729b78 0px; + transition: border-bottom 0.1s,font-size 0.7s; +} +nav a:hover{ + font-size: 1.6rem; + border-bottom: solid #729b78 2px; +} +nav a:visited{ + color: #729b78; + text-decoration: none; +} + +a{ + color: #729b78; + transition: color 0.5s; +} +a:visited{ + color: #729b78; +} +a:hover{ + color: black; +} + +.columns{ + display: flex; + flex-direction: row; + gap: 10px; + justify-content: space-between; +} + +.rows{ + display: flex; + flex-direction: column; + gap: 10px; + align-content: stretch; +} + +#contact{ + text-align: center; +} + +.socials{ + display: flex; + flex-direction: row; + justify-content: center; + padding: 0 10% 0 10%; +} + +.socials img{ + width: 100px; + height: 100px; +} + +main .socials{ + margin: auto; +} + +.gallery{ + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.gallery figure{ + width: 200px; + height: 250px; + background-color: white; + + transition: transform 0.5s; +} + +.gallery figure:hover:not(.maximised){ + 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; +} +.font_scaler button{ + background: none; + background-color: white; + border: none; + margin-left: 10px; + padding: 5px; + transition: background-color 0.5s; +} +.font_scaler img{ + width: 70px; + height: 70px; +} + +.font_scaler button::hover, .font_scaler img::hover{ + background-color: grey; +} + +@media screen and (max-width:1000px){ + + + .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{ + width: 90vw; + font-size:2rem; + } + + + nav a{ + font-size: 2.5rem; + color: #729b78; + text-decoration: none; + border-bottom: solid #729b78 0px; + transition: border-bottom 0.1s,font-size 0.7s; + } + nav a:hover{ + font-size: 2.6rem; + border-bottom: solid #729b78 2px; + } + + .gallery figure{ + width: 350px; + height: 400px; + } +} diff --git a/wallpaper.kra b/wallpaper.kra new file mode 100644 index 0000000..1c25db9 Binary files /dev/null and b/wallpaper.kra differ diff --git a/wallpaper.png b/wallpaper.png new file mode 100644 index 0000000..b63fa84 Binary files /dev/null and b/wallpaper.png differ