API tools faq
paste
HTML

howard-moviefavs.html

HTML
Nov 18th, 2016
156
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 12.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="style.css" type="text/css">
  6. <title>Howard - Movie Favorites</title>
  7. <style>
  8. /* #FFF white */
  9. /* #4095BF lt. blue */
  10. /* #1F4D5C dk. blue */
  11. /* #63D968 lt. green */
  12. /* #186100 dk. green */
  13. body { /* General body styling */
  14.             background-color:#FFF;
  15. }
  16. div#wrapper { /* Content holder (box inside the body) styling */
  17.             background-color:#FFF;
  18.             width:80%;
  19.             max-width:1600px;
  20.             min-width:1024px;
  21.             margin-left:auto;
  22.             margin-right:auto;
  23. }
  24. sup { /* Superscript text */
  25.             font-size:.5em;
  26.             color:#4095BF;
  27. }
  28. sub { /* Subscript text */
  29.             font-size:1.25em;
  30.             color:#4095BF;
  31. }
  32. h1,h2 { /* Style for outside-the-table headers */
  33.             color:#4095BF;
  34.             font-size:2.5em;
  35.             margin:10px;
  36.             font-family:"Comic Sans MS", cursive, sans-serif;
  37. }
  38. caption { /* Styling for the captions above the tables */
  39.             font-size:1.75em;
  40. }
  41. table { /* Styling for the tables together */
  42.             border-style:solid;
  43.             border-width:2px;
  44.             border-collapse:collapse;
  45.             font-size:1.25em;
  46.             margin:10px;
  47. }
  48. table#other { /* Styling for the first table */
  49.             border-color:#1F4D5C;
  50.             color:#4095BF;
  51.             width:100%;
  52. }
  53. table#myself { /* Styling for the second table */
  54.             border-color:#186100;
  55.             color:#73D968;
  56.             width:100%;
  57. }
  58. td { /* Styling for table cells / tabledata */
  59.             width:300px;
  60.             height:50px;
  61.             border-style:solid;
  62.             border-width:2px;
  63.             padding:10px;
  64.             font-family:"Arial Narrow", sans-serif;
  65.             background:#EEE;
  66. }
  67. span.notseen { /* Styling for movie titles that I have not yet seen */
  68.             color:#FFF;
  69.             background-color:#4095BF;
  70.             padding:2px;
  71. }
  72. span.seen { /* Styling for movie titles that I have seen */
  73.             border:2px solid #4095BF;
  74.             padding:2px;
  75. }
  76. th { /* Styling for the headers together */
  77.             font-family:"Comic Sans MS", cursive, sans-serif;
  78.             border-style:solid;
  79.             border-width:2px;
  80. }
  81. th.other { /* Styling for the first table's headers */
  82.             color:#FFF;
  83.             background-color:#1F4D5C;
  84. }
  85. th.myself { /* Styling for the second table's headers */
  86.             color:#FFF;
  87.             background-color:#186100;
  88. }
  89. td.name,td.genre { /* Styling for the left-most column */
  90.             text-align:center;
  91.             font-size:1.5em;
  92.             width:200px;
  93. }
  94. td.movie { /* Styling for the movie-title column */
  95.             text-align:center;
  96.             font-size:1.5em;
  97. }
  98. td.description { /* Styling for the movie description column */
  99.             font-style:italic;
  100.             font-size:.75em;
  101. }
  102. td.url { /* Styling for the url containers used on the second table */
  103.             width:175px;
  104. }
  105. a { /* Styling for the URLs used on the second table */
  106.             color:#73D968;
  107. }
  108. footer { /* Styling for the footer */
  109.             border:2px solid #1F4D5C;
  110.             width:100%;
  111.             padding:10px;
  112.             background:#EEE;
  113. }
  114. img#colors { /* Image styling */
  115.             text-align:center;
  116.             margin:15px;
  117.             width:900px;`
  118.             border:2px solid #1F4D5C;
  119. }
  120. p,sub { /* Paragraph styling */
  121.             color:#4095BF; 
  122.             font-family:"Arial Narrow", sans-serif;
  123.             font-size:1.40em;
  124. }
  125. caption { /* Styling for the table captions (above the table) */
  126.             font-family:"Comic Sans MS", cursive, sans-serif;
  127. }
  128. th#ch1,th#ch2,th#lh1,th#lh2{
  129.             border-right:2px solid #FFF;
  130. }
  131. header { /* Header styling at the top of the page */
  132.             background:#DDD;
  133.             padding:10px;
  134.             border:2px solid #1F4D5C;
  135. }
  136. </style>
  137. </head>
  138. <body>
  139. <div id="wrapper" align="center">
  140. <header align="center">
  141. <h1>Movie Favorites Lab</h1>
  142. <sub><span class="notseen">Highlighted movies I have not seen</span>, <span class="seen">outlined movies I have seen</span>.</sub>
  143. </header>
  144. <main>
  145. <table border="1" id="other">
  146. <!-- Caption above the table -->
  147. <caption>Students' favorite movies</caption>
  148.     <tr>
  149.     <!-- Column Headers -->
  150.         <th class="other" id="lh1">Name</th>
  151.         <th class="other" colspan="2">Title / Description</th>
  152.     </tr>
  153.     <tr>
  154.         <td class="name" rowspan="3">Jordan</td>
  155.         <td class="movie"><span class="notseen">Pirates of the Caribbean</span></td>
  156.         <td class="description">
  157.         Director: Gore Verbinski<br>
  158.         Leading actor: Johnny Depp<br>
  159.         Rating: PG-13
  160.         </td>
  161.     </tr>
  162.     <tr>
  163.         <td class="movie"><span class="notseen">Capt. America - Civil War</span></td>
  164.         <td class="description">
  165.         Directors: Anthony Russo, Joe Russo<br>
  166.         Leading actor: Chris Evans<br>
  167.         Rating: PG-13
  168.         </td>
  169.     </tr>
  170.     <tr>
  171.         <td class="movie"><span class="seen">Deadpool</span></td>
  172.         <td class="description">
  173.         Director: Tim Miller<br>
  174.         Leading actor: Ryan Renolds<br>
  175.         Rating: R
  176.         </td>
  177.     </tr>
  178.     <tr>
  179.         <td class="name" rowspan="3">Kolton</td>
  180.         <td class="movie"><span class="seen">Deadpool</span></td>
  181.         <td class="description">
  182.         Director: Tim Miller<br>
  183.         Leading actor: Ryan Renolds<br>
  184.         Rating: R
  185.         </td>
  186.     </tr>
  187.     <tr>
  188.         <td class="movie"><span class="seen">Suicide Squad</span></td>
  189.         <td class="description">
  190.         Director: David Ayer<br>
  191.         Leading actor: Will Smith<br>
  192.         Rating: PG-13
  193.         </td>
  194.     </tr>
  195.     <tr>
  196.         <td class="movie"><span class="seen">Batman - Dark Night Rises</span></td>
  197.         <td class="description">
  198.         Director: Christopher Nolan<br>
  199.         Leading actor: Christian Bale<br>
  200.         Rating: PG-13
  201.         </td>
  202.     </tr>
  203.     <tr>
  204.         <td class="name" rowspan="3">Christian</td>
  205.         <td class="movie"><span class="seen">Deadpool</span></td>
  206.         <td class="description">
  207.         Director: Tim Miller<br>
  208.         Leading actor: Ryan Reynolds<br>
  209.         Rating: R
  210.         </td>
  211.     </tr>
  212.     <tr>
  213.         <td class="movie"><span class="seen">TMNT (2006)</span></td>
  214.         <td class="description">
  215.         Director: Kevin Munroe<br>
  216.         Leading actor: Patrick Stewart<br>
  217.         Rating: PG
  218.         </td>
  219.     </tr>
  220.     <tr>
  221.         <td class="movie"><span class="notseen">Bridge to Terabithia</span></td>
  222.         <td class="description">
  223.         Director: Gabor Csupo<br>
  224.         Leading actor: Josh Hutcherson<br>
  225.         Rating: PG
  226.         </td>
  227.     </tr>
  228.     <tr>
  229.         <td class="name" rowspan="3">Gabriel</td>
  230.         <td class="movie"><span class="notseen">Untergang</span></td>
  231.         <td class="description">
  232.         Director: Oliver Hirshbiegel<br>
  233.         Leading actor: Bruno Ganz<br>
  234.         Rating: R
  235.         </td>
  236.     </tr>
  237.     <tr>
  238.         <td class="movie"><span class="notseen">Fury</span></td>
  239.         <td class="description">
  240.         Director: David Ayer<br>
  241.         Leading actor: Brad Pitt<br>
  242.         Rating: R
  243.         </td>
  244.     </tr>
  245.     <tr>
  246.         <td class="movie"><span class="seen">The Spongebob Movie</span></td>
  247.         <td class="description">
  248.         Directors: Stephen Hillenburg, Mark Osborne<br>
  249.         Leading actor: Jeffrey Tambor<br>
  250.         Rating: PG
  251.         </td>
  252.     </tr>
  253. </table>
  254. </td>
  255. <table border="1" id="myself">
  256. <!-- Caption above the table -->
  257. <caption>My favorite movies</caption>
  258.     <tr>
  259.     <!-- Column headers -->
  260.     <th class="myself" id="lh2">Genre</th>
  261.     <th class="myself" colspan="3">Title / Description / link</th>
  262.     <tr>
  263.         <td class="genre" rowspan="3">Adventure</td>
  264.         <td class="movie">Suicide Squad</td>
  265.         <td class="description">
  266.         Director: David Ayer<br>
  267.         Leading actor: Will Smith<br>
  268.         Rating: PG-13
  269.         <hr>
  270.         Suicide Squad is a movie about the world's most dangerous, incercerated super villains coming together as one, providing them with the most powerful arsenal at the government's disposal, and send them off on a mission to defeat an enigmatic, insuperable entity.
  271.         </td>
  272.         <td class="url"><a href="http://www.imdb.com/title/tt1386697/?ref_=nv_sr_1" target="_blank">
  273.         Suicide Squad on IMDB</a></td>
  274.     </tr>
  275.     <tr>
  276.         <td class="movie">Sausage Party</td>
  277.         <td class="description">
  278.         Directors: Greg Tiernan, Conrad Vernon<br>
  279.         Leading actor: Seth Rogen<br>
  280.         Rating: R
  281.         <hr>
  282.         The products at Shopwell's Grocery Store are made to believe a code that helps them live happy lives until it's time for them to leave the comfort of the supermarket and head for the great beyond.
  283.         </td>
  284.         <td class="url"><a href="http://www.imdb.com/title/tt1700841/?ref_=nv_sr_1" target="_blank">
  285.         Sausage Party on IMDB</a></td>
  286.     </tr>
  287.     <tr>
  288.         <td class="movie">Zootopia</td>
  289.         <td class="description">
  290.         Directors: Byron Howard, Rich Moore<br>
  291.         Leading actress: Ginnifer Goodwin<br>
  292.         Rating: PG
  293.         <hr>
  294.         From the largest elephant to the smallest shrew, the city of Zootopia is a mammal metropolis where various animals live and thrive.
  295.         </td>
  296.         <td class="url"><a href="http://www.imdb.com/title/tt2948356/?ref_=nv_sr_1" target="_blank">
  297.         Zootopia on IMDB</a></td>
  298.     </tr>
  299.     <tr>
  300.         <td class="genre" rowspan="3">Drama</td>
  301.         <td class="movie">Snowden</td>
  302.         <td class="description">
  303.         Director: Oliver Stone<br>
  304.         Leading actor: joseph Gordon-Levitt<br>
  305.         Rating: R
  306.         <hr>
  307.         The script is based on the books The Snowden Files: The Inside Story of the World's Most Wanted Man by Luke Harding and Time of the Octopus by Anatoly Kucherena.
  308.         </td>
  309.         <td class="url"><a href="http://www.imdb.com/title/tt3774114/?ref_=nv_sr_1" target="_blank">
  310.         Snowden on IMDB</a></td>
  311.     </tr>
  312.     <tr>
  313.         <td class="movie">Captain Fantastic</td>
  314.         <td class="description">
  315.         Director: Matt Ross<br>
  316.         Leading actor: Viggo Mortensen<br>
  317.         Rating: R
  318.         <hr>
  319.         Ben and Leslie Cash have long lived largely off the grid with their offspring - Bodevan, Kielyr, Vespyr, Rellian, Zaja and Nai - in a cabin in the mountains of Washington state. The parents have passed their ideals to their children, namely socialism (in its various forms) and survivalism.
  320.         </td>
  321.         <td class="url"><a href="http://www.imdb.com/title/tt3553976/" target="_blank">
  322.         Captain Fantastic on IMDB</a></td>
  323.     </tr>
  324.     <tr>
  325.         <td class="movie">It</td>
  326.         <td class="description">
  327.         Director: Director: Andrés Muschietti<br>
  328.         Leading actor: Leading actor: Bill Skarsgård<br>
  329.         Rating: Not yet rated by the ESRB
  330.         <hr>
  331.         In the Town of Derry, the local kids are disappearing one by one, leaving behind torn body parts/remains. In a place known as 'The Barrens', a group of seven kids are united by their horrifying and strange encounters with a clown called Pennywise.
  332.         </td>
  333.         <td class="url"><a href="http://www.imdb.com/title/tt1396484/" target="_blank">
  334.         It on IMDB</a></td>
  335.     </tr>
  336.     <tr>
  337.         <td class="genre" rowspan="3">Comedy</td>
  338.         <td class="movie">Back to the Future Pt I</td>
  339.         <td class="description">
  340.         Director: Robert Zemeckis<br>
  341.         Leading actor: Michael J. Fox<br>
  342.         Rating: PG
  343.         <hr>
  344.         Marty McFly, a typical American teenager of the Eighties, is accidentally sent back to 1955 in a plutonium-powered DeLorean "time machine" invented by a slightly mad scientist. During his often hysterical, always amazing trip back in time, Marty must make certain his teenage parents-to-be meet and fall in love - so he can get back to the future.
  345.         </td>
  346.         <td class="url"><a href="http://www.imdb.com/title/tt0088763/?ref_=tt_rec_tt" target="_blank">
  347.         Back to the Future Pt I on IMDB</a></td>
  348.     </tr>
  349.     <tr>
  350.         <td class="movie">Back to the Future Pt II</td>
  351.         <td class="description">
  352.         Director: Robert Zemeckis<br>
  353.         Leading actor: Michael J. Fox<br>
  354.         Rating: PG
  355.         <hr>
  356.         Marty McFly has only just gotten back from the past, when he is once again picked up by Dr. Emmett Brown and sent through time to the future. Marty's job in the future is to pose as his own son to prevent him from being thrown in prison. Unfortunately, things get worse when the future changes the present.
  357.         </td>
  358.         <td class="url"><a href="http://www.imdb.com/title/tt0096874/?ref_=tt_rec_tt" target="_blank">
  359.         Back to the Future Pt II on IMDB</a></td>
  360.     </tr>
  361.     <tr>
  362.         <td class="movie">Back to the Future Pt III</td>
  363.         <td class="description">
  364.         Director: Robert Zemeckis<br>
  365.         leading actor: Michael J. Fox<br>
  366.         Rating: PG
  367.         <hr>
  368.         Stranded in 1955, Marty McFly receives written word from his friend, Doctor Emmett Brown, as to where can be found the DeLorean time machine. However, an unfortunate discovery prompts Marty to go to his friend's aid. Using the time machine, Marty travels to the old west where his friend has run afoul of a gang of thugs and has fallen in love with a local schoolteacher. Using the technology from the time, Marty and Emmett devise one last chance to send the two of them back to the future.
  369.         </td>
  370.         <td class="url"><a href="http://www.imdb.com/title/tt0099088/?ref_=adv_li_tt" target="_blank">
  371.         Back to the Future Pt III on IMDB</a></td>
  372.     </tr>
  373. </table>
  374. </main>
  375. <h2>Style Guide</h2>
  376. <footer>
  377. <p>
  378. This site uses a small variation of colors and typefaces. On this webpage, I used two fontfaces; Comic Sans MS and Arial Narrow, respectively. The colors are listed in the image below;
  379. <img src="colors.PNG" id="colors"><br>
  380. I used the "lighter" colors mostly for text, and the darker colors are used for the borders and the table header backgrounds on the tables.<br>
  381. Site for sources / research: <a href="http://www.imdb.com/genre/?ref_=nv_ch_gr_3" target="_blank">IMDB</a>
  382. </p>
  383. </footer>
  384. <p align="center">Copyright &copy; Jacob Howard 2016</p>
  385. </div>
  386. </body>
  387. </html>
Advertisement
Comments
  • User was banned
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!