From b1373604e57a4544985ff0c3028ade71273f9aad Mon Sep 17 00:00:00 2001 From: chrisarts Date: Wed, 25 Apr 2018 08:51:01 -0500 Subject: [PATCH 01/18] Float Property --- package.json | 20 + .../example/css/example.css | 133 +++++++ src/001-float-property/example/css/reset.css | 366 ++++++++++++++++++ src/001-float-property/example/example.css | 5 - src/001-float-property/example/index.html | 134 ++++--- 5 files changed, 589 insertions(+), 69 deletions(-) create mode 100644 package.json create mode 100644 src/001-float-property/example/css/example.css create mode 100644 src/001-float-property/example/css/reset.css delete mode 100644 src/001-float-property/example/example.css diff --git a/package.json b/package.json new file mode 100644 index 0000000..037334a --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "u-css", + "version": "1.0.0", + "description": "Css training command handler", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "http-server ./src -p 3000" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/chrisarts/u-css.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/chrisarts/u-css/issues" + }, + "homepage": "https://github.com/chrisarts/u-css#readme" +} diff --git a/src/001-float-property/example/css/example.css b/src/001-float-property/example/css/example.css new file mode 100644 index 0000000..1c61e1f --- /dev/null +++ b/src/001-float-property/example/css/example.css @@ -0,0 +1,133 @@ +/* + * Practice : Float Property + * Version: 1 + * By: xxx + */ + +.page-content{ + color: #787878; +} +.bg-dark{ + background-color: #C8C8C8; +} +.bg-light{ + background-color: #f4f5f7; +} +.box-shadow{ + box-shadow: inset 0 20px 30px -5px rgba(50, 50, 50, 0.18); +} +span.capitalize{ + display: block; + font-size: 53px; + float: left; + height: 32px; + padding-top: 16px; + margin-right: 2%; + margin-bottom: 1%; +} + +.main-container{ + display: flex; + position: relative; + top: -5px; +} +.aside-nav{ + width: 33%; + padding: 2%; +} +.aside-nav label{ + width: 100%; + display: block; + font-size: 20px; +} +.aside-nav input{ + width: 90%; + border-radius: 3px; + border: 1px solid; + height: 30px; + margin: 2% 0; +} +aside p{ + margin: 2% 0; +} +aside ul.aside-menu{ + list-style: none; + margin: 0; + padding: 0; +} +article.article-content{ + width: 63%; + padding: 2%; +} +article.article-content h2{ + color: #787878; +} + + +nav.main-menu{ + display: inline-block; + width: 96%; + padding: 1% 2%; + background: #DCDCDC; +} +nav.main-menu ul{ + padding: 0; + margin: 0; + display: block; + min-height: 1em; +} +nav.main-menu ul li{ + list-style: none; + float: left; + margin-left: 1%; +} +nav.main-menu a{ + padding: 10px 15px; + transition: background .5s, color .3s; +} +nav.main-menu a:hover{ + background: rgba(0,0,0,.3); + color: #FFFFFF; +} + +article img{ + float: right; + margin: 0 15px; +} + +ul.gallery-list{ + margin: 2% 1%; + padding: 0; + display: inline-block; +} + +ul.gallery-list li{ + list-style: none; + float: left; + padding: 1%; + width: 18%; +} +ul.gallery-list li img{ + max-width: 250px; + width: 100%; +} + +section.text-container{ + display: inline-block; + width: 100%; + padding: 2% 0; +} +section.text-container img{ + float: left; + margin: 0 15px; + max-width: 100px; + width: 100%; +} +section.text-container p{ + margin: 1%; + padding: 0; +} + +section.border{ + border: 2px solid #27ae60; +} diff --git a/src/001-float-property/example/css/reset.css b/src/001-float-property/example/css/reset.css new file mode 100644 index 0000000..ec68b85 --- /dev/null +++ b/src/001-float-property/example/css/reset.css @@ -0,0 +1,366 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} +a{ + text-decoration: none; +} +p{ + margin: 0; +} +p.full-paragraph{ + width: 100%; + display: inline-block; + margin-left: 1%; +} +.stick-element{ + position: relative; + top: -5px; +} +header h1{ + padding: 1% 2%; + margin: 0; +} +h2{ + margin: 0; +} +section.img-right img{ + float: right !important; +} diff --git a/src/001-float-property/example/example.css b/src/001-float-property/example/example.css deleted file mode 100644 index 8a3130e..0000000 --- a/src/001-float-property/example/example.css +++ /dev/null @@ -1,5 +0,0 @@ -/* - * Practice : Float Property - * Version: 1 - * By: xxx - */ diff --git a/src/001-float-property/example/index.html b/src/001-float-property/example/index.html index 0d47109..48d955e 100644 --- a/src/001-float-property/example/index.html +++ b/src/001-float-property/example/index.html @@ -35,9 +35,11 @@
-

This is an example of Float CSS property

+
+

This is an example of Float CSS property

+
-
+ +

Gallery

-
-
- -

This is some text. This is some text. This is some text. This is some text. This is some text. +

+ +

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

-

This is also some text. This is also some text. This is also some text. This +

This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.

-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum... -
+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum... +

+
From 05001b230e563efd624ed351f7902acf8d940a36 Mon Sep 17 00:00:00 2001 From: chrisarts Date: Wed, 25 Apr 2018 10:38:37 -0500 Subject: [PATCH 02/18] Negative margins --- src/002-negative-margins/example/example.css | 84 +++++ src/002-negative-margins/example/index.html | 62 ++-- src/002-negative-margins/example/reset.css | 348 +++++++++++++++++++ src/003-box-sizing/example/example.css | 18 + src/003-box-sizing/example/index.html | 10 +- 5 files changed, 485 insertions(+), 37 deletions(-) create mode 100644 src/002-negative-margins/example/reset.css diff --git a/src/002-negative-margins/example/example.css b/src/002-negative-margins/example/example.css index 1d7fd60..8485677 100644 --- a/src/002-negative-margins/example/example.css +++ b/src/002-negative-margins/example/example.css @@ -3,3 +3,87 @@ * Version: 1 * By: xxx */ +.bg-light{ + background: #F5F5F5; + padding: 15px 10px; +} +.nm-example h3{ + border-bottom: 1px solid #D05036; + padding-bottom: 10px; +} +.nm-content{ + margin-top: 1%; +} +.nm-container .nm-example{ + line-height: 1.9em; +} +.nm-example .nm-content{ + width: 75%; +} +.nm-example .nm-menu-list{ + margin-top: -11em; + height: 11em; + width: 25%; + float: right; + display: flex; + justify-content: center; +} +ul.mdl-list{ + list-style: none; + display: flex; + margin: 1% 0; + flex-direction: column; + justify-content: space-between; +} + + +ul.mdl-list-text{list-style: none} +ul.mdl-list-text li { + line-height:1.8em; + width: 10%; + border-bottom: 1px solid #DDDDDD; + text-align: center; + padding: 5px 0; +} +ul.mdl-list-text li.top {margin-top:-108px;} +ul.mdl-list-text li.col2 {margin-left:10%;} +ul.mdl-list-text li.col3 {margin-left:20%;} + + +footer.nm-site-footer{ + position: relative; + left: 0; + bottom: 0; + height: 70px; + width: 100%; + background: #D24F2E; +} +ul.nm-footer-list{ + list-style: none; + padding: 22px 0; + margin: 0 5%; +} +ul.nm-footer-list li {line-height:1.8em;} +ul.nm-footer-list li.top {margin-top:-1.8em;} +ul.nm-footer-list li.col2 {margin-left: 10%} +ul.nm-footer-list li.col3 {margin-left: 20%} +ul.nm-footer-list li a{ + color: #FFFFFF; + padding: 26px 12px; + transition: background, color; +} +ul.nm-footer-list li a:hover{ + background: rgba(149, 165, 166,.3); + color: rgba(189, 195, 199,1.0); +} + +a{ + text-decoration: none; + font-size: 15px; +} +a > i.icon{ + position: relative; + top: 0.2em; + color: #757575; + margin-right: 10px; +} diff --git a/src/002-negative-margins/example/index.html b/src/002-negative-margins/example/index.html index b3e7465..9fef342 100644 --- a/src/002-negative-margins/example/index.html +++ b/src/002-negative-margins/example/index.html @@ -12,6 +12,7 @@ + @@ -35,7 +36,7 @@
-
+

Negative margin on content to allow right sidebar

@@ -46,23 +47,23 @@
Lorem Ipsum dolor sit amet, consectetur adipiscing elit
tellus in convallis. Duis interdum nibh ac nisi feugiat hendrerit. Vestibulum vitae elit non lectus lobortis sollicitudin eu sit amet odio.

-
+
-
+

Negative margin on top to align < li >

-
    -
  • Milk
    • -
  • Eggs
    • -
  • Cheese
    • -
  • Tutty Frutti
    • -
  • Bread
    • -
  • Mango
    • -
  • Coke
    • -
  • Apple
    • -
  • Orange
    • +
      +
    • Milk
      • +
    • Eggs
      • +
    • Cheese
      • +
    • Tutty Frutti
      • +
    • Bread
      • +
    • Mango
      • +
    • Coke
      • +
    • Apple
      • +
    • Orange
-
+

Negative margin to create a Sticky Footer using fixed footer height

@@ -116,22 +117,19 @@
Lorem Ipsum
- -
-
-
    -
  • home
    • -
  • about
    • -
  • contact us
    • -
-
-
-
-
+ diff --git a/src/002-negative-margins/example/reset.css b/src/002-negative-margins/example/reset.css new file mode 100644 index 0000000..3a63f39 --- /dev/null +++ b/src/002-negative-margins/example/reset.css @@ -0,0 +1,348 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} +a{ + text-decoration: none; +} + +html, body{ + color: #787878; +} diff --git a/src/003-box-sizing/example/example.css b/src/003-box-sizing/example/example.css index eba1d66..c9f9f66 100644 --- a/src/003-box-sizing/example/example.css +++ b/src/003-box-sizing/example/example.css @@ -3,3 +3,21 @@ * Version: 1 * By: xxx */ + +.box-container{ + display: flex; + width: 100%; + justify-content: center; +} +.box-picture{ + display: flex; + align-items: center; + justify-content: center; + box-sizing: content-box; + border: 1px solid #34495e; + border-radius: 5px; + float: left; + margin-left: 1%; + padding: 1%; + text-align: center; +} diff --git a/src/003-box-sizing/example/index.html b/src/003-box-sizing/example/index.html index 9c2f4a4..7691a0e 100644 --- a/src/003-box-sizing/example/index.html +++ b/src/003-box-sizing/example/index.html @@ -37,10 +37,10 @@

Box Model

-
-

Since the dawn of CSS, the box model has worked like this by default:

-

width + padding + border = actual visible/rendered width of an element's box

-

height + padding + border = actual visible/rendered height of an element's box

+
+

Since the dawn of CSS, the box model has worked like this by default:

+

width + padding + border = actual visible/rendered width of an element's box

+

height + padding + border = actual visible/rendered height of an element's box

@@ -52,7 +52,7 @@

Box Sizing : Content Box

-
+

Box Sizing : border-box

The width and height properties (and min/max properties) includes content, padding and border, but not From e3a9e2d55f6faf9edc04ab320eaf8a10755497ef Mon Sep 17 00:00:00 2001 From: chrisarts Date: Wed, 25 Apr 2018 11:07:50 -0500 Subject: [PATCH 03/18] Box Sizing --- src/003-box-sizing/example/example.css | 37 +++++++++++++++----------- src/003-box-sizing/example/index.html | 18 ++++++------- 2 files changed, 31 insertions(+), 24 deletions(-) diff --git a/src/003-box-sizing/example/example.css b/src/003-box-sizing/example/example.css index c9f9f66..01b2f72 100644 --- a/src/003-box-sizing/example/example.css +++ b/src/003-box-sizing/example/example.css @@ -3,21 +3,28 @@ * Version: 1 * By: xxx */ - -.box-container{ - display: flex; - width: 100%; - justify-content: center; +.bg-light{ + background: #F5F5F5; + padding: 15px 10px; + margin-top: 1%; +} +.box-model{ + margin: 15px; + border: 5px solid #D24F2E; + padding: 15px; +} +.box-model p{ + margin: 0; +} +.box-model.border-box { + box-sizing: border-box; } -.box-picture{ - display: flex; - align-items: center; - justify-content: center; +.box-model.content-box { box-sizing: content-box; - border: 1px solid #34495e; - border-radius: 5px; - float: left; - margin-left: 1%; - padding: 1%; - text-align: center; +} +.box-model.box-sizing{ +} + +.box-model.box-sizing-border{ + } diff --git a/src/003-box-sizing/example/index.html b/src/003-box-sizing/example/index.html index 7691a0e..50763c3 100644 --- a/src/003-box-sizing/example/index.html +++ b/src/003-box-sizing/example/index.html @@ -35,26 +35,26 @@

-
+

Box Model

-
-

Since the dawn of CSS, the box model has worked like this by default:

-

width + padding + border = actual visible/rendered width of an element's box

-

height + padding + border = actual visible/rendered height of an element's box

+
+

Since the dawn of CSS, the box model has worked like this by default:

+

width + padding + border = actual visible/rendered width of an element's box

+

height + padding + border = actual visible/rendered height of an element's box

-
+

Box Sizing : Content Box

-
+

Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included

-
+

Box Sizing : border-box

-
+

The width and height properties (and min/max properties) includes content, padding and border, but not the margin

From 3c3c87848bcf400e71928fc6fe7ded321ff3171e Mon Sep 17 00:00:00 2001 From: chrisarts Date: Wed, 25 Apr 2018 12:03:40 -0500 Subject: [PATCH 04/18] Display --- src/004-display/example/example.css | 95 ++++++++ src/004-display/example/index.html | 21 +- src/004-display/example/reset.css | 352 ++++++++++++++++++++++++++++ 3 files changed, 458 insertions(+), 10 deletions(-) create mode 100644 src/004-display/example/reset.css diff --git a/src/004-display/example/example.css b/src/004-display/example/example.css index 08fc34e..cb2b4ba 100644 --- a/src/004-display/example/example.css +++ b/src/004-display/example/example.css @@ -3,3 +3,98 @@ * Version: 1 * By: xxx */ +body, html{ + color: #7D7978; +} +.bg-dark{ + background-color: #C8C8C8; +} +.bg-light{ + background-color: #f4f5f7; +} +.bg-dark,.bg-light{ + padding: 10px; +} + +.bg-light h1, +.bg-dark h1{ + font-size: 40px; + margin: 0; +} +.bg-light h1 > small, +.bg-dark h1 > small{ + font-size: 25px; +} + +nav.main-menu{ + display: inline-block; + width: 96%; + padding: 1% 2%; + background: #DCDCDC; +} +nav.main-menu ul{ + padding: 0; + margin: 0; + display: block; + min-height: 1em; +} +nav.main-menu ul li{ + list-style: none; + float: left; + margin-left: 1%; +} +nav.main-menu a{ + padding: 10px 15px; + transition: background .5s, color .3s; +} +nav.main-menu a:hover{ + background: rgba(0,0,0,.3); + color: #FFFFFF; +} + +.row-section{ + display: flex; + flex-direction: row; +} +.row-section > div{ + width: 50%; + display: flex; + flex-direction: column; + justify-content: center; + padding: 15px; +} + +.table{ + display: table; + width: 100%; + border-collapse: separate; + border-spacing: 1px 2px; +} +.table > .table-header{ + display: table-row; + font-weight: bold; + font-size: 18px; +} +.table > .table-body{ + display: table-row; +} +.table > .table-header > div, +.table > .table-body > div{ + display: table-cell; + padding: 15px 2px; + text-align: center; + background-color: #C8C8C8; +} +.flexbox{ + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.flexbox > div{ + padding: 10px; + width: 200px; + min-width: 200px; + box-sizing: content-box; + border: 2px solid #FD0A1A; + margin: 2px; +} diff --git a/src/004-display/example/index.html b/src/004-display/example/index.html index 3db9b5e..44720b6 100644 --- a/src/004-display/example/index.html +++ b/src/004-display/example/index.html @@ -12,6 +12,7 @@ + @@ -30,27 +31,27 @@
-
+
-
+

Lorem ipsum dolor sit amet

- + -
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex @@ -63,25 +64,25 @@

Lorem ipsum

-
-
+
+
Table Header
Table Header
Table Header
-
+
Table Cell
Table Cell
Table Cell
-
+
Table Cell
Table Cell
Table Cell
-
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex diff --git a/src/004-display/example/reset.css b/src/004-display/example/reset.css new file mode 100644 index 0000000..29eae56 --- /dev/null +++ b/src/004-display/example/reset.css @@ -0,0 +1,352 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} +a{ + text-decoration: none; +} + +html, body{ + color: #787878; +} +.stick-element{ + position: relative; + top: -5px; +} From f3b917d81569e5b2cee1f76c313ebae3465fd9cb Mon Sep 17 00:00:00 2001 From: chrisarts Date: Wed, 25 Apr 2018 13:59:55 -0500 Subject: [PATCH 05/18] Design fixes --- src/003-box-sizing/example/example.css | 6 ------ src/004-display/example/example.css | 4 ++-- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/003-box-sizing/example/example.css b/src/003-box-sizing/example/example.css index 01b2f72..a71ba87 100644 --- a/src/003-box-sizing/example/example.css +++ b/src/003-box-sizing/example/example.css @@ -22,9 +22,3 @@ .box-model.content-box { box-sizing: content-box; } -.box-model.box-sizing{ -} - -.box-model.box-sizing-border{ - -} diff --git a/src/004-display/example/example.css b/src/004-display/example/example.css index cb2b4ba..7730230 100644 --- a/src/004-display/example/example.css +++ b/src/004-display/example/example.css @@ -92,8 +92,8 @@ nav.main-menu a:hover{ } .flexbox > div{ padding: 10px; - width: 200px; - min-width: 200px; + width: 30%; + min-width: 30%; box-sizing: content-box; border: 2px solid #FD0A1A; margin: 2px; From 90c4cca6fc15db1d631a74b6b06d51aae48ba474 Mon Sep 17 00:00:00 2001 From: chrisarts Date: Wed, 25 Apr 2018 14:52:55 -0500 Subject: [PATCH 06/18] Centering --- src/005-centering/example/example.css | 126 +++++++++ src/005-centering/example/index.html | 50 ++-- src/005-centering/example/reset.css | 352 ++++++++++++++++++++++++++ 3 files changed, 504 insertions(+), 24 deletions(-) create mode 100644 src/005-centering/example/reset.css diff --git a/src/005-centering/example/example.css b/src/005-centering/example/example.css index 4dba466..cef5b77 100644 --- a/src/005-centering/example/example.css +++ b/src/005-centering/example/example.css @@ -3,3 +3,129 @@ * Version: 1 * By: xxx */ +.bg-light{ + background-color: #E8E8E8; +} +.bg-deep-dark{ + background-color: #A9A9A9; + color: whitesmoke; +} +.bg-dark{ + background-color: #D3D3D3; +} + +.full-title{ + text-align: center; + padding: 10px 0; +} + +.main-menu{ + display: flex; + flex-direction: row; + justify-content: center; +} +.main-menu > div{ + width: 10%; +} +.main-menu > div a{ + display: block; + padding: 10px 0; + text-align: center; + transition: background-color .5s, border-radius .5s; +} +.main-menu > div a:hover{ + background-color: #6a191f; + border-radius: 3px; +} + +.text-blocks{ + display: flex; + justify-content: center; + margin: 3% 0; + align-items: flex-end; + padding: 20px; +} +.text-blocks > .block{ + max-width: 20%; + margin: 0 1%; + display: flex; + align-items: center; + padding: 5px 20px; + background-color: #D3D3D3; +} +.text-blocks > .big-block{ + height: 200px; +} +.text-blocks > .middle-block{ + height: 150px; +} +.text-blocks > .small-block{ + height: 100px; +} + +.centered-line{ + display: flex; + align-items: center; + width: 40%; + height: 80px; + padding-left: 15px; + margin: 10px; +} +.centered-middle-line{ + display: flex; + align-items: center; + width: 200px; + height: 200px; + padding: 15px; + justify-content: center; + margin: 10px; +} +.spaced-paragraph{ + padding: 30px 0; +} +.section-blocks{ + display: flex; + height: 200px; + align-items: center; + justify-content: center; + margin: 1% 0; +} +.section-blocks .block{ + width: 95%; + padding: 10px 5px; + height: 40%; +} + +.square-container{ + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 200px; + background-color: #79A5A3; +} + +.big-square{ + display: flex; + justify-content: center; + align-items: center; + background-color: #B95755; + width: 150px; + height: 150px; +} +.middle-square{ + display: flex; + justify-content: center; + align-items: center; + background-color: #3D4351; + width: 90px; + height: 90px; +} +.small-square{ + display: flex; + justify-content: center; + align-items: center; + background-color: #C89E66; + width: 60px; + height: 60px; +} diff --git a/src/005-centering/example/index.html b/src/005-centering/example/index.html index b6d2e1e..e429797 100644 --- a/src/005-centering/example/index.html +++ b/src/005-centering/example/index.html @@ -13,6 +13,7 @@ + @@ -30,13 +31,13 @@
-
+
-

This text is centered.

+

This text is centered.

-
-
+
+
@@ -44,34 +45,34 @@

This text is centered.

-
-
I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is +
+
I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row.
-
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me +
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
-
I'm an element that is block-like with my siblings and we're centered in a row.
+
I'm an element that is block-like with my siblings and we're centered in a row.
-
-
I'm an element that is block-like with my siblings and we're centered in a row.
-
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me +
+
I'm an element that is block-like with my siblings and we're centered in a row.
+
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
-
I'm an element that is block-like with my siblings and we're centered in a row.
+
I'm an element that is block-like with my siblings and we're centered in a row.
-
+
I'm a centered line.
-
+

I'm vertically centered multiple lines of text in a CSS-created table layout.

-
-

I'm vertically centered multiple lines of text in a flexbox container. Lorem ipsum dolor sit amet, pharetra +

+

I'm vertically centered multiple lines of text in a flexbox container. Lorem ipsum dolor sit amet, pharetra vitae corrupti eu amet in. Ut nibh ut tellus lacinia habitasse proin, arcu aliquet ut. Dis phasellus orci pulvinar assumenda a ligula, egestas morbi sapien congue sollicitudin, quam tortor placerat at leo elit sed. Augue rutrum quam eros auctor venenatis adipisci, elementum etiam felis nec conubia ac, non pede pede proin @@ -83,21 +84,22 @@

This text is centered.

elementum aliquam vitae.

-
-
I'm a block-level element with a fixed height, centered vertically within my parent.
+
+
I'm a block-level element with a fixed height, centered vertically within my parent.
-
-
I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level +
+
I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level element with an unknown height, centered vertically within my parent.
-
-
-
-
+
+
+
+
+
diff --git a/src/005-centering/example/reset.css b/src/005-centering/example/reset.css new file mode 100644 index 0000000..29eae56 --- /dev/null +++ b/src/005-centering/example/reset.css @@ -0,0 +1,352 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} +a{ + text-decoration: none; +} + +html, body{ + color: #787878; +} +.stick-element{ + position: relative; + top: -5px; +} From c395d787c6f56dee756115a43da15f82f03ae557 Mon Sep 17 00:00:00 2001 From: chrisarts Date: Wed, 25 Apr 2018 15:55:20 -0500 Subject: [PATCH 07/18] basic layout --- src/006-basic-layout/example/example.css | 89 ++++++ src/006-basic-layout/example/index.html | 53 ++-- src/006-basic-layout/example/reset.css | 352 +++++++++++++++++++++++ 3 files changed, 475 insertions(+), 19 deletions(-) create mode 100644 src/006-basic-layout/example/reset.css diff --git a/src/006-basic-layout/example/example.css b/src/006-basic-layout/example/example.css index bdfd29e..c929efa 100644 --- a/src/006-basic-layout/example/example.css +++ b/src/006-basic-layout/example/example.css @@ -3,3 +3,92 @@ * Version: 1 * By: xxx */ +.bg-light-blue{ + background-color: #8DD0D1; +} +ul.mdl-list-text{ + list-style: none; + background-color: #CF5036; + margin: 0; + padding: 0; +} +ul.mdl-list-text li { + line-height:1.8em; + width: 10%; + text-align: center; + padding: 5px 0; +} +ul.mdl-list-text li span{ + display: block; + cursor: pointer; + padding: 10px 5px; + color: whitesmoke; + font-size: 16px; +} +ul.mdl-list-text li span:hover{ + color: navajowhite; +} +ul.mdl-list-text li.top {margin-top:-55px;} +ul.mdl-list-text li.col2 {margin-left:8%;} +ul.mdl-list-text li.col3 {margin-left:16%;} + +.mdl-list{ + float: left; + width: 250px; + height: 700px; + margin: 0; +} +.main{ + border-left: 330px solid #FFD0C5; + background-color: #FFD0C5; + height: 716px; +} +.blocks-container{ + display: flex; + flex-wrap: wrap; + width: 100%; +} +.blocks-container > div{ + width: 190px; + height: 200px; + border: 1px solid #CF5036; +} + +.flex-layout{ + display: flex; + flex-direction: column; +} + +ul.flex-menu{ + display: flex; + flex-direction: row; + list-style: none; + background-color: #CF5036; + margin: 0; +} +ul.flex-menu li{ + width: 8%; +} +ul.flex-menu li span{ + padding: 15px 5px; + cursor: pointer; + display: block; + width: 100%; + color: whitesmoke; + font-size: 16px; +} +ul.flex-menu li span:hover{ + color: navajowhite; +} +.flex-main{ + display: flex; + flex-direction: row; +} +.flex-main .aside-menu{ + width: 25%; +} +.flex-main-content{ + background-color: #FFD0C5; + width: 75%; + border-left: 40px solid #FFD0C5; +} diff --git a/src/006-basic-layout/example/index.html b/src/006-basic-layout/example/index.html index d21e25f..52e4af1 100644 --- a/src/006-basic-layout/example/index.html +++ b/src/006-basic-layout/example/index.html @@ -37,21 +37,21 @@

1. Without a wrapper div, with border and negative margin

-
    -
  • +
      +
    • Home
      • -
    • +
    • About
      • -
    • +
    • Contact Us
-
    +
    • home @@ -81,17 +81,24 @@

      1. Without a wrapper div, with border and negative margin

      Lorem ipsum...

      Lorem ipsum...

      Lorem ipsum...

      -
      - +
      +
      +
      +
      +
      +
      +
      +
      +
      -
        -
      • +
          +
        • Talos Digital
          • -
        • +
        • Contact Us
        @@ -101,8 +108,8 @@

        1. Without a wrapper div, with border and negative margin

        2. Using flex, flex-direction, and wrapper div

        -
        -
          +
          +
          • Home
            • @@ -115,9 +122,9 @@

            2. Using flex, flex-direction, and wrapper div

          -
          -
          -
            +
            +
            +
            • home @@ -139,7 +146,7 @@

              2. Using flex, flex-direction, and wrapper div

            -
            +

            Lorem ipsum...

            Lorem ipsum...

            Lorem ipsum...

            @@ -148,13 +155,21 @@

            2. Using flex, flex-direction, and wrapper div

            Lorem ipsum...

            Lorem ipsum...

            -
            +
            +
            +
            +
            +
            +
            +
            +
            +
            -
            -
              +
              +
              • Talos Digital
                • diff --git a/src/006-basic-layout/example/reset.css b/src/006-basic-layout/example/reset.css new file mode 100644 index 0000000..29eae56 --- /dev/null +++ b/src/006-basic-layout/example/reset.css @@ -0,0 +1,352 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} +a{ + text-decoration: none; +} + +html, body{ + color: #787878; +} +.stick-element{ + position: relative; + top: -5px; +} From 936a80531c34a68f08c61d2964d3ac5a4649c1db Mon Sep 17 00:00:00 2001 From: chrisarts Date: Wed, 25 Apr 2018 17:03:50 -0500 Subject: [PATCH 08/18] z-index --- src/007-z-index/example/example.css | 97 +++++++++++++++++++++++++++++ src/007-z-index/example/index.html | 23 +++++-- 2 files changed, 114 insertions(+), 6 deletions(-) diff --git a/src/007-z-index/example/example.css b/src/007-z-index/example/example.css index 5b008b9..164c466 100644 --- a/src/007-z-index/example/example.css +++ b/src/007-z-index/example/example.css @@ -3,3 +3,100 @@ * Version: 1 * By: xxx */ +html, body{ + font-size: 15px; + color: white; +} +.page-content{ + background: linear-gradient(90deg, #D5EADF 60%, #555E59 60%); +} +.main-container{ + background-color: rgba(120, 196, 207, .4); + position: relative; +} +h1{ + color: white; + margin-bottom: 20px; + font-weight: bold; + font-size: 40px; +} +hr{ + border-color: #E22A43; +} + +.left-block{ + width: 55%; +} + +.inner-block{ + background-color: rgba(255,255,255,.9); + color: black; + padding: 25px; +} +.text-block{ + padding: 15px; +} +.right-block{ + position: absolute; + top: 5%; + right: 0; + background-color: #DFE189; + height: 100%; + width: 35%; + padding: 15px; + color: #3D4351; + border-left: 60px solid #DFE189; +} +.right-block ul{ + margin: 0; + padding: 0; + list-style: none; +} +.right-block h1{ + font-size: 40px; + color: #3D4351; + font-weight: normal; +} +.square{ + width: 100px; + height: 100px; + transform: rotate(45deg); +} +.square-margin1{ + margin-left: 10px; +} +.square-margin2{ + margin-left: 50px; +} +.square-margin3{ + margin-left: 90px; +} +.up-square{ + margin-top: -70px; +} + + +.bg-color1{ + background-color: #E52A44; +} +.bg-color2{ + background-color: #E6772B; +} +.bg-color3{ + background-color: #BEE773; +} +.bg-color4{ + background-color: #63E7C5; +} +.bg-color5{ + background-color: #3D79E2; +} +.bg-color6{ + background-color: #E52CCD; +} +.bg-color7{ + background-color: #D8E2E7; +} +.bg-color8{ + background-color: #E5151F; +} diff --git a/src/007-z-index/example/index.html b/src/007-z-index/example/index.html index c82d66a..b9b7799 100644 --- a/src/007-z-index/example/index.html +++ b/src/007-z-index/example/index.html @@ -32,14 +32,14 @@
                -
                -
                +
                +
                -
                +

                Lorem ipsum dolor sit amet

                -
                +

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin scelerisque neque id velit varius, quis consequat mauris semper.

                @@ -47,7 +47,7 @@

                Lorem ipsum dolor sit amet

                scelerisque neque id velit varius, quis consequat mauris semper.

                -
                +

                Lorem ipsum dolor sit amet

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin @@ -68,7 +68,7 @@

                Lorem ipsum dolor sit amet

                -
                +

                Lorem ipsum dolor sit amet

                • Lorem ipsum dolor sit amet
                  • @@ -80,6 +80,17 @@

                  Lorem ipsum dolor sit amet

                • Lorem ipsum dolor sit amet
                +
                +
                +
                +
                +
                + +
                +
                +
                +
                +
                From 2d8d3a224a534c256c649758ff8ff093d2767b48 Mon Sep 17 00:00:00 2001 From: chrisarts Date: Thu, 26 Apr 2018 09:16:10 -0500 Subject: [PATCH 09/18] Advanced selectors --- src/008-advanced-selectors/example/example.css | 17 +++++++++++++++++ src/008-advanced-selectors/example/index.html | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/008-advanced-selectors/example/example.css b/src/008-advanced-selectors/example/example.css index 218d5ec..3d276c5 100644 --- a/src/008-advanced-selectors/example/example.css +++ b/src/008-advanced-selectors/example/example.css @@ -111,6 +111,7 @@ footer div { display: flex; flex-wrap: wrap; padding: 20px; + justify-content: center; } .as-card { @@ -133,6 +134,11 @@ footer div { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; + cursor: pointer; +} +.as-card-img img:hover{ + transform: scale(1.2); + filter: opacity(.5); } @@ -150,4 +156,15 @@ footer div { width: 90px; } +.category-nav ul{ + list-style: none; +} +.category-nav ul li a{ + color: #787878; + text-decoration: none; + transition: color .3s; +} +.category-nav ul li a:hover{ + color: rgb(255,64,129); +} diff --git a/src/008-advanced-selectors/example/index.html b/src/008-advanced-selectors/example/index.html index 98f729f..b704f5c 100644 --- a/src/008-advanced-selectors/example/index.html +++ b/src/008-advanced-selectors/example/index.html @@ -37,7 +37,7 @@

                Clothes

                -
                - \ No newline at end of file + From 8f7c0029c4fc08fec19b0177eeb777056cea5089 Mon Sep 17 00:00:00 2001 From: chrisarts Date: Thu, 26 Apr 2018 13:08:36 -0500 Subject: [PATCH 11/18] Background --- src/010-background/example/example.css | 101 +++++++++++++++++++++++++ src/010-background/example/index.html | 12 +-- 2 files changed, 107 insertions(+), 6 deletions(-) diff --git a/src/010-background/example/example.css b/src/010-background/example/example.css index 8c1053d..b74a37e 100644 --- a/src/010-background/example/example.css +++ b/src/010-background/example/example.css @@ -3,3 +3,104 @@ * Version: 1 * By: xxx */ +.container{ + background: #ec925d; /* Old browsers */ + background: radial-gradient(ellipse at center, #ec925d 0%,#c74720 70%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec925d', endColorstr='#c74720',GradientType=1 ); + min-height: 900px; +} +.header-persons{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + color: whitesmoke; + padding: 25px 0; +} +.header-persons span{ + width: 90%; + height: 2px; + display: block; + background: #c74720; + background: -moz-linear-gradient(left, #c74720 0%, #ec925d 50%, #c74720 99%); + background: -webkit-linear-gradient(left, #c74720 0%,#ec925d 50%,#c74720 99%); + background: linear-gradient(to right, #c74720 0%,#ec925d 50%,#c74720 99%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c74720', endColorstr='#c74720',GradientType=1 ); +} +.header-persons h2{ + margin: 0; + text-shadow: 3px -1px 2px rgba(150, 150, 150, 1); +} +.header-persons h3{ + margin: 0; + text-shadow: 3px -1px 2px rgba(150, 150, 150, 1); +} +.persons-container{ + display: flex; + width: 90%; + margin: 20px auto; + justify-content: space-between; + align-items: center; +} +.person{ + display: flex; + align-items: center; + width: 35%; + color: white; + padding: 10px 15px; + background-color: #ED935F; + border-top: solid 1px whitesmoke; + border-left: solid 1px whitesmoke; + border-bottom-left-radius: 42% 100%; + border-bottom-right-radius: 42% 100%; + border-top-left-radius: 42% 100%; + border-top-right-radius: 42% 100%; + box-shadow: 9px 9px 5px -6px #C94B24; + cursor: pointer; +} +.person:hover{ + filter: opacity(.6); +} +.person img{ + border-radius: 50%; + width: 100px; + height: 100px; + border: 3px solid white; +} +.person-text{ + padding: 15px; +} +.person h2{ + font-size: 20px; + margin: 0; + text-shadow: 3px 1px 3px rgba(150, 150, 150, 1); + line-height: normal; +} +.person p{ + font-size: 18px; + margin: 0; +} + +@media only screen and (max-width: 700px) { + .persons-container{ + flex-wrap: wrap; + justify-content: center; + } + .person{ + width: 80%; + margin: 20px 0; + padding: 28px 15px; + } +} +@media only screen and (max-width: 700px) { + .persons-container{ + flex-wrap: wrap; + justify-content: center; + } + .person{ + width: 80%; + margin: 20px 0; + padding: 28px 15px; + } +} diff --git a/src/010-background/example/index.html b/src/010-background/example/index.html index 7689647..d3ff908 100644 --- a/src/010-background/example/index.html +++ b/src/010-background/example/index.html @@ -35,22 +35,22 @@
                -
                +

                Lorem ipsum dolor sit amet

                Fusce pharetra ac nibh vitae viverra

                -
                -
                +
                +
                -
                +

                Lorem ipsum dolor sit amet

                Suspendisse at risus maximus, imperdiet lorem eget, accumsan lectus

                -
                +
                -
                +

                Lorem ipsum dolor sit amet

                Suspendisse at risus maximus, imperdiet lorem eget, accumsan lectus

                From b53c616ee68241e1345f3006425c8b816273dfd9 Mon Sep 17 00:00:00 2001 From: chrisarts Date: Thu, 26 Apr 2018 13:12:05 -0500 Subject: [PATCH 12/18] Background --- src/010-background/example/example.css | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/src/010-background/example/example.css b/src/010-background/example/example.css index b74a37e..7872633 100644 --- a/src/010-background/example/example.css +++ b/src/010-background/example/example.css @@ -81,8 +81,7 @@ font-size: 18px; margin: 0; } - -@media only screen and (max-width: 700px) { +@media only screen and (max-width: 800px) { .persons-container{ flex-wrap: wrap; justify-content: center; @@ -90,17 +89,5 @@ .person{ width: 80%; margin: 20px 0; - padding: 28px 15px; - } -} -@media only screen and (max-width: 700px) { - .persons-container{ - flex-wrap: wrap; - justify-content: center; - } - .person{ - width: 80%; - margin: 20px 0; - padding: 28px 15px; } } From 648fb108f20546ade76500b53b57aa44ab5c895c Mon Sep 17 00:00:00 2001 From: chrisarts Date: Thu, 26 Apr 2018 14:06:54 -0500 Subject: [PATCH 13/18] Styling --- src/011-styling/example/example.css | 111 ++++++++++++++++++++++++++++ src/011-styling/example/index.html | 12 +-- 2 files changed, 117 insertions(+), 6 deletions(-) diff --git a/src/011-styling/example/example.css b/src/011-styling/example/example.css index 4bdd9e2..602cf34 100644 --- a/src/011-styling/example/example.css +++ b/src/011-styling/example/example.css @@ -3,3 +3,114 @@ * Version: 1 * By: xxx */ +.bg-pink{ + background-color: #fcbacf; +} +h1{ + margin: 0; +} +p{ + font-size: 20px +} +.page-content{ + background: url("../resources/background.jpg"); + background-position-x: center; + background-position-y: initial; + padding: 0; + color: #e0dede; +} + +.page-header{ + width: 100%; + height: 200px; + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(0,0,0,.4); +} +.page-header h1{ + color: whitesmoke; +} +.main-container{ + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + background-color: whitesmoke; +} +.form-container{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 3%; +} +.form-container input, +.form-container textarea{ + width: 50%; + background-color: #C8C8C8; + color: whitesmoke; +} + +.form-container input{ + height: 40px; + border: 0; + margin: 10px 0; + padding: 0 10px; +} +.form-container textarea{ + padding: 10px; + border: 0; +} +.form-container button{ + width: 30%; + height: 40px; + text-align: center; + border: 0; + font-size: 20px; + color: whitesmoke; + margin: 10px 0; +} +.form-container button:hover{ + background-color: whitesmoke; + color: #fcbacf; +} +.footer{ + display: flex; + justify-content: space-between; + color: whitesmoke; + padding-top: 50px; + width: 80%; + margin: 0 auto; +} +.footer p{ + border-bottom: 2px solid whitesmoke; + font-size: 20px; + margin: 10px 5px; + padding-bottom: 20px; + text-align: left; +} +.footer ul{ + list-style: none; + margin: 0; + padding: 0; +} +.footer ul li{ + text-align: left; +} +.footer ul li a{ + width: 100%; + color: whitesmoke; + text-decoration: none; + padding: 5px; + font-size: 18px; + display: block; +} +.footer ul li a:hover{ + color: #7D7978; +} +.footer > div{ + width: 300px; + text-align: center; + max-width: 500px; +} diff --git a/src/011-styling/example/index.html b/src/011-styling/example/index.html index eb3ed5f..58307ba 100644 --- a/src/011-styling/example/index.html +++ b/src/011-styling/example/index.html @@ -34,24 +34,24 @@
                -
                +

                contact us

                -
                -
                +
                + - +

                CONTACT US AND WE WILL RESPOND YOU AS SOON AS POSSIBLE.

                -