Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions case1/gp_cover_txt.html → case1/gp_cover.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,18 @@
Case Problem 1

Ghost of the Deep Cover Page
Author:
Date:
Author: Travis A/Zac F
Date: 11/9/18

Filename: gp_cover.html
-->

<title>Ghost of the Deep Cover Page</title>
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="gp_reset.css" rel="stylesheet" media="all" />
<link href="gp_layout.css" rel="stylesheet" media="screen" />
<link href="gp_print.css" rel="stylesheet" media="print" />
</head>

<body>
Expand Down
103 changes: 103 additions & 0 deletions case1/gp_layout.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
@charset "utf-8";

/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1

Author: Travis A/Zac F
Date: 11/9/18

Filename: gp_layout.css

This file contains the layout styles and media
queries used with sample pages from the Golden
Pulps website.

*/


/* Import Basic Design Styles Used on All Screens */

@import url("gp_designs.css");

/* Flex Layout Styles */

body {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

section#sheet {
-webkit-flex: 3 1 301px;
flex: 3 1 301px;
}

article {
-webkit-flex: 1 3 180px;
flex: 1 3 180px;
}

/* ============================================
Mobile Devices: 0 - 480 pixels
============================================
*/

@media only screen and (max-width: 480px) {

section#sheet img.panel {
width: 100%;
}

nav.horizontal {
-webkit-order: 99;
order: 99;
}

footer {
-webkit-order: 100;
order: 100;
}

}

/* ===================================================
Tablet and Desktop Devices: Greater than 480 pixels
===================================================
*/

@media only screen and (min-width: 481px) {

nav.horizontal ul {
display: -webkit-flex;
display: flex;
height: 40px;
}

nav.horizontal ul li {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}

img.size1 {
width: 100%;
}

img.size2 {
width: 60%;
}

img.size3 {
width: 40%;
}

img.size4 {
width: 30%;
}

}



42 changes: 0 additions & 42 deletions case1/gp_layout_txt.css

This file was deleted.

8 changes: 6 additions & 2 deletions case1/gp_page1_txt.html → case1/gp_page1.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,18 @@
Case Problem 1

Ghost of the Deep Page 1
Author:
Date:
Author: Travis A/Zac F
Date: 11/9/18

Filename: gp_page1.html
-->

<title>Ghost of the Deep Page 1</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="gp_reset.css" rel="stylesheet" media="all" />
<link href="gp_layout.css" rel="stylesheet" media="screen" />
<link href="gp_print.css" rel="stylesheet" media="print" />
</head>

<body>
Expand Down
8 changes: 6 additions & 2 deletions case1/gp_page2_txt.html → case1/gp_page2.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,18 @@
Case Problem 1

Ghost of the Deep Page 2
Author:
Date:
Author: Travis A/Zac F
Date: 11/9/18

Filename: gp_page2.html
-->

<title>Ghost of the Deep Page 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="gp_reset.css" rel="stylesheet" media="all" />
<link href="gp_layout.css" rel="stylesheet" media="screen" />
<link href="gp_print.css" rel="stylesheet" media="print" />
</head>

<body>
Expand Down
8 changes: 6 additions & 2 deletions case1/gp_page3_txt.html → case1/gp_page3.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,18 @@
Case Problem 1

Ghost of the Deep Page 3
Author:
Date:
Author: Travis A/Zac F
Date: 11/9/18

Filename: gp_page3.html
-->

<title>Ghost of the Deep Page 3</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="gp_reset.css" rel="stylesheet" media="all" />
<link href="gp_layout.css" rel="stylesheet" media="screen" />
<link href="gp_print.css" rel="stylesheet" media="print" />
</head>

<body>
Expand Down
57 changes: 57 additions & 0 deletions case1/gp_print.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1

Author: Travis A/Zac F
Date: 11/9/18

Filename: gp_print.css

This file contains the printer styles used with the sample
comic book pages from Golden Pulps.

*/



/* Hidden Objects */

nav, footer, article {
display: none;
}

/* Comic Book Sheet Styles */

section#sheet {
width: 6in;
top-margin: 0in;
bottom-margin: 0in;
left-margin: auto;
right-margin: auto;
}

img.size1 {
width: 5in;
}

img.size2 {
width: 3in;
}

img.size3 {
width: 2in;
}

img.size4 {
width: 1.5in;
}








39 changes: 0 additions & 39 deletions case1/gp_print_txt.css

This file was deleted.

2 changes: 1 addition & 1 deletion case2/wc_hole01.html
Original file line number Diff line number Diff line change
Expand Up @@ -124,4 +124,4 @@ <h1>Guided Hikes</h1>
531 Terry Canyon, Ogden UT 84401
</footer>
</body>
</html>
</html>
Loading