css cleanup
This commit is contained in:
Rosia E Evans
parent
fdd4ba41c2
commit
c54bafaf2b
5 changed files with 46 additions and 196 deletions
|
|
@ -2,6 +2,9 @@
|
|||
|
||||
<head>
|
||||
<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>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
|
||||
<head>
|
||||
<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="fontScaler.js" defer></script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="effects.css">
|
||||
<link rel="stylesheet" href="fontScaler.css">
|
||||
<script src="fontScaler.js" defer></script>
|
||||
</head>
|
||||
|
||||
|
|
@ -16,22 +18,16 @@
|
|||
|
||||
<main class="white_backing">
|
||||
<h1>Services And Prices</h1>
|
||||
<h2>Overview</h2>
|
||||
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.
|
||||
<br><br>
|
||||
|
||||
<h2>Services not provided</h2>
|
||||
I do not provide ear plucking or teeth cleaning
|
||||
<br>
|
||||
I don’t take extra large dogs
|
||||
<br>
|
||||
Bad matting £15
|
||||
<br>
|
||||
Bad behavior £15
|
||||
<br>
|
||||
Cancellation or missed appointment £20
|
||||
<br>
|
||||
Fleas on your dog £20
|
||||
<br>
|
||||
|
||||
<h2>Services</h2>
|
||||
|
||||
|
|
@ -82,6 +78,14 @@
|
|||
</tr>
|
||||
</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>
|
||||
<ul style="text-align: left;"">
|
||||
<li>Dog walking: £10 an hr</li>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
|
||||
<head>
|
||||
<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>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
211
style.css
211
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue