Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @charset "utf-8";
- /*
- New Perspectives on HTML5 and CSS3, 7th Edition
- Tutorial 5
- Case Problem 1
- Filename: gp_designs.css
- This file design style used by all screen sizes for
- the Golden Pulps sample comic book pages
- */
- /* =============================================
- Base styles used by All Screens
- =============================================
- */
- html {
- background-color: rgb(211, 255, 211);
- font-size: 12px;
- font-family: Tahoma, Geneva, sans-serif;
- }
- body {
- background-color: rgb(242, 221, 174);
- box-shadow: 15px 0px 30px rgb(51, 51, 51),
- -15px 0px 30px rgb(51, 51, 51);
- margin: 0px auto;
- max-width: 1024px;
- }
- body > header {
- background: url("gp_back1.png") center center / cover no-repeat;
- text-align: center;
- width: 100%;
- }
- body > header > img {
- display: inline;
- width: 70%;
- max-width: 400px;
- text-align: center;
- }
- /* Horizontal Navigation Styles */
- nav.horizontal {
- height: auto;
- width: 100%;
- }
- nav.horizontal ul {
- background-color: rgb(212, 175, 55);
- text-align: center;
- width: 100%;
- }
- nav.horizontal li {
- font-family: 'Comic Sans MS', cursive;
- font-size: 1.4em;
- line-height: 2em;
- list-style-type: none;
- width: 100%;
- }
- nav.horizontal li a {
- color: black;
- display: block;
- width: 100%;
- }
- nav.horizontal li a:hover, nav.horizontal li a:active {
- color: white;
- background-color: rgb(51, 51, 51);
- }
- /* Article Styles */
- article {
- padding: 10px;
- }
- article h1 {
- text-align: center;
- font-size: 1.4em;
- letter-spacing: 3px;
- }
- article p {
- font-size: 1.4em;
- line-height: 1.2;
- margin: 20px 0px;
- }
- /* Comic Book Sheet Styles */
- section#sheet {
- border: 1px solid rgb(101, 101, 101);
- background-color: white;
- padding: 10px 10px 0px 10px;
- }
- section#sheet h1 {
- font-size: 1.4em;
- text-align: center;
- letter-spacing: 3px;
- margin: 5px;
- }
- section#sheet footer {
- text-align: center;
- width: 100%;
- clear: left;
- }
- /* Navigation Pages Styles */
- nav#pages {
- padding-bottom: 10px;
- }
- nav#pages::after {
- content: "";
- display: table;
- clear: both;
- }
- nav#pages a {
- background-color: rgb(242, 221, 174);
- border: 1px solid rgb(101, 101, 101);
- box-shadow: rgb(51, 51, 51) 2px 2px 5px;
- display: block;
- float: left;
- margin: 4px;
- padding: 2px;
- text-align: center;
- width: 20px;
- }
- nav#pages a:first-of-type {
- width: 80px;
- }
- nav#pages a#current {
- background-color: rgb(51, 51, 51);
- color: white;
- }
- /* Comic Image Panel Styles */
- img.panel {
- float: left;
- display: block;
- }
- /* Body Footer Styles */
- body > footer {
- color: white;
- background-color: rgb(51, 51, 51);
- text-align: center;
- line-height: 2em;
- width: 100%;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement