Services And Prices
+Overview
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.
+ +
Services not provided
I do not provide ear plucking or teeth cleaningI don’t take extra large dogs
- Bad matting £15 -
- Bad behavior £15 -
- Cancellation or missed appointment £20 -
- Fleas on your dog £20 -
Services
@@ -82,6 +78,14 @@ +Extra costs
+-
+
- Bad matting £15 +
- Bad behavior £15 +
- Cancellation or missed appointment £20 +
- Fleas on your dog £20 +
Additional Services
- Dog walking: £10 an hr diff --git a/index.html b/index.html index ae4455b..5fa8860 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,9 @@ + + + diff --git a/style.css b/style.css index bf994a2..8def51c 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,4 @@ -root{ +:root{ --text: #729b78; --backing: white; } @@ -6,11 +6,11 @@ root{ body{ background-image: url("wallpaper.png"); background-size: 250px; - color: #729b78; + color: var(--text); } header, article, section{ - background-color: white; + background-color: var(--backing); padding: 10px; border-radius: 0 0 0px 0px; } @@ -24,29 +24,16 @@ main{ text-align: center; } -table{ - margin: auto; - width: 80%; -} - - -.white_backing{ - background-color: white; -} - -.hover_rotate{ - transition: transform 0.25s; -} -.hover_rotate:hover{ - transform: rotate(5deg); -} +/* +NAV BAR +*/ nav{ display:flex; flex-direction: row; justify-content: center; - background-color: white; - color: #729b78; + background-color: var(--backing); + color: var(--text); font-size: 1.5rem; gap: 20px; @@ -56,149 +43,34 @@ nav{ nav a{ font-size: 1.5rem; - color: #729b78; + color: var(--text); text-decoration: none; - border-bottom: solid #729b78 0px; + border-bottom: solid var(--text) 0px; transition: border-bottom 0.1s,font-size 0.7s; } nav a:hover{ font-size: 1.6rem; - border-bottom: solid #729b78 2px; + border-bottom: solid var(--text) 2px; } nav a:visited{ - color: #729b78; + color: var(--text); text-decoration: none; } -a{ - 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{ +table{ margin: auto; + width: 80%; } -.gallery{ - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; +.white_backing{ + background-color: var(--backing); } -.gallery figure{ - width: 200px; - height: 250px; - background-color: white; - - transition: transform 0.5s; +.hover_rotate{ + transition: transform 0.25s; } - -.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; - 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; +.hover_rotate:hover{ + transform: rotate(5deg); } @media screen and (max-width:1000px){ @@ -214,43 +86,13 @@ main .socials{ /* 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{ - background-color: white; + background-color: var(--backing); padding: 10px; padding-bottom: 20px; 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{ width: 90vw; font-size:2rem; @@ -259,18 +101,13 @@ main .socials{ nav a{ font-size: 2.5rem; - color: #729b78; + color: var(--text); text-decoration: none; - border-bottom: solid #729b78 0px; + border-bottom: solid var(--text) 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; + border-bottom: solid var(--text) 2px; } }