├── chapter01 ├── images │ ├── bagel.jpg │ ├── crab.jpg │ ├── logo.png │ ├── promo.jpg │ ├── roast.jpg │ ├── bg-main.gif │ ├── haddock.jpg │ ├── bg-column.png │ └── twitter-icon.png ├── skeleton.html ├── css │ ├── styles.css │ └── normalize.css └── index.html ├── chapter02 ├── images │ ├── bagel.jpg │ ├── crab.jpg │ ├── logo.png │ ├── promo.jpg │ ├── roast.jpg │ ├── bg-main.gif │ ├── haddock.jpg │ ├── bg-column.png │ └── twitter-icon.png ├── css │ ├── styles.css │ └── normalize.css └── index.html ├── chapter03 ├── images │ ├── bagel.jpg │ ├── crab.jpg │ ├── logo.png │ ├── promo.jpg │ ├── roast.jpg │ ├── bg-main.gif │ ├── haddock.jpg │ ├── bg-column.png │ └── twitter-icon.png ├── css │ ├── styles.css │ └── normalize.css └── index.html ├── chapter04 ├── images │ ├── bagel.jpg │ ├── crab.jpg │ ├── logo.png │ ├── promo.jpg │ ├── roast.jpg │ ├── bg-main.gif │ ├── haddock.jpg │ ├── bg-column.png │ └── twitter-icon.png ├── fonts │ ├── lato-bold-webfont.eot │ ├── lato-bold-webfont.ttf │ ├── lato-bold-webfont.woff │ ├── lato-regular-webfont.eot │ ├── lato-regular-webfont.ttf │ ├── lato-regular-webfont.woff │ ├── chelseamarket-regular-webfont.eot │ ├── chelseamarket-regular-webfont.ttf │ ├── chelseamarket-regular-webfont.woff │ └── lato-regular-webfont.svg ├── css │ ├── styles.css │ └── normalize.css └── index.html └── chapter05 ├── images ├── bagel.jpg ├── crab.jpg ├── logo.png ├── promo.jpg ├── roast.jpg ├── bg-main.gif ├── haddock.jpg ├── bg-column.png └── twitter-icon.png ├── fonts ├── lato-bold-webfont.eot ├── lato-bold-webfont.ttf ├── lato-bold-webfont.woff ├── lato-regular-webfont.eot ├── lato-regular-webfont.ttf ├── lato-regular-webfont.woff ├── chelseamarket-regular-webfont.eot ├── chelseamarket-regular-webfont.ttf └── chelseamarket-regular-webfont.woff ├── index.html └── css ├── normalize.css └── styles.css /chapter01/images/bagel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter01/images/bagel.jpg -------------------------------------------------------------------------------- /chapter01/images/crab.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter01/images/crab.jpg -------------------------------------------------------------------------------- /chapter01/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter01/images/logo.png -------------------------------------------------------------------------------- /chapter01/images/promo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter01/images/promo.jpg -------------------------------------------------------------------------------- /chapter01/images/roast.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter01/images/roast.jpg -------------------------------------------------------------------------------- /chapter02/images/bagel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter02/images/bagel.jpg -------------------------------------------------------------------------------- /chapter02/images/crab.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter02/images/crab.jpg -------------------------------------------------------------------------------- /chapter02/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter02/images/logo.png -------------------------------------------------------------------------------- /chapter02/images/promo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter02/images/promo.jpg -------------------------------------------------------------------------------- /chapter02/images/roast.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter02/images/roast.jpg -------------------------------------------------------------------------------- /chapter03/images/bagel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter03/images/bagel.jpg -------------------------------------------------------------------------------- /chapter03/images/crab.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter03/images/crab.jpg -------------------------------------------------------------------------------- /chapter03/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter03/images/logo.png -------------------------------------------------------------------------------- /chapter03/images/promo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter03/images/promo.jpg -------------------------------------------------------------------------------- /chapter03/images/roast.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter03/images/roast.jpg -------------------------------------------------------------------------------- /chapter04/images/bagel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/images/bagel.jpg -------------------------------------------------------------------------------- /chapter04/images/crab.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/images/crab.jpg -------------------------------------------------------------------------------- /chapter04/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/images/logo.png -------------------------------------------------------------------------------- /chapter04/images/promo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/images/promo.jpg -------------------------------------------------------------------------------- /chapter04/images/roast.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/images/roast.jpg -------------------------------------------------------------------------------- /chapter05/images/bagel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/images/bagel.jpg -------------------------------------------------------------------------------- /chapter05/images/crab.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/images/crab.jpg -------------------------------------------------------------------------------- /chapter05/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/images/logo.png -------------------------------------------------------------------------------- /chapter05/images/promo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/images/promo.jpg -------------------------------------------------------------------------------- /chapter05/images/roast.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/images/roast.jpg -------------------------------------------------------------------------------- /chapter01/images/bg-main.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter01/images/bg-main.gif -------------------------------------------------------------------------------- /chapter01/images/haddock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter01/images/haddock.jpg -------------------------------------------------------------------------------- /chapter02/images/bg-main.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter02/images/bg-main.gif -------------------------------------------------------------------------------- /chapter02/images/haddock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter02/images/haddock.jpg -------------------------------------------------------------------------------- /chapter03/images/bg-main.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter03/images/bg-main.gif -------------------------------------------------------------------------------- /chapter03/images/haddock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter03/images/haddock.jpg -------------------------------------------------------------------------------- /chapter04/images/bg-main.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/images/bg-main.gif -------------------------------------------------------------------------------- /chapter04/images/haddock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/images/haddock.jpg -------------------------------------------------------------------------------- /chapter05/images/bg-main.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/images/bg-main.gif -------------------------------------------------------------------------------- /chapter05/images/haddock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/images/haddock.jpg -------------------------------------------------------------------------------- /chapter01/images/bg-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter01/images/bg-column.png -------------------------------------------------------------------------------- /chapter02/images/bg-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter02/images/bg-column.png -------------------------------------------------------------------------------- /chapter03/images/bg-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter03/images/bg-column.png -------------------------------------------------------------------------------- /chapter04/images/bg-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/images/bg-column.png -------------------------------------------------------------------------------- /chapter05/images/bg-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/images/bg-column.png -------------------------------------------------------------------------------- /chapter01/images/twitter-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter01/images/twitter-icon.png -------------------------------------------------------------------------------- /chapter02/images/twitter-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter02/images/twitter-icon.png -------------------------------------------------------------------------------- /chapter03/images/twitter-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter03/images/twitter-icon.png -------------------------------------------------------------------------------- /chapter04/images/twitter-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/images/twitter-icon.png -------------------------------------------------------------------------------- /chapter05/images/twitter-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/images/twitter-icon.png -------------------------------------------------------------------------------- /chapter04/fonts/lato-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/fonts/lato-bold-webfont.eot -------------------------------------------------------------------------------- /chapter04/fonts/lato-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/fonts/lato-bold-webfont.ttf -------------------------------------------------------------------------------- /chapter04/fonts/lato-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/fonts/lato-bold-webfont.woff -------------------------------------------------------------------------------- /chapter05/fonts/lato-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/fonts/lato-bold-webfont.eot -------------------------------------------------------------------------------- /chapter05/fonts/lato-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/fonts/lato-bold-webfont.ttf -------------------------------------------------------------------------------- /chapter05/fonts/lato-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/fonts/lato-bold-webfont.woff -------------------------------------------------------------------------------- /chapter04/fonts/lato-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/fonts/lato-regular-webfont.eot -------------------------------------------------------------------------------- /chapter04/fonts/lato-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/fonts/lato-regular-webfont.ttf -------------------------------------------------------------------------------- /chapter04/fonts/lato-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/fonts/lato-regular-webfont.woff -------------------------------------------------------------------------------- /chapter05/fonts/lato-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/fonts/lato-regular-webfont.eot -------------------------------------------------------------------------------- /chapter05/fonts/lato-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/fonts/lato-regular-webfont.ttf -------------------------------------------------------------------------------- /chapter05/fonts/lato-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/fonts/lato-regular-webfont.woff -------------------------------------------------------------------------------- /chapter04/fonts/chelseamarket-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/fonts/chelseamarket-regular-webfont.eot -------------------------------------------------------------------------------- /chapter04/fonts/chelseamarket-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/fonts/chelseamarket-regular-webfont.ttf -------------------------------------------------------------------------------- /chapter05/fonts/chelseamarket-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/fonts/chelseamarket-regular-webfont.eot -------------------------------------------------------------------------------- /chapter05/fonts/chelseamarket-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/fonts/chelseamarket-regular-webfont.ttf -------------------------------------------------------------------------------- /chapter04/fonts/chelseamarket-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter04/fonts/chelseamarket-regular-webfont.woff -------------------------------------------------------------------------------- /chapter05/fonts/chelseamarket-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/JSCSS1/HEAD/chapter05/fonts/chelseamarket-regular-webfont.woff -------------------------------------------------------------------------------- /chapter01/skeleton.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | RecipeFinder 6 | 7 |     8 |     9 | 10 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter01/css/styles.css: -------------------------------------------------------------------------------- 1 | a:link, a:visited { 2 | 3 | } 4 | 5 | a:hover { 6 | 7 | } 8 | 9 | h1 { 10 | 11 | } 12 | 13 | h2 { 14 | 15 | } 16 | 17 | body > header { 18 | 19 | } 20 | 21 | nav ul { 22 | 23 | } 24 | 25 | .promo { 26 | 27 | } 28 | 29 | .main { 30 | 31 | } 32 | 33 | .latest { 34 | 35 | } 36 | 37 | .media { 38 | 39 | } 40 | 41 | .media img { 42 | 43 | } 44 | 45 | .sidebar { 46 | 47 | } 48 | 49 | footer { 50 | 51 | } -------------------------------------------------------------------------------- /chapter02/css/styles.css: -------------------------------------------------------------------------------- 1 | .cf:before, 2 | .cf:after { 3 | content: " "; 4 | display: table; 5 | } 6 | 7 | .cf:after { 8 | clear: both; 9 | } 10 | 11 | .cf { 12 | *zoom: 1; /* for IE6 and IE7 */ 13 | } 14 | 15 | * { 16 | -webkit-box-sizing: border-box; 17 | -moz-box-sizing: border-box; 18 | box-sizing: border-box; 19 | } 20 | 21 | a:link, a:visited { 22 | 23 | } 24 | 25 | a:hover { 26 | 27 | } 28 | 29 | h1 { 30 | 31 | } 32 | 33 | h2 { 34 | 35 | } 36 | 37 | .center-global { 38 | width: 1020px; 39 | margin: 0 auto; 40 | } 41 | 42 | body > header { 43 | 44 | } 45 | 46 | .logo { 47 | float: left; 48 | margin-left: 145px; 49 | margin-top: -34px; 50 | position: relative; 51 | top: 34px; 52 | z-index: 10; 53 | } 54 | 55 | nav { 56 | float: right; 57 | margin-right: 177px; 58 | padding-top: 20px; 59 | } 60 | 61 | nav ul { 62 | list-style: none; 63 | margin: 0; 64 | padding: 0; 65 | } 66 | 67 | nav ul li { 68 | display: inline-block; 69 | *display: inline; /* for IE7 */ 70 | margin-right: 30px; 71 | } 72 | 73 | .promo { 74 | position: relative; 75 | z-index: 5; 76 | } 77 | 78 | .promo-desc { 79 | position: absolute; 80 | bottom: 93px; 81 | right: 75px; 82 | } 83 | 84 | .main { 85 | } 86 | 87 | .latest { 88 | width: 640px; 89 | float: left; 90 | padding: 0 40px; 91 | } 92 | 93 | .media { 94 | clear: left; 95 | padding-bottom: 28px; 96 | overflow: hidden; 97 | } 98 | 99 | .media img { 100 | float: left; 101 | margin-right: 30px; 102 | } 103 | 104 | .sidebar { 105 | width: 360px; 106 | float: right; 107 | } 108 | 109 | .popular { 110 | padding-bottom: 40px; 111 | } 112 | 113 | .rating { 114 | float: left; 115 | clear: left; 116 | padding-top: 4px; 117 | padding-right: 15px; 118 | width: 45px; 119 | } 120 | 121 | .pop-item { 122 | padding-bottom: 20px; 123 | float: left; 124 | width: 250px; 125 | } 126 | 127 | .tweet { 128 | padding-left: 55px; 129 | padding-right: 20px; 130 | position: relative; 131 | } 132 | 133 | .tweet:before { 134 | content: url(../images/twitter-icon.png); 135 | display: block; 136 | position: absolute; 137 | left: 15px; 138 | top: 4px; 139 | } 140 | 141 | footer { 142 | 143 | } 144 | 145 | .footer-inside { 146 | padding-left: 40px; 147 | } 148 | 149 | .footer-1 { 150 | float: left; 151 | width: 422px; 152 | } 153 | 154 | .footer-2 { 155 | float: left; 156 | width: 326px; 157 | } 158 | 159 | .footer-3 { 160 | float: left; 161 | width: 232px; 162 | } -------------------------------------------------------------------------------- /chapter03/css/styles.css: -------------------------------------------------------------------------------- 1 | .cf:before, 2 | .cf:after { 3 | content: " "; 4 | display: table; 5 | } 6 | 7 | .cf:after { 8 | clear: both; 9 | } 10 | 11 | .cf { 12 | *zoom: 1; /* for IE6 and IE7 */ 13 | } 14 | 15 | * { 16 | -webkit-box-sizing: border-box; 17 | -moz-box-sizing: border-box; 18 | box-sizing: border-box; 19 | } 20 | 21 | body { 22 | background: #cab5a3 url(../images/bg-main.gif) repeat repeat 0 0; 23 | } 24 | 25 | a:link, a:visited { 26 | 27 | } 28 | 29 | a:hover { 30 | 31 | } 32 | 33 | h1 { 34 | 35 | } 36 | 37 | h2 { 38 | 39 | } 40 | 41 | .center-global { 42 | width: 1020px; 43 | margin: 0 auto; 44 | } 45 | 46 | body > header { 47 | box-shadow: rgba(0, 0, 0, .25) 0 3px 2px 0; 48 | position: relative; 49 | z-index: 10; 50 | } 51 | 52 | .logo { 53 | float: left; 54 | margin-left: 145px; 55 | margin-top: -34px; 56 | position: relative; 57 | top: 34px; 58 | } 59 | 60 | nav { 61 | float: right; 62 | margin-right: 177px; 63 | padding-top: 20px; 64 | } 65 | 66 | nav ul { 67 | list-style: none; 68 | margin: 0; 69 | padding: 0; 70 | } 71 | 72 | nav ul li { 73 | display: inline-block; 74 | *display: inline; /* for IE7 */ 75 | margin-right: 30px; 76 | } 77 | 78 | .promo { 79 | position: relative; 80 | z-index: 5; 81 | padding-bottom: 8px; 82 | box-shadow: rgba(0, 0, 0, .25) 0 3px 2px 0; 83 | } 84 | 85 | .promo-desc { 86 | position: absolute; 87 | bottom: 93px; 88 | right: 75px; 89 | width: 316px; 90 | } 91 | 92 | .promo-btn { 93 | display: inline-block; 94 | width: 208px; 95 | padding: 13px 0; 96 | background-color: #6c0733; 97 | box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0; 98 | } 99 | 100 | .main { 101 | } 102 | 103 | .latest { 104 | width: 640px; 105 | float: left; 106 | padding: 0 40px; 107 | background: url(../images/bg-column.png) no-repeat top right; 108 | } 109 | 110 | .media { 111 | clear: left; 112 | padding-bottom: 28px; 113 | overflow: hidden; 114 | } 115 | 116 | .media img { 117 | float: left; 118 | margin-right: 30px; 119 | border: solid 9px #ede0d5; 120 | box-shadow: rgba(0, 0, 0, .25) 2px 2px 2px 0; 121 | } 122 | 123 | .more-btn { 124 | text-align: center; 125 | float: right; 126 | margin-right: 50px; 127 | width: 280px; 128 | } 129 | 130 | .sidebar { 131 | width: 360px; 132 | float: right; 133 | } 134 | 135 | .popular { 136 | padding-bottom: 40px; 137 | } 138 | 139 | .rating { 140 | float: left; 141 | clear: left; 142 | padding-top: 4px; 143 | padding-right: 15px; 144 | width: 45px; 145 | } 146 | 147 | .pop-item { 148 | padding-bottom: 20px; 149 | float: left; 150 | width: 250px; 151 | } 152 | 153 | .tweet { 154 | padding-left: 55px; 155 | padding-right: 20px; 156 | position: relative; 157 | } 158 | 159 | .tweet:before { 160 | content: url(../images/twitter-icon.png); 161 | display: block; 162 | position: absolute; 163 | left: 15px; 164 | top: 4px; 165 | } 166 | 167 | footer { 168 | background-color: rgb(66, 3, 30); 169 | } 170 | 171 | .footer-inside { 172 | padding-left: 40px; 173 | } 174 | 175 | .footer-1 { 176 | float: left; 177 | width: 422px; 178 | } 179 | 180 | .footer-2 { 181 | float: left; 182 | width: 326px; 183 | } 184 | 185 | .footer-3 { 186 | float: left; 187 | width: 232px; 188 | } -------------------------------------------------------------------------------- /chapter04/css/styles.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'ChelseaMarket'; 3 | src: url('../fonts/chelseamarket-regular-webfont.eot'); 4 | src: url('../fonts/chelseamarket-regular-webfont.eot?#iefix') format('embedded-opentype'), 5 | url('../fonts/chelseamarket-regular-webfont.woff') format('woff'), 6 | url('../fonts/chelseamarket-regular-webfont.ttf') format('truetype'), 7 | url('../fonts/chelseamarket-regular-webfont.svg#chelsea_marketregular') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | @font-face { 13 | font-family: 'LatoBold'; 14 | src: url('../fonts/lato-bold-webfont.eot'); 15 | src: url('../fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'), 16 | url('../fonts/lato-bold-webfont.woff') format('woff'), 17 | url('../fonts/lato-bold-webfont.ttf') format('truetype'), 18 | url('../fonts/lato-bold-webfont.svg#latobold') format('svg'); 19 | font-weight: normal; 20 | font-style: normal; 21 | } 22 | 23 | @font-face { 24 | font-family: 'Lato'; 25 | src: url('../fonts/lato-regular-webfont.eot'); 26 | src: url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'), 27 | url('../fonts/lato-regular-webfont.woff') format('woff'), 28 | url('../fonts/lato-regular-webfont.ttf') format('truetype'), 29 | url('../fonts/lato-regular-webfont.svg#latoregular') format('svg'); 30 | font-weight: normal; 31 | font-style: normal; 32 | } 33 | 34 | .cf:before, 35 | .cf:after { 36 | content: " "; 37 | display: table; 38 | } 39 | 40 | .cf:after { 41 | clear: both; 42 | } 43 | 44 | .cf { 45 | *zoom: 1; /* for IE6 and IE7 */ 46 | } 47 | 48 | * { 49 | -webkit-box-sizing: border-box; 50 | -moz-box-sizing: border-box; 51 | box-sizing: border-box; 52 | } 53 | 54 | body { 55 | background: #cab5a3 url(../images/bg-main.gif) repeat repeat 0 0; 56 | color: #333; 57 | font-family: Lato, Arial, Helvetica, sans-serif; 58 | } 59 | 60 | a { 61 | text-decoration: none; 62 | color: #544a40; 63 | } 64 | 65 | a:hover { 66 | 67 | } 68 | 69 | h1, h2, nav { 70 | font-family: ChelseaMarket, Arial, Helvetica, sans-serif; 71 | text-transform: uppercase; 72 | font-weight: normal; 73 | color: #810430; 74 | } 75 | 76 | .center-global { 77 | width: 1020px; 78 | margin: 0 auto; 79 | } 80 | 81 | body > header { 82 | box-shadow: rgba(0, 0, 0, .25) 0 3px 2px 0; 83 | position: relative; 84 | z-index: 10; 85 | } 86 | 87 | .logo { 88 | float: left; 89 | margin-left: 145px; 90 | margin-top: -34px; 91 | position: relative; 92 | top: 34px; 93 | } 94 | 95 | nav { 96 | float: right; 97 | margin-right: 177px; 98 | padding-top: 20px; 99 | } 100 | 101 | nav a { 102 | color: #fefefe; 103 | } 104 | 105 | nav ul { 106 | list-style: none; 107 | margin: 0; 108 | padding: 0; 109 | } 110 | 111 | nav ul li { 112 | display: inline-block; 113 | *display: inline; /* for IE7 */ 114 | margin-right: 30px; 115 | font-size: 20px; 116 | } 117 | 118 | nav ul li:last-child { 119 | margin-right: 0; 120 | } 121 | 122 | .promo { 123 | position: relative; 124 | z-index: 5; 125 | padding-bottom: 8px; 126 | box-shadow: rgba(0, 0, 0, .25) 0 3px 2px 0; 127 | } 128 | 129 | .promo-desc { 130 | position: absolute; 131 | bottom: 93px; 132 | right: 75px; 133 | width: 316px; 134 | text-align: center; 135 | } 136 | 137 | .promo-desc h1 { 138 | color: #fefefe; 139 | } 140 | 141 | .promo-btn { 142 | display: inline-block; 143 | width: 208px; 144 | padding: 13px 0; 145 | background-color: #6c0733; 146 | box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0; 147 | font-size: 20px; 148 | color: #fefefe; 149 | } 150 | 151 | .main { 152 | padding-bottom: 33px; 153 | } 154 | 155 | .latest { 156 | width: 640px; 157 | float: left; 158 | padding: 0 40px; 159 | background: url(../images/bg-column.png) no-repeat top right; 160 | } 161 | 162 | .media { 163 | clear: left; 164 | padding-bottom: 28px; 165 | overflow: hidden; 166 | } 167 | 168 | .media h2 { 169 | color: #49301a; 170 | font-family: LatoBold, Arial, Helvetica, sans-serif; 171 | font-weight: normal; 172 | font-size: 26px; 173 | margin-bottom: 5px; 174 | } 175 | 176 | .media img { 177 | float: left; 178 | margin-right: 30px; 179 | border: solid 9px #ede0d5; 180 | box-shadow: rgba(0, 0, 0, .25) 2px 2px 2px 0; 181 | } 182 | 183 | .media p { 184 | margin: 0; 185 | font-family: Lato, Arial, Helvetica, sans-serif; 186 | font-size: 18px; 187 | color: #7b6047; 188 | text-transform: uppercase; 189 | } 190 | 191 | .media p span { 192 | font-size: 25px; 193 | } 194 | 195 | .more-btn { 196 | text-align: center; 197 | float: right; 198 | margin-right: 50px; 199 | width: 280px; 200 | } 201 | 202 | .sidebar { 203 | width: 360px; 204 | float: right; 205 | } 206 | 207 | .popular { 208 | padding-bottom: 40px; 209 | } 210 | 211 | .rating { 212 | float: left; 213 | clear: left; 214 | padding-top: 4px; 215 | padding-right: 15px; 216 | width: 45px; 217 | color: #810430; 218 | font-size: 13px; 219 | } 220 | 221 | .pop-item { 222 | padding-bottom: 20px; 223 | float: left; 224 | width: 250px; 225 | text-transform: uppercase; 226 | font-size: 18px; 227 | } 228 | 229 | .pop-item a { 230 | color: #544a40; 231 | } 232 | 233 | .tweet { 234 | padding-left: 55px; 235 | padding-right: 20px; 236 | position: relative; 237 | line-height: 1.4; 238 | } 239 | 240 | .tweet:before { 241 | content: url(../images/twitter-icon.png); 242 | display: block; 243 | position: absolute; 244 | left: 15px; 245 | top: 4px; 246 | } 247 | 248 | .tweet a { 249 | color: #810430; 250 | } 251 | 252 | a.date { 253 | color: #8f7e6d; 254 | font-faily: Arial, sans-serif; 255 | font-size: 12px; 256 | font-style: italic; 257 | } 258 | 259 | footer { 260 | background-color: rgb(66, 3, 30); 261 | padding-top: 10px; 262 | padding-bottom: 50px; 263 | } 264 | 265 | footer ul { 266 | list-style: none; 267 | margin: 0; 268 | padding: 0; 269 | } 270 | 271 | .footer-inside { 272 | padding-left: 40px; 273 | } 274 | 275 | .footer-1 { 276 | float: left; 277 | width: 422px; 278 | } 279 | 280 | .footer-1 h2 { 281 | font-size: 36px; 282 | } 283 | 284 | .footer-1 ul, .footer-2 ul { 285 | text-align: center; 286 | font-size: 20px; 287 | line-height: 1.7; 288 | } 289 | 290 | .footer-1 li { 291 | float: left; 292 | width: 195px; 293 | } 294 | 295 | .footer-1 ul a, 296 | .footer-2 ul a { 297 | color: #ab97a0; 298 | } 299 | 300 | .footer-2 { 301 | float: left; 302 | width: 326px; 303 | padding-top: 22px; 304 | } 305 | 306 | .footer-2 ul { 307 | margin: 0 80px 0 0; 308 | } 309 | 310 | .footer-3 { 311 | float: left; 312 | width: 232px; 313 | color: #801c48; 314 | padding-top: 22px; 315 | } 316 | 317 | .footer-3 h2, .footer-3 a { 318 | color: #801c48; 319 | } 320 | 321 | .footer-3 li { 322 | line-height: 1.7; 323 | } -------------------------------------------------------------------------------- /chapter01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | RecipeFinder 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 | 42 | 43 |
44 | 45 |
46 | 47 |
48 | 49 | Zucchini Puree 50 | 51 |
52 |

Sweet and Sour Zucchini Puree

53 | cook it now! 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |

Latest Recipes

63 | 64 |
65 | 66 | 67 | Haddock skewers 68 |

Zesty Smoked Haddock Skewers

69 |

Cooking time: 20 minutes

70 | 71 | 72 |
73 | 74 |
75 | 76 | 77 | Blueberry Bagel 78 |

Creamy Blueberry Bagel

79 |

Cooking time: 7 minutes

80 | 81 | 82 |
83 | 84 |
85 | 86 | 87 | Roast Beef 88 |

Traditional Roast Beef with Yorkshire Sauce

89 |

Cooking time: 50 minutes

90 | 91 | 92 |
93 | 94 |
95 | 96 | 97 | Steamed Crab 98 |

Steamed Crab with Ginger and Coriander

99 |

Cooking time: 40 minutes

100 | 101 | 102 |
103 | 104 | discover more recipes 105 | 106 |
107 | 108 | 155 | 156 |
157 | 158 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /chapter02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | RecipeFinder 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 | 42 | 43 |
44 | 45 |
46 | 47 |
48 | 49 | Zucchini Puree 50 | 51 |
52 |

Sweet and Sour Zucchini Puree

53 | cook it now! 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |

Latest Recipes

63 | 64 |
65 | 66 | 67 | Haddock skewers 68 |

Zesty Smoked Haddock Skewers

69 |

Cooking time: 20 minutes

70 | 71 | 72 |
73 | 74 |
75 | 76 | 77 | Blueberry Bagel 78 |

Creamy Blueberry Bagel

79 |

Cooking time: 7 minutes

80 | 81 | 82 |
83 | 84 |
85 | 86 | 87 | Roast Beef 88 |

Traditional Roast Beef with Yorkshire Sauce

89 |

Cooking time: 50 minutes

90 | 91 | 92 |
93 | 94 |
95 | 96 | 97 | Steamed Crab 98 |

Steamed Crab with Ginger and Coriander

99 |

Cooking time: 40 minutes

100 | 101 | 102 |
103 | 104 | discover more recipes 105 | 106 |
107 | 108 | 155 | 156 |
157 | 158 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /chapter03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | RecipeFinder 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 | 42 | 43 |
44 | 45 |
46 | 47 |
48 | 49 | Zucchini Puree 50 | 51 |
52 |

Sweet and Sour Zucchini Puree

53 | cook it now! 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |

Latest Recipes

63 | 64 |
65 | 66 | 67 | Haddock skewers 68 |

Zesty Smoked Haddock Skewers

69 |

Cooking time: 20 minutes

70 | 71 | 72 |
73 | 74 |
75 | 76 | 77 | Blueberry Bagel 78 |

Creamy Blueberry Bagel

79 |

Cooking time: 7 minutes

80 | 81 | 82 |
83 | 84 |
85 | 86 | 87 | Roast Beef 88 |

Traditional Roast Beef with Yorkshire Sauce

89 |

Cooking time: 50 minutes

90 | 91 | 92 |
93 | 94 |
95 | 96 | 97 | Steamed Crab 98 |

Steamed Crab with Ginger and Coriander

99 |

Cooking time: 40 minutes

100 | 101 | 102 |
103 | 104 | discover more recipes 105 | 106 |
107 | 108 | 155 | 156 |
157 | 158 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /chapter04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | RecipeFinder 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 | 42 | 43 |
44 | 45 |
46 | 47 |
48 | 49 | Zucchini Puree 50 | 51 |
52 |

Sweet and Sour Zucchini Puree

53 | cook it now! 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |

Latest Recipes

63 | 64 |
65 | 66 | 67 | Haddock skewers 68 |

Zesty Smoked Haddock Skewers

69 |

Cooking time: 20 minutes

70 | 71 | 72 |
73 | 74 |
75 | 76 | 77 | Blueberry Bagel 78 |

Creamy Blueberry Bagel

79 |

Cooking time: 7 minutes

80 | 81 | 82 |
83 | 84 |
85 | 86 | 87 | Roast Beef 88 |

Traditional Roast Beef with Yorkshire Sauce

89 |

Cooking time: 50 minutes

90 | 91 | 92 |
93 | 94 |
95 | 96 | 97 | Steamed Crab 98 |

Steamed Crab with Ginger and Coriander

99 |

Cooking time: 40 minutes

100 | 101 | 102 |
103 | 104 | discover more recipes 105 | 106 |
107 | 108 | 155 | 156 |
157 | 158 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /chapter05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | RecipeFinder 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 | 42 | 43 |
44 | 45 |
46 | 47 |
48 | 49 | Zucchini Puree 50 | 51 |
52 |

Sweet and Sour Zucchini Puree

53 | cook it now! 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |

Latest Recipes

63 | 64 |
65 | 66 | 67 | Haddock skewers 68 |

Zesty Smoked Haddock Skewers

69 |

Cooking time: 20 minutes

70 | 71 | 72 |
73 | 74 |
75 | 76 | 77 | Blueberry Bagel 78 |

Creamy Blueberry Bagel

79 |

Cooking time: 7 minutes

80 | 81 | 82 |
83 | 84 |
85 | 86 | 87 | Roast Beef 88 |

Traditional Roast Beef with Yorkshire Sauce

89 |

Cooking time: 50 minutes

90 | 91 | 92 |
93 | 94 |
95 | 96 | 97 | Steamed Crab 98 |

Steamed Crab with Ginger and Coriander

99 |

Cooking time: 40 minutes

100 | 101 | 102 |
103 | 104 | discover more recipes 105 | 106 |
107 | 108 | 155 | 156 |
157 | 158 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /chapter01/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.2 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /** 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /** 47 | * Address styling not present in IE 8/9. 48 | */ 49 | 50 | [hidden] { 51 | display: none; 52 | } 53 | 54 | /* ========================================================================== 55 | Base 56 | ========================================================================== */ 57 | 58 | /** 59 | * 1. Set default font family to sans-serif. 60 | * 2. Prevent iOS text size adjust after orientation change, without disabling 61 | * user zoom. 62 | */ 63 | 64 | html { 65 | font-family: sans-serif; /* 1 */ 66 | -ms-text-size-adjust: 100%; /* 2 */ 67 | -webkit-text-size-adjust: 100%; /* 2 */ 68 | } 69 | 70 | /** 71 | * Remove default margin. 72 | */ 73 | 74 | body { 75 | margin: 0; 76 | } 77 | 78 | /* ========================================================================== 79 | Links 80 | ========================================================================== */ 81 | 82 | /** 83 | * Address `outline` inconsistency between Chrome and other browsers. 84 | */ 85 | 86 | a:focus { 87 | outline: thin dotted; 88 | } 89 | 90 | /** 91 | * Improve readability when focused and also mouse hovered in all browsers. 92 | */ 93 | 94 | a:active, 95 | a:hover { 96 | outline: 0; 97 | } 98 | 99 | /* ========================================================================== 100 | Typography 101 | ========================================================================== */ 102 | 103 | /** 104 | * Address variable `h1` font-size and margin within `section` and `article` 105 | * contexts in Firefox 4+, Safari 5, and Chrome. 106 | */ 107 | 108 | h1 { 109 | font-size: 2em; 110 | margin: 0.67em 0; 111 | } 112 | 113 | /** 114 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 115 | */ 116 | 117 | abbr[title] { 118 | border-bottom: 1px dotted; 119 | } 120 | 121 | /** 122 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 123 | */ 124 | 125 | b, 126 | strong { 127 | font-weight: bold; 128 | } 129 | 130 | /** 131 | * Address styling not present in Safari 5 and Chrome. 132 | */ 133 | 134 | dfn { 135 | font-style: italic; 136 | } 137 | 138 | /** 139 | * Address differences between Firefox and other browsers. 140 | */ 141 | 142 | hr { 143 | -moz-box-sizing: content-box; 144 | box-sizing: content-box; 145 | height: 0; 146 | } 147 | 148 | /** 149 | * Address styling not present in IE 8/9. 150 | */ 151 | 152 | mark { 153 | background: #ff0; 154 | color: #000; 155 | } 156 | 157 | /** 158 | * Correct font family set oddly in Safari 5 and Chrome. 159 | */ 160 | 161 | code, 162 | kbd, 163 | pre, 164 | samp { 165 | font-family: monospace, serif; 166 | font-size: 1em; 167 | } 168 | 169 | /** 170 | * Improve readability of pre-formatted text in all browsers. 171 | */ 172 | 173 | pre { 174 | white-space: pre-wrap; 175 | } 176 | 177 | /** 178 | * Set consistent quote types. 179 | */ 180 | 181 | q { 182 | quotes: "\201C" "\201D" "\2018" "\2019"; 183 | } 184 | 185 | /** 186 | * Address inconsistent and variable font size in all browsers. 187 | */ 188 | 189 | small { 190 | font-size: 80%; 191 | } 192 | 193 | /** 194 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 195 | */ 196 | 197 | sub, 198 | sup { 199 | font-size: 75%; 200 | line-height: 0; 201 | position: relative; 202 | vertical-align: baseline; 203 | } 204 | 205 | sup { 206 | top: -0.5em; 207 | } 208 | 209 | sub { 210 | bottom: -0.25em; 211 | } 212 | 213 | /* ========================================================================== 214 | Embedded content 215 | ========================================================================== */ 216 | 217 | /** 218 | * Remove border when inside `a` element in IE 8/9. 219 | */ 220 | 221 | img { 222 | border: 0; 223 | } 224 | 225 | /** 226 | * Correct overflow displayed oddly in IE 9. 227 | */ 228 | 229 | svg:not(:root) { 230 | overflow: hidden; 231 | } 232 | 233 | /* ========================================================================== 234 | Figures 235 | ========================================================================== */ 236 | 237 | /** 238 | * Address margin not present in IE 8/9 and Safari 5. 239 | */ 240 | 241 | figure { 242 | margin: 0; 243 | } 244 | 245 | /* ========================================================================== 246 | Forms 247 | ========================================================================== */ 248 | 249 | /** 250 | * Define consistent border, margin, and padding. 251 | */ 252 | 253 | fieldset { 254 | border: 1px solid #c0c0c0; 255 | margin: 0 2px; 256 | padding: 0.35em 0.625em 0.75em; 257 | } 258 | 259 | /** 260 | * 1. Correct `color` not being inherited in IE 8/9. 261 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 262 | */ 263 | 264 | legend { 265 | border: 0; /* 1 */ 266 | padding: 0; /* 2 */ 267 | } 268 | 269 | /** 270 | * 1. Correct font family not being inherited in all browsers. 271 | * 2. Correct font size not being inherited in all browsers. 272 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 273 | */ 274 | 275 | button, 276 | input, 277 | select, 278 | textarea { 279 | font-family: inherit; /* 1 */ 280 | font-size: 100%; /* 2 */ 281 | margin: 0; /* 3 */ 282 | } 283 | 284 | /** 285 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 286 | * the UA stylesheet. 287 | */ 288 | 289 | button, 290 | input { 291 | line-height: normal; 292 | } 293 | 294 | /** 295 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 296 | * All other form control elements do not inherit `text-transform` values. 297 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 298 | * Correct `select` style inheritance in Firefox 4+ and Opera. 299 | */ 300 | 301 | button, 302 | select { 303 | text-transform: none; 304 | } 305 | 306 | /** 307 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 308 | * and `video` controls. 309 | * 2. Correct inability to style clickable `input` types in iOS. 310 | * 3. Improve usability and consistency of cursor style between image-type 311 | * `input` and others. 312 | */ 313 | 314 | button, 315 | html input[type="button"], /* 1 */ 316 | input[type="reset"], 317 | input[type="submit"] { 318 | -webkit-appearance: button; /* 2 */ 319 | cursor: pointer; /* 3 */ 320 | } 321 | 322 | /** 323 | * Re-set default cursor for disabled elements. 324 | */ 325 | 326 | button[disabled], 327 | html input[disabled] { 328 | cursor: default; 329 | } 330 | 331 | /** 332 | * 1. Address box sizing set to `content-box` in IE 8/9. 333 | * 2. Remove excess padding in IE 8/9. 334 | */ 335 | 336 | input[type="checkbox"], 337 | input[type="radio"] { 338 | box-sizing: border-box; /* 1 */ 339 | padding: 0; /* 2 */ 340 | } 341 | 342 | /** 343 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 344 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 345 | * (include `-moz` to future-proof). 346 | */ 347 | 348 | input[type="search"] { 349 | -webkit-appearance: textfield; /* 1 */ 350 | -moz-box-sizing: content-box; 351 | -webkit-box-sizing: content-box; /* 2 */ 352 | box-sizing: content-box; 353 | } 354 | 355 | /** 356 | * Remove inner padding and search cancel button in Safari 5 and Chrome 357 | * on OS X. 358 | */ 359 | 360 | input[type="search"]::-webkit-search-cancel-button, 361 | input[type="search"]::-webkit-search-decoration { 362 | -webkit-appearance: none; 363 | } 364 | 365 | /** 366 | * Remove inner padding and border in Firefox 4+. 367 | */ 368 | 369 | button::-moz-focus-inner, 370 | input::-moz-focus-inner { 371 | border: 0; 372 | padding: 0; 373 | } 374 | 375 | /** 376 | * 1. Remove default vertical scrollbar in IE 8/9. 377 | * 2. Improve readability and alignment in all browsers. 378 | */ 379 | 380 | textarea { 381 | overflow: auto; /* 1 */ 382 | vertical-align: top; /* 2 */ 383 | } 384 | 385 | /* ========================================================================== 386 | Tables 387 | ========================================================================== */ 388 | 389 | /** 390 | * Remove most spacing between table cells. 391 | */ 392 | 393 | table { 394 | border-collapse: collapse; 395 | border-spacing: 0; 396 | } 397 | -------------------------------------------------------------------------------- /chapter02/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.2 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /** 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /** 47 | * Address styling not present in IE 8/9. 48 | */ 49 | 50 | [hidden] { 51 | display: none; 52 | } 53 | 54 | /* ========================================================================== 55 | Base 56 | ========================================================================== */ 57 | 58 | /** 59 | * 1. Set default font family to sans-serif. 60 | * 2. Prevent iOS text size adjust after orientation change, without disabling 61 | * user zoom. 62 | */ 63 | 64 | html { 65 | font-family: sans-serif; /* 1 */ 66 | -ms-text-size-adjust: 100%; /* 2 */ 67 | -webkit-text-size-adjust: 100%; /* 2 */ 68 | } 69 | 70 | /** 71 | * Remove default margin. 72 | */ 73 | 74 | body { 75 | margin: 0; 76 | } 77 | 78 | /* ========================================================================== 79 | Links 80 | ========================================================================== */ 81 | 82 | /** 83 | * Address `outline` inconsistency between Chrome and other browsers. 84 | */ 85 | 86 | a:focus { 87 | outline: thin dotted; 88 | } 89 | 90 | /** 91 | * Improve readability when focused and also mouse hovered in all browsers. 92 | */ 93 | 94 | a:active, 95 | a:hover { 96 | outline: 0; 97 | } 98 | 99 | /* ========================================================================== 100 | Typography 101 | ========================================================================== */ 102 | 103 | /** 104 | * Address variable `h1` font-size and margin within `section` and `article` 105 | * contexts in Firefox 4+, Safari 5, and Chrome. 106 | */ 107 | 108 | h1 { 109 | font-size: 2em; 110 | margin: 0.67em 0; 111 | } 112 | 113 | /** 114 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 115 | */ 116 | 117 | abbr[title] { 118 | border-bottom: 1px dotted; 119 | } 120 | 121 | /** 122 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 123 | */ 124 | 125 | b, 126 | strong { 127 | font-weight: bold; 128 | } 129 | 130 | /** 131 | * Address styling not present in Safari 5 and Chrome. 132 | */ 133 | 134 | dfn { 135 | font-style: italic; 136 | } 137 | 138 | /** 139 | * Address differences between Firefox and other browsers. 140 | */ 141 | 142 | hr { 143 | -moz-box-sizing: content-box; 144 | box-sizing: content-box; 145 | height: 0; 146 | } 147 | 148 | /** 149 | * Address styling not present in IE 8/9. 150 | */ 151 | 152 | mark { 153 | background: #ff0; 154 | color: #000; 155 | } 156 | 157 | /** 158 | * Correct font family set oddly in Safari 5 and Chrome. 159 | */ 160 | 161 | code, 162 | kbd, 163 | pre, 164 | samp { 165 | font-family: monospace, serif; 166 | font-size: 1em; 167 | } 168 | 169 | /** 170 | * Improve readability of pre-formatted text in all browsers. 171 | */ 172 | 173 | pre { 174 | white-space: pre-wrap; 175 | } 176 | 177 | /** 178 | * Set consistent quote types. 179 | */ 180 | 181 | q { 182 | quotes: "\201C" "\201D" "\2018" "\2019"; 183 | } 184 | 185 | /** 186 | * Address inconsistent and variable font size in all browsers. 187 | */ 188 | 189 | small { 190 | font-size: 80%; 191 | } 192 | 193 | /** 194 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 195 | */ 196 | 197 | sub, 198 | sup { 199 | font-size: 75%; 200 | line-height: 0; 201 | position: relative; 202 | vertical-align: baseline; 203 | } 204 | 205 | sup { 206 | top: -0.5em; 207 | } 208 | 209 | sub { 210 | bottom: -0.25em; 211 | } 212 | 213 | /* ========================================================================== 214 | Embedded content 215 | ========================================================================== */ 216 | 217 | /** 218 | * Remove border when inside `a` element in IE 8/9. 219 | */ 220 | 221 | img { 222 | border: 0; 223 | } 224 | 225 | /** 226 | * Correct overflow displayed oddly in IE 9. 227 | */ 228 | 229 | svg:not(:root) { 230 | overflow: hidden; 231 | } 232 | 233 | /* ========================================================================== 234 | Figures 235 | ========================================================================== */ 236 | 237 | /** 238 | * Address margin not present in IE 8/9 and Safari 5. 239 | */ 240 | 241 | figure { 242 | margin: 0; 243 | } 244 | 245 | /* ========================================================================== 246 | Forms 247 | ========================================================================== */ 248 | 249 | /** 250 | * Define consistent border, margin, and padding. 251 | */ 252 | 253 | fieldset { 254 | border: 1px solid #c0c0c0; 255 | margin: 0 2px; 256 | padding: 0.35em 0.625em 0.75em; 257 | } 258 | 259 | /** 260 | * 1. Correct `color` not being inherited in IE 8/9. 261 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 262 | */ 263 | 264 | legend { 265 | border: 0; /* 1 */ 266 | padding: 0; /* 2 */ 267 | } 268 | 269 | /** 270 | * 1. Correct font family not being inherited in all browsers. 271 | * 2. Correct font size not being inherited in all browsers. 272 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 273 | */ 274 | 275 | button, 276 | input, 277 | select, 278 | textarea { 279 | font-family: inherit; /* 1 */ 280 | font-size: 100%; /* 2 */ 281 | margin: 0; /* 3 */ 282 | } 283 | 284 | /** 285 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 286 | * the UA stylesheet. 287 | */ 288 | 289 | button, 290 | input { 291 | line-height: normal; 292 | } 293 | 294 | /** 295 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 296 | * All other form control elements do not inherit `text-transform` values. 297 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 298 | * Correct `select` style inheritance in Firefox 4+ and Opera. 299 | */ 300 | 301 | button, 302 | select { 303 | text-transform: none; 304 | } 305 | 306 | /** 307 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 308 | * and `video` controls. 309 | * 2. Correct inability to style clickable `input` types in iOS. 310 | * 3. Improve usability and consistency of cursor style between image-type 311 | * `input` and others. 312 | */ 313 | 314 | button, 315 | html input[type="button"], /* 1 */ 316 | input[type="reset"], 317 | input[type="submit"] { 318 | -webkit-appearance: button; /* 2 */ 319 | cursor: pointer; /* 3 */ 320 | } 321 | 322 | /** 323 | * Re-set default cursor for disabled elements. 324 | */ 325 | 326 | button[disabled], 327 | html input[disabled] { 328 | cursor: default; 329 | } 330 | 331 | /** 332 | * 1. Address box sizing set to `content-box` in IE 8/9. 333 | * 2. Remove excess padding in IE 8/9. 334 | */ 335 | 336 | input[type="checkbox"], 337 | input[type="radio"] { 338 | box-sizing: border-box; /* 1 */ 339 | padding: 0; /* 2 */ 340 | } 341 | 342 | /** 343 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 344 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 345 | * (include `-moz` to future-proof). 346 | */ 347 | 348 | input[type="search"] { 349 | -webkit-appearance: textfield; /* 1 */ 350 | -moz-box-sizing: content-box; 351 | -webkit-box-sizing: content-box; /* 2 */ 352 | box-sizing: content-box; 353 | } 354 | 355 | /** 356 | * Remove inner padding and search cancel button in Safari 5 and Chrome 357 | * on OS X. 358 | */ 359 | 360 | input[type="search"]::-webkit-search-cancel-button, 361 | input[type="search"]::-webkit-search-decoration { 362 | -webkit-appearance: none; 363 | } 364 | 365 | /** 366 | * Remove inner padding and border in Firefox 4+. 367 | */ 368 | 369 | button::-moz-focus-inner, 370 | input::-moz-focus-inner { 371 | border: 0; 372 | padding: 0; 373 | } 374 | 375 | /** 376 | * 1. Remove default vertical scrollbar in IE 8/9. 377 | * 2. Improve readability and alignment in all browsers. 378 | */ 379 | 380 | textarea { 381 | overflow: auto; /* 1 */ 382 | vertical-align: top; /* 2 */ 383 | } 384 | 385 | /* ========================================================================== 386 | Tables 387 | ========================================================================== */ 388 | 389 | /** 390 | * Remove most spacing between table cells. 391 | */ 392 | 393 | table { 394 | border-collapse: collapse; 395 | border-spacing: 0; 396 | } 397 | -------------------------------------------------------------------------------- /chapter03/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.2 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /** 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /** 47 | * Address styling not present in IE 8/9. 48 | */ 49 | 50 | [hidden] { 51 | display: none; 52 | } 53 | 54 | /* ========================================================================== 55 | Base 56 | ========================================================================== */ 57 | 58 | /** 59 | * 1. Set default font family to sans-serif. 60 | * 2. Prevent iOS text size adjust after orientation change, without disabling 61 | * user zoom. 62 | */ 63 | 64 | html { 65 | font-family: sans-serif; /* 1 */ 66 | -ms-text-size-adjust: 100%; /* 2 */ 67 | -webkit-text-size-adjust: 100%; /* 2 */ 68 | } 69 | 70 | /** 71 | * Remove default margin. 72 | */ 73 | 74 | body { 75 | margin: 0; 76 | } 77 | 78 | /* ========================================================================== 79 | Links 80 | ========================================================================== */ 81 | 82 | /** 83 | * Address `outline` inconsistency between Chrome and other browsers. 84 | */ 85 | 86 | a:focus { 87 | outline: thin dotted; 88 | } 89 | 90 | /** 91 | * Improve readability when focused and also mouse hovered in all browsers. 92 | */ 93 | 94 | a:active, 95 | a:hover { 96 | outline: 0; 97 | } 98 | 99 | /* ========================================================================== 100 | Typography 101 | ========================================================================== */ 102 | 103 | /** 104 | * Address variable `h1` font-size and margin within `section` and `article` 105 | * contexts in Firefox 4+, Safari 5, and Chrome. 106 | */ 107 | 108 | h1 { 109 | font-size: 2em; 110 | margin: 0.67em 0; 111 | } 112 | 113 | /** 114 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 115 | */ 116 | 117 | abbr[title] { 118 | border-bottom: 1px dotted; 119 | } 120 | 121 | /** 122 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 123 | */ 124 | 125 | b, 126 | strong { 127 | font-weight: bold; 128 | } 129 | 130 | /** 131 | * Address styling not present in Safari 5 and Chrome. 132 | */ 133 | 134 | dfn { 135 | font-style: italic; 136 | } 137 | 138 | /** 139 | * Address differences between Firefox and other browsers. 140 | */ 141 | 142 | hr { 143 | -moz-box-sizing: content-box; 144 | box-sizing: content-box; 145 | height: 0; 146 | } 147 | 148 | /** 149 | * Address styling not present in IE 8/9. 150 | */ 151 | 152 | mark { 153 | background: #ff0; 154 | color: #000; 155 | } 156 | 157 | /** 158 | * Correct font family set oddly in Safari 5 and Chrome. 159 | */ 160 | 161 | code, 162 | kbd, 163 | pre, 164 | samp { 165 | font-family: monospace, serif; 166 | font-size: 1em; 167 | } 168 | 169 | /** 170 | * Improve readability of pre-formatted text in all browsers. 171 | */ 172 | 173 | pre { 174 | white-space: pre-wrap; 175 | } 176 | 177 | /** 178 | * Set consistent quote types. 179 | */ 180 | 181 | q { 182 | quotes: "\201C" "\201D" "\2018" "\2019"; 183 | } 184 | 185 | /** 186 | * Address inconsistent and variable font size in all browsers. 187 | */ 188 | 189 | small { 190 | font-size: 80%; 191 | } 192 | 193 | /** 194 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 195 | */ 196 | 197 | sub, 198 | sup { 199 | font-size: 75%; 200 | line-height: 0; 201 | position: relative; 202 | vertical-align: baseline; 203 | } 204 | 205 | sup { 206 | top: -0.5em; 207 | } 208 | 209 | sub { 210 | bottom: -0.25em; 211 | } 212 | 213 | /* ========================================================================== 214 | Embedded content 215 | ========================================================================== */ 216 | 217 | /** 218 | * Remove border when inside `a` element in IE 8/9. 219 | */ 220 | 221 | img { 222 | border: 0; 223 | } 224 | 225 | /** 226 | * Correct overflow displayed oddly in IE 9. 227 | */ 228 | 229 | svg:not(:root) { 230 | overflow: hidden; 231 | } 232 | 233 | /* ========================================================================== 234 | Figures 235 | ========================================================================== */ 236 | 237 | /** 238 | * Address margin not present in IE 8/9 and Safari 5. 239 | */ 240 | 241 | figure { 242 | margin: 0; 243 | } 244 | 245 | /* ========================================================================== 246 | Forms 247 | ========================================================================== */ 248 | 249 | /** 250 | * Define consistent border, margin, and padding. 251 | */ 252 | 253 | fieldset { 254 | border: 1px solid #c0c0c0; 255 | margin: 0 2px; 256 | padding: 0.35em 0.625em 0.75em; 257 | } 258 | 259 | /** 260 | * 1. Correct `color` not being inherited in IE 8/9. 261 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 262 | */ 263 | 264 | legend { 265 | border: 0; /* 1 */ 266 | padding: 0; /* 2 */ 267 | } 268 | 269 | /** 270 | * 1. Correct font family not being inherited in all browsers. 271 | * 2. Correct font size not being inherited in all browsers. 272 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 273 | */ 274 | 275 | button, 276 | input, 277 | select, 278 | textarea { 279 | font-family: inherit; /* 1 */ 280 | font-size: 100%; /* 2 */ 281 | margin: 0; /* 3 */ 282 | } 283 | 284 | /** 285 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 286 | * the UA stylesheet. 287 | */ 288 | 289 | button, 290 | input { 291 | line-height: normal; 292 | } 293 | 294 | /** 295 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 296 | * All other form control elements do not inherit `text-transform` values. 297 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 298 | * Correct `select` style inheritance in Firefox 4+ and Opera. 299 | */ 300 | 301 | button, 302 | select { 303 | text-transform: none; 304 | } 305 | 306 | /** 307 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 308 | * and `video` controls. 309 | * 2. Correct inability to style clickable `input` types in iOS. 310 | * 3. Improve usability and consistency of cursor style between image-type 311 | * `input` and others. 312 | */ 313 | 314 | button, 315 | html input[type="button"], /* 1 */ 316 | input[type="reset"], 317 | input[type="submit"] { 318 | -webkit-appearance: button; /* 2 */ 319 | cursor: pointer; /* 3 */ 320 | } 321 | 322 | /** 323 | * Re-set default cursor for disabled elements. 324 | */ 325 | 326 | button[disabled], 327 | html input[disabled] { 328 | cursor: default; 329 | } 330 | 331 | /** 332 | * 1. Address box sizing set to `content-box` in IE 8/9. 333 | * 2. Remove excess padding in IE 8/9. 334 | */ 335 | 336 | input[type="checkbox"], 337 | input[type="radio"] { 338 | box-sizing: border-box; /* 1 */ 339 | padding: 0; /* 2 */ 340 | } 341 | 342 | /** 343 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 344 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 345 | * (include `-moz` to future-proof). 346 | */ 347 | 348 | input[type="search"] { 349 | -webkit-appearance: textfield; /* 1 */ 350 | -moz-box-sizing: content-box; 351 | -webkit-box-sizing: content-box; /* 2 */ 352 | box-sizing: content-box; 353 | } 354 | 355 | /** 356 | * Remove inner padding and search cancel button in Safari 5 and Chrome 357 | * on OS X. 358 | */ 359 | 360 | input[type="search"]::-webkit-search-cancel-button, 361 | input[type="search"]::-webkit-search-decoration { 362 | -webkit-appearance: none; 363 | } 364 | 365 | /** 366 | * Remove inner padding and border in Firefox 4+. 367 | */ 368 | 369 | button::-moz-focus-inner, 370 | input::-moz-focus-inner { 371 | border: 0; 372 | padding: 0; 373 | } 374 | 375 | /** 376 | * 1. Remove default vertical scrollbar in IE 8/9. 377 | * 2. Improve readability and alignment in all browsers. 378 | */ 379 | 380 | textarea { 381 | overflow: auto; /* 1 */ 382 | vertical-align: top; /* 2 */ 383 | } 384 | 385 | /* ========================================================================== 386 | Tables 387 | ========================================================================== */ 388 | 389 | /** 390 | * Remove most spacing between table cells. 391 | */ 392 | 393 | table { 394 | border-collapse: collapse; 395 | border-spacing: 0; 396 | } 397 | -------------------------------------------------------------------------------- /chapter04/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /** 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /** 47 | * Address styling not present in IE 8/9. 48 | */ 49 | 50 | [hidden] { 51 | display: none; 52 | } 53 | 54 | /* ========================================================================== 55 | Base 56 | ========================================================================== */ 57 | 58 | /** 59 | * 1. Set default font family to sans-serif. 60 | * 2. Prevent iOS text size adjust after orientation change, without disabling 61 | * user zoom. 62 | */ 63 | 64 | html { 65 | font-family: sans-serif; /* 1 */ 66 | -webkit-text-size-adjust: 100%; /* 2 */ 67 | -ms-text-size-adjust: 100%; /* 2 */ 68 | } 69 | 70 | /** 71 | * Remove default margin. 72 | */ 73 | 74 | body { 75 | margin: 0; 76 | } 77 | 78 | /* ========================================================================== 79 | Links 80 | ========================================================================== */ 81 | 82 | /** 83 | * Address `outline` inconsistency between Chrome and other browsers. 84 | */ 85 | 86 | a:focus { 87 | outline: thin dotted; 88 | } 89 | 90 | /** 91 | * Improve readability when focused and also mouse hovered in all browsers. 92 | */ 93 | 94 | a:active, 95 | a:hover { 96 | outline: 0; 97 | } 98 | 99 | /* ========================================================================== 100 | Typography 101 | ========================================================================== */ 102 | 103 | /** 104 | * Address variable `h1` font-size and margin within `section` and `article` 105 | * contexts in Firefox 4+, Safari 5, and Chrome. 106 | */ 107 | 108 | h1 { 109 | font-size: 2em; 110 | margin: 0.67em 0; 111 | } 112 | 113 | /** 114 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 115 | */ 116 | 117 | abbr[title] { 118 | border-bottom: 1px dotted; 119 | } 120 | 121 | /** 122 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 123 | */ 124 | 125 | b, 126 | strong { 127 | font-weight: bold; 128 | } 129 | 130 | /** 131 | * Address styling not present in Safari 5 and Chrome. 132 | */ 133 | 134 | dfn { 135 | font-style: italic; 136 | } 137 | 138 | /** 139 | * Address differences between Firefox and other browsers. 140 | */ 141 | 142 | hr { 143 | -moz-box-sizing: content-box; 144 | box-sizing: content-box; 145 | height: 0; 146 | } 147 | 148 | /** 149 | * Address styling not present in IE 8/9. 150 | */ 151 | 152 | mark { 153 | background: #ff0; 154 | color: #000; 155 | } 156 | 157 | /** 158 | * Correct font family set oddly in Safari 5 and Chrome. 159 | */ 160 | 161 | code, 162 | kbd, 163 | pre, 164 | samp { 165 | font-family: monospace, serif; 166 | font-size: 1em; 167 | } 168 | 169 | /** 170 | * Improve readability of pre-formatted text in all browsers. 171 | */ 172 | 173 | pre { 174 | white-space: pre-wrap; 175 | } 176 | 177 | /** 178 | * Set consistent quote types. 179 | */ 180 | 181 | q { 182 | quotes: "\201C" "\201D" "\2018" "\2019"; 183 | } 184 | 185 | /** 186 | * Address inconsistent and variable font size in all browsers. 187 | */ 188 | 189 | small { 190 | font-size: 80%; 191 | } 192 | 193 | /** 194 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 195 | */ 196 | 197 | sub, 198 | sup { 199 | font-size: 75%; 200 | line-height: 0; 201 | position: relative; 202 | vertical-align: baseline; 203 | } 204 | 205 | sup { 206 | top: -0.5em; 207 | } 208 | 209 | sub { 210 | bottom: -0.25em; 211 | } 212 | 213 | /* ========================================================================== 214 | Embedded content 215 | ========================================================================== */ 216 | 217 | /** 218 | * Remove border when inside `a` element in IE 8/9. 219 | */ 220 | 221 | img { 222 | border: 0; 223 | } 224 | 225 | /** 226 | * Correct overflow displayed oddly in IE 9. 227 | */ 228 | 229 | svg:not(:root) { 230 | overflow: hidden; 231 | } 232 | 233 | /* ========================================================================== 234 | Figures 235 | ========================================================================== */ 236 | 237 | /** 238 | * Address margin not present in IE 8/9 and Safari 5. 239 | */ 240 | 241 | figure { 242 | margin: 0; 243 | } 244 | 245 | /* ========================================================================== 246 | Forms 247 | ========================================================================== */ 248 | 249 | /** 250 | * Define consistent border, margin, and padding. 251 | */ 252 | 253 | fieldset { 254 | border: 1px solid #c0c0c0; 255 | margin: 0 2px; 256 | padding: 0.35em 0.625em 0.75em; 257 | } 258 | 259 | /** 260 | * 1. Correct `color` not being inherited in IE 8/9. 261 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 262 | */ 263 | 264 | legend { 265 | border: 0; /* 1 */ 266 | padding: 0; /* 2 */ 267 | } 268 | 269 | /** 270 | * 1. Correct font family not being inherited in all browsers. 271 | * 2. Correct font size not being inherited in all browsers. 272 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 273 | */ 274 | 275 | button, 276 | input, 277 | select, 278 | textarea { 279 | font-family: inherit; /* 1 */ 280 | font-size: 100%; /* 2 */ 281 | margin: 0; /* 3 */ 282 | } 283 | 284 | /** 285 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 286 | * the UA stylesheet. 287 | */ 288 | 289 | button, 290 | input { 291 | line-height: normal; 292 | } 293 | 294 | /** 295 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 296 | * All other form control elements do not inherit `text-transform` values. 297 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 298 | * Correct `select` style inheritance in Firefox 4+ and Opera. 299 | */ 300 | 301 | button, 302 | select { 303 | text-transform: none; 304 | } 305 | 306 | /** 307 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 308 | * and `video` controls. 309 | * 2. Correct inability to style clickable `input` types in iOS. 310 | * 3. Improve usability and consistency of cursor style between image-type 311 | * `input` and others. 312 | */ 313 | 314 | button, 315 | html input[type="button"], /* 1 */ 316 | input[type="reset"], 317 | input[type="submit"] { 318 | -webkit-appearance: button; /* 2 */ 319 | cursor: pointer; /* 3 */ 320 | } 321 | 322 | /** 323 | * Re-set default cursor for disabled elements. 324 | */ 325 | 326 | button[disabled], 327 | html input[disabled] { 328 | cursor: default; 329 | } 330 | 331 | /** 332 | * 1. Address box sizing set to `content-box` in IE 8/9. 333 | * 2. Remove excess padding in IE 8/9. 334 | */ 335 | 336 | input[type="checkbox"], 337 | input[type="radio"] { 338 | box-sizing: border-box; /* 1 */ 339 | padding: 0; /* 2 */ 340 | } 341 | 342 | /** 343 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 344 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 345 | * (include `-moz` to future-proof). 346 | */ 347 | 348 | input[type="search"] { 349 | -webkit-appearance: textfield; /* 1 */ 350 | -moz-box-sizing: content-box; 351 | -webkit-box-sizing: content-box; /* 2 */ 352 | box-sizing: content-box; 353 | } 354 | 355 | /** 356 | * Remove inner padding and search cancel button in Safari 5 and Chrome 357 | * on OS X. 358 | */ 359 | 360 | input[type="search"]::-webkit-search-cancel-button, 361 | input[type="search"]::-webkit-search-decoration { 362 | -webkit-appearance: none; 363 | } 364 | 365 | /** 366 | * Remove inner padding and border in Firefox 4+. 367 | */ 368 | 369 | button::-moz-focus-inner, 370 | input::-moz-focus-inner { 371 | border: 0; 372 | padding: 0; 373 | } 374 | 375 | /** 376 | * 1. Remove default vertical scrollbar in IE 8/9. 377 | * 2. Improve readability and alignment in all browsers. 378 | */ 379 | 380 | textarea { 381 | overflow: auto; /* 1 */ 382 | vertical-align: top; /* 2 */ 383 | } 384 | 385 | /* ========================================================================== 386 | Tables 387 | ========================================================================== */ 388 | 389 | /** 390 | * Remove most spacing between table cells. 391 | */ 392 | 393 | table { 394 | border-collapse: collapse; 395 | border-spacing: 0; 396 | } -------------------------------------------------------------------------------- /chapter05/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /** 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /** 47 | * Address styling not present in IE 8/9. 48 | */ 49 | 50 | [hidden] { 51 | display: none; 52 | } 53 | 54 | /* ========================================================================== 55 | Base 56 | ========================================================================== */ 57 | 58 | /** 59 | * 1. Set default font family to sans-serif. 60 | * 2. Prevent iOS text size adjust after orientation change, without disabling 61 | * user zoom. 62 | */ 63 | 64 | html { 65 | font-family: sans-serif; /* 1 */ 66 | -webkit-text-size-adjust: 100%; /* 2 */ 67 | -ms-text-size-adjust: 100%; /* 2 */ 68 | } 69 | 70 | /** 71 | * Remove default margin. 72 | */ 73 | 74 | body { 75 | margin: 0; 76 | } 77 | 78 | /* ========================================================================== 79 | Links 80 | ========================================================================== */ 81 | 82 | /** 83 | * Address `outline` inconsistency between Chrome and other browsers. 84 | */ 85 | 86 | a:focus { 87 | outline: thin dotted; 88 | } 89 | 90 | /** 91 | * Improve readability when focused and also mouse hovered in all browsers. 92 | */ 93 | 94 | a:active, 95 | a:hover { 96 | outline: 0; 97 | } 98 | 99 | /* ========================================================================== 100 | Typography 101 | ========================================================================== */ 102 | 103 | /** 104 | * Address variable `h1` font-size and margin within `section` and `article` 105 | * contexts in Firefox 4+, Safari 5, and Chrome. 106 | */ 107 | 108 | h1 { 109 | font-size: 2em; 110 | margin: 0.67em 0; 111 | } 112 | 113 | /** 114 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 115 | */ 116 | 117 | abbr[title] { 118 | border-bottom: 1px dotted; 119 | } 120 | 121 | /** 122 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 123 | */ 124 | 125 | b, 126 | strong { 127 | font-weight: bold; 128 | } 129 | 130 | /** 131 | * Address styling not present in Safari 5 and Chrome. 132 | */ 133 | 134 | dfn { 135 | font-style: italic; 136 | } 137 | 138 | /** 139 | * Address differences between Firefox and other browsers. 140 | */ 141 | 142 | hr { 143 | -moz-box-sizing: content-box; 144 | box-sizing: content-box; 145 | height: 0; 146 | } 147 | 148 | /** 149 | * Address styling not present in IE 8/9. 150 | */ 151 | 152 | mark { 153 | background: #ff0; 154 | color: #000; 155 | } 156 | 157 | /** 158 | * Correct font family set oddly in Safari 5 and Chrome. 159 | */ 160 | 161 | code, 162 | kbd, 163 | pre, 164 | samp { 165 | font-family: monospace, serif; 166 | font-size: 1em; 167 | } 168 | 169 | /** 170 | * Improve readability of pre-formatted text in all browsers. 171 | */ 172 | 173 | pre { 174 | white-space: pre-wrap; 175 | } 176 | 177 | /** 178 | * Set consistent quote types. 179 | */ 180 | 181 | q { 182 | quotes: "\201C" "\201D" "\2018" "\2019"; 183 | } 184 | 185 | /** 186 | * Address inconsistent and variable font size in all browsers. 187 | */ 188 | 189 | small { 190 | font-size: 80%; 191 | } 192 | 193 | /** 194 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 195 | */ 196 | 197 | sub, 198 | sup { 199 | font-size: 75%; 200 | line-height: 0; 201 | position: relative; 202 | vertical-align: baseline; 203 | } 204 | 205 | sup { 206 | top: -0.5em; 207 | } 208 | 209 | sub { 210 | bottom: -0.25em; 211 | } 212 | 213 | /* ========================================================================== 214 | Embedded content 215 | ========================================================================== */ 216 | 217 | /** 218 | * Remove border when inside `a` element in IE 8/9. 219 | */ 220 | 221 | img { 222 | border: 0; 223 | } 224 | 225 | /** 226 | * Correct overflow displayed oddly in IE 9. 227 | */ 228 | 229 | svg:not(:root) { 230 | overflow: hidden; 231 | } 232 | 233 | /* ========================================================================== 234 | Figures 235 | ========================================================================== */ 236 | 237 | /** 238 | * Address margin not present in IE 8/9 and Safari 5. 239 | */ 240 | 241 | figure { 242 | margin: 0; 243 | } 244 | 245 | /* ========================================================================== 246 | Forms 247 | ========================================================================== */ 248 | 249 | /** 250 | * Define consistent border, margin, and padding. 251 | */ 252 | 253 | fieldset { 254 | border: 1px solid #c0c0c0; 255 | margin: 0 2px; 256 | padding: 0.35em 0.625em 0.75em; 257 | } 258 | 259 | /** 260 | * 1. Correct `color` not being inherited in IE 8/9. 261 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 262 | */ 263 | 264 | legend { 265 | border: 0; /* 1 */ 266 | padding: 0; /* 2 */ 267 | } 268 | 269 | /** 270 | * 1. Correct font family not being inherited in all browsers. 271 | * 2. Correct font size not being inherited in all browsers. 272 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 273 | */ 274 | 275 | button, 276 | input, 277 | select, 278 | textarea { 279 | font-family: inherit; /* 1 */ 280 | font-size: 100%; /* 2 */ 281 | margin: 0; /* 3 */ 282 | } 283 | 284 | /** 285 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 286 | * the UA stylesheet. 287 | */ 288 | 289 | button, 290 | input { 291 | line-height: normal; 292 | } 293 | 294 | /** 295 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 296 | * All other form control elements do not inherit `text-transform` values. 297 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 298 | * Correct `select` style inheritance in Firefox 4+ and Opera. 299 | */ 300 | 301 | button, 302 | select { 303 | text-transform: none; 304 | } 305 | 306 | /** 307 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 308 | * and `video` controls. 309 | * 2. Correct inability to style clickable `input` types in iOS. 310 | * 3. Improve usability and consistency of cursor style between image-type 311 | * `input` and others. 312 | */ 313 | 314 | button, 315 | html input[type="button"], /* 1 */ 316 | input[type="reset"], 317 | input[type="submit"] { 318 | -webkit-appearance: button; /* 2 */ 319 | cursor: pointer; /* 3 */ 320 | } 321 | 322 | /** 323 | * Re-set default cursor for disabled elements. 324 | */ 325 | 326 | button[disabled], 327 | html input[disabled] { 328 | cursor: default; 329 | } 330 | 331 | /** 332 | * 1. Address box sizing set to `content-box` in IE 8/9. 333 | * 2. Remove excess padding in IE 8/9. 334 | */ 335 | 336 | input[type="checkbox"], 337 | input[type="radio"] { 338 | box-sizing: border-box; /* 1 */ 339 | padding: 0; /* 2 */ 340 | } 341 | 342 | /** 343 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 344 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 345 | * (include `-moz` to future-proof). 346 | */ 347 | 348 | input[type="search"] { 349 | -webkit-appearance: textfield; /* 1 */ 350 | -moz-box-sizing: content-box; 351 | -webkit-box-sizing: content-box; /* 2 */ 352 | box-sizing: content-box; 353 | } 354 | 355 | /** 356 | * Remove inner padding and search cancel button in Safari 5 and Chrome 357 | * on OS X. 358 | */ 359 | 360 | input[type="search"]::-webkit-search-cancel-button, 361 | input[type="search"]::-webkit-search-decoration { 362 | -webkit-appearance: none; 363 | } 364 | 365 | /** 366 | * Remove inner padding and border in Firefox 4+. 367 | */ 368 | 369 | button::-moz-focus-inner, 370 | input::-moz-focus-inner { 371 | border: 0; 372 | padding: 0; 373 | } 374 | 375 | /** 376 | * 1. Remove default vertical scrollbar in IE 8/9. 377 | * 2. Improve readability and alignment in all browsers. 378 | */ 379 | 380 | textarea { 381 | overflow: auto; /* 1 */ 382 | vertical-align: top; /* 2 */ 383 | } 384 | 385 | /* ========================================================================== 386 | Tables 387 | ========================================================================== */ 388 | 389 | /** 390 | * Remove most spacing between table cells. 391 | */ 392 | 393 | table { 394 | border-collapse: collapse; 395 | border-spacing: 0; 396 | } -------------------------------------------------------------------------------- /chapter05/css/styles.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'ChelseaMarket'; 3 | src: url('../fonts/chelseamarket-regular-webfont.eot'); 4 | src: url('../fonts/chelseamarket-regular-webfont.eot?#iefix') format('embedded-opentype'), 5 | url('../fonts/chelseamarket-regular-webfont.woff') format('woff'), 6 | url('../fonts/chelseamarket-regular-webfont.ttf') format('truetype'), 7 | url('../fonts/chelseamarket-regular-webfont.svg#chelsea_marketregular') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | @font-face { 13 | font-family: 'LatoBold'; 14 | src: url('../fonts/lato-bold-webfont.eot'); 15 | src: url('../fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'), 16 | url('../fonts/lato-bold-webfont.woff') format('woff'), 17 | url('../fonts/lato-bold-webfont.ttf') format('truetype'), 18 | url('../fonts/lato-bold-webfont.svg#latobold') format('svg'); 19 | font-weight: normal; 20 | font-style: normal; 21 | } 22 | 23 | @font-face { 24 | font-family: 'Lato'; 25 | src: url('../fonts/lato-regular-webfont.eot'); 26 | src: url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'), 27 | url('../fonts/lato-regular-webfont.woff') format('woff'), 28 | url('../fonts/lato-regular-webfont.ttf') format('truetype'), 29 | url('../fonts/lato-regular-webfont.svg#latoregular') format('svg'); 30 | font-weight: normal; 31 | font-style: normal; 32 | } 33 | 34 | .cf:before, 35 | .cf:after { 36 | content: " "; 37 | display: table; 38 | } 39 | 40 | .cf:after { 41 | clear: both; 42 | } 43 | 44 | .cf { 45 | *zoom: 1; /* for IE6 and IE7 */ 46 | } 47 | 48 | * { 49 | -webkit-box-sizing: border-box; 50 | -moz-box-sizing: border-box; 51 | box-sizing: border-box; 52 | } 53 | 54 | body { 55 | background: #cab5a3 url(../images/bg-main.gif) repeat repeat 0 0; 56 | color: #333; 57 | font-family: Lato, Arial, Helvetica, sans-serif; 58 | } 59 | 60 | a { 61 | text-decoration: none; 62 | color: #544a40; 63 | } 64 | 65 | a:hover { 66 | text-decoration: underline; 67 | } 68 | 69 | h1, h2, nav { 70 | font-family: ChelseaMarket, Arial, Helvetica, sans-serif; 71 | text-transform: uppercase; 72 | font-weight: normal; 73 | color: #810430; 74 | } 75 | 76 | .center-global { 77 | max-width: 1020px; 78 | margin: 0 auto; 79 | } 80 | 81 | body > header { 82 | box-shadow: rgba(0, 0, 0, .25) 0 3px 2px 0; 83 | position: relative; 84 | z-index: 10; 85 | background-image: linear-gradient(#87053e, #560329); 86 | } 87 | 88 | .logo { 89 | float: left; 90 | margin-left: 14.2156862745098%; /* 145 / 1020 */ 91 | margin-top: -34px; 92 | position: relative; 93 | top: 34px; 94 | -webkit-transform: translateX(-800%); 95 | -moz-transform: translateX(-800%); 96 | -o-transform: translateX(-800%); 97 | -ms-transform: translateX(-800%); 98 | transform: translateX(-800%); 99 | -webkit-animation: logomove 2s ease-out 1s 1 normal forwards; 100 | -moz-animation: logomove 2s ease-out 1s 1 normal forwards; 101 | -o-animation: logomove 2s ease-out 1s 1 normal forwards; 102 | animation: logomove 2s ease-out 1s 1 normal forwards; 103 | } 104 | 105 | @-webkit-keyframes logomove { 106 | 107 | 0% { 108 | -webkit-transform: translateX(-800%) rotate(0); 109 | } 110 | 111 | 100% { 112 | -webkit-transform: translateX(0) rotate(-360deg); 113 | } 114 | 115 | } 116 | 117 | @-moz-keyframes logomove { 118 | 119 | 0% { 120 | -moz-transform: translateX(-800%) rotate(0); 121 | } 122 | 123 | 100% { 124 | -moz-transform: translateX(0) rotate(-360deg); 125 | } 126 | 127 | } 128 | 129 | @-o-keyframes logomove { 130 | 131 | 0% { 132 | -o-transform: translateX(-800%) rotate(0); 133 | } 134 | 135 | 100% { 136 | -o-transform: translateX(0) rotate(-360deg); 137 | } 138 | 139 | } 140 | 141 | @keyframes logomove { 142 | 143 | 0% { 144 | transform: translateX(-800%) rotate(0); 145 | } 146 | 147 | 100% { 148 | transform: translateX(0) rotate(-360deg); 149 | } 150 | 151 | } 152 | 153 | nav { 154 | float: right; 155 | margin-right: 17.35294117647059%; /* 177 / 1020 */ 156 | padding-top: 20px; 157 | } 158 | 159 | nav a { 160 | color: #fefefe; 161 | -webkit-transition: color .4s ease-out; 162 | -moz-transition: color .4s ease-out; 163 | o-transition: color .4s ease-out; 164 | transition: color .4s ease-out; 165 | } 166 | 167 | nav a:hover { 168 | text-decoration: none; 169 | color: #cdb8a5; 170 | } 171 | 172 | nav ul { 173 | list-style: none; 174 | margin: 0; 175 | padding: 0; 176 | } 177 | 178 | nav ul li { 179 | display: inline-block; 180 | *display: inline; /* for IE7 */ 181 | margin-right: 30px; 182 | font-size: 20px; 183 | } 184 | 185 | nav ul li:last-child { 186 | margin-right: 0; 187 | } 188 | 189 | .promo { 190 | position: relative; 191 | z-index: 5; 192 | padding-bottom: 8px; 193 | box-shadow: rgba(0, 0, 0, .25) 0 3px 2px 0; 194 | background-image: linear-gradient(#4e0324, #4e0324 97%, #851f49); 195 | overflow: hidden; 196 | } 197 | 198 | .promo img { 199 | width: auto; 200 | height: auto; 201 | } 202 | 203 | .promo-desc { 204 | position: absolute; 205 | bottom: 93px; 206 | right: 7.35294117647059%; /* 75 / 1020 */ 207 | width: 30.98039215686275%; /* 316 / 1020 */ 208 | text-align: center; 209 | } 210 | 211 | .promo-desc h1 { 212 | color: #fefefe; 213 | } 214 | 215 | .promo-btn { 216 | display: inline-block; 217 | width: 65.82278481012658%; /* 208 / 316 */ 218 | padding: 13px 0; 219 | background-color: #6c0733; 220 | background-image: linear-gradient(#87053e, #560329); 221 | box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0; 222 | font-size: 20px; 223 | color: #fefefe; 224 | -webkit-transition: -webkit-transform .5s ease-out; 225 | -moz-transition: -moz-transform .5s ease-out; 226 | -o-transition: o-transform .5s ease-out; 227 | transition: transform .5s ease-out; 228 | } 229 | 230 | .promo-btn:hover { 231 | text-decoration: none; 232 | -webkit-transform: scale(1.05); 233 | -moz-transform: scale(1.05); 234 | -o-transform: scale(1.05); 235 | transform: scale(1.05); 236 | } 237 | 238 | .main { 239 | padding-bottom: 33px; 240 | } 241 | 242 | .latest { 243 | width: 62.74509803921569%; /* 640 / 1020 */ 244 | float: left; 245 | padding: 0 3.92156862745098%; /* 0 40px */ 246 | background: url(../images/bg-column.png) no-repeat top right; 247 | } 248 | 249 | .media { 250 | clear: left; 251 | padding-bottom: 28px; 252 | overflow: hidden; 253 | } 254 | 255 | .media a { 256 | text-decoration: none; 257 | } 258 | 259 | .media a h2, 260 | .media a p { 261 | -webkit-transition: color .3s linear; 262 | -moz-transition: color .3s linear; 263 | -o-transition: color .3s linear; 264 | transition: color .3s linear; 265 | } 266 | 267 | .media a:hover h2, 268 | .media a:hover p { 269 | color: #b32c1c; 270 | } 271 | 272 | .media h2 { 273 | color: #49301a; 274 | font-family: LatoBold, Arial, Helvetica, sans-serif; 275 | font-weight: normal; 276 | font-size: 26px; 277 | margin-bottom: 5px; 278 | } 279 | 280 | .media img { 281 | float: left; 282 | margin-right: 5.556%; /* 30 / 540 */ 283 | max-width: 241px; 284 | width: 100%; 285 | height: auto; 286 | border: solid 9px #ede0d5; 287 | box-shadow: rgba(0, 0, 0, .25) 2px 2px 2px 0; 288 | } 289 | 290 | .media p { 291 | margin: 0; 292 | font-family: Lato, Arial, Helvetica, sans-serif; 293 | font-size: 18px; 294 | color: #7b6047; 295 | text-transform: uppercase; 296 | } 297 | 298 | .media p span { 299 | font-size: 25px; 300 | } 301 | 302 | .more-btn { 303 | text-align: center; 304 | float: right; 305 | margin-right: 50px; 306 | width: 280px; 307 | background-color: #2d1e10; 308 | background-image: linear-gradient(#6b5139, #2d1e10); 309 | } 310 | 311 | .sidebar { 312 | width: 35.29411764705882%; /* 360 / 1020 */ 313 | float: right; 314 | } 315 | 316 | .popular { 317 | padding-bottom: 40px; 318 | } 319 | 320 | .rating { 321 | float: left; 322 | clear: left; 323 | padding-top: 4px; 324 | padding-right: 4.16666666666667%; /* 15 / 1020 */ 325 | width: 12.5%; /* 45 / 1020 */ 326 | color: #810430; 327 | font-size: 13px; 328 | } 329 | 330 | .pop-item { 331 | padding-bottom: 20px; 332 | float: left; 333 | width: 69.44444444444444%; /* 250 / 1020 */ 334 | text-transform: uppercase; 335 | font-size: 18px; 336 | } 337 | 338 | .pop-item a { 339 | color: #544a40; 340 | } 341 | 342 | .tweet { 343 | padding-left: 15.27777777777778%; /* 55 / 1020 */ 344 | padding-right: 5.55555555555556%; /* 20 / 1020 */ 345 | position: relative; 346 | line-height: 1.4; 347 | } 348 | 349 | .tweet:before { 350 | content: url(../images/twitter-icon.png); 351 | display: block; 352 | position: absolute; 353 | left: 4.16666666666667%; /* 15 / 1020 */ 354 | top: 4px; 355 | -webkit-transition: -webkit-transform .5s linear; 356 | -moz-transition: -moz-transform .5s linear; 357 | -o-transition: o-transform .5s linear; 358 | transition: transform .5s linear; 359 | } 360 | 361 | .tweet:hover:before { 362 | -webkit-transform: rotate(360deg); 363 | -moz-transform: rotate(360deg); 364 | -o-transform: rotate(360deg); 365 | transform: rotate(360deg); 366 | } 367 | 368 | .tweet a { 369 | color: #810430; 370 | } 371 | 372 | a.date { 373 | color: #8f7e6d; 374 | font-faily: Arial, sans-serif; 375 | font-size: 12px; 376 | font-style: italic; 377 | } 378 | 379 | footer { 380 | background-color: rgb(66, 3, 30); 381 | padding-top: 10px; 382 | padding-bottom: 50px; 383 | } 384 | 385 | footer ul { 386 | list-style: none; 387 | margin: 0; 388 | padding: 0; 389 | } 390 | 391 | .footer-inside { 392 | padding-left: 40px; 393 | } 394 | 395 | .footer-1 { 396 | float: left; 397 | width: 41.37254901960784%; /* 422 / 1020 */ 398 | } 399 | 400 | .footer-1 h2 { 401 | font-size: 36px; 402 | } 403 | 404 | .footer-1 ul, .footer-2 ul { 405 | text-align: center; 406 | font-size: 20px; 407 | line-height: 1.7; 408 | } 409 | 410 | .footer-1 li { 411 | float: left; 412 | width: 46.2085308056872%; /* 195 / 422 */ 413 | } 414 | 415 | .footer-1 ul a, 416 | .footer-2 ul a { 417 | color: #ab97a0; 418 | } 419 | 420 | .footer-2 { 421 | float: left; 422 | width: 31.96078431372549%; /* 326 / 1020 */ 423 | padding-top: 22px; 424 | } 425 | 426 | .footer-2 ul { 427 | margin: 0 24.5398773006135% 0 0; /* 0 80/326 0 0 */ 428 | } 429 | 430 | .footer-3 { 431 | float: left; 432 | width: 22.74509803921569%; /* 232 / 1020 */ 433 | color: #801c48; 434 | padding-top: 22px; 435 | } 436 | 437 | .footer-3 h2, .footer-3 a { 438 | color: #801c48; 439 | } 440 | 441 | .footer-3 li { 442 | line-height: 1.7; 443 | } 444 | 445 | @media (max-width: 930px) { 446 | 447 | .logo-link { 448 | display: block; 449 | width: 150px; 450 | margin: -34px auto 0 auto; 451 | } 452 | 453 | .logo { 454 | float: none; 455 | margin: 0; 456 | -webkit-transform: translateX(0); 457 | -moz-transform: translateX(0); 458 | -o-transform: translateX(0); 459 | -ms-transform: translateX(0); 460 | transform: translateX(0); 461 | -webkit-animation: none; 462 | -moz-animation: none; 463 | -ms-animation: none; 464 | -o-animation: none; 465 | animation: none; 466 | } 467 | 468 | nav { 469 | float: none; 470 | padding-top: 10px; 471 | margin: 24px 0 0 0; 472 | } 473 | 474 | nav ul { 475 | text-align: center; 476 | } 477 | 478 | nav ul li { 479 | margin-right: 0; 480 | padding: 8px; 481 | } 482 | 483 | .center-global { 484 | width: auto; 485 | } 486 | 487 | .promo img { 488 | max-height: 320px; 489 | } 490 | 491 | .promo-desc { 492 | min-width: 300px; 493 | bottom: 40px; 494 | right: 20px; 495 | } 496 | 497 | .promo-desc h1 { 498 | text-shadow: rgba(0, 0, 0, 0.7) 2px 2px 3px; 499 | } 500 | 501 | .latest { 502 | background: none; 503 | width: auto; 504 | } 505 | 506 | .sidebar { 507 | float: none; 508 | clear: left; 509 | width: auto; 510 | padding: 20px; 511 | } 512 | 513 | .footer-inside > div { 514 | float: none; 515 | clear: left; 516 | margin: 0 auto; 517 | width: auto; 518 | } 519 | 520 | .footer-inside li { 521 | float: none; 522 | } 523 | 524 | .footer-inside ul { 525 | text-align: left; 526 | } 527 | 528 | .footer-left h2 { 529 | font-size: 26px; 530 | } 531 | 532 | } 533 | 534 | @media (max-width: 730px) { 535 | 536 | .promo img { 537 | height: 250px; 538 | } 539 | 540 | .promo-desc { 541 | bottom: 20px; 542 | right: 10px; 543 | text-align: right; 544 | } 545 | 546 | .promo-btn { 547 | width: 160px; 548 | text-align: center; 549 | } 550 | 551 | .media { 552 | border-bottom: solid 2px #a99888; 553 | margin-bottom: 24px; 554 | } 555 | 556 | .media img { 557 | display: block; 558 | margin-bottom: 10px; 559 | } 560 | 561 | .more-btn { 562 | float: none; 563 | width: auto; 564 | padding: 13px 20px; 565 | } 566 | 567 | } 568 | 569 | @media (max-width: 480px) { 570 | 571 | nav ul li { 572 | padding: 8px 4px; 573 | font-size: 16px; 574 | } 575 | 576 | .media img { 577 | float: none; 578 | max-width: 100%; 579 | } 580 | 581 | .promo-desc h1 { 582 | font-size: 24px; 583 | } 584 | 585 | .footer-1 h2 { 586 | font-size: 24px; 587 | } 588 | 589 | } 590 | 591 | @media (max-width: 340px) { 592 | 593 | nav ul li { 594 | display: block; 595 | } 596 | 597 | } -------------------------------------------------------------------------------- /chapter04/fonts/lato-regular-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 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 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | --------------------------------------------------------------------------------