diff --git a/1-meta-tag-example/meta-tag-example.css b/1-meta-tag-example/meta-tag-example.css index 12fec13..dd11277 100644 --- a/1-meta-tag-example/meta-tag-example.css +++ b/1-meta-tag-example/meta-tag-example.css @@ -2,14 +2,16 @@ body { background: #e5e5e5; font-family: "Source Sans Pro", sans-serif; - font-size: 18px; } + font-size: 18px; +} h2 { text-align: center; font-size: 44px; margin: 0; padding: 50px 0 0; - line-height: 1; } + line-height: 1; +} .carrot { background-image: url(http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Kitchen-Carrot-icon.png); @@ -20,7 +22,8 @@ h2 { margin: 30px auto; position: relative; opacity: 0.3; } - .carrot:before, .carrot:after { + +.carrot:before, .carrot:after { content: ""; display: block; width: 50px; @@ -28,31 +31,43 @@ h2 { background: black; position: absolute; top: 50%; - margin-top: -1px; } - .carrot:before { + margin-top: -1px; +} + +.carrot:before { left: 100%; - margin-left: 20px; } - .carrot:after { + margin-left: 20px; +} + +.carrot:after { right: 100%; - margin-right: 20px; } + margin-right: 20px; +} .container { margin: 0 auto; background: white; padding: 50px; - box-sizing: border-box; } + box-sizing: border-box; +} .container { width: 960px; - *zoom: 1; } - .container:before, .container:after { + *zoom: 1; +} + +.container:before, .container:after { content: " "; - display: table; } - .container:after { - clear: both; } + display: table; +} + +.container:after { + clear: both; +} .column { float: left; width: 50%; box-sizing: border-box; - padding: 0 20px; } + padding: 0 20px; +} diff --git a/3-max-width/max-width.css b/3-max-width/max-width.css index a85f0f0..72eedae 100644 --- a/3-max-width/max-width.css +++ b/3-max-width/max-width.css @@ -2,14 +2,16 @@ body { background: #e5e5e5; font-family: "Source Sans Pro", sans-serif; - font-size: 18px; } + font-size: 18px; +} h2 { text-align: center; font-size: 44px; margin: 0; padding: 50px 0 0; - line-height: 1; } + line-height: 1; +} .carrot { background-image: url(http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Kitchen-Carrot-icon.png); @@ -19,8 +21,10 @@ h2 { height: 30px; margin: 30px auto; position: relative; - opacity: 0.3; } - .carrot:before, .carrot:after { + opacity: 0.3; +} + +.carrot:before, .carrot:after { content: ""; display: block; width: 50px; @@ -28,39 +32,55 @@ h2 { background: black; position: absolute; top: 50%; - margin-top: -1px; } - .carrot:before { + margin-top: -1px; +} + +.carrot:before { left: 100%; - margin-left: 20px; } - .carrot:after { + margin-left: 20px; +} + +.carrot:after { right: 100%; - margin-right: 20px; } + margin-right: 20px; +} .container { margin: 0 auto; background: white; padding: 50px; - box-sizing: border-box; } + box-sizing: border-box; +} .container { width: 960px; - *zoom: 1; } - .container:before, .container:after { + *zoom: 1; +} + +.container:before, .container:after { content: " "; - display: table; } - .container:after { - clear: both; } + display: table; +} + +.container:after { + clear: both; +} .column { float: left; width: 50%; box-sizing: border-box; - padding: 20px; } + padding: 20px; +} @media (max-width: 960px) { + .container { - width: auto; } + width: auto; + } .column { float: none; - width: auto; } } + width: auto; + } +} diff --git a/4-min-width/min-width.css b/4-min-width/min-width.css index 50861c6..6075242 100644 --- a/4-min-width/min-width.css +++ b/4-min-width/min-width.css @@ -2,14 +2,16 @@ body { background: #e5e5e5; font-family: "Source Sans Pro", sans-serif; - font-size: 18px; } + font-size: 18px; +} h2 { text-align: center; font-size: 44px; margin: 0; padding: 50px 0 0; - line-height: 1; } + line-height: 1; +} .carrot { background-image: url(http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Kitchen-Carrot-icon.png); @@ -19,8 +21,10 @@ h2 { height: 30px; margin: 30px auto; position: relative; - opacity: 0.3; } - .carrot:before, .carrot:after { + opacity: 0.3; +} + +.carrot:before, .carrot:after { content: ""; display: block; width: 50px; @@ -28,37 +32,50 @@ h2 { background: black; position: absolute; top: 50%; - margin-top: -1px; } - .carrot:before { + margin-top: -1px; +} + +.carrot:before { left: 100%; - margin-left: 20px; } - .carrot:after { + margin-left: 20px; +} + +.carrot:after { right: 100%; - margin-right: 20px; } + margin-right: 20px; +} .container { margin: 0 auto; background: white; padding: 50px; - box-sizing: border-box; } + box-sizing: border-box; +} .container { width: 960px; - *zoom: 1; } - .container:before, .container:after { + *zoom: 1; +} + +.container:before, .container:after { content: " "; - display: table; } - .container:after { - clear: both; } + display: table; +} + +.container:after { + clear: both; +} .column { float: left; width: 50%; box-sizing: border-box; - padding: 20px; } + padding: 20px; +} .three-items { - text-align: center; } + text-align: center; +} .item { display: inline-block; @@ -66,12 +83,17 @@ h2 { margin: 1%; height: 50px; background: #cccccc; - min-width: 150px; } + min-width: 150px; +} @media (max-width: 960px) { + .container { - width: auto; } + width: auto; + } .column { float: none; - width: auto; } } + width: auto; + } +}