Menu
[B]I was wondering if anyone could help me with this assignment
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>CSS3 Multiple Backgrounds and Media Queries</title>
<!– This page uses CSS3’s multiple backgrounds to position two images on the page.
The embedded style uses media queries to find the width of the user’s viewport.
Based on the viewport width the background color and the position of one of the images will change.
YOUR CHALLANGE: Add to the style provided to create a unique looking page when the viewport is atleast 400px. Add another statement for viewports that are 960px or more. Test your results in multiple browsers. Validate both the HTML and CSS.
–>
<style type=”text/css”>
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
min-height: 100%;
}
.container {
min-height:100%;
}
#expander {
height:500px;
}
@media all and (min-width: 200px) { /*/
.container {
background-color: #C6F6FF;
background-image: url(images/grassyknoll.png), url(images/sun.png);
background-position: bottom left, top left;
background-repeat: repeat-x, no-repeat;
}
}
@media all and (min-width: 640px) { /*/
.container {
background-color: #6CF;
background-image: url(images/grassyknoll.png), url(images/sun.png);
background-position: bottom left, center center;
background-repeat: repeat-x, no-repeat;
}
}
@media all and (min-width: 800px) { /*/
.container {
background-color: #09F;
background-image: url(images/grassyknoll.png), url(images/sun.png);
background-position: bottom left, bottom right;
background-repeat: repeat-x, no-repeat;
}
}
.cloud {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
background-color: #FFF;
margin: 20px 40px;
padding: 20px;
float: right;
-moz-border-top-left-radius: 10px 50px; /*/
-moz-border-top-right-radius:10px 50px;
-moz-border-bottom-right-radius:10px 50px;
-moz-border-bottom-left-radius:10px 50px;
border-top-left-radius: 50px 50px; /*/
border-top-right-radius:50px 50px;
border-bottom-right-radius:50px 50px;
border-bottom-left-radius:50px 50px;
min-width:100px;
max-width:400px;
min-height: 100px;
overflow:hidden;
background-image: -webkit-gradient( /
linear,
left top,
right bottom,
color-stop(0.06, rgb(51,78,102)),
color-stop(0.22, rgb(173,216,230)),
color-stop(0.72, rgb(252,252,252))
);
background-image: -moz-linear-gradient( /* This is the Mozilla variation of the same gradient. With these settings the gradient looks a bit purple, change the colors to make the bottom of the “cloud” more yellow-gray. Can you make the gradient mover from top right to bottom left?
linear, right top, left bottom,
rgb(185,186,134) 6%,
rgb(195,200,224) 22%,
rgb(252,252,252) 72%
);
opacity:0.8;
filter:alpha(opacity=80);
}
.cloud p {
margin: 0px;
padding: 10px 20px;
font-size: 1.5em;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”cloud”>
<p>Use CSS3’s rounded corners and gradient to make this area more cloud-like and less purple. </p>
</div>
<p id=”expander”> </p>
</div>
</body>
</html>