The show I chose for the "TV. Show.pdf" washttps://www.google.com/search?q=blood+and+water&rlz=1C1UEAD_enUS928US928&sxsrf=ALeKk019IWa8lDOxuHwut-M4md62gHnhzQ:1621104170708&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiG4fPRq8zwAhVhhOAKHb9aCX8Q_AUoA3oECAEQBQ&biw=1536&bih=754
the starter code is on the pdfs I use Atom
Creator: Aaron Sorkin Cast: Martin Sheen, Rob Lowe, Allison Janney, John Spencer, Bradley Whitford, Janel Moloney, Richard Schiff, Dulé Hill, NiCole Robinson, Melissa Fitzgerald, Joshua Malina, Stockard Channing, Kim Webster, Kris Murphy, Timothy Davis-Reed Genres: Political TV Shows, TV Dramas This powerful political epic chronicles the triumphs and travails of White House senior staff under the administration of President Josiah Bartlet. WATCH About Episodes More like this 2015, TV-14, 7 Seasons Experience the inner workings of the White House in this innovative drama series created by producer Aaron Sorkin. Brilliant United States President Josiah Bartlet's folksy charm and country-lawyer charisma complement his deep conviction and his devotion to what he believes is right for the country. © 2020 Cool Shows Entertainment The West Wing This powerful political epic chronicles the triumphs and travails of White House senior staff under the administration of President Josiah Bartlet. WATCH About Episodes More like this © 2020 Cool Shows Entertainment 1. Pilot The senior members of the White House staff are summoned to the office early in the morning to handle several difficult situations. 5. The Crackpots and These Women Leo assigns his senior staff the task of conducting private meetings with fringe groups that want attention from the White House. 2. Post Hoc, Ergo Propter Hoc Leo hires Mandy as a consultant to the president. Vice President Hoynes rebuffs C.J. when she tries to discuss a comment he made. 6. Mr. Willis of Ohio A mentally unbalanced woman with a gun climbs the White House fence. The Secret Service foils her plan to target Zoey. 3. A Proportional Response When Danny, a reporter, learns about Sam's relationship with a call girl, he doesn't write a story about it because C.J. gives Danny a bigger lead. 7. The State Dinner The president and first lady host a tense dinner at the White House honoring the president of Indonesia and his wife. Danny flirts with C.J. 4. Five Votes Down The staff has 72 hours to rescue a gun-control bill that needs five more votes in Congress to pass. 8. Enemies The president embarrasses Hoynes during a meeting. In order to keep the story from print, C.J. arranges a meeting between Danny and the president. Episodes Season 1 MMP 240 WEB DESIGN KAISAR PRACTICE EXERCISE 9 Basic Grid Layout CSS Grid Layout is a powerful layout system that can handle both columns and rows. To set up a grid layout, change an element’s display to grid to establish a grid container. Its direct children become grid items. In the code below the layout div is set up as a grid container and its direct children, divs one, two, three, four and five its grid items.
#layout { display: grid; } YOUR TASK In this exercise you will use CSS grid to create the layout on the right. This layout has 3 rows and 3 columns with two elements, the top and bottom elements, each spanning three columns. STEPS 1. Start with this starter code, which includes all the HTML code and few styles. Do not change the HTML code. 2. The HTML code contains a div with the class layout. Set it as the grid container by giving it display: grid; Its direct children are now grid items. 3. Use the grid-template-rows and grid-template-columns to set the grid container with 3 rows and 3 columns: grid-template-rows: auto auto auto; grid-template-columns: 32% 32% 32%; https://github.com/revitalk/mmp240-fall20/blob/master/exercise10/exercise10.html MMP 240 WEB DESIGN KAISAR The values of the grid-template-rows property are the heights of the rows. The number of values is the number of rows in the grid. The heights can be set in pixels, em, percentages and more. The auto value will set the row height to the height of the content The values of the grid-template-columns property are the width of the columns. The number of values is the number of columns in the grid. The widths can be set in pixels, em, percentages and more. 4. Preview in the browser- the grid items (divs one, two, three, four and five) are now arranged in the cells of the grid. 5. The first and last grid items (divs one and five) should span an entire row, or in CSS grid term, an entire track. Style these grid items with the properties grid-column- start and grid grid-column-end to tell the browser where these grid items should be placed in the grid. grid-column-start: 1; grid-column-end: 4; The numbers refer to the numbers of the grid lines as shown in the image on the right. These properties are given to the grid items (divs one and five). 6. Your layout is now set. What is left is to add spacing (called gutters) between the grid items. Use the properties: grid-row-gap and grid-column-gap to add spacing between the rows and columns, respectively. Values can be pixels, percentages, ems and more. grid-row-gap: 2%; grid-column-gap: 1em; These properties are given to the grid container (layout div). 7. Preview in the browser. Your layout is complete. To submit: Upload to your GitHub repository and submit a link in BlackBoard. MMP 240 WEB DESIGN KAISAR PRACTICE EXERCISE 8 Media Queries CSS Media queries make responsive web design possible, allowing developers to apply different styles to different kinds and sizes of viewports. A media query is a special rule that tests for certain conditions before applying the styles it contains. This is the general syntax: @media type and (feature: value) { /* styles for browsers that meet these criteria */ } The type can be screen, print, speech, or all. The default is screen, and when this is the type, it can be left out. The feature: value is the condition being tested. In this example the font size for the h1 will only apply to viewports with width of 768px or larger. @media (min-width:768px) { .h1{ font-size: 2em; } } In the code above, 768px is the breakpoint- the point at which the design will change. YOUR TASK In this exercise you will use CSS media queries to make the horizontal navigation bar below adapts to smaller viewports. When the web page is viewed in viewports smaller that 768px, the navigation bar arrangement will be vertical and will look like the navigation bar on the right. STEPS 1. Start with this starter code, which includes the code for the horizontal menu bar. This menu bar looks good until it is viewed in viewport with width of about 768px or smaller. 2. At the bottom of the CSS code add a CSS media query for viewports width 768px and smaller: @media (max-width:768px) { } https://github.com/revitalk/mmp240-fall20/blob/master/exercise9/exercise9.html MMP 240 WEB DESIGN KAISAR You will add the styles for the mobile menu inside the curly brackets of the media query. 3. First, inspect the styles currently given to the menu items. These are the li elements nested inside the nav element ( nav li). Their display is inline, which is the reason they are arranged horizontally. 4. Inside the media query, change their display to block. Preview in the browser in the responsive design mode to see that the menu is vertical when the browser’s window width is 768px and under. 5. The horizontal menu items have a right border, which is not right for the vertical menu. Inside the media query remove the right border from the menu items (border-right:none). But give them instead a border on the bottom (for example: border-bottom: solid 1px #fff;). 6. Preview in the browser- the vertical menu items are too close to each other. Give them some padding to add some space between the text and the borders. 7. The border lines do not reach the edges of the vertical menu bar because the nav element has padding of 1em (line 24). Remove the padding of the nav element for viewports width 768px and smaller (inside the media query). 8. Preview in the browser. Your menu should be optimized now for two viewport width ranges- 768px and under (vertical), and above 768px (horizontal). 9. Do not change the HTML code. To submit: Upload to your GitHub repository and submit a link in BlackBoard.