diff --git a/1600.jpeg b/1600.jpeg new file mode 100644 index 0000000..87383d0 Binary files /dev/null and b/1600.jpeg differ diff --git a/case1/jtc_index_txt.html b/case1/jtc_index_txt.html index 82811df..06b7f55 100644 --- a/case1/jtc_index_txt.html +++ b/case1/jtc_index_txt.html @@ -7,16 +7,71 @@ Case Problem 1 Jedds Tree Care Home Page - Author: - Date: + Author: Kenaz & Bethany + Date: 9/11/18 Filename: jtc_index.html --> - + Jedds Tree Care + + + + +
+ +
+ +
+
+ Jedds Tree Care +

Jedds Tree Care is a complete yard service including branch trimming, pruning, +stump removal and emergency tree removal. We offer same day emergency service 24/7. +Jedds operates out of East Lansing, MI, but also serves the surrounding counties +for your urban and rural needs. We provide tree and yard care for both commercial +and residential clients. Customer satisfaction is our primary goal.

+ +

Our business is fully insured. Safety is our number one priority. We have +professional arborists on staff to deal with your special needs and we can +handle any job, large or small.

+
+Jedds Tree Care
+201 Edward Ave.
+Lansing, MI 48930
+email: jeddstree@example.com
+phone: 517.555.4811 +
+
+
diff --git a/case1/jtc_services.html b/case1/jtc_services.html new file mode 100644 index 0000000..97167e7 --- /dev/null +++ b/case1/jtc_services.html @@ -0,0 +1,78 @@ + + + + + Jedds Tree Care Services + + + + + + + +
+ +
+

Jedds Tree Care Services

+ +

Tree Removal

+

We perform professional tree removal using proven methods and top equipment, +guarding against damage to your lawn, home, or garden. We're experts in the +fields with 20 years of experience.

+ +

Pruning

+

Enhance the beauty and health of your trees and shrubbery with regular pruning. + We remove dead and dying branches due to disease, insert infestation and other + adverse conditions.

+ +

Storm Damage

+

No one plans for storm damage. Call us after the storm has cleared and + we'll soon be out to give you an estimate and facilitate your + insurance claim. We are fully licensed and can get to work immediately with + the removal of debris to limit existing dangers + before returning to do a complete take down and repair.

+ +

Shrubs and Bushes

+

Properly trimmed shrubbery is important for aesthetic beauty and continued growth and + health. Call us to do maintenance on your greening, enhancing the beauty of your property.

+ +

Disease Prevention

+

We are professional arborists with deep understanding of the diseases that can afflict your + trees, bushes, and other greenery. If dealt with soon enough, many trees can be saved, so + don't delay in giving us and call and receiving our free consultation.

+

Tree Structure Repair

+

Trees become old and dear friends. Before removing a beloved tree, call us to access the + damage. Many trees can be saved by proper pruning, replanting, or restructuring. We take great + pride in our ability to rescue even the most damaged trees.

+ +

Lot Clearing

+

From large rural acreage to smaller urban lots, we can help in clearing your land in preparation + for remodelling and building. Call us today for a free consultation. We can do the work to + your exact specifications, maintaining the beauty of your property.

+ +

Tree Planting and Transplanting

+

We are ready to help as you landscape your property by replanting old trees and planting new + ones. We can work with your trees, shrubbery, and other greenery to enhance the natural + beauty of your property and help you achieve your landscaping vision.

+ + + + diff --git a/case1/jtc_services_txt.html b/case1/jtc_services_txt.html index faf9154..3d7aff4 100644 --- a/case1/jtc_services_txt.html +++ b/case1/jtc_services_txt.html @@ -7,16 +7,73 @@ Case Problem 1 Jacobs Tree Care Services - Author: - Date: + Author: Kenaz & Bethany + Date: 9/11/18 Filename: jtc_services.html --> - + Jedds Tree Care Services + + + + +
+ +
+

Jedds Tree Care Services

+ +

Tree Removal

+

We perform professional tree removal using proven methods and top equipment, +guarding against damage to your lawn, home, or garden. We're experts in the +fields with 20 years of experience.

+ +

Pruning

+

Enhance the beauty and health of your trees and shrubbery with regular pruning. +We remove dead and dying branches due to disease, insert infestation and other +adverse conditions.

+ +

Storm Damage

+

No one plans for storm damage. Call us after the storm has cleared and +we'll soon be out to give you an estimate and facilitate your +insurance claim. We are fully licensed and can get to work immediately with +the removal of debris to limit existing dangers +before returning to do a complete take down and repair.

+ +

Shrubs and Bushes

+

Properly trimmed shrubbery is important for aesthetic beauty and continued growth and +health. Call us to do maintenance on your greening, enhancing the beauty of your property.

+ +

Disease Prevention

+

We are professional arborists with deep understanding of the diseases that can afflict your +trees, bushes, and other greenery. If dealt with soon enough, many trees can be saved, so +don't delay in giving us and call and receiving our free consultation.

+

+Tree Structure Repair

+

Trees become old and dear friends. Before removing a beloved tree, call us to access the +damage. Many trees can be saved by proper pruning, replanting, or restructuring. We take great +pride in our ability to rescue even the most damaged trees.

+ +

Lot Clearing

+

From large rural acreage to smaller urban lots, we can help in clearing your land in preparation +for remodelling and building. Call us today for a free consultation. We can do the work to +your exact specifications, maintaining the beauty of your property.

+

Tree Planting and Transplanting

+

We are ready to help as you landscape your property by replanting old trees and planting new +ones. We can work with your trees, shrubbery, and other greenery to enhance the natural +beauty of your property and help you achieve your landscaping vision.

+ diff --git a/case2/ms_euler_txt.html b/case2/ms_euler_txt.html index 217c2af..3ee3cf3 100644 --- a/case2/ms_euler_txt.html +++ b/case2/ms_euler_txt.html @@ -7,16 +7,86 @@ Case Problem 2 Leonhard Euler Biography - Author: - Date: + Author: Bethany & Kenaz + Date: 9/11/18 Filename: ms_euler.html --> - + + + Leonhard Euler (1707-1783) + + - + + +
+ Math Strings +
+
+

Leonhard Euler (1707-1783)

+ +

The greatest mathematician of the eighteenth century, + Leonhard Euler. was born in Basel, Switzerland. There, + he studied under another giant of mathematics, Jean + Bernoulli. In 1731 Euler became a professor of physics + and mathematics at St. Petersburg Academy of Sciences. + Euler was the most prolific mathematician of all time, + publishing over 800 different books and papers. His + influence was felt in physics and astronomy as well.

+ +

He is perhaps best known for his research into + mathematical analysis. Euler's work, + Introductio in analysin infinitorum (1748), + remained a standard textbook in the field for + well over a century. For the princess of Anhalt-Dessau, + he wrote + Lettres à une princesse d'Allemagne (1768-1772), + giving a clear non-technical outline of the main + physical theories of the time.

+ +

One can hardly write a mathematical equation without + copying Euler. Notations still in use today, such + as e and π, were introduced + in Euler's writings. Leonhard Euler died in 1783, + leaving behind a legacy perhaps unmatched, and + certainly unsurpassed, in the annals of mathematics.

+
+ + + diff --git a/case2/ms_pages.txt b/case2/ms_pages.txt index 75e7fa2..fdf00af 100644 --- a/case2/ms_pages.txt +++ b/case2/ms_pages.txt @@ -61,4 +61,4 @@ The Euler Archive Euler at Biography.com Euler at Famous Scientists -==================================================================== \ No newline at end of file +==================================================================== diff --git a/case3/dr_faq_txt.html b/case3/dr_faq_txt.html index 69ed79b..326d02e 100644 --- a/case3/dr_faq_txt.html +++ b/case3/dr_faq_txt.html @@ -7,20 +7,132 @@ Case Problem 3 Diane's Run Home Page - Author: - Date: + Author: Kenaz and Bethany + Date: 9/11/18 Filename: dr_faq.html --> - - - - Diane's Run FAQ + + + + + + Diane's Run FAQ +
+ + +
+
+
Diane's Run +

Frequently Asked Questions

+
+
    +
  1. How do I sign up?
  2. +
  3. What is the minimum fund-raising total I have to raise?
  4. +
  5. Will I receive a shirt to wear at the race?
  6. +
  7. When will my registration pack arrive?
  8. +
  9. What does it cost to register?
  10. +
  11. What happens during the race?
  12. +
  13. Will the race be cancelled if it rains?
  14. +
  15. Do I need to register my child?
  16. +
  17. Can I bring my pet?
  18. +
  19. Where do I park?
  20. +
  21. Can I collect sponsorship online
  22. +
  23. How do I withdraw from the event?
  24. +
  25. I am looking for accommodation for the event, where is best to stay?
  26. +
+ +

How do I sign up?

+

Go to our online form where you can enter your registration information. +Remember that the registration desk is closed the night before the +event.

+ + +

What is the minimum fund-raising total I have to raise?

+

There is no minimum sponsorship target. Any total will help in the cause. +Just try and raise as much as you can.

+ + +

Will I receive a shirt to wear at the race?

+

Yes! We will be sending out a state of the art running vest or T-shirt +to you in the post about a month before race day. Please remember to +specify which vest or T-shirt size you would like when +confirming your place.

+ + +

When will my registration pack arrive?

+

We will mail out your registration pack in the post within two weeks +of your registration. If you have not received the pack within that +time, please contact us.

+ + +

What does it cost to register?

+

$35 for the 5K/10K race. The 1-Mile Fun Runs are free.

+ + +

What happens during the race?

+

Please visit the Race Info page for all +details on what to expect on race day.

+ + +

Will the race be cancelled if it rains?

+

This event will occur rain or shine. We suggest ponchos and rain +gear if it does happen to rain. All registration fees and donations +are non-refundable in the event of rain.

+ + +

Do I need to register my child?

+

Yes, if your child is participating in the 5K/10K races. There is no +need to register children for the 1 Mile Fun Run.

+ + +

Can I bring my pet?

+

Pets are discouraged at the race. There are over 2000 people competing in the race +and it is too crowded to accommodate pets.

+ + +

Where do I park?

+

The earlier you arrive at the race site, the easier parking will be! +You may park on the streets as long as you are not blocking driveways or +residential streets. We encourage you to carpool with your team or +other participants if possible.

+ + +

Can I collect sponsorship online?

+

Yes. You can sign up at several web charity organizers and follow +their easy step by step guide to create your own online fund-raising page. +All money raised through your page will be automatically sent through to +us and allocated to your record.

+ + +

How do I withdraw from the event?

+

The registration pack will include an official event magazine with withdrawal +instructions. Complete the withdrawal form and send it to the race organizers along +with the race gear and timing chip. A $10 organizational fee will be charged +to all withdrawals.

+ + +

I am looking for accommodation for the event, where is best to stay?

+

We are partnering with the Cheyenne Chamber of Commerce to direct visiting +runners for places to stay. Low-cost camping is available in Prairie Park.

+ +

Return to Top

+
+ + diff --git a/case3/dr_index_txt.html b/case3/dr_index_txt.html index 6728611..d1504ee 100644 --- a/case3/dr_index_txt.html +++ b/case3/dr_index_txt.html @@ -7,16 +7,101 @@ Case Problem 3 Diane's Run Home Page - Author: - Date: + Author: Kenaz and Bethany + Date: 9/11/18 Filename: dr_index.html --> - + + + Diane's Run + + - - +
+ +
+
+

What Your Support Does

+ +

Every 10 minutes a woman is diagnosed with breast cancer. Her first reaction +is fear and confusion. Support is just a phone call or mouse click away. Our +free services offer a friendly ear and expert guidance to anyone dealing with +this life-threatening illness.

+ +

By running or walking with us, you can ensure +that we are there when people need us. Here is how your contribution can +help:

+ +
+
+ Diane's Run +

Diane's Run - September 9, 2017

+ +

Join over 2000 athletes in Cheyenne, Wyoming, for Diane's Run +to raise money for breast cancer awareness and research. The 5K and 10K races +are challenging, yet attainable. You can aim for a personal best while taking part to +raise money for this important charity. If you can't run, consider walking; joining +young and old in the fight by participating in the 1-Mile Walk for Hope.

+ + +

How to Join

+ +

You can guarantee a spot by filling out the entry form and mailing it to +dianesrun@example.com. +The $35 entry fee is tax deductible and goes directly to +important research and women in need. We keep our overhead very low so every dollar +counts. More than 75% of the net proceeds fund screening and treatment +programs in your communities. We welcome out-of-town visitors. We will +help you find accommodations during your visit.

+ + +

History

+ +

Since its inception in 2004, Diane's Run has grown from a purely local event involving +100 runners to a signature Wyoming event with more than 2000 participants annually. +The event is enormously effective in spreading the message that breast cancer need +not be fatal if caught early enough with mammography and breast self-exam. +As well as a top-flight athletic event, Diane's Run is an emotionally moving event +attracting many first timers and recreational runners. This event provides all of +us with the opportunity to spread a hopeful message about breast cancer to our families +and our communities.

+ + +

Remembering Diane

+ +

Diane's Run is named in remembrance of Diane Wheaton, mother of 2 and wife +of Peter, who passed away in May, 2003. Diane was an outspoken advocate of physical +fitness and healthy living. She was an inspiration to all who knew her and continues +to be an inspiration to the thousands of runners who have participated in this event. + +We hope you can join us this year and become part of the Diane's Run family.

+
+ + diff --git a/case3/dr_info_txt.html b/case3/dr_info_txt.html index a5a3d15..dc20239 100644 --- a/case3/dr_info_txt.html +++ b/case3/dr_info_txt.html @@ -7,19 +7,68 @@ Case Problem 3 Diane's Run Race Information - Author: - Date: + Author: Kenaz and Bethany + Date: 9/11/18 Filename: dr_info.html --> Diane's Run Race Info - + + +
+ +
+
+
+

Page Last Updated: .

+
+

Race Information

+ Diane's Run + +

The 2017 Diane's Run will be held Saturday, September 9th in Cheyenne starting at +Prairie Park. All race fees are non-refundable and non-transferable, even in the event +of inclement weather. Two races are offered: a 5K (3.1 miles) and a 10K (6.2 miles) event. +We also offer a 1-mile Family Fun Walk.

+ + +

Race Times

+ + +

Goodies and Stuff

+ +

Notes

+ +
+ diff --git a/case4/hg_alliance.html b/case4/hg_alliance.html new file mode 100644 index 0000000..6934c0f --- /dev/null +++ b/case4/hg_alliance.html @@ -0,0 +1,165 @@ + + + + + + Harpe Gaming Information + + + + + +
+ +
+

Harpe Gaming Logo

+ Alliance +

Review of Alliance

+ +

+ Game ID: bg210
+ List Price: $22.15
+ Media: Board Game
+ Release Date: September 14, 2017
+ Age: 12+
+ Players: 2 - 6
+ Time: 60 - 120 minutes
+

+ +

Decide the Fate of the World

+
+

Alliance challenges you and your opponents to decide + the outcome. As one of the world powers + battling for supremacy you must lead your country's + military drive; but you can't do it alone. + You have to form alliances and then betray your + allies before they betray you!

+ +

Decide where to strike, when to strike, and the intensity + of the strike. Will it be a bombing + raid, an offshore missile barrage, or an invasion + with land forces and tanks? Plan your attack, + move into enemy territory with your forces and win + the conflict.

+ +

The economic destiny of your nation is also at stake. + Buy armaments and develop secret + weapons from your country's economic funds and + natural reserves, but be sure to save + something for the future.

+
+ + +
+
+
+
+
+ + +
+

Tedious and Confusing

+
+

The list of war simulation games is long. All of them + share similar features including the + formation of temporary Alliance and battles simulated + through random draws of a deck or the + roll of the die. Alliance offers very little that + is new or innovative in that regard.

+ +

We found the game to be too drawn-out and confusing. + In fact, I dare say we spent more time + reading and rereading the rule book than actually + playing the game. If you want to read a + book on war, we suggest Sun Tzu.

+
+ + + +
Rating: 1 / 5
+ Board Game Review (http://www.example.com/bgreview) +
+ +
+
+ +
+

Decent Game but Many are Better

+
+

Alliance is a good war simulation game. We found the + game play to be robust and engaging. The + rules are long and drawn out but, for anyone with + experience in this class of board games, there + is little there that's unexpected or difficult. We + think the battle simulation cards are some of + the best we have encountered.

+ +

All of that being said, the competition for this type + of game is fierce. There are a lot of + established titles with loyal clients. We're not + exactly sure where Alliance fits in with + that group. It's a good game, but not good enough + to draw our attention away from games like + Battle Tested and Global Conflict.

+
+ Rating: 7 / 10
+ Tactics and Trials (http://www.example.com/tacticstrials) +
+ +
+

Fun and Challenging

+
+

Alliance is fun game and is sure to appeal to + war game enthusiasts. We think it offers several new + ideas that we're surprised have not been utilized in other simulation games. The card system and the + investment options give the game a "real world" feel.

+ +

Things We Liked

+ + +

Things We Hated

+ + +

This is a great game for anyone 16 years or older. Younger players may have trouble with the rules and may be bored

+ +
Rating: 4 / 5
+ Leisure Room Gamers (mailto:http://www.example.com/leisureroom) +
+ + + diff --git a/case4/hg_index.html b/case4/hg_index.html new file mode 100644 index 0000000..7d134ea --- /dev/null +++ b/case4/hg_index.html @@ -0,0 +1,79 @@ + + + + + + + + + Harpe Gaming Information + + + +
+ +
+

Harpe Gaming Logo

+
+ Welcome to Harpe Gaming. We have a simple philosophy. It has three main points: + + +

And that's it. We believe that the best games are the ones + that bring people together through shared experiences. With + all due respect to our video gamer friends, you can't always get + that from a computer screen. Sometimes you need the + intimate approach of sitting face-to-face around + a common table with the soda and chips at your elbow.

+ +

We are a local board and card game store located in the + heart of Morgantown near the campus. We carry + hundreds of games and puzzles, including educational games, family games, card games, historical + simulations, role-playing games, and so much more. + If you remember a great game from your youth, we + probably have it in our antiques collection. If we don't, we know where we can get it.

+ +

We're more than just a place to buy games. We celebrate + gaming and the company of good friends. + Our game room is free for all to us. Sit down, pick out + a game from our demo library and start playing. + We sponsor tournaments, challenges, and special + social events. You'll always find a game to play.

+ +

We're always on the lookout for the best new games. We + publish periodic reviews of new titles. Just out + our reviews of Towers and Temples and Alliance; both + new this month at Harpe Gaming.

+ +
+
Questions? Contact us at:
+ sgreer@example.com/harpe
+ or call us at:
+ (304) 555-7120
+
+
+ + + diff --git a/case4/hg_towers.html b/case4/hg_towers.html new file mode 100644 index 0000000..1826f8c --- /dev/null +++ b/case4/hg_towers.html @@ -0,0 +1,139 @@ + + + + + + Harpe Gaming Information + + + + + +
+ +
+

Harpe Gaming Logo

+ Towers & Temples +

Review of Towers and Temples

+ + Game ID: bg210
+ List Price: $17.73
+ Media Board: Game
+ Release Date: October 21, 2017
+ Age: 10+
+ Players: 2 - 8
+ Time: 30 - 60 minutes
+ +

Rule an Ancient City

+
+

Towers and Temples is the winner of the 2017 Palmer + Medal for Best New Simulation Board Game. + Players adopt role cards of characters from ancient + Greece and Rome in an attempt to manage + the administration of a city. Each role provides + a different ability and strategy. However, + one role card belongs to a deadly assassin and players + must be constantly aware of betrayal + and double-cross. This card game provides a ton + of enjoyment and can handle up to eight players + and expansion packs available for larger parties.

+ +

This is a nicely balanced game, where each player must + carefully choose his or her roles and + the strategies can quickly change with the turn + of a card. However the level of randomness is + just right and cunning and resourcefulness can + overcome bad luck (if given time.) I do not + recommend this game unless there are at least 4 + players; less than that reduces the intrigue + and some of the game appeal.

+
+ + + +
+

Highly Recommended

+
+

Towers and Temples is a great game. The balance is + just about perfect and each player must + carefully choose roles each turn. Even though the + strategic possibilities are nearly endless, + the game is simple to learn. The replay value is + high and gets even better when you replace + some of the cards with new cards available in the + expansion packs.

+ +
Rating: 4.5 / 5
+ Board Game Review (http://www.example.com/bgreview) +
+ +
+

Great Strategic Board Game

+
+

We tested Towers and Temples with everything from 2 + to 6 players and we can strongly + recommend the game. The different phases of the + game are interesting and intriguing, from + bluffing and stealing to site construction and planning. + With the variety of cards and + scenarios, no two games are ever quite the same. It's + a great introduction to the world of + strategic board games and role playing.

+ +
Rating: 5 / 5
+ Gamers Shop (http://www.example.com/gamersshop) +
+ + +
+

An Incredible Game

+
+

The artwork on the cards and the board is excellent + and one of the best around. As + for play, this game offers lots of strategy, and there + are tough decisions to make every + turn. It's not only important to select the character + that increases your chances for scoring, + but also to anticipate the characters the opponents + are likely to select, and then hedge against + their availability. This causes a lot of unpredictability + and deep strategic thinking. However, + it can still be played at a more basic level for + younger users.

+ +

We had a lot of fun with this game and rate it as + Best in its Class. Highly recommended.

+ +
Rating: 10 / 10
+ Tactics and Trials (http://www.example.com/tacticstrials) +
+ + + diff --git a/case4/jtc_base.css b/case4/jtc_base.css new file mode 100644 index 0000000..7653e9e --- /dev/null +++ b/case4/jtc_base.css @@ -0,0 +1,244 @@ +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 1 + Case Problem 1 + Filename: jtc_base.css + + This file contains the base styles used by all pages at JTC + +*/ + + +/* ============================================= + HTML5 structural elements + ============================================= +*/ + +article, aside, details, dl, figcaption, figure, footer, header, main, nav, section { + display: block; +} + + +/* ============================================= + Default colors, margins and sizing + ============================================= +*/ + +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +html, button, input, select, textarea { + font-family: serif; + color: #222; +} +body { + margin: 0; + font-size: 1em; + line-height: 1.4; +} + + +/* ============================================= + Hypertext links + ============================================= +*/ + +a { + color: #00e; +} +a:visited { + color: #551a8b; +} +a:hover { + color: #06e; +} +a:focus { + outline: thin dotted; +} +a:hover, a:active { + outline: 0; +} + + +/* ============================================= + Default font styles + ============================================= +*/ + +abbr[title] { + border-bottom: 1px dotted; +} +b, strong { + font-weight: bold; +} +blockquote { + margin: 1em 40px; +} +dfn { + font-style: italic; +} +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} +ins { + background: #ff9; + color: #000; + text-decoration: none; +} +mark { + background: #ff0; + color: #000; + font-style: italic; + font-weight: bold; +} +pre, code, kbd, samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} +q { + quotes: none; +} +q:before, q:after { + content: ""; + content: none; +} +small { + font-size: 85%; +} +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} + + +/* ============================================= + Default list styles + ============================================= +*/ + +ul, ol { + margin: 1em 0; + padding: 0 0 0 40px; +} +dd { + margin: 0 0 0 40px; +} +nav ul, nav ol { + list-style: none; + list-style-image: none; + margin: 0; + padding: 0; +} + + +/* ============================================= + Default styles for images and media + ============================================= +*/ + +img { + border: 0; + -ms-interpolation-mode: bicubic; + vertical-align: middle; +} +figure { + margin: 0; +} + + + +/* ============================================= + Default styles for web forms + ============================================= +*/ + +form { + margin: 0; +} +fieldset { + border: 0; + margin: 0; + padding: 0; +} +label { + cursor: pointer; +} +legend { + border: 0; + padding: 0; + white-space: normal; +} +button, input, select, textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; +} +button, input { + line-height: normal; +} +button, input[type="button"], input[type="reset"], input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} +button[disabled], input[disabled] { + cursor: default; +} +input[type="checkbox"], input[type="radio"] { + box-sizing: border-box; + padding: 0; + +} +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { +-webkit-appearance: none; +} +button::-moz-focus-inner, input::-moz-focus-inner { +border: 0; +padding: 0; +} +textarea { + overflow: auto; + vertical-align: top; + resize: vertical; +} + + + +/* ============================================= + Default styles for web tables + ============================================= +*/ + +table { + border-collapse: collapse; + border-spacing: 0; +} +td, th { + vertical-align: top; +} diff --git a/case4/jtc_layout.css b/case4/jtc_layout.css new file mode 100644 index 0000000..4575f30 --- /dev/null +++ b/case4/jtc_layout.css @@ -0,0 +1,234 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 1 + Case Problem 1 + Filename: jtc_layout.css + + This file contains the layout styles used in the JTC website + +*/ + +/* ============================================= + Base layout styles used by mobile devices + up to 480px and cascaded to larger devices + unless superceded by other styles. + ============================================= +*/ + + +html { + height: 100%; + margin: 0; padding: 0; border: 0; +} + +body { + margin: 0px auto auto auto; + width: 100%; + position: relative; + background-color: white; + border-left: 1px solid gray; + border-right: 1px solid gray; +} + + +body > header nav { + display: block; + text-align: right; + width: 100%; + height: 28px; + background-color: #b5cc88; + border-bottom: 2px solid #0084bf; +} + +body > header > nav ul li { + display: inline; + padding-right: 25px; + font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif; + color: #EFEFEF; +} + +body > header > nav ul li a { + color: #EFEFEF; + text-decoration: none; + letter-spacing: 0.25em; +} + +body > header > nav ul li a:visited { + color: #EFEFEF; +} + + +body > header > nav ul li a:hover { + color: #ffff80; +} + +body > header > nav ul li a:active { + color: #ffff80; +} + +article { + position: relative; + display: block; +} + +article header img { + display: block; + width: 100%; +} + +article p { + margin-left: 20px; + margin-right: 20px; + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; + font-size: 0.9em; +} + +article address { + margin: 50px 0px 0px 50px; + font-style: normal; + font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; + padding-bottom: 20px; + font-size: 0.9em; +} + +aside { + display: none; +} + + +body > h1 { + font-size: 1.7em; + font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; + margin: 5px; +} + +body > h2 { + font-size: 1.1em; + font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; + margin-left: 15px; +} + +body > p { + font-size: 0.9em; + font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; + margin-left: 15px; +} + +body > img { + width: 100%; +} + +footer { + font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; + text-align: center; + font-size: 0.7em; + border-top: 2px solid #73DF6B; + padding-top: 10px; + padding-bottom: 20px; +} + +/* ============================================= + Tablet layout styles used by devices + 601px to 768px and cascaded to larger + devices. + ============================================= +*/ + + +@media only screen and (min-width: 601px) { + +body { + min-height: 100%; +} + +body > header nav ul { + position:absolute; + top: 0; + right: 0; +} + +article { + margin-left: 250px; +} + +article p { + font-size: 1.1em; +} + + +article header img { + position: inherit; + width: 100%; + display: block; +} + + +aside { + display: block; + float: left; + width: 250px; + background-color: #a29d96; + margin-top: -30px; +} + +aside blockquote { + width: 80%; + color: white; + margin: 10px auto 20px; + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; + font-size: 0.9em; +} + +article address { + font-size: 1.1em; +} + +body > h1 { + margin-left: 20px; + font-size: 2.5em; +} + +body > h2 { + margin-left: 30px; + font-size: 1.5em; +} + +body > p { + margin-left: 30px; + font-size: 1em; +} + +body > img { + width: 50%; + float: right; + margin: 0px 10px 10px 10px; +} + +footer { + font-size: 1em; +} + +} + +/* ============================================= + Desktop layout styles used by devices + 769px and larger. + ============================================= +*/ + +@media only screen and (min-width: 769px) { + +html { + background-color: #92ad57; +} + +body { + width: 90%; + max-width: 1020px; + -moz-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px, rgba(31, 61, 31, 0.9) -20px 0px 25px; + -webkit-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px, rgba(31, 61, 31, 0.9) -20px 0px 25px; + box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px, rgba(31, 61, 31, 0.9) -20px 0px 25px; +} + +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..6a9a5a9 --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + Tutorial 6 + + + + + + +
+

Tutorial 5 links

+ +
+
+ +
+ diff --git a/reset.css b/reset.css new file mode 100644 index 0000000..755a127 --- /dev/null +++ b/reset.css @@ -0,0 +1,54 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + + + Tutorial 5 Reset Style Sheet + + Filename: reset.css + +*/ + + +/* Basic styles to be used with all devices and under all conditions */ + + +header, nav, section { + display: block; +} + +body, h1, header, html, img, +li, main, nav, nav a, section, ul { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; + 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; +} + +nav a { + text-decoration: none; +} + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..fa79ea2 --- /dev/null +++ b/styles.css @@ -0,0 +1,93 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + + Filename: styles.css + + This file contains the layout styles used in the Tutorial 5 + home page. + +*/ + +/* =========== + Base Styles + =========== +*/ + + +/* HTML and Body Styles */ + +body { + background: tan center center / cover no-repeat fixed; + height: 100%; + font-family: Verdana, Geneva, sans-serif; + font-size: 12px; +} + +/* Horizonal Navigation Styles */ + +nav.horizontal { + background-color: rgb(117, 140, 72); + min-height: 2em; +} + +nav.horizontal ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +nav.horizontal li { + color: rgb(31, 73, 125); + float: left; + line-height: 2em; + text-transform: uppercase; + width: 16%; +} + +nav.horizontal a { + display: block; + font-size: 1em; +} + +nav.horizontal a:visited, nav.horizontal a:link { + color: rgb(31, 73, 125); +} + +nav.horizontal a:hover, nav.horizontal a:active { + background-color: rgb(31, 73, 125); + color: white; +} + +/* Section Styles */ + +section { + background-color: rgb(207, 222, 172); + clear: both; +} + +section::after { + content: ""; + display: table; + clear: both; +} + +section img { + display: block; + width: 100%; +} + +/* New Styles Added Below */ + +/* =============================== + Mobile Styles: 0px to 480px + =============================== +*/ +@media only screen and (max-width: 480px) { + + nav.horizontal a { + font-size: 1.5em; + line-height: 2.2em; + } diff --git a/tutorial/ct_about.html b/tutorial/ct_about.html new file mode 100644 index 0000000..220a0b9 --- /dev/null +++ b/tutorial/ct_about.html @@ -0,0 +1,62 @@ + + + + + + + + About Curbside Thai + + + + +
+ Curbside Thai + +
+
+

About Us

+ +

Curbside Thai brings the rich flavor of Thailand to + North Carlolina. Mather Chef Sajja Adulet, with over 35 + years of experience at the House of Asia, now offers + that same fine dining to the streets of Charlotte + with our modern mobile food truck.

+ +

This is not bland vendor food packaged in greasy + paper boxes! Sample his acclaimed cuisine at our various + mobile locations throughout downtown Charlotte from + 11 a.m. to 7 p.m. on Monday through Thursday, and + 11 a.m. to 11 p.m. on Friday and Saturday. Taste the + difference! If you can't get away from your desk, + Curbside Thai will deliver.

+ +

Contact us to cater your next party and experience + what Carolina Traveler calls the finest Asian food + on or off the streets of Charlotte.

+
+ + + + + diff --git a/tutorial/ct_catering_txt.html b/tutorial/ct_catering_txt.html index ff14419..fbf87df 100644 --- a/tutorial/ct_catering_txt.html +++ b/tutorial/ct_catering_txt.html @@ -7,8 +7,8 @@ Tutorial Case Curbside Thai Catering Page - Author: - Date: + Author: Kenaz and Bethany + Date: 9/6/18 Filename: ct_catering.html --> @@ -21,10 +21,37 @@

Catering

+ +

Since 2010 Curbside Thai has provided top-class catering for weddings + and special events. We cover Charlotte and large regions of North + Carolina with our mobile food truck, built specially for catering big + events.

+

Meals are cooked up hot and on the spot at your venue. We have an + experienced uniformed catering crew providing professional service for + events ranging from 50 to 300. We will provide the plates, linens, + glassware and other dining items, upon request.

+

Curbside Thai is licensed to do full bar service catering with a wide + range of spirits, beer, and wine! Ask us about a custom drink menu + for your wedding or private event. We also can provide an array of + great specialty Asian teas and drinks.

+

Impress your friends and co-workers with a Curbside Thai-catered + event!

+ +