diff --git a/case1/mi_pricing.html b/case1/mi_pricing.html new file mode 100644 index 0000000..e89f5c2 --- /dev/null +++ b/case1/mi_pricing.html @@ -0,0 +1,153 @@ + + + + + + + + Marlin Internet + + + + + + +
+ Marlin Internet + +
+ +
+

Accelerate with No Speed Traps

+

How do you use the web? Whether it's just you on your PC or your extended + family simultaneously accessing the Internet for gaming, movie watching, + surfing, or music; we have the speed for you — with no hidden fees, + service charges, or other traps. Marlin Internet provides a broad variety + of access plans at affordable prices with our exclusive ITIS 2.0 technology. + We provide more than fast access. Take advantage of our 24/7 customer support + (personal help is always on the line), free security tools, email accounts + for the whole family, and exclusive online content. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Select a PlanStarterPrimePrime PlusUltra
$19.95
per month
$29.95
per month
$49.95
per month
$69.95
per month
SummaryJust the speed you need to send emails, download map directions, and search the Internet for restaurant reviews.A great speed at a great price for the family: kids can play games, adults can pay bills, and everyone can surf at the same time.Super speeds for multiple tasks that require more broadband capacity; ideal for gamers who need fast response times.Perfect for a small business running multiple media streams, demanding reduced lag time and fast data delivery.
Download Speed3 Mbps15 Mbps25 Mbps50 Mbps
Upload Speed512 Kbps6 Mbps10 Mbps20 Mbps
Cloud Storage2 GB5 GB15 GB40 GB
E-mail Accounts2 Accounts3 Accounts5 Accounts10 Accounts
24/7 SupportYesYesYesYes
+ +
+ + + + + diff --git a/case1/mi_pricing_txt.html b/case1/mi_pricing_txt.html deleted file mode 100644 index 127737d..0000000 --- a/case1/mi_pricing_txt.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - - - - Marlin Internet - - - - - -
- Marlin Internet - -
- -
-

Accelerate with No Speed Traps

-

How do you use the web? Whether it's just you on your PC or your extended - family simultaneously accessing the Internet for gaming, movie watching, - surfing, or music; we have the speed for you — with no hidden fees, - service charges, or other traps. Marlin Internet provides a broad variety - of access plans at affordable prices with our exclusive ITIS 2.0 technology. - We provide more than fast access. Take advantage of our 24/7 customer support - (personal help is always on the line), free security tools, email accounts - for the whole family, and exclusive online content.

- - -
- - - - - \ No newline at end of file diff --git a/case1/mi_tables.css b/case1/mi_tables.css new file mode 100644 index 0000000..1fe9c01 --- /dev/null +++ b/case1/mi_tables.css @@ -0,0 +1,62 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML and CSS + Tutorial 6 + Case Problem 1 + + Tables Style Sheet + Author: Josh, Dylan + Date: + + Filename: mi_tables.css + +*/ + +/* Table Styles */ +table { + background: linear-gradient(to bottom, rgba(190,215,255,1), black); + border: 5px solid grey; +} + +th, td { + border: 3px solid grey; + line-height: 1.4em; + padding: 8px; +} + +th { + background: black; + color: rgb(130,210,255); + font-weight: normal; +} + +td { + color: white; + font-size: 0.9em; + vertical-align: top; +} + +/* Column Styles */ +col#firstCol { + width: 24%; +} + +col.dataCols { + width: 19%; +} + + +/* Table Header Styles */ +thead tr { + height: 60px; +} + +thead tr:first-of-type th:first-of-type { + font-size: 2em; +} + +thead tr:first-of-type th:not(:first-of-type) { + color: black; + background: transparent; +} diff --git a/case1/mi_tables_txt.css b/case1/mi_tables_txt.css deleted file mode 100644 index db9e6bc..0000000 --- a/case1/mi_tables_txt.css +++ /dev/null @@ -1,35 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML and CSS - Tutorial 6 - Case Problem 1 - - Tables Style Sheet - Author: - Date: - - Filename: mi_tables.css - -*/ - -/* Table Styles */ - - - -/* Column Styles */ - - - -/* Table Header Styles */ - - - - - - - - - - - diff --git a/case2/jpf_sudoku.css b/case2/jpf_sudoku.css new file mode 100644 index 0000000..e36d52d --- /dev/null +++ b/case2/jpf_sudoku.css @@ -0,0 +1,59 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 6 + Case Problem 2 + + Sudoku Style Sheet + Author: Josh, Dylan + Date: + + Filename: jpf_sudoku.css + +*/ + +/* Table Styles */ +table.spuzzle { + border-collapse: collapse; + margin-top: 0px; + margin-bottom: 0px; + margin-left: auto; + margin-right: auto; + width: 90%; +} + +td { + border: 5px outset gray; + width: 33.3%; +} + +th { + color: gray; + padding-right: 10px; + padding-bottom: 10px; +} + + +/* Inner Table Styles */ +table.subTable { + border-collapse: collapse; + width: 100%; +} + +table.subTable td { + box-shadow: inset 0px 0px 15px; + border: 1px solid black; + color: blue; + height: 40px; + text-align: center; + vertical-align: middle; +} + +td.goldBox { + background: rgb(228,199,42); +} + +td.greenBox { + background: rgb(203,229,130); +} diff --git a/case2/jpf_sudoku.html b/case2/jpf_sudoku.html new file mode 100644 index 0000000..d1ed404 --- /dev/null +++ b/case2/jpf_sudoku.html @@ -0,0 +1,374 @@ + + + + + + + + The Sudoku Puzzle + + + + + + +
+ Japanese Puzzle Factory + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sudoku
123456789
A + + + + + + + + + + + + + + + + + + + + + + + +
4
35
+
+ + + + + + + + + + + + + + + + + + + + + + + +
53
+
+ + + + + + + + + + + + + + + + + + + + + + + +
7
31
2
+
B
C
D + + + + + + + + + + + + + + + + + + + + + + + +
69
472
+
+ + + + + + + + + + + + + + + + + + + + + + + +
2
9
+
+ + + + + + + + + + + + + + + + + + + + + + + +
937
48
+
E
F
G + + + + + + + + + + + + + + + + + + + + + + + +
1
45
6
+
+ + + + + + + + + + + + + + + + + + + + + + + +
81
+
+ + + + + + + + + + + + + + + + + + + + + + + +
52
7
+
H
I
+
+ +
+

To Play

+

Sudoku is played on a 9x9 grid with nine 3x3 boxes + placed within the grid. Enter a digit from 1 to 9 in + each table cell. A few starting numbers have been + supplied for you. The digits from 1 to 9 can appear + only once each in every row, column, and box in the + table (diagonals don't count). Every Sudoku puzzle + has a unique solution. +

+

Good luck!

+
+ + + + + diff --git a/case2/jpf_sudoku_txt.css b/case2/jpf_sudoku_txt.css deleted file mode 100644 index 758307c..0000000 --- a/case2/jpf_sudoku_txt.css +++ /dev/null @@ -1,22 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 6 - Case Problem 2 - - Sudoku Style Sheet - Author: - Date: - - Filename: jpf_sudoku.css - -*/ - -/* Table Styles */ - - - -/* Inner Table Styles */ - - diff --git a/case2/jpf_sudoku_txt.html b/case2/jpf_sudoku_txt.html deleted file mode 100644 index fb6b192..0000000 --- a/case2/jpf_sudoku_txt.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - - - - - The Sudoku Puzzle - - - - - -
- Japanese Puzzle Factory - -
- -
-
- -
-

To Play

-

Sudoku is played on a 9x9 grid with nine 3x3 boxes - placed within the grid. Enter a digit from 1 to 9 in - each table cell. A few starting numbers have been - supplied for you. The digits from 1 to 9 can appear - only once each in every row, column, and box in the - table (diagonals don't count). Every Sudoku puzzle - has a unique solution. -

-

Good luck!

-
- - - - - \ No newline at end of file diff --git a/case3/lht_columns.css b/case3/lht_columns.css new file mode 100644 index 0000000..18ca1bf --- /dev/null +++ b/case3/lht_columns.css @@ -0,0 +1,40 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML and CSS, 7th Edition + Tutorial 6 + Case Problem 3 + + Columns Style Sheet + Author: Josh, Dylan + Date: 11/26/18 + + Filename: lht_columns.css + +*/ + + + +/* Column Styles */ +article { + -moz-column-width: 260px; + -webkit-column-width: 260px; + column-width: 260px; + + -moz-column-gap: 20px; + -webkit-column-gap: 20px; + column-gap: 20px; + + -moz-column-rule: 1px solid rgb(154,64,31); + -webkit-column-rule: 1px solid rgb(154,64,31); + column-rule: 1px solid rgb(154,64,31); + + widows: 2; + orphans: 2; +} + +article h1 { + -moz-column-span: all; + -webkit-column-span: all; + column-span: all; +} diff --git a/case3/lht_columns_txt.css b/case3/lht_columns_txt.css deleted file mode 100644 index 0849ed0..0000000 --- a/case3/lht_columns_txt.css +++ /dev/null @@ -1,19 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML and CSS, 7th Edition - Tutorial 6 - Case Problem 3 - - Columns Style Sheet - Author: - Date: - - Filename: lht_columns.css - -*/ - - - -/* Column Styles */ - diff --git a/case3/lht_feb.html b/case3/lht_feb.html new file mode 100644 index 0000000..f8258a3 --- /dev/null +++ b/case3/lht_feb.html @@ -0,0 +1,350 @@ + + + + + + + + Lyman Hall Theater in February + + + + + + + +
+ The Lyman Hall Theater + +
+ +
+

Coming Up at the Lyman Hall Theater

+

February will be another banner month at the Lyman Hall + Theatre with three performances of the Tony Award winning + musical, West Side Story by the Broadway Touring Company. + Tickets are going fast, so order yours today. +

+ +

Celebrate Valentine's Day with the Chamberlain Symphony and + their special selection of classical music for lovers. Later that + week, exercise your mind by attending the Charles Dickens classic, + The Mystery of Edwin Drood. Can you solve Dickens' + unfinished mystery? +

+ +

Jazz lovers have a lot to celebrate in February with a visit + from the Jazz Masters on February 21st, and then on February + 24th, enjoy the music of The Duke with an Ellington Tribute + performed by the Jazz Company of Kansas City. +

+ +

Pins, bottles, plates, and chairs are flying at the Chamberlain + Civic Center in February. The Taiwan Acrobats return on + February 2nd with another amazing performance. We close out the + month with a visit from the Madtown Jugglers and their unique + blend of comedy, juggling, and madness. +

+ +

Enjoy a classical brunch every Sunday in February with music + provided by the Carson Quartet. Seating is limited, so please order + your table in advance. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
February 2018 Calendar
SunMonTueWedThuFriSat
+

28

+
+
Caron Quartet
+
1 pm
+
$12
+
+
+

29

+
+
Harlem Choir
+
8 pm
+
$18/$24/$32
+
+
+

30

+
+

31

+
+

1

+
+

2

+
+
Taiwan Acrobats
+
8 pm
+
$24/$32/$48
+
+
+

3

+
+
Joey Gallway
+
8 pm
+
$24/$32/$48
+
+
+

4

+
+
Carson Quartet
+
1 pm
+
$12
+
+
+

5

+
+

6

+
+
Ralph Williams
+
8 pm
+
$24/$36/$42
+
+
+

7

+
+

8

+
+
West Side Story
+
7 pm
+
$36/$48/$64
+
+
+

9

+
+
West Side Story
+
7 pm
+
$36/$48/$64
+
+
+

10

+
+
West Side Story
+
7 pm
+
$36/$48/$64
+
+
+

11

+
+
Carson Quartet
+
1 pm
+
$12
+
+
+

12

+
+

13

+
+

14

+
+
Chamberlain Symphony
+
8 pm
+
$18/$24/$32
+
+
+

15

+
+

16

+
+
Edwin Drood
+
8 pm
+
$36/$48/$58
+
+
+

17

+
+
Edwin Drood
+
8 pm
+
$36/$48/$58
+
+
+

18

+
+
Carson Quartet
+
1 pm
+
$12
+
+
+

19

+
+

20

+
+

21

+
+
Jazz Masters
+
8 pm
+
$18/$24/$32
+
+
+

22

+
+

23

+
+
The Yearling
+
7 pm
+
$12/$18/$24
+
+
+

24

+
+
An Ellington Tribute
+
8 pm
+
$24/$38/$48
+
+
+

25

+
+
Carson Quartet
+
1 pm
+
$12
+
+
+

26

+
+

27

+
+

28

+
+
Madtown Jugglers
+
8 pm
+
$12/$16/$20
+
+
+

1

+
+
Othello
+
8 pm
+
$24/$36/$48
+
+
+

2

+
+
Othello
+
8 pm
+
$24/$36/$48
+
+
+

3

+
+
Othello
+
8 pm
+
$24/$36/$48
+
+
+ + + + diff --git a/case3/lht_feb_txt.html b/case3/lht_feb_txt.html deleted file mode 100644 index cc52041..0000000 --- a/case3/lht_feb_txt.html +++ /dev/null @@ -1,105 +0,0 @@ - - - - - - - - Lyman Hall Theater in February - - - - - -
- The Lyman Hall Theater - -
- -
-

Coming Up at the Lyman Hall Theater

-

February will be another banner month at the Lyman Hall - Theatre with three performances of the Tony Award winning - musical, West Side Story by the Broadway Touring Company. - Tickets are going fast, so order yours today. -

- -

Celebrate Valentine's Day with the Chamberlain Symphony and - their special selection of classical music for lovers. Later that - week, exercise your mind by attending the Charles Dickens classic, - The Mystery of Edwin Drood. Can you solve Dickens' - unfinished mystery? -

- -

Jazz lovers have a lot to celebrate in February with a visit - from the Jazz Masters on February 21st, and then on February - 24th, enjoy the music of The Duke with an Ellington Tribute - performed by the Jazz Company of Kansas City. -

- -

Pins, bottles, plates, and chairs are flying at the Chamberlain - Civic Center in February. The Taiwan Acrobats return on - February 2nd with another amazing performance. We close out the - month with a visit from the Madtown Jugglers and their unique - blend of comedy, juggling, and madness. -

- -

Enjoy a classical brunch every Sunday in February with music - provided by the Carson Quartet. Seating is limited, so please order - your table in advance. -

-
- - - - - - \ No newline at end of file diff --git a/case3/lht_styles.css b/case3/lht_styles.css index d4adeab..24ed787 100644 --- a/case3/lht_styles.css +++ b/case3/lht_styles.css @@ -7,7 +7,7 @@ Case Problem 3 The Lyman Theater General Style Sheet - + Filename: lht_styles.css */ @@ -26,11 +26,11 @@ body { box-shadow: rgb(51, 51, 51) 10px 0px 40px, rgb(51, 51, 51) -10px 0px 40px; border-left: 1px solid gray; border-right: 1px solid gray; - min-height: 100%; + min-height: 100%; margin: 0px auto; min-width: 400px; - max-width: 1024px; - width: 100%; + max-width: 1024px; + width: 100%; } @@ -52,7 +52,7 @@ header nav ul { } header nav ul li { - font-size: 1em; + font-size: 1em; } header nav ul li a { @@ -97,13 +97,13 @@ article p em { } -/* Footer styles */ +/* Footer styles */ footer { clear: both; - color: white; + color: white; background: linear-gradient(to bottom, rgb(178, 97, 63), rgb(41, 41, 41)); - font-size: 0.8em; + font-size: 0.8em; font-style: normal; width: 100%; } @@ -135,42 +135,42 @@ footer::after { } /* =============================== - Mobile Styles: 0px to 640px + Mobile Styles: 0px to 640px =============================== */ @media only screen and (max-width: 640px) { - + a#navicon { display: block; } - + header nav { padding-bottom: 5px; } - + header nav ul { display: none; } - + header nav ul li { font-size: 1em; line-height: 1.3em; height: 1.3em; } - + a#navicon:hover+ul, header nav ul:hover { display: block; } - + header img#logoimg { width: 100%; } - + article { display: none; } - + footer nav ul, footer section { font-size: 1.2em; width: 100%; @@ -183,7 +183,7 @@ footer::after { ============================================= */ @media only screen and (min-width: 641px) { - + header nav ul { display: -webkit-flex; display: flex; @@ -192,7 +192,7 @@ footer::after { -webkit-justify-content: center; justify-content: center; } - + header nav ul li { -webkit-flex: 0 1 auto; flex: 0 1 auto; diff --git a/case3/lht_tables.css b/case3/lht_tables.css new file mode 100644 index 0000000..49e5265 --- /dev/null +++ b/case3/lht_tables.css @@ -0,0 +1,116 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML and CSS, 7th Edition + Tutorial 6 + Case Problem 3 + + Calendar Style Sheet + Author: Josh, Dylan + Date: 11/26/18 + + Filename: lht_tables.css + +*/ + +/* =============================== + Mobile Styles: 0px to 640px + =============================== +*/ +@media only screen and (max-width: 640px) { + + table, tbody, tr, td, th, caption { + display: block; + } + + thead, h1 { + display: none; + } + + caption { + color: white; + background: rgb(64,64,64); + font-size: 1.5em; + line-height: 2em; + } + + td { + border: 1px dotted gray; + color: rgb(11,12,145); + position: relative; + padding-left: 40%; + min-height: 40px; + } + + tr:nth-last-of-type(odd) { + background-color: rgb(255,235,178); + border: 2px solid gray; + } + + td::before { + content: attr(data-date); + position: absolute; + left: 0px; + top: 0px; + width: 40%; + padding: 5px; + } + +} + + + +/* ============================================= + Tablet and Desktop Styles: greater than 640px + ============================================= +*/ +@media only screen and (min-width: 641px) { + table { + background-image: url(lht_photo1.png); + background-repeat: no-repeat; + background-position: bottom right; + background-size: 40%; + width: 85%; + border: 6px double rgb(154,64,3); + border-collapse: collapse; + margin-top: 20px; + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + table-layout: fixed; + } + + th, td { + border: 1px solid gray; + font-size: 0.85em; + font-weight: normal; + padding: 5px; + vertical-align: text-top; + width: 14.28%; + text-overflow: wrap; + } + + td { + background-color: rgba(171,171,171,0.6); + color: rgb(11,12,145); + } + + td[data-date~="Feb"] { + background-color: rgba(232,214,148,0.6); + box-shadow: inset 0px 0px 20px gray; + } + + caption { + caption-side: top; + text-align: center; + padding-bottom: 10px; + font-size: 1.2em; + letter-spacing: 3px; + } + + thead { + background-color: rgb(154,64,3); + color: white; + } + +} diff --git a/case3/lht_tables_txt.css b/case3/lht_tables_txt.css deleted file mode 100644 index 0d3a542..0000000 --- a/case3/lht_tables_txt.css +++ /dev/null @@ -1,27 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML and CSS, 7th Edition - Tutorial 6 - Case Problem 3 - - Calendar Style Sheet - Author: - Date: - - Filename: lht_tables.css - -*/ - -/* =============================== - Mobile Styles: 0px to 640px - =============================== -*/ - - - - -/* ============================================= - Tablet and Desktop Styles: greater than 640px - ============================================= -*/ diff --git a/case4/hcc_columns.css b/case4/hcc_columns.css new file mode 100644 index 0000000..ab8776c --- /dev/null +++ b/case4/hcc_columns.css @@ -0,0 +1,37 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 6 + Case Problem 4 + + Reset Style Sheet + + Filename: hcc_columns.css + +*/ + +/* Article Styles */ + +article { + -moz-column-count: 2; + -webkit-column-count: 2; + column-count: 2; + + -moz-column-gap: 20px; + -webkit-column-gap: 20px; + column-gap: 20px; + + -moz-column-rule: 1px solid rgb(154,64,31); + -webkit-column-rule: 1px solid rgb(154,64,31); + column-rule: 1px solid rgb(154,64,31); + + widows: 2; + orphans: 2; +} + +article h1 { + -moz-column-span: all; + -webkit-column-span: all; + column-span: all; +} diff --git a/case4/hcc_reset.css b/case4/hcc_reset.css new file mode 100644 index 0000000..5827f75 --- /dev/null +++ b/case4/hcc_reset.css @@ -0,0 +1,55 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 6 + Case Problem 4 + + Reset Style Sheet + + Filename: hcc_reset.css + +*/ + + +/* Basic styles to be used with all devices and under all conditions */ + +article, aside, figcaption, figure, +footer, header, main, nav, section { + display: block; +} + +address, article, aside, blockquote, body, cite, +div, dl, dt, dd, em, figcaption, figure, footer, +h1, h2, h3, h4, h5, h6, header, html, img, +li, main, nav, nav a, ol, p, section, span, ul, +table, tr, td, th, col, colgroup { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + background: transparent; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + + +/* Set the default page element styles */ + +body { + line-height: 1.2em; +} + +ul, ol { + list-style: none; +} + +nav ul { + list-style: none; + list-style-image: none; +} + +a { + text-decoration: none; +} diff --git a/case4/hcc_rooms.txt b/case4/hcc_rooms.txt index 17d98df..15c4709 100644 --- a/case4/hcc_rooms.txt +++ b/case4/hcc_rooms.txt @@ -28,11 +28,11 @@ Sunrise Room 3:00 - 5:00 (Marriage Encounter Talks) -Mountain View Room +Mountain View RooInfom 8:00 - 9:00 (Breakfast Club of Ohio) 11:00 - 1:00 (Ohio Conference of Librarians) 2:00 - 5:00 (Ohio Book Resale Setup) - +Info Arbor Hall 8:00 - 12:00 (Computer Expo set up) @@ -89,5 +89,3 @@ Maximum Capacity: 30 Green Room Maximum Capacity: 55 - - diff --git a/case4/hcc_schedule.html b/case4/hcc_schedule.html new file mode 100644 index 0000000..25ae130 --- /dev/null +++ b/case4/hcc_schedule.html @@ -0,0 +1,341 @@ + + + + + + + + Hamilton Conference Center + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Reservations for Conference Rooms - Tuesday, April 10
Sunrise RoomMountain View RoomArbor HallMitchell TheaterGold RoomBlue RoomGreen Room
Capacity80150190120403055
Time
8:00Marriage EncounterBreakfast Club of OhioComputer Expo set up
8:30
9:00The Tompkins GroupRetirement PlanningDrivers' Ed
9:30
10:00
10:30Pearson PlanningThe Senior Group
11:00Ohio Conference of LibrariansMovie Club
11:30
12:00Marriage Encounter LuncheonSenior Luncheon
12:30
1:00Computer Expo opening session
1:30Senior Classes
2:00Ohio Book Resale SetupMothers of Multiples
2:30
3:00Marriage Encounter TalksYouth Theatre
3:30Tutoring
4:00Teen Connection
4:30Tutoring
5:00
+ + + + + + + + + + + + + + + + + + + + + +
Sunrise Room
Capacity: 80
Marriage Encounter
(8:00 - 10:00)
Marriage Encounter Luncheon
(12:00 - 1:00)
Marriage Encounter Talks
(3:00 - 5:00)
+ + + + + + + + + + + + + + + + + + + + + +
Mountain View Room
Capacity: 150
Breakfast Club of Ohio
(8:00 - 9:00)
Ohio Conference of Librarians
(11:00 - 1:00)
Ohio Book Resale Setup
(2:00 - 5:00)
+ + + + + + + + + + + + + + + + + + +
Arbor Hall
Capacity: 190
Computer Expo set up
(8:00 - 12:00)
Computer Expo opening session
(1:00 - 5:00)
+ + + + + + + + + + + + + + + +
Mitchell Theater
Capacity: 120
Youth Theatre
(3:00 - 5:00)
+ + + + + + + + + + + + + + + + + + + + + + + + +
Gold Room
Capacity: 40
The Tompkins Group
(9:00 - 10:30)
Pearson Planning
(10:30 - 12:00)
Mothers of Multiples
(2:00 - 3:30)
Teen Connection
(3:30 - 5:00)
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Blue Room
Capacity: 30
Retirement Planning
(9:00 - 10:30)
The Senior Grou
(10:30 - 12:00)
Senior Luncheon
(12:00 - 1:00)
Senior Classes
(1:00 - 3:30)
Tutoring
(3:30 - 5:00)
+ + + + + + + + + + + + + + + + + + + + + +
Green Room
Capacity: 55
Drivers' Ed
(9:00 - 11:00)
Movie Club
(11:00 - 1:30)
Tutoring
(3:30 - 5:00)
+
+

Reservations for Conference Rooms

+

+ To reserve a room, please contact Yancy Inwe at extension 388 or by e-mail at yancyinwe@hconfcenter.org.

+ Reservations should be made at least 48 hours in advance. Cancellations require 24 hour notice. Room deposits will
+ not be returned for cancellations within 24 hours of the scheduled event. +

+
+ + + + diff --git a/case4/hcc_schedule_txt.css b/case4/hcc_schedule_txt.css deleted file mode 100644 index 5bd8aaa..0000000 --- a/case4/hcc_schedule_txt.css +++ /dev/null @@ -1,13 +0,0 @@ -/* - New Perspectives on HTML and CSS, 7th Edition - Tutorial 6 - Case Problem 4 - - Schedule Table Style Sheet - Author: - Date: - - Filename: hcc_schedule.css - Supporting Files: - -*/ diff --git a/case4/hcc_schedule_txt.html b/case4/hcc_schedule_txt.html deleted file mode 100644 index dfa6f23..0000000 --- a/case4/hcc_schedule_txt.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/case4/hcc_styles.css b/case4/hcc_styles.css new file mode 100644 index 0000000..9e5535f --- /dev/null +++ b/case4/hcc_styles.css @@ -0,0 +1,172 @@ +/* + New Perspectives on HTML and CSS, 7th Edition + Tutorial 6 + Case Problem 4 + + Hamilton Conference Center Style Sheet + Author: Josh, Dylan + Date: + + Filename: hcc_styles.css + Supporting files: + +*/ +/* HTML Styles */ + +html { + vertical-align: middle; +} + +/* Body Styles */ + +body { + background-image: url(https://c1.staticflickr.com/9/8065/8252325805_145ee188da_b.jpg); + background-repeat: no-repeat; + background-size: cover; +} + +/* Navigation Styles */ + +nav { + clear: both; +} + +nav li { + width: 11.11%; + float: left; + text-align: center; + padding: 0.8%; + transition: 0.5s; + background-color: gray; + color: white; + border-bottom: 6px double red; + text-overflow: clip; + overflow: hidden; +} + +nav li:hover { + background-color: white; + color: red; + border-bottom: 1px solid red; + transition: 0.3s; +} + +/* Article & Footer Styles */ + +article, footer { + text-align: center; + vertical-align: middle; + padding: 1%; + background-color: gray; +} + +article { + margin-left: auto; + margin-right: auto; + width: 85%; + margin-bottom: 1%; + border: 6px double white; +} + +article h1 { + padding-bottom: 1%; + font-size: 2em; +} + +/* Footer Styles */ + +footer { + box-shadow: inset 0px 0px 10px black; + border-top: 6px double red; +} + +/* Table, Article, Footer Styles */ + +table a, article a, footer a { + color: white; + transition: 0.3s; + font-size: normal; + word-wrap: normal; + text-overflow: clip; +} + +table a:hover, article a:hover, footer a:hover { + text-decoration: none; + color: red; + transition: 0.3s; + font-style: italic; +} + +/* Navicon Styles */ + +a#navicon { + display: none; +} + +/* ============================================= + Mobile Styles: 0px to 640px + ============================================= +*/ +@media only screen and (max-width: 640px) { + a#navicon { + display: block; + background-color: gray; + border-bottom: 2px solid black; + transition: 0.3s; + } + + nav ul { + display: none; + transition: 0.3s; + } + + nav ul li { + width: 100%; + border: none; + } + + nav ul li:hover { + width: 100%; + border: none; + } + + nav ul li:last-of-type { + border-bottom: 2px solid black; + } + + a#navicon:hover+ul, nav ul:hover { + display: block; + transition: 0.3s; + } + + article h1 { + line-height: 1.1em; + } + + table.mobile { + display: table; + + } + + table#desktop { + display: none; + } + +} + + +/* ============================================= + Tablet and Desktop Styles: greater than 641px + ============================================= +*/ +@media only screen and (min-width: 641px) { + + table.mobile { + display: none; + } + + table#desktop { + display: table; + } + +} diff --git a/case4/hcc_styles_txt.css b/case4/hcc_styles_txt.css deleted file mode 100644 index 8ab480c..0000000 --- a/case4/hcc_styles_txt.css +++ /dev/null @@ -1,14 +0,0 @@ -/* - New Perspectives on HTML and CSS, 7th Edition - Tutorial 6 - Case Problem 4 - - Hamilton Conference Center Style Sheet - Author: - Date: - - Filename: hcc_styles.css - Supporting files: - -*/ - diff --git a/case4/hcc_tables.css b/case4/hcc_tables.css new file mode 100644 index 0000000..f5c860d --- /dev/null +++ b/case4/hcc_tables.css @@ -0,0 +1,133 @@ +/* + New Perspectives on HTML and CSS, 7th Edition + Tutorial 6 + Case Problem 4 + + Schedule table Style Sheet + Author: Josh, Dylan + Date: + + Filename: hcc_schedule.css + Supporting Files: + +*/ + +/* Desktop Table Styles */ + +table#desktop { + background-color: gray; + background-size: 40%; + width: 85%; + border-bottom: 6px double white; + border-left: 6px double white; + border-right: 6px double white; + border-collapse: collapse; + margin-top: 1%; + margin-bottom: 1%; + margin-left: auto; + margin-right: auto; + table-layout: fixed; + text-align: center; + vertical-align: middle; +} + +table#desktop th, td { + border: 1px solid gray; + font-size: 1em; + font-weight: normal; + padding: 5px; + vertical-align: text-top; + width: 14.28%; + text-overflow: wrap; + text-align: center; + vertical-align: middle; +} + +table#desktop td { + background-color: rgba(171,171,171,0.6); + color: rgb(11,12,145); +} + +table#desktop caption { + font-size: 2em; + background-color: gray; + margin-top: 1%; + padding-top: 1%; + padding-bottom: 0.8%; + border-left: 6px double white; + border-right: 6px double white; + border-top: 6px double white; + border-bottom: 1px solid white; +} + +table#desktop col:first-of-type { + width: 5%; +} + +table#desktop thead tr:nth-of-type(3n) th { + text-align: left; + padding-left: 1.3%; +} + +/* Empty Cell Class Styles */ + +.empty-cell { + background: repeating-linear-gradient( + 45deg, + LightCyan, + LightCyan 10px, + LightSeaGreen 10px, + LightSeaGreen 20px + ); +} + +/* ============================================= + Mobile Styles: 0px to 640px + ============================================= +*/ +@media only screen and (max-width: 640px) { + table.mobile { + background-color: gray; + background-size: 40%; + width: 85%; + border-bottom: 6px double white; + border-left: 6px double white; + border-right: 6px double white; + border-collapse: collapse; + margin-top: 1%; + margin-bottom: 1%; + margin-left: auto; + margin-right: auto; + table-layout: fixed; + text-align: center; + vertical-align: middle; + } + + table.mobile th, td { + border: 1px solid gray; + font-size: 1em; + font-weight: normal; + vertical-align: text-top; + text-overflow: wrap; + text-align: center; + vertical-align: middle; + } + + table.mobile td { + background-color: rgba(171,171,171,0.6); + color: rgb(11,12,145); + } + + table.mobile caption { + font-size: 1.1em; + line-height: 1.1em; + background-color: gray; + margin-top: 1%; + padding-top: 1%; + padding-bottom: 0.8%; + border-left: 6px double white; + border-right: 6px double white; + border-top: 6px double white; + border-bottom: 1px solid white; + } +} diff --git a/case4/navicon.png b/case4/navicon.png new file mode 100644 index 0000000..0abda5e Binary files /dev/null and b/case4/navicon.png differ diff --git a/case4/snow.js b/case4/snow.js new file mode 100644 index 0000000..6b64a05 --- /dev/null +++ b/case4/snow.js @@ -0,0 +1,668 @@ +/** @license + * DHTML Snowstorm! JavaScript-based snow for web pages + * Making it snow on the internets since 2003. You're welcome. + * ----------------------------------------------------------- + * Version 1.44.20131208 (Previous rev: 1.44.20131125) + * Copyright (c) 2007, Scott Schiller. All rights reserved. + * Code provided under the BSD License + * http://schillmania.com/projects/snowstorm/license.txt + */ + +/*jslint nomen: true, plusplus: true, sloppy: true, vars: true, white: true */ +/*global window, document, navigator, clearInterval, setInterval */ + +var snowStorm = (function(window, document) { + + // --- common properties --- + + this.autoStart = true; // Whether the snow should start automatically or not. + this.excludeMobile = true; // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) Enable at your own risk. + this.flakesMax = 128; // Limit total amount of snow made (falling + sticking) + this.flakesMaxActive = 64; // Limit amount of snow falling at once (less = lower CPU use) + this.animationInterval = 50; // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower + this.useGPU = true; // Enable transform-based hardware acceleration, reduce CPU load. + this.className = null; // CSS class name for further customization on snow elements + this.excludeMobile = true; // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) By default, be nice. + this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect + this.followMouse = false; // Snow movement can respond to the user's mouse + this.snowColor = '#fff'; // Don't eat (or use?) yellow snow. + this.snowCharacter = '•'; // • = bullet, · is square on some systems etc. + this.snowStick = true; // Whether or not snow should "stick" at the bottom. When off, will never collect. + this.targetElement = null; // element which snow will be appended to (null = document.body) - can be an element ID eg. 'myDiv', or a DOM node reference + this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it + this.useTwinkleEffect = true; // Allow snow to randomly "flicker" in and out of view while falling + this.usePositionFixed = false; // true = snow does not shift vertically when scrolling. May increase CPU load, disabled by default - if enabled, used only where supported + this.usePixelPosition = false; // Whether to use pixel values for snow top/left vs. percentages. Auto-enabled if body is position:relative or targetElement is specified. + + // --- less-used bits --- + + this.freezeOnBlur = true; // Only snow when the window is in focus (foreground.) Saves CPU. + this.flakeLeftOffset = 0; // Left margin/gutter space on edge of container (eg. browser window.) Bump up these values if seeing horizontal scrollbars. + this.flakeRightOffset = 0; // Right margin/gutter space on edge of container + this.flakeWidth = 8; // Max pixel width reserved for snow element + this.flakeHeight = 8; // Max pixel height reserved for snow element + this.vMaxX = 5; // Maximum X velocity range for snow + this.vMaxY = 4; // Maximum Y velocity range for snow + this.zIndex = 0; // CSS stacking order applied to each snowflake + + // --- "No user-serviceable parts inside" past this point, yadda yadda --- + + var storm = this, + features, + // UA sniffing and backCompat rendering mode checks for fixed position, etc. + isIE = navigator.userAgent.match(/msie/i), + isIE6 = navigator.userAgent.match(/msie 6/i), + isMobile = navigator.userAgent.match(/mobile|opera m(ob|in)/i), + isBackCompatIE = (isIE && document.compatMode === 'BackCompat'), + noFixed = (isBackCompatIE || isIE6), + screenX = null, screenX2 = null, screenY = null, scrollY = null, docHeight = null, vRndX = null, vRndY = null, + windOffset = 1, + windMultiplier = 2, + flakeTypes = 6, + fixedForEverything = false, + targetElementIsRelative = false, + opacitySupported = (function(){ + try { + document.createElement('div').style.opacity = '0.5'; + } catch(e) { + return false; + } + return true; + }()), + didInit = false, + docFrag = document.createDocumentFragment(); + + features = (function() { + + var getAnimationFrame; + + /** + * hat tip: paul irish + * http://paulirish.com/2011/requestanimationframe-for-smart-animating/ + * https://gist.github.com/838785 + */ + + function timeoutShim(callback) { + window.setTimeout(callback, 1000/(storm.animationInterval || 20)); + } + + var _animationFrame = (window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + timeoutShim); + + // apply to window, avoid "illegal invocation" errors in Chrome + getAnimationFrame = _animationFrame ? function() { + return _animationFrame.apply(window, arguments); + } : null; + + var testDiv; + + testDiv = document.createElement('div'); + + function has(prop) { + + // test for feature support + var result = testDiv.style[prop]; + return (result !== undefined ? prop : null); + + } + + // note local scope. + var localFeatures = { + + transform: { + ie: has('-ms-transform'), + moz: has('MozTransform'), + opera: has('OTransform'), + webkit: has('webkitTransform'), + w3: has('transform'), + prop: null // the normalized property value + }, + + getAnimationFrame: getAnimationFrame + + }; + + localFeatures.transform.prop = ( + localFeatures.transform.w3 || + localFeatures.transform.moz || + localFeatures.transform.webkit || + localFeatures.transform.ie || + localFeatures.transform.opera + ); + + testDiv = null; + + return localFeatures; + + }()); + + this.timer = null; + this.flakes = []; + this.disabled = false; + this.active = false; + this.meltFrameCount = 20; + this.meltFrames = []; + + this.setXY = function(o, x, y) { + + if (!o) { + return false; + } + + if (storm.usePixelPosition || targetElementIsRelative) { + + o.style.left = (x - storm.flakeWidth) + 'px'; + o.style.top = (y - storm.flakeHeight) + 'px'; + + } else if (noFixed) { + + o.style.right = (100-(x/screenX*100)) + '%'; + // avoid creating vertical scrollbars + o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px'; + + } else { + + if (!storm.flakeBottom) { + + // if not using a fixed bottom coordinate... + o.style.right = (100-(x/screenX*100)) + '%'; + o.style.bottom = (100-(y/screenY*100)) + '%'; + + } else { + + // absolute top. + o.style.right = (100-(x/screenX*100)) + '%'; + o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px'; + + } + + } + + }; + + this.events = (function() { + + var old = (!window.addEventListener && window.attachEvent), slice = Array.prototype.slice, + evt = { + add: (old?'attachEvent':'addEventListener'), + remove: (old?'detachEvent':'removeEventListener') + }; + + function getArgs(oArgs) { + var args = slice.call(oArgs), len = args.length; + if (old) { + args[1] = 'on' + args[1]; // prefix + if (len > 3) { + args.pop(); // no capture + } + } else if (len === 3) { + args.push(false); + } + return args; + } + + function apply(args, sType) { + var element = args.shift(), + method = [evt[sType]]; + if (old) { + element[method](args[0], args[1]); + } else { + element[method].apply(element, args); + } + } + + function addEvent() { + apply(getArgs(arguments), 'add'); + } + + function removeEvent() { + apply(getArgs(arguments), 'remove'); + } + + return { + add: addEvent, + remove: removeEvent + }; + + }()); + + function rnd(n,min) { + if (isNaN(min)) { + min = 0; + } + return (Math.random()*n)+min; + } + + function plusMinus(n) { + return (parseInt(rnd(2),10)===1?n*-1:n); + } + + this.randomizeWind = function() { + var i; + vRndX = plusMinus(rnd(storm.vMaxX,0.2)); + vRndY = rnd(storm.vMaxY,0.2); + if (this.flakes) { + for (i=0; i=0 && s.vX<0.2) { + s.vX = 0.2; + } else if (s.vX<0 && s.vX>-0.2) { + s.vX = -0.2; + } + if (s.vY>=0 && s.vY<0.2) { + s.vY = 0.2; + } + }; + + this.move = function() { + var vX = s.vX*windOffset, yDiff; + s.x += vX; + s.y += (s.vY*s.vAmp); + if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check + s.x = 0; + } else if (vX < 0 && s.x-storm.flakeLeftOffset < -storm.flakeWidth) { + s.x = screenX-storm.flakeWidth-1; // flakeWidth; + } + s.refresh(); + yDiff = screenY+scrollY-s.y+storm.flakeHeight; + if (yDiff0.998) { + // ~1/1000 chance of melting mid-air, with each frame + s.melting = true; + s.melt(); + // only incrementally melt one frame + // s.melting = false; + } + if (storm.useTwinkleEffect) { + if (s.twinkleFrame < 0) { + if (Math.random() > 0.97) { + s.twinkleFrame = parseInt(Math.random() * 8, 10); + } + } else { + s.twinkleFrame--; + if (!opacitySupported) { + s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 'hidden' : 'visible'); + } else { + s.o.style.opacity = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 0 : 1); + } + } + } + } + }; + + this.animate = function() { + // main animation loop + // move, check status, die etc. + s.move(); + }; + + this.setVelocities = function() { + s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1); + s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1); + }; + + this.setOpacity = function(o,opacity) { + if (!opacitySupported) { + return false; + } + o.style.opacity = opacity; + }; + + this.melt = function() { + if (!storm.useMeltEffect || !s.melting) { + s.recycle(); + } else { + if (s.meltFrame < s.meltFrameCount) { + s.setOpacity(s.o,s.meltFrames[s.meltFrame]); + s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px'; + s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px'; + s.meltFrame++; + } else { + s.recycle(); + } + } + }; + + this.recycle = function() { + s.o.style.display = 'none'; + s.o.style.position = (fixedForEverything?'fixed':'absolute'); + s.o.style.bottom = 'auto'; + s.setVelocities(); + s.vCheck(); + s.meltFrame = 0; + s.melting = false; + s.setOpacity(s.o,1); + s.o.style.padding = '0px'; + s.o.style.margin = '0px'; + s.o.style.fontSize = s.fontSize+'px'; + s.o.style.lineHeight = (storm.flakeHeight+2)+'px'; + s.o.style.textAlign = 'center'; + s.o.style.verticalAlign = 'baseline'; + s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10); + s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight; + s.refresh(); + s.o.style.display = 'block'; + s.active = 1; + }; + + this.recycle(); // set up x/y coords etc. + this.refresh(); + + }; + + this.snow = function() { + var active = 0, flake = null, i, j; + for (i=0, j=storm.flakes.length; istorm.flakesMaxActive) { + storm.flakes[storm.flakes.length-1].active = -1; + } + } + storm.targetElement.appendChild(docFrag); + }; + + this.timerInit = function() { + storm.timer = true; + storm.snow(); + }; + + this.init = function() { + var i; + for (i=0; i Tutorial 5 @@ -23,12 +23,12 @@

Tutorial 5 links

diff --git a/review/dlr_columns2.css b/review/dlr_columns2.css new file mode 100644 index 0000000..27d5ab1 --- /dev/null +++ b/review/dlr_columns2.css @@ -0,0 +1,34 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML and CSS + Tutorial 6 + Review Assignment + + Columns Style Sheet + Author: Josh, Dylan + Date: 11/20/18 + + Filename: dlr_columns2.css + +*/ + + + +/* Column Styles */ +@media only screen and (min-width: 641px) { + p { + -moz-column-count: 3; + -webkit-column-count: 3; + column-count: 3; + + -moz-column-gap: 20px; + -webkit-column-gap: 20px; + column-gap: 20px; + + -moz-column-rule: 1px solid black; + -webkit-column-rule: 1px solid black; + column-rule: 1px solid black; + } + +} diff --git a/review/dlr_columns2_txt.css b/review/dlr_columns2_txt.css deleted file mode 100644 index 0ef6bdb..0000000 --- a/review/dlr_columns2_txt.css +++ /dev/null @@ -1,20 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML and CSS - Tutorial 6 - Review Assignment - - Columns Style Sheet - Author: - Date: - - Filename: dlr_columns2.css - -*/ - - - -/* Column Styles */ - - diff --git a/review/dlr_mornings.html b/review/dlr_mornings.html new file mode 100644 index 0000000..ef53c88 --- /dev/null +++ b/review/dlr_mornings.html @@ -0,0 +1,153 @@ + + + + + + + + DLR Morning Schedule + + + + + + + +
+

Listener Supported Since 1975

+ +
+ +
+ +
+ DLR +

DLR Morning Schedule

+

DLR airs listener-supported public radio in Bismarck, North Dakota from + 5:00 a.m. to 10:30 p.m.
You can Listen Live to streaming audio + of our broadcast or download programs from our Podcast. +
Please refer below for our current morning schedule.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
All Times Central
TimeMonTueWedThuFriSatSun
Support your Public Radio Station
5:00 AMDawn AirDawn Air WeekendsSunday Magazine
5:30 AM
6:00 AMWeedend Reflections
6:30 AM
7:00 AMLocal NewsWeedend WrapRadio U
7:30 AMWorld News Feed
8:00 AMClassical RootsWhat Can You Say?University on the Air
8:30 AM
9:00 AM
9:30 AMAnimal Talk
10:00 AMSymphony CityWord Play
10:30 AMBrain Stew
11:00 AMOpera Live from the East CoastThe Inner Mind
11:30 AMGrammar Rules!!
12:00 PMBook ClubWeekend Wrap
+
+ +
+ +
+ DLR · 4300 Magnolia Lane · Bismarck, ND 58504 · (701) 555 - 5611 +
+ + + diff --git a/review/dlr_mornings_txt.html b/review/dlr_mornings_txt.html deleted file mode 100644 index f90b239..0000000 --- a/review/dlr_mornings_txt.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - - - DLR Morning Schedule - - - - - -
-

Listener Supported Since 1975

- -
- -
- -
- DLR -

DLR Morning Schedule

-

DLR airs listener-supported public radio in Bismarck, North Dakota from - 5:00 a.m. to 10:30 p.m.
You can Listen Live to streaming audio - of our broadcast or download programs from our Podcast. -
Please refer below for our current morning schedule.

- -
- -
- -
- DLR · 4300 Magnolia Lane · Bismarck, ND 58504 · (701) 555 - 5611 -
- - - \ No newline at end of file diff --git a/review/dlr_tables2.css b/review/dlr_tables2.css new file mode 100644 index 0000000..2aed671 --- /dev/null +++ b/review/dlr_tables2.css @@ -0,0 +1,77 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML and CSS + Tutorial 6 + Review Assignment + + Tables Style Sheet + Author: Josh, Dylan + Date: 11/20/18 + + Filename: dlr_tables2.css + +*/ + +/* Table Styles */ +table.programs { + width: 100%; + border: 15px outset rgb(151,151,151); + border-collapse: collapse; + font-family: Arial, Verdana, sans-serif; +} + +table.programs tr { + height: 25px; +} + +table.programs th, table.programs td { + border: 1px solid gray; + padding: 5px; + vertical-align: top; +} + +/* Table Caption Styles */ +table.programs caption { + caption-side: bottom; + text-align: center; +} + + + +/* Table Column Styles */ +col.timeColumn { + width: 10%; + background: rgb(215,205,151); +} + +col.wDayColumns { + width: 11%; + background: rgb(236,255,211); +} + +col.wEndColumns { + width: 17%; + background: rgb(255,231,255) +} + +/* Table Header Styles */ +thead { + color: white; + background: rgb(105,177,60); +} + +thead th:first-of-type { + background: rgb(153,86,7); +} + +thead th:nth-of-type(7n), thead th:nth-of-type(8n) { + background: rgb(153,0,153); +} + + +/* Table Footer Styles */ +tfoot { + color: white; + background: black; +} diff --git a/review/dlr_tables2_txt.css b/review/dlr_tables2_txt.css deleted file mode 100644 index 4c58fb9..0000000 --- a/review/dlr_tables2_txt.css +++ /dev/null @@ -1,39 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML and CSS - Tutorial 6 - Review Assignment - - Tables Style Sheet - Author: - Date: - - Filename: dlr_tables2.css - -*/ - -/* Table Styles */ - - - -/* Table Caption Styles */ - - - -/* Table Column Styles */ - - - -/* Table Header Styles */ - - - -/* Table Footer Styles */ - - - - - - - diff --git a/tutorial/dlr_columns.css b/tutorial/dlr_columns.css new file mode 100644 index 0000000..ab3b1c0 --- /dev/null +++ b/tutorial/dlr_columns.css @@ -0,0 +1,43 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML and CSS + Tutorial 6 + Tutorial Case + + Columns Style Sheet + Author: Josh, Dylan + Date: 11/19/18 + + Filename: dlr_columns.css + +*/ + + + +/* Column Styles */ +@media only screen and (min-width: 641px) { + article { + -moz-column-count: 2; + -webkit-column-count: 2; + column-count: 2; + + -moz-column-gap: 30px; + -webkit-column-gap: 30px; + column-gap: 30px; + + -moz-column-rule: 2px solid gray; + -webkit-column-rule: 2px solid gray; + column-rule: 2px solid gray; + + widows: 3; + orphans: 3; + } + + article h1 { + -moz-column-span: all; + -webkit-column-span: all; + column-span: all; + } + +} diff --git a/tutorial/dlr_columns_txt.css b/tutorial/dlr_columns_txt.css deleted file mode 100644 index b14a401..0000000 --- a/tutorial/dlr_columns_txt.css +++ /dev/null @@ -1,19 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML and CSS - Tutorial 6 - Tutorial Case - - Columns Style Sheet - Author: - Date: - - Filename: dlr_columns.css - -*/ - - - -/* Column Styles */ - diff --git a/tutorial/dlr_evenings.html b/tutorial/dlr_evenings.html new file mode 100644 index 0000000..e4215b1 --- /dev/null +++ b/tutorial/dlr_evenings.html @@ -0,0 +1,165 @@ + + + + + + + + DLR Nightly Schedule + + + + + + +
+

Listener Supported Since 1975

+ +
+ +
+ +
+ DLR +

DLR Nightly Schedule

+

DLR airs listener-supported public radio in Bismarck, + North Dakota from 5:00 a.m. to 10:30 p.m. + You can Listen Live to streaming audio + of our broadcast. Please refer below for our current + nightly schedule. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
All Times Central
TimeMonTueWedThuFriSatSun
DLR ends its broadcast day at 10:30 p.m.
6:00 PMNational News
6:30 PMWorld News
7:00 PMOpera FestRadio UScience WeekThe Living WorldWord PlayAgri-WeekFolk Fest
7:30 PMBrain StewBismarck Forum
8:00 PMThe Classical Music ConnectionOld Time RadioSaturday Nite JazzThe Indie Connection
8:30 PMThe Inner Mind
9:00 PMOpen Mike Nite
9:30 PM
10:00 PMWorld News Feed
+
+ + + +
+ +
+ DLR · 4300 Magnolia Lane · Bismarck, ND 58504 · (701) 555 - 5611 +
+ + + diff --git a/tutorial/dlr_evenings_txt.html b/tutorial/dlr_evenings_txt.html deleted file mode 100644 index 9a7c4ad..0000000 --- a/tutorial/dlr_evenings_txt.html +++ /dev/null @@ -1,93 +0,0 @@ - - - - - - - - DLR Nightly Schedule - - - - - -
-

Listener Supported Since 1975

- -
- -
- -
- DLR -

DLR Nightly Schedule

-

DLR airs listener-supported public radio in Bismarck, - North Dakota from 5:00 a.m. to 10:30 p.m. - You can Listen Live to streaming audio - of our broadcast. Please refer below for our current - nightly schedule.

- -
- - - -
- -
- DLR · 4300 Magnolia Lane · Bismarck, ND 58504 · (701) 555 - 5611 -
- - - \ No newline at end of file diff --git a/tutorial/dlr_lw0414_txt.html b/tutorial/dlr_lw0414.html similarity index 83% rename from tutorial/dlr_lw0414_txt.html rename to tutorial/dlr_lw0414.html index 405e4d1..4f12dc5 100644 --- a/tutorial/dlr_lw0414_txt.html +++ b/tutorial/dlr_lw0414.html @@ -7,23 +7,24 @@ Tutorial Case The Living World: April 14 - Author: - Date: + Author: Josh, Dylan + Date: 11/19/18 Filename: dlr_lw0414.html --> - + The Living World: April 14 - + +
- +

Listener Supported Since 1975

- +
- -
-
- + +
+
+

The Living World

April 14

-

Join host Tim Unger for this week's edition of - The Living World where we discuss the future and +

Join host Tim Unger for this week's edition of + The Living World where we discuss the future and economic impact of autonomous vehicles, otherwise known as driverless cars.

- +

Rise of the Driverless Car and How It Will Impact You

Your world is about to change with widespread adoption of driverless cars. @@ -59,30 +60,30 @@

Rise of the Driverless Car and How It Will Impact You

their surroundings with radar, GPS, proximity sensors, and computer image enhancement. This information is fed into a control system that uses it to plot navigation paths and to respond to obstacles and road directions. A driverless car is capable of updating - its status based on changing conditions. Driverless cars should be autonomous even when + its status based on changing conditions. Driverless cars should be autonomous even when entering uncharted regions.

-

In the United States, the National Highway Traffic Safety Administration (NHTSA) has +

In the United States, the National Highway Traffic Safety Administration (NHTSA) has proposed the following levels of autonomy for motorized vehicles:

  1. Level 0 The driver completely controls the vehicle at all times.
  2. -
  3. Level 1 Individual vehicle controls are automated, such as electronic - stability control or automatic braking.
  4. -
  5. Level 2 At least two controls can be automated in unison, such as +
  6. Level 1 Individual vehicle controls are automated, such as electronic + stability control or automatic braking.
  7. +
  8. Level 2 At least two controls can be automated in unison, such as adaptive cruise control in combination with lane keeping.
  9. -
  10. Level 3 The driver can fully cede control of all safety-critical - functions in certain conditions. The car senses when conditions require the driver to - retake control and provides a "sufficiently comfortable transition time" for the +
  11. Level 3 The driver can fully cede control of all safety-critical + functions in certain conditions. The car senses when conditions require the driver to + retake control and provides a "sufficiently comfortable transition time" for the driver to do so.
  12. -
  13. Level 4 The vehicle performs all safety-critical functions for the - entire trip, with the driver not expected to control the vehicle at any time. Because this - vehicle would control all functions from start to stop, including all parking functions, +
  14. Level 4 The vehicle performs all safety-critical functions for the + entire trip, with the driver not expected to control the vehicle at any time. Because this + vehicle would control all functions from start to stop, including all parking functions, it could include unoccupied cars.

Currently, we are at Level 2 with many vehicles able to provide automated safety systems, such as - automatic braking in response to input from collision sensors. + automatic braking in response to input from collision sensors.

When Does Full Autonomy Arrive?

Level 4 autonomous vehicles are arriving and they're arriving quickly. The obstacles to adoption - of a driverless economy are legal and technical. The United States traffic code does not + of a driverless economy are legal and technical. The United States traffic code does not prohibit autonomous vehicles, but it also does not specifically address them. Several states, including Nevada, Florida, California, and Michigan, have enacted traffic rules specifically tailored to driverless cars and more states are in the processing of enacting such legislation.

@@ -92,77 +93,77 @@

When Does Full Autonomy Arrive?

from the testing stage into general use.

Other countries have permitted the testing of autonomous vehicles on public roads. The United Kingdom enacted a testing phase in 2013, followed shortly by France in 2014.

-

Driverless cars have driven through San Francisco's Lombard Street, navigating its steep hairpin turns, - and city traffic. The testing vehicles provide an override to allow a human driver to take control +

Driverless cars have driven through San Francisco's Lombard Street, navigating its steep hairpin turns, + and city traffic. The testing vehicles provide an override to allow a human driver to take control of the car. By August 2012, testers announced that they have driven over 300,000 miles accident-free. By April 2014, autonomous vehicles have logged nearly 700,000 miles. As of June 2015, driverless cars - have been involved in 12 minor accidents on public roads. Eight of these accidents involved being - rear-ended, two in which the vehicle was side-swiped by another driver, one of which involved + have been involved in 12 minor accidents on public roads. Eight of these accidents involved being + rear-ended, two in which the vehicle was side-swiped by another driver, one of which involved another driver rolling through a stop sign, and one where the car was being driven manually.

-

Driverless cars have not yet been tested in heavy rain or snow due to safety concerns. +

Driverless cars have not yet been tested in heavy rain or snow due to safety concerns. Nor have they been tested in areas with temporary traffic lights or complex unmapped intersections. The technical issues are daunting. An autonomous vehicle has difficulty with potholes, roadside trash and debris, and interpreting unexpected signals, such as a police car signaling the vehicle to pull over.

-

Experts predict that autonomous vehicles will gradually be introduced into the market with +

Experts predict that autonomous vehicles will gradually be introduced into the market with the following anticipated benchmarks:

    -
  1. 2017 U.S. Department of Transportation hopes to publish a rule mandating +
  2. 2017 U.S. Department of Transportation hopes to publish a rule mandating vehicle-to-vehicle (V2V) communication by an unspecified future date.
  3. -
  4. 2018 Tesla Motors expects to produce a version of fully self-driving cars, +
  5. 2018 Tesla Motors expects to produce a version of fully self-driving cars, where the driver can fall asleep, though the actuality of marketing such a vehicle will depend on the economic and legal climate.
  6. -
  7. 2020 GM, Mercedes-Benz, Audi, Nissan, BMW, Renault, Tesla, and Google all expect +
  8. 2020 GM, Mercedes-Benz, Audi, Nissan, BMW, Renault, Tesla, and Google all expect to sell vehicles that can drive themselves at least part of the time.
  9. 2024 Jaguar expects to release an autonomous car.
  10. 2025 Daimler and Ford expect to release autonomous vehicles on the market.
  11. -
  12. 2035 Information Handling Services (IHS) Automotive Report projects that most self-driving vehicles +
  13. 2035 Information Handling Services (IHS) Automotive Report projects that most self-driving vehicles will be operated completely independently from a human occupant’s control.
  14. -
  15. 2040 Experts at the Institute of Electrical and Electronics Engineers (IEEE) +
  16. 2040 Experts at the Institute of Electrical and Electronics Engineers (IEEE) estimate that up to 75% of all vehicles will be autonomous.

Clearly, the introduction and widespread adoption of autonomous vehicles will have enormous repercussions.

The Impact of Driverless Cars

-

While it appears at first glance that a driverless car will be more dangerous than a +

While it appears at first glance that a driverless car will be more dangerous than a manually driven vehicle, it has been estimated that once we switch to a driverless - economy, we will see a 90% reduction in crashes, saving nearly 30,000 lives and + economy, we will see a 90% reduction in crashes, saving nearly 30,000 lives and preventing 2.12 million injuries annually. Indeed, the whole design of the car will - change. Currently, a car is designed around the needs of the driver, but, when + change. Currently, a car is designed around the needs of the driver, but, when all in the car are passengers, the interior space will be designed more economically and efficiently.

Beyond redesigning the car, we will also redesign our system of roads and traffic - control. This could mean loss of lots of road signs, lane markers, and street lights. - Cars can merge and change lanes more efficiently and speed limits can be safely + control. This could mean loss of lots of road signs, lane markers, and street lights. + Cars can merge and change lanes more efficiently and speed limits can be safely raised. Traffic control planners can redesign traffic flow to cooperative patterns that will increase safety and reduce travel time (and road rage!)

But this innovation is not without cost. We are a driving-based economy. Truckers, taxis, car rentals, and car servicing are all based directly or indirectly on - manually-driven vehicles. The Bureau of Labor Statistics lists that 884,000 people + manually-driven vehicles. The Bureau of Labor Statistics lists that 884,000 people are employed in motor vehicles and parts manufacturing, and an additional 3.02 million in - dealer and maintenance network. Truck, bus, delivery, and taxi drivers account + dealer and maintenance network. Truck, bus, delivery, and taxi drivers account for nearly 6 million professional driving jobs. That is 10 million jobs immediately at risk with a move to a driverless economy and that does not count ancillary industries, - such as roadside diners and motels, which will also be affected when we need to + such as roadside diners and motels, which will also be affected when we need to drive less often.

-

On the other hand, research shows that currently manually-driven cars are driven +

On the other hand, research shows that currently manually-driven cars are driven just 4% of the time at an average cost of $9000 per year in maintenance and upkeep. Thus, an economy in which autonomous vehicles offered through car-sharing services like - Uber replace self-owned and self-driven cars, promises an enormous amount of savings - to the individual. It is estimated that despite the economic upheaval, eliminating the need + Uber replace self-owned and self-driven cars, promises an enormous amount of savings + to the individual. It is estimated that despite the economic upheaval, eliminating the need for car ownership will yield over $1 trillion in additional disposable income.

These are exciting times. While the full economic and social impact of a driverless - economy are still not fully grasped, the driverless economy once fully implemented will dwarf the impact of + economy are still not fully grasped, the driverless economy once fully implemented will dwarf the impact of the automobile, airplane, personal computer, and cell phone in how it changes our lives and work.

Now we just need to create a driverless car that can fly and I'm all set.

- +
- + - \ No newline at end of file + diff --git a/tutorial/dlr_tables.css b/tutorial/dlr_tables.css new file mode 100644 index 0000000..40ba3f9 --- /dev/null +++ b/tutorial/dlr_tables.css @@ -0,0 +1,72 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML and CSS + Tutorial 6 + Tutorial Case + + Tables Style Sheet + Author: Josh, Dylan + Date: 11/19/18 + + Filename: dlr_tables.css + +*/ + +/* Table Styles */ +table.schedule { + background: white; + border: 10px outset rgb(153,0,153); + border-collapse: collapse; + font-size: 0.75em; + width: 100%; +} + + +/* Table Cell Styles */ +table.schedule th, table.schedule td { + border: 1px solid grey; + padding: 5px; + vertical-align: top; +} + + +/* Table Caption Styles */ +table.schedule caption { + caption-side: bottom; + text-align: right; +} + + +/* Row Group Styles */ +table.schedule thead { + background: rgb(153,0,153); + color: white; +} + +table.schedule tfoot { + background: black; + color: white; +} + +table.schedule thead tr { + height: 30px; +} + +table.schedule tbody tr { + height: 40px; +} + + + + +/* Column Group Styles */ +col#firstCol { + background: rgb(218,210,218); + width: 16%; +} + +col.dayCols { + background: rgb(255,220,255); + width: 12%; +} diff --git a/tutorial/dlr_tables_txt.css b/tutorial/dlr_tables_txt.css deleted file mode 100644 index 4c595cd..0000000 --- a/tutorial/dlr_tables_txt.css +++ /dev/null @@ -1,33 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML and CSS - Tutorial 6 - Tutorial Case - - Tables Style Sheet - Author: - Date: - - Filename: dlr_tables.css - -*/ - -/* Table Styles */ - - - -/* Table Cell Styles */ - - - -/* Table Caption Styles */ - - - -/* Row Group Styles */ - - - -/* Column Group Styles */ -