Replace the background color of the body with a color gradient of your choice. Design a gradient that fits well with the other colors on the page. Refactor the other colors used to better match the background gradient you created.
body
{
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color:rgb(210,220,157);
background-image: url("/Users/332bo/Desktop/Week_9_Lab/images/blackgoose.png"); /* Rounded Shape image */
background-size: contain;
}
bgc { width: 200px;
height: 200px;
display: block;
position: relative;
}
bgc::after { content: "";
background: url(/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1; }
header
{
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
border-radius:4px;
background: url("/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png") repeat-y left top,
url("/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png") repeat-y right top,
url("/Users/332bo/Desktop/Week_9_Lab/images/gooseshadow.png") 90% bottom no-repeat;
background-color:hsl(0, 14%, 95%);
}
a
{
text-decoration: none;
color:rgb(153,51,153);
}
a:visited
{
color: hsl(300, 13%, 51%);
}
a:hover
{
background-color: #fff;
}
a:focus
{
background-color: #fff;
}
a:active{
color:#ff00ff;
}
h1
{
font: bold 1.5em Georgia, serif;
text-shadow: 0.1em 0.1em 0.2em gray;
color: rgb(153,51,153);
}
h2
{
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.5em;
text-align: center;
color:rgb(204,102,0);body
{
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background: rgb(210,220,157) url("/Users/332bo/Desktop/Week_9_Lab/images/blackgoose.png") center top left 30%
}
header
{
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
border-radius:4px;
background : hsl(0, 14%, 95%, 0.5) url("/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png") repeat-y center top left 5%,hsl(0, 14%, 95%, 0.5) url("/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png") repeat-y center top right 5%,hsl(0, 14%, 95%, 0.5) url("/Users/332bo/Desktop/Week_9_Lab/images/gooseshadow.png") no-repeat center bottom right 5%
}
a
{
text-decoration: none;
color:rgb(153,51,153);
}
a:visited
{
color: hsl(300, 13%, 51%);
}
a:hover
{
background-color: #fff;
}
a:focus
{
background-color: #fff;
}
a:active{
color:#ff00ff;
}
h1
{
font: bold 1.5em Georgia, serif;
text-shadow: 0.1em 0.1em 0.2em gray;
color: rgb(153,51,153);
}
h2
{
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.5em;
text-align: center;
color:rgb(204,102,0);
}
dt
{
font-weight: bold;
}
strong {
font-style: italic;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.price {
font-family: Georgia, serif;
font-style: italic;
}
h2 + p {
text-align: center;
font-style: italic;
}
}
dt
{
font-weight: bold;
}
strong {
font-style: italic;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
f
font-style: italic;
}
.price {
font-family: Georgia, serif;
font-style: italic;
}
h2 + p {
text-align: center;
font-style: italic;
}
Trending now
This is a popular solution!
Step by step
Solved in 3 steps
