├── README.md ├── assignment-11-example ├── README.md ├── fonts │ ├── FiraSans-Bold.ttf │ ├── FiraSans-Regular.ttf │ ├── Merriweather-Bold.ttf │ └── Merriweather-Regular.ttf ├── css │ ├── fonts.css │ └── style.css └── index.html ├── assignment-12-example ├── README.md ├── images │ ├── cover.jpg │ └── abrams_lama_tutu-2016.jpg ├── fonts │ ├── FiraSans-Bold.ttf │ ├── FiraSans-Regular.ttf │ ├── Merriweather-Bold.ttf │ └── Merriweather-Regular.ttf ├── css │ ├── fonts.css │ └── style.css └── index.html ├── assignment-13-example ├── README.md ├── images │ ├── road1.jpg │ ├── road2.jpg │ ├── road3.jpg │ ├── road4.jpg │ ├── road1-small.jpg │ ├── road2-small.jpg │ ├── road3-small.jpg │ └── road4-small.jpg ├── fonts │ ├── FiraSans-Bold.ttf │ ├── FiraSans-Regular.ttf │ ├── Merriweather-Bold.ttf │ └── Merriweather-Regular.ttf ├── css │ ├── fonts.css │ └── style.css ├── contact.html ├── index.html ├── about.html └── services.html ├── _config.yml ├── fonts ├── test.txt ├── PlayfairDisplay-Bold.ttf ├── PlayfairDisplay-Black.ttf ├── PlayfairDisplay-Italic.ttf ├── PlayfairDisplay-Medium.ttf ├── PlayfairDisplay-ExtraBold.ttf ├── PlayfairDisplay-Regular.ttf ├── PlayfairDisplay-SemiBold.ttf ├── PlayfairDisplay-BlackItalic.ttf ├── PlayfairDisplay-BoldItalic.ttf ├── PlayfairDisplay-MediumItalic.ttf ├── PlayfairDisplay-SemiBoldItalic.ttf └── PlayfairDisplay-ExtraBoldItalic.ttf ├── graphics └── icons │ ├── readme.md │ ├── star.png │ ├── scissors.png │ ├── github-icon.png │ ├── scissors_small.png │ ├── racing-flags-left.png │ ├── racing-flags-right.png │ ├── clash-of-clans-logo.png │ └── compass.svg ├── mart-logo-animated.zip ├── assignment-09-example ├── images │ ├── step1.jpg │ ├── step2.jpg │ ├── step3.jpg │ └── Instructable.jpg ├── about.html ├── contact.html └── index.html ├── Assignment-08-Example ├── images │ ├── strumbellas.jpg │ └── mart-logo-poster.jpg ├── media │ ├── mart-logo-animated.mp4 │ └── mart-logo-animated.webm └── index.html ├── assignment-10-example ├── images │ ├── breathofthewild.jpg │ └── Life_Is_Strange_cover.jpg ├── css │ └── style.css └── index.html └── materials ├── a7-stylesheet.css └── fonts.css /README.md: -------------------------------------------------------------------------------- 1 | # 341-web-design 2 | -------------------------------------------------------------------------------- /assignment-11-example/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assignment-12-example/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assignment-13-example/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate -------------------------------------------------------------------------------- /fonts/test.txt: -------------------------------------------------------------------------------- 1 | Fonts will go here 2 | -------------------------------------------------------------------------------- /graphics/icons/readme.md: -------------------------------------------------------------------------------- 1 | icon folder 2 | -------------------------------------------------------------------------------- /mart-logo-animated.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/mart-logo-animated.zip -------------------------------------------------------------------------------- /graphics/icons/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/graphics/icons/star.png -------------------------------------------------------------------------------- /graphics/icons/scissors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/graphics/icons/scissors.png -------------------------------------------------------------------------------- /fonts/PlayfairDisplay-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/fonts/PlayfairDisplay-Bold.ttf -------------------------------------------------------------------------------- /graphics/icons/github-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/graphics/icons/github-icon.png -------------------------------------------------------------------------------- /fonts/PlayfairDisplay-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/fonts/PlayfairDisplay-Black.ttf -------------------------------------------------------------------------------- /fonts/PlayfairDisplay-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/fonts/PlayfairDisplay-Italic.ttf -------------------------------------------------------------------------------- /fonts/PlayfairDisplay-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/fonts/PlayfairDisplay-Medium.ttf -------------------------------------------------------------------------------- /fonts/PlayfairDisplay-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/fonts/PlayfairDisplay-ExtraBold.ttf -------------------------------------------------------------------------------- /fonts/PlayfairDisplay-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/fonts/PlayfairDisplay-Regular.ttf -------------------------------------------------------------------------------- /fonts/PlayfairDisplay-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/fonts/PlayfairDisplay-SemiBold.ttf -------------------------------------------------------------------------------- /graphics/icons/scissors_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/graphics/icons/scissors_small.png -------------------------------------------------------------------------------- /fonts/PlayfairDisplay-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/fonts/PlayfairDisplay-BlackItalic.ttf -------------------------------------------------------------------------------- /fonts/PlayfairDisplay-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/fonts/PlayfairDisplay-BoldItalic.ttf -------------------------------------------------------------------------------- /graphics/icons/racing-flags-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/graphics/icons/racing-flags-left.png -------------------------------------------------------------------------------- /graphics/icons/racing-flags-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/graphics/icons/racing-flags-right.png -------------------------------------------------------------------------------- /assignment-09-example/images/step1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-09-example/images/step1.jpg -------------------------------------------------------------------------------- /assignment-09-example/images/step2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-09-example/images/step2.jpg -------------------------------------------------------------------------------- /assignment-09-example/images/step3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-09-example/images/step3.jpg -------------------------------------------------------------------------------- /assignment-12-example/images/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-12-example/images/cover.jpg -------------------------------------------------------------------------------- /assignment-13-example/images/road1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-13-example/images/road1.jpg -------------------------------------------------------------------------------- /assignment-13-example/images/road2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-13-example/images/road2.jpg -------------------------------------------------------------------------------- /assignment-13-example/images/road3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-13-example/images/road3.jpg -------------------------------------------------------------------------------- /assignment-13-example/images/road4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-13-example/images/road4.jpg -------------------------------------------------------------------------------- /fonts/PlayfairDisplay-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/fonts/PlayfairDisplay-MediumItalic.ttf -------------------------------------------------------------------------------- /fonts/PlayfairDisplay-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/fonts/PlayfairDisplay-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /graphics/icons/clash-of-clans-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/graphics/icons/clash-of-clans-logo.png -------------------------------------------------------------------------------- /fonts/PlayfairDisplay-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/fonts/PlayfairDisplay-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /Assignment-08-Example/images/strumbellas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/Assignment-08-Example/images/strumbellas.jpg -------------------------------------------------------------------------------- /assignment-09-example/images/Instructable.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-09-example/images/Instructable.jpg -------------------------------------------------------------------------------- /assignment-11-example/fonts/FiraSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-11-example/fonts/FiraSans-Bold.ttf -------------------------------------------------------------------------------- /assignment-12-example/fonts/FiraSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-12-example/fonts/FiraSans-Bold.ttf -------------------------------------------------------------------------------- /assignment-13-example/fonts/FiraSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-13-example/fonts/FiraSans-Bold.ttf -------------------------------------------------------------------------------- /assignment-13-example/images/road1-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-13-example/images/road1-small.jpg -------------------------------------------------------------------------------- /assignment-13-example/images/road2-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-13-example/images/road2-small.jpg -------------------------------------------------------------------------------- /assignment-13-example/images/road3-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-13-example/images/road3-small.jpg -------------------------------------------------------------------------------- /assignment-13-example/images/road4-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-13-example/images/road4-small.jpg -------------------------------------------------------------------------------- /Assignment-08-Example/images/mart-logo-poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/Assignment-08-Example/images/mart-logo-poster.jpg -------------------------------------------------------------------------------- /Assignment-08-Example/media/mart-logo-animated.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/Assignment-08-Example/media/mart-logo-animated.mp4 -------------------------------------------------------------------------------- /assignment-10-example/images/breathofthewild.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-10-example/images/breathofthewild.jpg -------------------------------------------------------------------------------- /assignment-11-example/fonts/FiraSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-11-example/fonts/FiraSans-Regular.ttf -------------------------------------------------------------------------------- /assignment-11-example/fonts/Merriweather-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-11-example/fonts/Merriweather-Bold.ttf -------------------------------------------------------------------------------- /assignment-12-example/fonts/FiraSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-12-example/fonts/FiraSans-Regular.ttf -------------------------------------------------------------------------------- /assignment-12-example/fonts/Merriweather-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-12-example/fonts/Merriweather-Bold.ttf -------------------------------------------------------------------------------- /assignment-13-example/fonts/FiraSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-13-example/fonts/FiraSans-Regular.ttf -------------------------------------------------------------------------------- /assignment-13-example/fonts/Merriweather-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-13-example/fonts/Merriweather-Bold.ttf -------------------------------------------------------------------------------- /Assignment-08-Example/media/mart-logo-animated.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/Assignment-08-Example/media/mart-logo-animated.webm -------------------------------------------------------------------------------- /assignment-11-example/fonts/Merriweather-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-11-example/fonts/Merriweather-Regular.ttf -------------------------------------------------------------------------------- /assignment-12-example/fonts/Merriweather-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-12-example/fonts/Merriweather-Regular.ttf -------------------------------------------------------------------------------- /assignment-13-example/fonts/Merriweather-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-13-example/fonts/Merriweather-Regular.ttf -------------------------------------------------------------------------------- /assignment-10-example/images/Life_Is_Strange_cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-10-example/images/Life_Is_Strange_cover.jpg -------------------------------------------------------------------------------- /assignment-12-example/images/abrams_lama_tutu-2016.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Montana-Media-Arts/341-web-design-Fall2020-resources/HEAD/assignment-12-example/images/abrams_lama_tutu-2016.jpg -------------------------------------------------------------------------------- /materials/a7-stylesheet.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: powderblue; 3 | text-align: center; 4 | } 5 | .container { 6 | background-color: white; 7 | width: 600px; 8 | margin: auto; 9 | padding: 20px; 10 | border: 1px solid black; 11 | } 12 | .lyrics p, pre { 13 | background-color: grey; 14 | color: white; 15 | font-size: small; 16 | font-family: Arial; 17 | } 18 | -------------------------------------------------------------------------------- /graphics/icons/compass.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assignment-11-example/css/fonts.css: -------------------------------------------------------------------------------- 1 | /* This is the file, "fonts.css." */ 2 | @font-face { 3 | font-family: 'FiraSans'; 4 | src: url('../fonts/FiraSans-Regular.ttf') format('truetype'); 5 | font-style: normal; 6 | } 7 | @font-face { 8 | font-family: 'FiraSans'; 9 | src: url('../fonts/FiraSans-Bold.ttf') format('truetype'); 10 | font-weight: 700; 11 | } 12 | 13 | @font-face { 14 | font-family: 'Merriweather'; 15 | src: url('../fonts/Merriweather-Regular.ttf') format('truetype'); 16 | font-style: normal; 17 | } 18 | @font-face { 19 | font-family: 'Merriweather'; 20 | src: url('../fonts/Merriweather-Bold.ttf') format('truetype'); 21 | font-weight: 700; 22 | } 23 | -------------------------------------------------------------------------------- /assignment-12-example/css/fonts.css: -------------------------------------------------------------------------------- 1 | /* This is the file, "fonts.css." */ 2 | @font-face { 3 | font-family: 'FiraSans'; 4 | src: url('../fonts/FiraSans-Regular.ttf') format('truetype'); 5 | font-style: normal; 6 | } 7 | @font-face { 8 | font-family: 'FiraSans'; 9 | src: url('../fonts/FiraSans-Bold.ttf') format('truetype'); 10 | font-weight: 700; 11 | } 12 | 13 | @font-face { 14 | font-family: 'Merriweather'; 15 | src: url('../fonts/Merriweather-Regular.ttf') format('truetype'); 16 | font-style: normal; 17 | } 18 | @font-face { 19 | font-family: 'Merriweather'; 20 | src: url('../fonts/Merriweather-Bold.ttf') format('truetype'); 21 | font-weight: 700; 22 | } 23 | -------------------------------------------------------------------------------- /assignment-13-example/css/fonts.css: -------------------------------------------------------------------------------- 1 | /* This is the file, "fonts.css." */ 2 | @font-face { 3 | font-family: 'FiraSans'; 4 | src: url('../fonts/FiraSans-Regular.ttf') format('truetype'); 5 | font-style: normal; 6 | } 7 | @font-face { 8 | font-family: 'FiraSans'; 9 | src: url('../fonts/FiraSans-Bold.ttf') format('truetype'); 10 | font-weight: 700; 11 | } 12 | 13 | @font-face { 14 | font-family: 'Merriweather'; 15 | src: url('../fonts/Merriweather-Regular.ttf') format('truetype'); 16 | font-style: normal; 17 | } 18 | @font-face { 19 | font-family: 'Merriweather'; 20 | src: url('../fonts/Merriweather-Bold.ttf') format('truetype'); 21 | font-weight: 700; 22 | } 23 | -------------------------------------------------------------------------------- /assignment-10-example/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 3 | } 4 | 5 | .main-container { 6 | 7 | /* Draw a solid border make it maroon */ 8 | border-style: solid; 9 | border-width: 10px; 10 | border-color: maroon; 11 | /*Add space between the border and its inside elements. */ 12 | padding: 10px; 13 | /* Color the background dark grey. */ 14 | background : lightgrey; 15 | width: 75%; 16 | margin: auto; 17 | } 18 | 19 | div.align{ 20 | text-align: center; 21 | } 22 | 23 | .secondary-container{ 24 | 25 | margin: auto; 26 | width:50%; 27 | padding: 50px; 28 | border-bottom: 1px black solid; 29 | border-spacing: inherit; 30 | } 31 | 32 | #mainheader{ 33 | position: relative; 34 | left: 20px; 35 | top:5px; 36 | color: darkslategray; 37 | opacity: .75; 38 | font-size: 60px; 39 | } -------------------------------------------------------------------------------- /assignment-11-example/css/style.css: -------------------------------------------------------------------------------- 1 | div{ 2 | text-align: left; 3 | line-height: 1.45em; 4 | font-family: Merriweather, sans-serif; 5 | margin-bottom: 10px; 6 | padding: 5px; 7 | } 8 | h1, h3, h5{ 9 | text-align: center; 10 | font-family: FiraSans, sans-serif; 11 | 12 | } 13 | .opening-paragraph{ 14 | color: #244523; 15 | font-size: 20px; 16 | text-indent: 10px; 17 | font-weight:700; 18 | } 19 | 20 | .opening-paragraph::first-line{ 21 | font-size: 30px; 22 | } 23 | .second-paragraph{ 24 | font-size: 16px; 25 | } 26 | 27 | #book_info{ 28 | text-decoration: none; 29 | font-family: Merriweather, sans-serif; 30 | } 31 | #book_info:hover{ 32 | font-family: Merriweather, sans-serif; 33 | text-decoration: underline; 34 | font-weight: 700; 35 | } 36 | 37 | table{ 38 | border: 1px solid black; 39 | font-family: FiraSans, sans-serif; 40 | font-weight: 700; 41 | } 42 | 43 | p{ 44 | font-family: Merriweather, sans-serif; 45 | } 46 | -------------------------------------------------------------------------------- /materials/fonts.css: -------------------------------------------------------------------------------- 1 | /* This is the file, "fonts.css." */ 2 | @font-face { 3 | font-family: 'Playfair Display'; 4 | src: url('https://montana-media-arts.github.io/341-web-design-Fall2020-resources/fonts/PlayfairDisplay-Regular.ttf') format('opentype'); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | @font-face { 9 | font-family: 'Playfair Display'; 10 | src: url('https://montana-media-arts.github.io/341-web-design-Fall2020-resources/fonts/PlayfairDisplay-Italic.ttf') format('opentype'); 11 | font-weight: normal; 12 | font-style: italic; 13 | } 14 | @font-face { 15 | font-family: 'Playfair Display'; 16 | src: url('https://montana-media-arts.github.io/341-web-design-Fall2020-resources/fonts/PlayfairDisplay-Bold.ttf') format('opentype'); 17 | font-weight: bold; 18 | font-style: normal; 19 | } 20 | @font-face { 21 | font-family: 'Playfair Display'; 22 | src: url('https://montana-media-arts.github.io/341-web-design-Fall2020-resources/fonts/PlayfairDisplay-BoldItalic.ttf') format('opentype'); 23 | font-weight: bold; 24 | font-style: italic; 25 | } 26 | @font-face { 27 | font-family: 'Playfair Display'; 28 | src: url('https://montana-media-arts.github.io/341-web-design-Fall2020-resources/fonts/PlayfairDisplay-Black.ttf') format('opentype'); 29 | font-weight: 900; 30 | font-style: normal; 31 | } 32 | @font-face { 33 | font-family: 'Playfair Display'; 34 | src: url('https://montana-media-arts.github.io/341-web-design-Fall2020-resources/fonts/PlayfairDisplay-BlackItalic.ttf') format('opentype'); 35 | font-weight: 900; 36 | font-style: italic; 37 | } 38 | -------------------------------------------------------------------------------- /assignment-10-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Fun with Styles 9 | 10 | 11 | 12 |
13 |

Games We Play

14 |
15 | Life is Strange 16 |
17 |
18 | Life Is Strange is a multiplatform game developed by DONTNOD Entertainment and published by Square Enix. Life Is Strange follows the exploits of 18-year old Max Caulfield, a high school senior who learns she has the power to rewind time when she saves her childhood friend, Chloe Price, from being killed. Life Is Strange was released on the XBox One on January 29, 2015[2] and the PC via Steam and other online retail sites for PC Gaming on Janurary 30, 2015.[3] Its release on the PlayStation 3 and PlayStation 4 via the PlayStation Network was delayed until February 3, 2015 on account of technical problems.[4][1][5] 19 |
20 | 21 |
22 | Breath of the Wild 23 |
24 |
25 | The Legend of Zelda: Breath of the Wild[c] is a 2017 action-adventure game developed and published by Nintendo for the Nintendo Switch and Wii U consoles. Breath of the Wild is part of the Legend of Zelda franchise and is set at the end of the Zelda timeline; the player controls Link, who awakens from a hundred-year slumber to defeat Calamity Ganon and save the kingdom of Hyrule. 26 |
27 | 28 |
29 | 30 | -------------------------------------------------------------------------------- /assignment-09-example/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About Us 8 | 20 | 21 | 22 | 25 | 26 |

Photosynthesis Instructable

27 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /assignment-09-example/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contact Us 8 | 17 | 18 | 19 | 22 |

Photosynthesis Instructable

23 |
24 | 25 | 26 | 29 | 32 | 33 | 34 | 37 | 40 | 41 | 42 | 45 | 48 | 49 | 50 | 53 | 56 | 57 | 58 | 61 | 62 |
27 | 28 | 30 | 31 |
35 | 36 | 38 | 39 |
43 | 44 | 46 | 47 |
51 | 52 | 54 | 55 |
59 | 60 |
63 |
64 |
65 |
66 | 67 |
68 | 69 | -------------------------------------------------------------------------------- /assignment-12-example/css/style.css: -------------------------------------------------------------------------------- 1 | div{ 2 | text-align: left; 3 | line-height: 1.45em; 4 | font-family: Merriweather, sans-serif; 5 | margin-bottom: 10px; 6 | padding: 5px; 7 | } 8 | h1, h3, h5{ 9 | text-align: center; 10 | font-family: FiraSans, sans-serif; 11 | 12 | } 13 | .opening-paragraph{ 14 | color: #244523; 15 | font-size: 20px; 16 | text-indent: 10px; 17 | font-weight:700; 18 | } 19 | 20 | .opening-paragraph::first-line{ 21 | font-size: 30px; 22 | } 23 | .second-paragraph{ 24 | font-size: 16px; 25 | } 26 | 27 | #book_info{ 28 | text-decoration: none; 29 | font-family: Merriweather, sans-serif; 30 | } 31 | #book_info:hover{ 32 | font-family: Merriweather, sans-serif; 33 | text-decoration: underline; 34 | font-weight: 700; 35 | } 36 | 37 | table{ 38 | border: 1px dashed black; 39 | font-family: FiraSans, sans-serif; 40 | font-weight: 700; 41 | padding: 10px; 42 | } 43 | 44 | p{ 45 | font-family: Merriweather, sans-serif; 46 | } 47 | 48 | /* Set your header design: */ 49 | header { 50 | position: fixed; 51 | top: 0px; 52 | left: 0px; 53 | background-color: #26272b; 54 | font-family: Merriweather; 55 | text-transform: uppercase; 56 | margin-top: 0; 57 | height: 4em; 58 | width: 100%; 59 | text-align: left; 60 | } 61 | 62 | /* Set the layout of the menu: */ 63 | .menu-item { 64 | display: inline-block; 65 | margin: 1em .2em; 66 | min-width: 6em; 67 | text-align: center; 68 | background-color: #26272b; 69 | padding: 0.5em 1em; 70 | } 71 | 72 | /* Style the links: */ 73 | .menu-item a { 74 | color: #fff; 75 | text-decoration: none; 76 | } 77 | 78 | .menu-item:hover { 79 | background-color: gray; 80 | 81 | } 82 | 83 | /* Add a dropdown feature: */ 84 | .dropdown { 85 | display: inline-block; 86 | } 87 | 88 | .dropdown-content { 89 | display: none; 90 | position: absolute; 91 | border: 1px solid #000; 92 | margin: 0.5em 0 0 -1em; 93 | color: #000; 94 | background-color: #fff; 95 | z-index: 1; 96 | } 97 | .dropdown-content a { 98 | color: #000; 99 | } 100 | 101 | .dropdown:hover .dropdown-content { 102 | display: block; 103 | } 104 | 105 | /* Style dropdown item display: */ 106 | .dropdown-item { 107 | display: block; 108 | text-align: left; 109 | margin: 0; 110 | padding: 0.5em 1em 0.5em 1em; 111 | min-width: 5.9em; 112 | } 113 | 114 | .dropdown-item:hover, .dropdown-item:hover a { 115 | color: black; 116 | background-color: #a2a2a2; 117 | } 118 | 119 | .mainimage{ 120 | float: left; 121 | } 122 | 123 | .bookcover{ 124 | float:right; 125 | } 126 | -------------------------------------------------------------------------------- /assignment-13-example/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Contact Us 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 18 | 21 | 24 | 38 |
39 | 40 |
41 |
42 |

Contact Us

43 |

 

44 |
 
45 |
46 | 47 |
48 | more road 49 |
50 |
51 |
52 |
53 | 54 | 55 |
56 |
57 |
58 |
59 | 60 | 61 | 62 |
63 |
64 |
65 |
66 | 67 |
68 | 69 |
70 |
71 | 72 |
73 |
74 | 75 |
76 |
77 | 78 |
79 |
80 |

Download the Source

82 | 83 | 84 | -------------------------------------------------------------------------------- /assignment-09-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Photosynthesis 8 | 17 | 18 | 19 | 22 |

 

23 |

What is needed?

24 | 41 | 42 |

Photosynthesis Instructable

43 | 44 |

Step 1 - Setup the Leaf Envelope

45 |
46 | 47 |

The leaf envelope will be our visual tool to indicate what parts go into the leaf and what comes out if the leaf during photosynthesis.

48 | Leaf envelope
49 | 50 |
51 | 52 |

Step 2 - Determine what the leaf takes in

53 |
54 | 55 |

In this part, the player should choose which items the leaf takes in during photosynthesis. It should be water, sunlight, and carbon dioxide

56 | What does the leaf take in?
57 | 58 |
59 | 60 |

Step 3 - What does the leaf produce and expel

61 |
62 | 63 |

In this last section, the player should determine what items the plant produces. It should be oxygen and sugar (aka glucose).

64 | What does the leaf produce?
65 |
66 | 67 |

Learn even more about Photosynthesis

68 |
69 | 70 |
71 | 72 | 73 | -------------------------------------------------------------------------------- /assignment-13-example/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | .textareacomments{ 6 | padding-bottom: 300px; 7 | } 8 | body{ 9 | background-color: beige; 10 | } 11 | div{ 12 | text-align: left; 13 | line-height: 1.45em; 14 | font-family: Merriweather, sans-serif; 15 | margin-bottom: 10px; 16 | padding: 5px; 17 | } 18 | h1, h3, h5{ 19 | text-align: center; 20 | font-family: FiraSans, sans-serif; 21 | 22 | } 23 | .opening-paragraph{ 24 | color: black; 25 | font-size: 16px; 26 | text-indent: 10px; 27 | font-weight:700; 28 | } 29 | 30 | .opening-paragraph::first-line{ 31 | font-size: 16px; 32 | } 33 | .second-paragraph{ 34 | font-size: 16px; 35 | } 36 | 37 | table{ 38 | border: 1px dashed black; 39 | font-family: FiraSans, sans-serif; 40 | font-weight: 700; 41 | padding: 10px; 42 | } 43 | 44 | 45 | p{ 46 | font-family: Merriweather, sans-serif; 47 | } 48 | 49 | /* Set your header design: */ 50 | header { 51 | position: fixed; 52 | top: 0px; 53 | left: 0px; 54 | background-color: #26272b; 55 | font-family: Merriweather; 56 | text-transform: uppercase; 57 | margin-top: 0; 58 | height: 4em; 59 | width: 100%; 60 | text-align: left; 61 | } 62 | 63 | /* Set the layout of the menu: */ 64 | .menu-item { 65 | display: inline-block; 66 | margin: 1em .2em; 67 | min-width: 6em; 68 | text-align: center; 69 | background-color: #26272b; 70 | padding: 0.5em 1em; 71 | } 72 | 73 | /* Style the links: */ 74 | .menu-item a { 75 | color: #fff; 76 | text-decoration: none; 77 | } 78 | 79 | .menu-item:hover { 80 | background-color: gray; 81 | 82 | } 83 | 84 | /* Add a dropdown feature: */ 85 | .dropdown { 86 | display: inline-block; 87 | } 88 | 89 | .dropdown-content { 90 | display: none; 91 | position: absolute; 92 | border: 1px solid #000; 93 | margin: 0.5em 0 0 -1em; 94 | color: #000; 95 | background-color: #fff; 96 | z-index: 1; 97 | } 98 | .dropdown-content a { 99 | color: #000; 100 | } 101 | 102 | .dropdown:hover .dropdown-content { 103 | display: block; 104 | } 105 | 106 | /* Style dropdown item display: */ 107 | .dropdown-item { 108 | display: block; 109 | text-align: left; 110 | margin: 0; 111 | padding: 0.5em 1em 0.5em 1em; 112 | min-width: 5.9em; 113 | } 114 | 115 | .dropdown-item:hover, .dropdown-item:hover a { 116 | color: black; 117 | background-color: #a2a2a2; 118 | } 119 | 120 | .mainimage{ 121 | float: left; 122 | content:url("../images/road1-small.jpg"); 123 | 124 | } 125 | 126 | /* For width 600px and larger: */ 127 | @media only screen and (min-width: 600px) { 128 | .mainimage{ 129 | content:url("../images/road1.jpg"); 130 | } 131 | } 132 | 133 | .secondimage{ 134 | float:right; 135 | content:url("../images/road2-small.jpg"); 136 | } 137 | 138 | /* For width 600px and larger: */ 139 | @media only screen and (min-width: 600px) { 140 | .secondimage{ 141 | float:right; 142 | content:url("../images/road2.jpg"); 143 | } 144 | } 145 | 146 | .thirdimage{ 147 | margin: auto; 148 | content:url("../images/road3-small.jpg"); 149 | } 150 | 151 | /* For width 600px and larger: */ 152 | @media only screen and (min-width: 600px) { 153 | .thirdimage{ 154 | margin: auto; 155 | content:url("../images/road3.jpg"); 156 | } 157 | } 158 | 159 | .fourthimage{ 160 | margin:auto; 161 | content:url("../images/road4-small.jpg"); 162 | } 163 | 164 | /* For width 600px and larger: */ 165 | @media only screen and (min-width: 600px) { 166 | .fourthimage{ 167 | margin: auto; 168 | content:url("../images/road4.jpg"); 169 | } 170 | } 171 | 172 | .fifthimage{ 173 | margin:auto; 174 | content:url("../images/road2-small.jpg"); 175 | } 176 | 177 | /* For width 600px and larger: */ 178 | @media only screen and (min-width: 600px) { 179 | .fifthimage{ 180 | margin: auto; 181 | content:url("../images/road2.jpg"); 182 | } 183 | } 184 | .col-1 {width: 8.33%;} 185 | .col-2 {width: 16.66%;} 186 | .col-3 {width: 25%;} 187 | .col-4 {width: 33.33%;} 188 | .col-5 {width: 41.66%;} 189 | .col-6 {width: 50%;} 190 | .col-7 {width: 58.33%;} 191 | .col-8 {width: 66.66%;} 192 | .col-9 {width: 75%;} 193 | .col-10 {width: 83.33%;} 194 | .col-11 {width: 91.66%;} 195 | .col-12 {width: 100%;} 196 | 197 | [class*="col-"] { 198 | float: left; 199 | padding: 15px; 200 | } 201 | 202 | .row::after { 203 | content: ""; 204 | clear: both; 205 | display: table; 206 | } 207 | 208 | .contactus{ 209 | width:50%; 210 | margin-left: 25%; 211 | 212 | } 213 | -------------------------------------------------------------------------------- /Assignment-08-Example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Music 9 | 32 | 33 | 34 | 35 |
36 |

Art

37 | Strumbellas Hope Album 38 |
39 |
40 |

Audio

41 |
The Strumbellas · Spirits
42 |
43 |
44 |

Video

45 | 46 |
47 |
48 |

Lyrics

49 |

got guns in my head and they won't go 50 | Spirits in my head and they won't go 51 | I got guns in my head and they won't go 52 | Spirits in my head and they won't 53 |

54 |

I been looking at the stars tonight 55 | And I think oh, how I miss that bright sun 56 | I'll be a dreamer 'til the day I die 57 | But they say oh, how the good die young 58 | But we're all strange 59 | And maybe we don't wanna change 60 |

61 | 62 |

I got guns in my head and they won't go 63 | Spirits in my head and they won't go 64 | I got guns in my head and they won't go 65 | Spirits in my head and they won't go 66 | But the gun still rattles 67 | The gun still rattles, oh 68 | I got guns in my head and they won't go 69 | Spirits in my head and they won't go 70 |

71 | 72 |

I spent a lot of nights on the run 73 | And I think oh, like I'm lost and can't be found 74 | I'm just waiting for my day to come 75 | And I think oh, I don't wanna let you down 76 | 'Cause something inside has changed 77 | And maybe we don't wanna stay the same 78 |

79 |

80 | I got guns in my head and they won't go 81 | Spirits in my head and they won't go 82 | I got guns in my head and they won't go 83 | Spirits in my head and they won't go 84 | But the gun still rattles 85 | The gun still rattles, oh 86 | But the gun still rattles 87 | The gun still rattles, oh 88 |

89 |

90 | And I don't want a never ending life 91 | I just want to be alive while I'm here 92 | And I don't want a never ending life 93 | I just want to be alive while I'm here 94 | And I don't want to see another night 95 | Lost inside a lonely life while I'm here 96 |

97 |

98 | I got guns in my head and they won't go 99 | Spirits in my head and they won't go 100 | I got guns in my head and they won't go 101 | Spirits in my head and they won't go 102 | But the gun still rattles 103 | The gun still rattles, oh 104 | But the gun still rattles 105 | The gun still rattles, oh 106 |

107 |
108 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /assignment-13-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | My Client's Site 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 18 | 21 | 24 | 38 |
39 | 40 |
41 |
42 |

Lorem Ipsum

43 | 44 |
45 | 46 |
47 |
48 | Just a road 49 |
50 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 51 | dolore magna aliqua. Et pharetra pharetra massa massa ultricies mi. Imperdiet proin fermentum leo vel orci 52 | porta. Purus non enim praesent elementum. Tincidunt ornare massa eget egestas. Sagittis id consectetur purus 53 | ut faucibus pulvinar. Morbi non arcu risus quis. In pellentesque massa placerat duis ultricies lacus sed 54 | turpis tincidunt. Tempus quam pellentesque nec nam aliquam. Pharetra diam sit amet nisl. Vitae justo eget 55 | magna fermentum iaculis eu non diam phasellus. 56 | 57 |
58 |
59 | Porta nibh venenatis cras sed felis. Tellus in hac habitasse platea dictumst vestibulum rhoncus est 60 | pellentesque. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Ut enim blandit volutpat 61 | maecenas. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Condimentum mattis pellentesque id 62 | nibh tortor id aliquet lectus proin. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. 63 | Sit amet dictum sit amet justo donec. Ultricies mi quis hendrerit dolor magna eget. Ac placerat vestibulum 64 | lectus mauris ultrices eros in cursus turpis. Cursus risus at ultrices mi tempus imperdiet nulla. Mauris 65 | cursus mattis molestie a iaculis at erat pellentesque adipiscing. Volutpat sed cras ornare arcu dui vivamus 66 | arcu felis. A iaculis at erat pellentesque. Molestie ac feugiat sed lectus vestibulum mattis. 67 | 68 |
69 |
70 | Diam quis enim lobortis scelerisque fermentum dui faucibus. Id venenatis a condimentum vitae sapien. Nibh 71 | cras pulvinar mattis nunc sed blandit. Euismod lacinia at quis risus. Amet risus nullam eget felis. Feugiat 72 | in fermentum posuere urna nec tincidunt praesent semper feugiat. Tortor at risus viverra adipiscing. Orci 73 | porta non pulvinar neque laoreet suspendisse interdum. Mauris in aliquam sem fringilla ut. Nunc eget lorem 74 | dolor sed viverra ipsum nunc aliquet bibendum. Fringilla urna porttitor rhoncus dolor purus non enim 75 | praesent elementum. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Et odio 76 | pellentesque diam volutpat commodo sed. Tortor at risus viverra adipiscing at in. 77 |
78 | another road 79 |
80 |
81 |
82 | Velit scelerisque in dictum non consectetur. Venenatis lectus magna fringilla urna porttitor rhoncus dolor. 83 | Et netus et malesuada fames ac turpis. Blandit turpis cursus in hac. Cras sed felis eget velit aliquet 84 | sagittis id. Commodo ullamcorper a lacus vestibulum sed arcu non odio. Nibh sit amet commodo nulla facilisi 85 | nullam vehicula. Integer quis auctor elit sed. Porttitor leo a diam sollicitudin tempor id. Sed enim ut sem 86 | viverra aliquet eget. Amet mattis vulputate enim nulla. Libero volutpat sed cras ornare arcu dui. Erat nam 87 | at lectus urna duis. Nibh tellus molestie nunc non blandit massa enim. Egestas tellus rutrum tellus 88 | pellentesque eu. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. 89 |
90 |
91 | Amet volutpat consequat mauris nunc congue. Maecenas volutpat blandit aliquam etiam erat velit scelerisque 92 | in. Blandit libero volutpat sed cras ornare arcu dui. Viverra tellus in hac habitasse platea dictumst 93 | vestibulum rhoncus. Sed odio morbi quis commodo odio aenean sed adipiscing. Turpis egestas pretium aenean 94 | pharetra magna ac placerat. Morbi tincidunt augue interdum velit euismod. Sit amet luctus venenatis lectus 95 | magna fringilla urna porttitor. Molestie nunc non blandit massa enim nec dui nunc mattis. Accumsan tortor 96 | posuere ac ut consequat semper. Amet justo donec enim diam vulputate ut pharetra. Et pharetra pharetra massa 97 | massa. Mauris sit amet massa vitae tortor condimentum lacinia quis. Tellus rutrum tellus pellentesque eu 98 | tincidunt tortor aliquam. Netus et malesuada fames ac turpis egestas maecenas pharetra. Parturient montes 99 | nascetur ridiculus mus mauris vitae ultricies leo. Facilisi cras fermentum odio eu feugiat pretium nibh. Sit 100 | amet est placerat in egestas erat imperdiet sed. 101 |
102 |
103 |
104 | 105 | 106 |

Download the Source

108 | 109 | 110 | -------------------------------------------------------------------------------- /assignment-13-example/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | About Us 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 16 | 19 | 22 | 36 |
37 | 38 |
39 |
40 |

About Us

41 |

 

42 |
 
43 | 44 |
45 |
46 | more road 47 |
48 |
49 | 50 |
51 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 52 | dolore magna aliqua. Et pharetra pharetra massa massa ultricies mi. Imperdiet proin fermentum leo vel orci 53 | porta. Purus non enim praesent elementum. Tincidunt ornare massa eget egestas. Sagittis id consectetur purus 54 | ut faucibus pulvinar. Morbi non arcu risus quis. In pellentesque massa placerat duis ultricies lacus sed 55 | turpis tincidunt. Tempus quam pellentesque nec nam aliquam. Pharetra diam sit amet nisl. Vitae justo eget 56 | magna fermentum iaculis eu non diam phasellus. 57 | 58 |
59 |
60 | Porta nibh venenatis cras sed felis. Tellus in hac habitasse platea dictumst vestibulum rhoncus est 61 | pellentesque. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Ut enim blandit volutpat 62 | maecenas. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Condimentum mattis pellentesque id 63 | nibh tortor id aliquet lectus proin. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. 64 | Sit amet dictum sit amet justo donec. Ultricies mi quis hendrerit dolor magna eget. Ac placerat vestibulum 65 | lectus mauris ultrices eros in cursus turpis. Cursus risus at ultrices mi tempus imperdiet nulla. Mauris 66 | cursus mattis molestie a iaculis at erat pellentesque adipiscing. Volutpat sed cras ornare arcu dui vivamus 67 | arcu felis. A iaculis at erat pellentesque. Molestie ac feugiat sed lectus vestibulum mattis. 68 | 69 |
70 |
71 |
72 |
73 | Diam quis enim lobortis scelerisque fermentum dui faucibus. Id venenatis a condimentum vitae sapien. Nibh 74 | cras pulvinar mattis nunc sed blandit. Euismod lacinia at quis risus. Amet risus nullam eget felis. Feugiat 75 | in fermentum posuere urna nec tincidunt praesent semper feugiat. Tortor at risus viverra adipiscing. Orci 76 | porta non pulvinar neque laoreet suspendisse interdum. Mauris in aliquam sem fringilla ut. Nunc eget lorem 77 | dolor sed viverra ipsum nunc aliquet bibendum. Fringilla urna porttitor rhoncus dolor purus non enim 78 | praesent elementum. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Et odio 79 | pellentesque diam volutpat commodo sed. Tortor at risus viverra adipiscing at in. 80 |
81 |
82 | Velit scelerisque in dictum non consectetur. Venenatis lectus magna fringilla urna porttitor rhoncus dolor. 83 | Et netus et malesuada fames ac turpis. Blandit turpis cursus in hac. Cras sed felis eget velit aliquet 84 | sagittis id. Commodo ullamcorper a lacus vestibulum sed arcu non odio. Nibh sit amet commodo nulla facilisi 85 | nullam vehicula. Integer quis auctor elit sed. Porttitor leo a diam sollicitudin tempor id. Sed enim ut sem 86 | viverra aliquet eget. Amet mattis vulputate enim nulla. Libero volutpat sed cras ornare arcu dui. Erat nam 87 | at lectus urna duis. Nibh tellus molestie nunc non blandit massa enim. Egestas tellus rutrum tellus 88 | pellentesque eu. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. 89 |
90 |
91 |
92 |
93 | Amet volutpat consequat mauris nunc congue. Maecenas volutpat blandit aliquam etiam erat velit scelerisque 94 | in. Blandit libero volutpat sed cras ornare arcu dui. Viverra tellus in hac habitasse platea dictumst 95 | vestibulum rhoncus. Sed odio morbi quis commodo odio aenean sed adipiscing. Turpis egestas pretium aenean 96 | pharetra magna ac placerat. Morbi tincidunt augue interdum velit euismod. Sit amet luctus venenatis lectus 97 | magna fringilla urna porttitor. Molestie nunc non blandit massa enim nec dui nunc mattis. Accumsan tortor 98 | posuere ac ut consequat semper. Amet justo donec enim diam vulputate ut pharetra. Et pharetra pharetra massa 99 | massa. Mauris sit amet massa vitae tortor condimentum lacinia quis. Tellus rutrum tellus pellentesque eu 100 | tincidunt tortor aliquam. Netus et malesuada fames ac turpis egestas maecenas pharetra. Parturient montes 101 | nascetur ridiculus mus mauris vitae ultricies leo. Facilisi cras fermentum odio eu feugiat pretium nibh. Sit 102 | amet est placerat in egestas erat imperdiet sed. 103 |
104 |
105 |
106 |

Download the Source

108 | 109 | 110 | -------------------------------------------------------------------------------- /assignment-11-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Favorite Book 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

The Book of Joy

13 |

Authors: Tenzin Gyatso, Desmond Tutu & Douglas Abrams

14 |
Excerpt below
15 |
16 |
17 |
18 | "Many of us have become refugees," the Dalai Lama tried to explain, "and there are a lot of difficulties in 19 | my own country. When I look only at that," he said, cupping his hands into a small circle, "then I worry." 20 | He widened his hands, breaking the circle open. "But when I look at the world, there are a lot of problems, 21 | even within the People’s Republic of China. For example, the Hui Muslim community in China has a lot of 22 | problems and suffering. And then outside China, there are many more problems and more suffering. When we see 23 | these things, we realize that not only do we suffer, but so do many of our human brothers and sisters. So 24 | when we look at the same event from a wider perspective, we will reduce the worrying and our own suffering." 25 |
26 |
27 | I was struck by the simplicity and profundity of what the Dalai Lama was saying. This was far from "don’t 28 | worry, be happy," as the popular Bobby McFerrin song says. This was not a denial of pain and suffering, but 29 | a shift in perspective -- from oneself and toward others, from anguish to compassion -- seeing that others 30 | are suffering as well. The remarkable thing about what the Dalai Lama was describing is that as we recognize 31 | others’ suffering and realize that we are not alone, our pain is lessened. 32 |
33 |
34 | Often we hear about another’s tragedy, and it makes us feel better about our own situation. This is quite 35 | different from what the Dalai Lama was doing. He was not contrasting his situation with others, but uniting 36 | his situation with others, enlarging his identity and seeing that he and the Tibetan people were not alone 37 | in their suffering. This recognition that we are all connected -- whether Tibetan Buddhists or Hui Muslims 38 | -- is the birth of empathy and compassion. 39 |
40 |
41 | I wondered how the Dalai Lama’s ability to shift his perspective might relate to the adage "Pain is 42 | inevitable; suffering is optional." Was it truly possible to experience pain, whether the pain of an injury 43 | or an exile, without suffering? There is a Sutta, or teaching of the Buddha, called the Sallatha Sutta, that 44 | makes a similar distinction between our "feelings of pain" and "the suffering that comes as a result of our 45 | response" to the pain: "When touched with a feeling of pain, the uninstructed, ordinary person sorrows, 46 | grieves, and laments, beats his breast, becomes distraught. So he feels two pains, physical and mental. Just 47 | as if they were to shoot a man with an arrow and, right afterward, were to shoot him with another one, so 48 | that he feels the pain of two arrows." It seems that the Dalai Lama was suggesting that by shifting our 49 | perspective to a broader, more compassionate one, we can avoid the worry and suffering that is the second 50 | arrow. 51 |
52 |
53 | "Then another thing," the Dalai Lama continued. "There are different aspects to any event. For example, we 54 | lost our own country and became refugees, but that same experience gave us new opportunities to see more 55 | things. For me personally, I had more opportunities to meet with different people, different spiritual 56 | practitioners, like you, and also scientists. This new opportunity arrived because I became a refugee. If I 57 | remained in the Potala in Lhasa, I would have stayed in what has often been described as a golden cage: the 58 | Lama, holy Dalai Lama." He was now sitting up stiffly as he once had to when he was the cloistered spiritual 59 | head of the Forbidden Kingdom. 60 |
61 |
62 | "So, personally, I prefer the last five decades of refugee life. It’s more useful, more opportunity to 63 | learn, to experience life. Therefore, if you look from one angle, you feel, oh how bad, how sad. But if you 64 | look from another angle at that same tragedy, that same event, you see that it gives me new opportunities. 65 | So, it’s wonderful. That’s the main reason that I’m not sad and morose. There’s a Tibetan saying: ‘Wherever 66 | you have friends that’s your country, and wherever you receive love, that’s your home.’" 67 |
68 |
69 |
70 | 71 | 72 | 73 | 76 | 79 | 80 | 81 | 84 | 87 | 88 | 89 | 92 | 95 | 96 | 97 | 100 | 103 | 104 | 105 | 108 | 111 | 112 | 113 | 116 | 119 | 120 |
74 | Language 75 | 77 | English 78 |
82 | Genre 83 | 85 | self help 86 |
90 | Publisher 91 | 93 | Cornerstone Publishers 94 |
98 | Publication date 99 | 101 | 22 September 2016 102 |
106 | Pages 107 | 109 | 368 110 |
114 | ISBN 115 | 117 | 978-0-399-18504-5 (Hardcover) 118 |
121 |
122 |

123 | Find more information about the Book of Joy 125 |

126 | 127 |

Download the Source

128 | 129 | 130 | -------------------------------------------------------------------------------- /assignment-13-example/services.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Services 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 18 | 21 | 24 | 38 |
39 | 40 |
41 |
42 |

Services

43 |

 

44 |
 
45 | 46 |
47 |
48 | more road 49 |
50 |
51 | 52 |
53 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 54 | dolore magna aliqua. Et pharetra pharetra massa massa ultricies mi. Imperdiet proin fermentum leo vel 55 | orci 56 | porta. Purus non enim praesent elementum. Tincidunt ornare massa eget egestas. Sagittis id consectetur 57 | purus 58 | ut faucibus pulvinar. Morbi non arcu risus quis. In pellentesque massa placerat duis ultricies lacus sed 59 | turpis tincidunt. Tempus quam pellentesque nec nam aliquam. Pharetra diam sit amet nisl. Vitae justo 60 | eget 61 | magna fermentum iaculis eu non diam phasellus. 62 | 63 |
64 |
65 | Porta nibh venenatis cras sed felis. Tellus in hac habitasse platea dictumst vestibulum rhoncus est 66 | pellentesque. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Ut enim blandit 67 | volutpat 68 | maecenas. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Condimentum mattis pellentesque 69 | id 70 | nibh tortor id aliquet lectus proin. Neque laoreet suspendisse interdum consectetur libero id faucibus 71 | nisl. 72 | Sit amet dictum sit amet justo donec. Ultricies mi quis hendrerit dolor magna eget. Ac placerat 73 | vestibulum 74 | lectus mauris ultrices eros in cursus turpis. Cursus risus at ultrices mi tempus imperdiet nulla. Mauris 75 | cursus mattis molestie a iaculis at erat pellentesque adipiscing. Volutpat sed cras ornare arcu dui 76 | vivamus 77 | arcu felis. A iaculis at erat pellentesque. Molestie ac feugiat sed lectus vestibulum mattis. 78 | 79 |
80 |
81 | Diam quis enim lobortis scelerisque fermentum dui faucibus. Id venenatis a condimentum vitae sapien. 82 | Nibh 83 | cras pulvinar mattis nunc sed blandit. Euismod lacinia at quis risus. Amet risus nullam eget felis. 84 | Feugiat 85 | in fermentum posuere urna nec tincidunt praesent semper feugiat. Tortor at risus viverra adipiscing. 86 | Orci 87 | porta non pulvinar neque laoreet suspendisse interdum. Mauris in aliquam sem fringilla ut. Nunc eget 88 | lorem 89 | dolor sed viverra ipsum nunc aliquet bibendum. Fringilla urna porttitor rhoncus dolor purus non enim 90 | praesent elementum. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Et odio 91 | pellentesque diam volutpat commodo sed. Tortor at risus viverra adipiscing at in. 92 |
93 |
94 |
95 |
96 | Velit scelerisque in dictum non consectetur. Venenatis lectus magna fringilla urna porttitor rhoncus 97 | dolor. 98 | Et netus et malesuada fames ac turpis. Blandit turpis cursus in hac. Cras sed felis eget velit aliquet 99 | sagittis id. Commodo ullamcorper a lacus vestibulum sed arcu non odio. Nibh sit amet commodo nulla 100 | facilisi 101 | nullam vehicula. Integer quis auctor elit sed. Porttitor leo a diam sollicitudin tempor id. Sed enim ut 102 | sem 103 | viverra aliquet eget. Amet mattis vulputate enim nulla. Libero volutpat sed cras ornare arcu dui. Erat 104 | nam 105 | at lectus urna duis. Nibh tellus molestie nunc non blandit massa enim. Egestas tellus rutrum tellus 106 | pellentesque eu. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. 107 |
108 | 109 | 110 |
111 | Amet volutpat consequat mauris nunc congue. Maecenas volutpat blandit aliquam etiam erat velit 112 | scelerisque 113 | in. Blandit libero volutpat sed cras ornare arcu dui. Viverra tellus in hac habitasse platea dictumst 114 | vestibulum rhoncus. Sed odio morbi quis commodo odio aenean sed adipiscing. Turpis egestas pretium 115 | aenean 116 | pharetra magna ac placerat. Morbi tincidunt augue interdum velit euismod. Sit amet luctus venenatis 117 | lectus 118 | magna fringilla urna porttitor. Molestie nunc non blandit massa enim nec dui nunc mattis. Accumsan 119 | tortor 120 | posuere ac ut consequat semper. Amet justo donec enim diam vulputate ut pharetra. Et pharetra pharetra 121 | massa 122 | massa. Mauris sit amet massa vitae tortor condimentum lacinia quis. Tellus rutrum tellus pellentesque eu 123 | tincidunt tortor aliquam. Netus et malesuada fames ac turpis egestas maecenas pharetra. Parturient 124 | montes 125 | nascetur ridiculus mus mauris vitae ultricies leo. Facilisi cras fermentum odio eu feugiat pretium nibh. 126 | Sit 127 | amet est placerat in egestas erat imperdiet sed. 128 |
129 |
130 |
131 |

Download the Source

133 | 134 | 135 | -------------------------------------------------------------------------------- /assignment-12-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Favorite Book 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 16 | 19 | 22 | 36 |
37 | 38 |
39 |
40 |

The Book of Joy

41 |

Authors: Tenzin Gyatso, Desmond Tutu & Douglas Abrams

42 |
Excerpt below
43 |
44 |
45 |
46 |
47 | Image with Abrams, Tutu, Dali Lama 48 |
49 | "Many of us have become refugees," the Dalai Lama tried to explain, "and there are a lot of difficulties in 50 | my own country. When I look only at that," he said, cupping his hands into a small circle, "then I worry." 51 | He widened his hands, breaking the circle open. "But when I look at the world, there are a lot of problems, 52 | even within the People’s Republic of China. For example, the Hui Muslim community in China has a lot of 53 | problems and suffering. And then outside China, there are many more problems and more suffering. When we see 54 | these things, we realize that not only do we suffer, but so do many of our human brothers and sisters. So 55 | when we look at the same event from a wider perspective, we will reduce the worrying and our own suffering." 56 |
57 |
58 | I was struck by the simplicity and profundity of what the Dalai Lama was saying. This was far from "don’t 59 | worry, be happy," as the popular Bobby McFerrin song says. This was not a denial of pain and suffering, but 60 | a shift in perspective -- from oneself and toward others, from anguish to compassion -- seeing that others 61 | are suffering as well. The remarkable thing about what the Dalai Lama was describing is that as we recognize 62 | others’ suffering and realize that we are not alone, our pain is lessened. 63 |
64 |
65 | Often we hear about another’s tragedy, and it makes us feel better about our own situation. This is quite 66 | different from what the Dalai Lama was doing. He was not contrasting his situation with others, but uniting 67 | his situation with others, enlarging his identity and seeing that he and the Tibetan people were not alone 68 | in their suffering. This recognition that we are all connected -- whether Tibetan Buddhists or Hui Muslims 69 | -- is the birth of empathy and compassion. 70 |
71 | 72 |
73 |
74 |
75 | I wondered how the Dalai Lama’s ability to shift his perspective might relate to the adage "Pain is 76 | inevitable; suffering is optional." Was it truly possible to experience pain, whether the pain of an injury 77 | or an exile, without suffering? There is a Sutta, or teaching of the Buddha, called the Sallatha Sutta, that 78 | makes a similar distinction between our "feelings of pain" and "the suffering that comes as a result of our 79 | response" to the pain: "When touched with a feeling of pain, the uninstructed, ordinary person sorrows, 80 | grieves, and laments, beats his breast, becomes distraught. So he feels two pains, physical and mental. Just 81 | as if they were to shoot a man with an arrow and, right afterward, were to shoot him with another one, so 82 | that he feels the pain of two arrows." It seems that the Dalai Lama was suggesting that by shifting our 83 | perspective to a broader, more compassionate one, we can avoid the worry and suffering that is the second 84 | arrow. 85 |
86 |
87 | "Then another thing," the Dalai Lama continued. "There are different aspects to any event. For example, we 88 | lost our own country and became refugees, but that same experience gave us new opportunities to see more 89 | things. For me personally, I had more opportunities to meet with different people, different spiritual 90 | practitioners, like you, and also scientists. This new opportunity arrived because I became a refugee. If I 91 | remained in the Potala in Lhasa, I would have stayed in what has often been described as a golden cage: the 92 | Lama, holy Dalai Lama." He was now sitting up stiffly as he once had to when he was the cloistered spiritual 93 | head of the Forbidden Kingdom. 94 |
95 |
96 | "So, personally, I prefer the last five decades of refugee life. It’s more useful, more opportunity to 97 | learn, to experience life. Therefore, if you look from one angle, you feel, oh how bad, how sad. But if you 98 | look from another angle at that same tragedy, that same event, you see that it gives me new opportunities. 99 | So, it’s wonderful. That’s the main reason that I’m not sad and morose. There’s a Tibetan saying: ‘Wherever 100 | you have friends that’s your country, and wherever you receive love, that’s your home.’" 101 | 102 |
103 |
104 |
105 | 106 | 107 | 108 | 111 | 114 | 115 | 116 | 119 | 122 | 123 | 124 | 127 | 130 | 131 | 132 | 135 | 138 | 139 | 140 | 143 | 146 | 147 | 148 | 151 | 154 | 155 |
109 | Language 110 | 112 | English 113 |
117 | Genre 118 | 120 | self help 121 |
125 | Publisher 126 | 128 | Cornerstone Publishers 129 |
133 | Publication date 134 | 136 | 22 September 2016 137 |
141 | Pages 142 | 144 | 368 145 |
149 | ISBN 150 | 152 | 978-0-399-18504-5 (Hardcover) 153 |
156 |
157 | 158 |

159 | Find more information about the Book of Joy 161 |

162 | 163 |

Download the Source

164 | 165 | 166 | --------------------------------------------------------------------------------