CSS Media Queries
August 1st, 2016
This is the file that needs to be corrected or modified:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8″ />
<style>type=”text/css”
th {color:blue}
table {color:purple}
p {color:blue; font-family: fantasy; font-size:15pt;}
td {color:brown}
h1 {color:blue; font-family: cursive font-style: italic}
</style>
<title>The Fault in Our Stars</title>
<h2>The Fault in Our Stars</h2>
<hr>
<h3>Featuring:</h3>
<table summary=”cast table” border=”3″ cellpadding=”15″ cellspacing=”15″>
<tr>
<th>Augustus Waters </th>
<td>Ansel Elgort</td>
</tr>
<tr>
<th>Hazel Grace Lancaster</th>
<td>Shailene Woodley</td>
</tr>
<tr>
<th>Peter Van Houten</th>
<td>Willem Dafoe</td>
</tr>
<tr>
<th>Lidewij Vligenthart</th>
<td>Lotte Verbeek</td>
</tr>
<tr>
<th>Issac </th>
<td>Nat Wolff</td>
</tr>
</table>
</head>
<div>
<h3>Summary:</h3>
Hazel and Gus are two teenagers who share a love that sweeps them on a journey. Their relationship
is all the more miraculous given that Hazel’s other constant companion is an oxygen tank,
Gus’s companion is his prosthetic leg, and they met and fell in love at a cancer support group.
<br>
<br>
<body>
<div>
<embed width=”420″ height=”315″
src=”http://www.youtube.com/watch?v=AuVjGbncgQE”>
<br>
<img alt=”Fault” width=”200″ src=”http://bookshopblog.com/wp-content/uploads/2014/06/fault-in-our-stars.jpg” alt=”” usemap=”#map” />
<map name=”map”>
<area shape=”poly” coords=”82, 257, 83, 366, 232, 419, 209, 158″ />
<area shape=”rect” coords=”320, 76, 447, 423″ />
<area shape=”circle” coords=”104, 100, 59″ />
</map>
</div>
<div>
<h3>Synopsis</h3>
<dd>
In The Fault In Our Stars, two teens who met at a cancer support group fall in love. The </br>
main characters are Hazel and Augustus. Augustus has a prosthetic leg and Hazel Grace</br>
is on an air tank. Their unfortunate characterisstics are what brings them together. Augustus,<br>
seeing Hazel has a limited time to live, makes her dream come true by taking her on a trip to meet<br>
her favorite author.Once she acquaints herself with him she is far less impressed with him.<br> He is a
drunk and rude man who doesn’t care how far Hazel and Augustus traveled to meet him.
</dd>
<h3>Review</h3>
<dd>
If you’re looking for a movie with a plot twist, a tear-jerker, and a romantic comedy then look no more, this movie is perfect. <br> I loved this movie and was dead-set on losing Hazel at the end of the film, but to
my surprise, Augustus dies instead. <br>
Girls will go head over heels for this movie, because it makes you think about how fortunate
we are each and every day we have on this earth.
</dd>
<h3>Showtimes</h3>
<table summary=”show times table” border=”3″ cellpadding=”15″ cellspacing=”15″>
<tr>
<th><a href=”http://www.regmovies.com/Theatres/Theatre-Folder/Regal-Hollywood-Stadium-24-North-I-85-1552″>Regal Hollywood Stadium 24</a></th>
<td> Monday, October 27 at 4:00 P.M, 8:00 P.M <br> Wednesday, October 29 at 12:00 P.M, 5:30 P.M </td>
</tr>
<tr>
<th><a href=”https://www.amctheatres.com/movie-theatres/amc-north-dekalb-mall-16″>AMC North Dekalb Mall</a></th>
<td>Tuesday, October 28 at 10:00 A.M, 2:00 P.M, 9:45 P.M <br>Thursday, October 30 at 6:00 P.M, 11:10 P.M </td>
</tr>
<tr>
<th><a href=”https://www.amctheatres.com/movie-theatres/amc-phipps-plaza-14″>AMC Phipps Plaza</a></th>
<td> Friday, October 31 at 3:00 P.M, 7:20 P.M <br> Saturday, November 1 at 11:20 A.M, 2:45 P.M </td>
</tr>
</table>
</div>
<br>
<div>
<h3>Contact</h3>
<table summary=”contact table” border=”3″ cellpadding=”15″ cellspacing=”15″>
<tr>
<th>Phone number:</th>
<td>404-225-4449</td>
</tr>
<tr>
<th>Email Address:</th>
<td>fakeemail@gmail.com</td>
</tr>
<tr>
<th>Address:</th>
<td>P. Sherman 42 Wallaby Way Sydney</td>
</tr>
</table>
</div>
</div>
</body>
</html>
And these are the instructions!
For this project, you will modify the moviecss.html file from CSS Project 1:
Modifications:
●Enclose the existing CSS definitions in an @media rule for a “large” screen device, such as a tablet or desktop. You may choose your own min-width parameter, but make sure it would be suitable for a larger device.
●Add a second @media rule plus associated CSS definitions for a “small” screen device, such as a smartphone. You may choose your own min-width parameter, but make sure it would be suitable for a smaller device.
●Adjust the sizes and colors of all CSS properties that you used in the first CSS project, to create a readable display on a small screen device. All previously used properties must be rewritten to display reasonable on a smaller screen, except the <iframe>, which must be hidden
●Remove all HTML attributes for the <table> element and restyle it using CSS instead. Your file must validate with no errors after this is requirement is completed.
●Add at least one contextual selector in each @media rule.
●Add at least two HTML Entities to the file (may be used anywhere, but should be obvious).
●Do not use inline styles. Styles added via <span> tags must be created with class selectors.
Be consistent! Use colors and fonts that complement each other to give a professional, polished look to the page.
Make it readable! Put each attribute on a separate line and use proper indentation
Validation:
All HTML and CSS must validate via the “file upload” option of the W3C validation service at http://validator.w3.org/nu/. This includes validation for <table> elements
Note that HTML color names (such as black , navy , goldenrod , etc) do not validate, so use the rgb or #color numbers instead. You may use color names when creating and testing your styles, but you will need to change them to color numbers before completing the assignment. Several websites including http://www.w3schools.com/html/html_colornames.asp contain the #color numbers for the popular named colors, and of course you may use other colors besides those if you wish.
What to Turn In:
Turn in the completed .html file with the new style definitions in their proper location in the <head> section of the document .
Thank you very much all!
This is homework… your girlfriend will never learn if she doesn’t do it on her own (even with your help)
lol i know. she’s in her last 2 days of school and luckily i managed to figure it out! She took the class cause she thought she was gonna get an easy a but man did get harder after the first day lol.. So close the page? her code was hella messed up! haha took me hours to get it sorted out