Create a banner such as the type demonstrated on the module page. This should be
ID: 3728946 • Letter: C
Question
Create a banner such as the type demonstrated on the module page. This should be styled with CSS, and the CSS for the banner should be maintained in its own file Remember that this is not a banner that simply uses an image, but multi-element HTML that relies significantly on CSS. Your banner should (at a minimum) have at least three distinct blocks of information across the top of your page. use div elements and classes to style your information blocks (see the CSS tables appearance, box, and background examples as guidelines) use an external style sheet just for the banner, so that the banner can be used on different pages use different colors or background images use at least one image have the course name (and any other distinguishing information you would like) 2
Explanation / Answer
Please keep the below code in the html file and open it with the browser.
<div class="mommy">
<div class="divg">
<div class="div1"><img src="http://www.webforward.ca/mydev/geeky-html5-guy.png" /></div>
<div class="div2">
<h1>jQuery is a new<br /> JavaScript Library.</h1>
<h3>Fast and concise JavaScript Library that simplifies HTML document traversing, event handling and animating development.</h3>
<button class="button" role="button">Click Me</button>
</div>
</div>
</div>
<style>
.mommy { width:670px; height:236px; border: 1px solid #777; }
.divg { width:100%; float:left;}
.div1 { width: 40%; float:left; }
.div2 { width: 60%; float:left; margin-top:20px; }
h1 { color: orange; font-size: 2.2em; line-height: 1.1; }
h3 { color: gray; font-size: 1.3em; line-height: 1.1; }
.jscall1 { display:none; }
.jscall2 { display:block; }
.button {
border: 1px solid #DDD;
border-radius: 3px;
text-shadow: 0 1px 1px white;
-webkit-box-shadow: 0 1px 1px #fff;
-moz-box-shadow: 0 1px 1px #fff;
box-shadow: 0 1px 1px #fff;
font: bold 11px Sans-Serif;
padding: 6px 10px;
white-space: nowrap;
vertical-align: middle;
color: #666;
background: transparent;
cursor: pointer;
margin-top:9px;
}
.button:hover, .button:focus {
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
border: 1px solid #AAA;
border-bottom-color: #CCC;
border-top-color: #999;
-webkit-box-shadow: inset 0 1px 2px #aaa;
-moz-box-shadow: inset 0 1px 2px #aaa;
box-shadow: inset 0 1px 2px #aaa;
background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
background: -moz-linear-gradient(top, #E6E6E6, gainsboro);
background: -ms-linear-gradient(top, #E6E6E6, gainsboro);
background: -o-linear-gradient(top, #E6E6E6, gainsboro);
}
.button:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid #999;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
margin: 0 0 0 4px;
position: relative;
top: -1px;
}
.button:hover:after {
border-top-color: black;
}
</style>