├── .gitattributes
├── 01 - Introduction to CSS
    ├── Listing_1-1.html
    ├── Listing_1-10.css
    ├── Listing_1-11.scss
    ├── Listing_1-12.css
    ├── Listing_1-13.scss
    ├── Listing_1-14.html
    ├── Listing_1-15.css
    ├── Listing_1-2.css
    ├── Listing_1-3.css
    ├── Listing_1-4.html
    ├── Listing_1-5.html
    ├── Listing_1-6.html
    ├── Listing_1-7.css
    ├── Listing_1-8.css
    ├── Listing_1-9.scss
    └── desktop.ini
├── 02 - CSS Selectors
    ├── Listing_2-1.css
    ├── Listing_2-10.html
    ├── Listing_2-2.css
    ├── Listing_2-3.css
    ├── Listing_2-4.css
    ├── Listing_2-5.html
    ├── Listing_2-6.html
    ├── Listing_2-7.html
    ├── Listing_2-8.html
    ├── Listing_2-9.css
    └── desktop.ini
├── 03 - Basic CSS Concepts
    ├── Listing_3-1.html
    ├── Listing_3-10.css
    ├── Listing_3-11.css
    ├── Listing_3-12.html
    ├── Listing_3-13.html
    ├── Listing_3-14.html
    ├── Listing_3-15.html
    ├── Listing_3-16.html
    ├── Listing_3-17.html
    ├── Listing_3-18.html
    ├── Listing_3-2.html
    ├── Listing_3-3.css
    ├── Listing_3-4.html
    ├── Listing_3-5.html
    ├── Listing_3-6.html
    ├── Listing_3-7.html
    ├── Listing_3-8.html
    ├── Listing_3-9.css
    └── desktop.ini
├── 04 - Basic Styling
    ├── Listing_4-1.html
    ├── Listing_4-10.html
    ├── Listing_4-11.html
    ├── Listing_4-12.html
    ├── Listing_4-13.html
    ├── Listing_4-14.html
    ├── Listing_4-15.html
    ├── Listing_4-16.html
    ├── Listing_4-2.html
    ├── Listing_4-3.html
    ├── Listing_4-4.html
    ├── Listing_4-5.css
    ├── Listing_4-6.html
    ├── Listing_4-7.html
    ├── Listing_4-8.html
    ├── Listing_4-9.html
    └── desktop.ini
├── 05 - Backgrounds and Gradients
    ├── Listing_5-1.html
    ├── Listing_5-10.html
    ├── Listing_5-11.html
    ├── Listing_5-12.html
    ├── Listing_5-13.html
    ├── Listing_5-14.html
    ├── Listing_5-15.html
    ├── Listing_5-16.html
    ├── Listing_5-17.html
    ├── Listing_5-18.html
    ├── Listing_5-19.html
    ├── Listing_5-2.html
    ├── Listing_5-20.html
    ├── Listing_5-21.html
    ├── Listing_5-22.html
    ├── Listing_5-23.html
    ├── Listing_5-24.html
    ├── Listing_5-25.html
    ├── Listing_5-26.html
    ├── Listing_5-27.html
    ├── Listing_5-28.html
    ├── Listing_5-3.html
    ├── Listing_5-4.html
    ├── Listing_5-5.html
    ├── Listing_5-6.html
    ├── Listing_5-7.html
    ├── Listing_5-8.html
    ├── Listing_5-9.html
    ├── desktop.ini
    ├── mountains.jpg
    └── tiles.jpg
├── 06 - Text Styling
    ├── Listing_6-1.css
    ├── Listing_6-10.html
    ├── Listing_6-11.html
    ├── Listing_6-12.html
    ├── Listing_6-13.html
    ├── Listing_6-14.html
    ├── Listing_6-15.html
    ├── Listing_6-16.html
    ├── Listing_6-17.css
    ├── Listing_6-18.css
    ├── Listing_6-19.html
    ├── Listing_6-2.html
    ├── Listing_6-20.html
    ├── Listing_6-3.html
    ├── Listing_6-4.html
    ├── Listing_6-5.html
    ├── Listing_6-6.html
    ├── Listing_6-7.html
    ├── Listing_6-8.html
    └── Listing_6-9.html
├── 07 - Layout and Positioning
    ├── Listing_7-1.html
    ├── Listing_7-10.html
    ├── Listing_7-11.html
    ├── Listing_7-12.html
    ├── Listing_7-13.html
    ├── Listing_7-14.html
    ├── Listing_7-15.html
    ├── Listing_7-16.html
    ├── Listing_7-17.html
    ├── Listing_7-2.html
    ├── Listing_7-3.html
    ├── Listing_7-4.html
    ├── Listing_7-5.html
    ├── Listing_7-6.html
    ├── Listing_7-7.html
    ├── Listing_7-8.html
    ├── Listing_7-9.html
    └── desktop.ini
├── 08 - Transforms
    ├── Listing_8-1.html
    ├── Listing_8-10.html
    ├── Listing_8-11.html
    ├── Listing_8-12.html
    ├── Listing_8-13.html
    ├── Listing_8-14.html
    ├── Listing_8-15.html
    ├── Listing_8-16.html
    ├── Listing_8-2.html
    ├── Listing_8-3.html
    ├── Listing_8-4.html
    ├── Listing_8-5.html
    ├── Listing_8-6.html
    ├── Listing_8-7.html
    ├── Listing_8-8.html
    ├── Listing_8-9.html
    └── desktop.ini
├── 09 - Transitions and Animations
    ├── Listing_9-1.css
    ├── Listing_9-10.html
    ├── Listing_9-11.css
    ├── Listing_9-2.css
    ├── Listing_9-3.css
    ├── Listing_9-4.css
    ├── Listing_9-5.css
    ├── Listing_9-6.html
    ├── Listing_9-7.html
    ├── Listing_9-8.html
    ├── Listing_9-9.css
    └── desktop.ini
├── 10 - Flexbox
    ├── Listing_10-1.html
    ├── Listing_10-10.html
    ├── Listing_10-2.html
    ├── Listing_10-3.html
    ├── Listing_10-4.html
    ├── Listing_10-5.html
    ├── Listing_10-6.html
    ├── Listing_10-7.html
    ├── Listing_10-8.html
    ├── Listing_10-9.html
    └── desktop.ini
├── 11 - Responsive Design
    ├── Listing_11-1.css
    ├── Listing_11-10.css
    ├── Listing_11-11.css
    ├── Listing_11-2.css
    ├── Listing_11-3.css
    ├── Listing_11-4.css
    ├── Listing_11-5.html
    ├── Listing_11-6.html
    ├── Listing_11-7.css
    ├── Listing_11-8.html
    ├── Listing_11-9.css
    ├── cat.jpeg
    └── desktop.ini
├── 12 - CSS Grid
    ├── Listing_12-1.html
    ├── Listing_12-10.css
    ├── Listing_12-11.css
    ├── Listing_12-12.css
    ├── Listing_12-13.css
    ├── Listing_12-14.css
    ├── Listing_12-15.html
    ├── Listing_12-16.html
    ├── Listing_12-2.html
    ├── Listing_12-3.html
    ├── Listing_12-4.html
    ├── Listing_12-5.css
    ├── Listing_12-6.css
    ├── Listing_12-7.css
    ├── Listing_12-8.css
    ├── Listing_12-9.html
    └── desktop.ini
├── 9781484262931.jpg
├── Contributing.md
├── LICENSE.txt
├── README.md
└── errata.md


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-1.html:
--------------------------------------------------------------------------------
1 | <font face="Arial, sans-serif"
2 |       color="blue"
3 |       size="12">
4 |   Hello world!
5 | </font>
6 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-10.css:
--------------------------------------------------------------------------------
1 | .header {
2 |   background-color: red;
3 | }
4 | 
5 | .header h1 {
6 |   font-size: 24px;
7 | }
8 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-11.scss:
--------------------------------------------------------------------------------
1 | $header-color: red;
2 | 
3 | .header {
4 |   background-color: $header-color;
5 | }
6 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-12.css:
--------------------------------------------------------------------------------
1 | .header {
2 |   display: -webkit-flex;
3 |   display: -ms-flexbox;
4 |   display: flex;
5 | }
6 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-13.scss:
--------------------------------------------------------------------------------
 1 | @mixin flexbox {
 2 |   display: -webkit-flex;
 3 |   display: -ms-flexbox;
 4 |   display: flex;
 5 | }
 6 | 
 7 | .header {
 8 |   @include flexbox;
 9 | }
10 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-14.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <body>
 3 |     <h1>Hello World</h1>
 4 |     <div>
 5 |       <h2>Subtitle</h2>
 6 |       <p>Hello world!</p>
 7 |     </div>
 8 |   </body>
 9 | </html>
10 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-15.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-size: 16px;
 3 | }
 4 | 
 5 | h1 {
 6 |   font-size: 1.5rem;
 7 |   color: orangered;
 8 | }
 9 | 
10 | div {
11 |   padding: 1rem;
12 | }
13 | 
14 | div h2 {
15 |   font-size: 1.2rem;
16 |   color: blue;
17 | }
18 | 
19 | div p {
20 |   font-size: 0.9rem;
21 |   color: gray;
22 | }
23 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-2.css:
--------------------------------------------------------------------------------
1 | .header {
2 |   background-color: red;
3 |   background-color: blue;
4 | }
5 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-3.css:
--------------------------------------------------------------------------------
1 | /* This is a comment outside of a rule */
2 | 
3 | .header {
4 |   /* This is a comment inside of a rule */
5 |   background-color: red;
6 | }
7 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-4.html:
--------------------------------------------------------------------------------
1 | <div style="background-color: red;">
2 |   Hello world!
3 | </div>
4 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <style>
 5 |       div {
 6 |         background-color: red;
 7 |       }
 8 |     </style>
 9 |   </head>
10 |   <body>
11 |     <div>Hello world!</div>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <link rel="stylesheet" href="Listing_1-7.css">
 5 |   </head>
 6 |   <body>
 7 |     <div>Hello world!</div>
 8 |   </body>
 9 | </html>
10 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-7.css:
--------------------------------------------------------------------------------
1 | div {
2 |   background-color: red;
3 | }


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-8.css:
--------------------------------------------------------------------------------
 1 | @keyframes spin {
 2 |   from { transform: rotate(0); }
 3 |   to { transform: rotate(360deg); }
 4 | }
 5 | 
 6 | @-moz-keyframes spin {
 7 |   from { -moz-transform: rotate(0); }
 8 |   to { -moz-transform: rotate(360deg); }
 9 | }
10 | 
11 | @-webkit-keyframes spin {
12 |   from { -webkit-transform: rotate(0); }
13 |   to { -webkit-transform: rotate(360deg); }
14 | }
15 | 


--------------------------------------------------------------------------------
/01 - Introduction to CSS/Listing_1-9.scss:
--------------------------------------------------------------------------------
1 | .header {
2 |   background-color: red;
3 |   
4 |   h1 {
5 |     font-size: 24px;
6 |   }
7 | }


--------------------------------------------------------------------------------
/01 - Introduction to CSS/desktop.ini:
--------------------------------------------------------------------------------
1 | [.ShellClassInfo]

2 | ConfirmFileOp=0

3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21

4 | 


--------------------------------------------------------------------------------
/02 - CSS Selectors/Listing_2-1.css:
--------------------------------------------------------------------------------
1 | * {
2 |   margin: 0;
3 | }
4 | 


--------------------------------------------------------------------------------
/02 - CSS Selectors/Listing_2-10.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .profile {
 3 |     background-color: green;
 4 |   }
 5 | 
 6 |   div {
 7 |     background-color: red;
 8 |     color: white;
 9 |   }
10 | </style>
11 | 
12 | <div class="profile">My Profile</div>
13 | 


--------------------------------------------------------------------------------
/02 - CSS Selectors/Listing_2-2.css:
--------------------------------------------------------------------------------
1 | p {
2 |   margin: 25px;
3 | }
4 | 


--------------------------------------------------------------------------------
/02 - CSS Selectors/Listing_2-3.css:
--------------------------------------------------------------------------------
1 | #header {
2 |   padding: 25px;
3 | }
4 | 


--------------------------------------------------------------------------------
/02 - CSS Selectors/Listing_2-4.css:
--------------------------------------------------------------------------------
1 | .nav-link {
2 |   color: darkcyan;
3 | }
4 | 


--------------------------------------------------------------------------------
/02 - CSS Selectors/Listing_2-5.html:
--------------------------------------------------------------------------------
1 | <div title="Hello World">Hello World</div>
2 | <div title="HelloWorld">HelloWorld</div>
3 | 


--------------------------------------------------------------------------------
/02 - CSS Selectors/Listing_2-6.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   <div class="header"></div>
3 |   <div class="body"></div>
4 |   <div class="footer"></div>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/02 - CSS Selectors/Listing_2-7.html:
--------------------------------------------------------------------------------
1 | <ul class="my-list">
2 |   <li>Item one</li>
3 |   <li>Item two</li>
4 | </ul>
5 | 


--------------------------------------------------------------------------------
/02 - CSS Selectors/Listing_2-8.html:
--------------------------------------------------------------------------------
1 | <a class="external-link" href="https://google.com">Google</a>
2 | 


--------------------------------------------------------------------------------
/02 - CSS Selectors/Listing_2-9.css:
--------------------------------------------------------------------------------
1 | .external-link::after {
2 |   content: " (external)"
3 |   color: green;
4 | }
5 | 


--------------------------------------------------------------------------------
/02 - CSS Selectors/desktop.ini:
--------------------------------------------------------------------------------
1 | [.ShellClassInfo]

2 | ConfirmFileOp=0

3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21

4 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-1.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   #div1 {
 3 |     background-color: red;
 4 |   }
 5 | 
 6 |   #div2 {
 7 |     background-color: green;
 8 |   }
 9 | 
10 |   div {
11 |     color: white;
12 |   }
13 | </style>
14 | 
15 | <div id="div1">Hello world!</div>
16 | <div id="div2">Hello world!</div>
17 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-10.css:
--------------------------------------------------------------------------------
 1 | .header {
 2 |   font-size: 24px;
 3 |   padding: 0.5em;
 4 | }
 5 | 
 6 | .header li {
 7 |   font-size: 0.75em;
 8 | }
 9 | 
10 | .header li a {
11 |   font-size: 0.5em;
12 | }
13 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-11.css:
--------------------------------------------------------------------------------
1 | :root {
2 |   --spacing: 0.5rem
3 | }
4 | 
5 | .container {
6 |   padding: calc(var(--spacing) * 2);
7 | }
8 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-12.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     background-color: skyblue;
 4 |     height: 2rem;
 5 |     width: 10rem;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="container">
10 |   This is some really long text that will overflow the container.
11 | </div>
12 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-13.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     background-color: skyblue;
 4 |     height: 2rem;
 5 |     width: 10rem;
 6 |     padding: 1rem;
 7 |   }
 8 | 
 9 |   .container .banner {
10 |     background-color: #999999;
11 |     width: 15rem;
12 |   }
13 | </style>
14 | 
15 | <div class="container">
16 |   <div class="banner">This is a banner</div>
17 |   This is some really long text that will overflow the container.
18 | </div>
19 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-14.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     background-color: skyblue;
 4 |     height: 2rem;
 5 |     width: 10rem;
 6 |     white-space: nowrap;
 7 |   }
 8 | </style>
 9 | 
10 | <div class="container">
11 |   This is some really long text that will overflow the container.
12 | </div>
13 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-15.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     --heading-color: blue;
 4 |     font-family: Arial, sans-serif;
 5 |   }
 6 | 
 7 |   .container h1 {
 8 |     color: var(--heading-color);
 9 |   }
10 | </style>
11 | 
12 | <div class="container">
13 |   <h1>Welcome</h1>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-16.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   :root {
 3 |     --text-color: red;
 4 |   }
 5 | 
 6 |   .container {
 7 |     color: var(--text-color);
 8 |     font-family: Arial, sans-serif;
 9 |   }
10 | </style>
11 | 
12 | <div class="container">Hello World!</div>
13 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-17.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   :root {
 3 |     --primary-border-color: red;
 4 |     --primary-border-style: solid;
 5 |     --primary-border-width: 3px;
 6 |     --primary-border: 
 7 |       var(--primary-border-width) 
 8 |       var(--primary-border-style)
 9 |       var(--primary-border-color);
10 |   }
11 | 
12 |   .container {
13 |     border: var(--primary-border);
14 |     width: 10rem;
15 |   }
16 | </style>
17 | 
18 | <div class="container">Hello World!</div>
19 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-18.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   :root {
 3 |     --row-height: 1.5rem;
 4 |     --visible-rows: 3;
 5 |   }
 6 | 
 7 |   .container {
 8 |     border: 1px solid red;
 9 |     height: calc(var(--row-height) * var(--visible-rows));
10 |     overflow: auto;
11 |     width: 10rem;
12 |   }
13 | 
14 |   .row {
15 |     line-height: var(--row-height);
16 |   }
17 | </style>
18 | 
19 | <div class="container">
20 |   <div class="row">Row one</div>
21 |   <div class="row">Row two</div>
22 |   <div class="row">Row three</div>
23 |   <div class="row">Row four</div>
24 |   <div class="row">Row five</div>
25 |   <div class="row">Row six</div>
26 | </div>
27 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-2.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   #div1 {
 3 |     background-color: red;
 4 |   }
 5 | 
 6 |   #div2 {
 7 |     background-color: green;
 8 |   }
 9 | 
10 |   div {
11 |     color: white;
12 |     padding: 1rem;
13 |     margin: 1rem;
14 |     border: 2px solid black;
15 |   }
16 | </style>
17 | 
18 | <div id="div1">Hello world!</div>
19 | <div id="div2">Hello world!</div>
20 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-3.css:
--------------------------------------------------------------------------------
1 | .box {
2 |   width: 100px;
3 |   height: 100px;
4 |   padding: 10px;
5 |   border: 2px solid red;
6 | }
7 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-4.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     width: 350px;
 4 |     border: 2px solid black;
 5 |   }
 6 | 
 7 |   .box1 {
 8 |     background-color: skyblue;
 9 |   }
10 | 
11 |   .box2 {
12 |     background-color: lime;
13 |   }
14 |   
15 | </style>
16 | 
17 | <div class="container">
18 |   <div class="box1">Hello</div>
19 |   <div class="box2">World</div>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-5.html:
--------------------------------------------------------------------------------
1 | <style>
2 |   .highlight {
3 |     background-color: yellow;
4 |   }
5 | </style>
6 | 
7 | Hello <span class="highlight">world</span>, I am demonstrating an inline element.
8 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-6.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     width: 300px;
 4 |   }
 5 | 
 6 |   .highlight {
 7 |     background-color: yellow;
 8 |     padding-left: 50px;
 9 |     padding-right: 50px;
10 |   }
11 | </style>
12 | 
13 | <div class="container">
14 |   Hello <span class="highlight">world</span>, I am demonstrating an inline element.
15 | </div>
16 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-7.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     width: 300px;
 4 |     margin-top: 70px;
 5 |   }
 6 | 
 7 |   .highlight {
 8 |     background-color: yellow;
 9 |     padding-left: 50px;
10 |     padding-right: 50px;
11 |     padding-top: 50px;
12 |     padding-bottom: 50px;
13 |   }
14 | </style>
15 | 
16 | <div class="container">
17 |   Hello <span class="highlight">world</span>, I am demonstrating an inline element.
18 | </div>
19 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-8.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     width: 300px;
 4 |   }
 5 | 
 6 |   .highlight {
 7 |     background-color: yellow;
 8 |     display: inline-block;
 9 |     width: 100px;
10 |     padding-left: 50px;
11 |     padding-right: 50px;
12 |     padding-top: 50px;
13 |     padding-bottom: 50px;
14 |   }
15 | </style>
16 | 
17 | <div class="container">
18 |   Hello <span class="highlight">world</span>, I am demonstrating an inline-block element.
19 | </div>
20 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/Listing_3-9.css:
--------------------------------------------------------------------------------
1 | .header {
2 |   font-size: 24px;
3 |   padding: 0.5em;
4 | }
5 | 


--------------------------------------------------------------------------------
/03 - Basic CSS Concepts/desktop.ini:
--------------------------------------------------------------------------------
1 | [.ShellClassInfo]

2 | ConfirmFileOp=0

3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21

4 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-1.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border-color: red;
 4 |     border-style: solid;
 5 |     border-width: 1px;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="container">Hello world!</div>
10 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-10.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .shadow {
 3 |     box-shadow: 5px 5px 10px black;
 4 |     background: #CCCCCC;
 5 |     width: 10rem;
 6 |     height: 5rem;
 7 |   }
 8 | </style>
 9 | 
10 | <div class="shadow"></div>
11 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-11.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .shadow {
 3 |     box-shadow: 5px 5px 0 5px black;
 4 |     background: #CCCCCC;
 5 |     width: 10rem;
 6 |     height: 5rem;
 7 |   }
 8 | </style>
 9 | 
10 | <div class="shadow"></div>
11 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-12.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .shadow {
 3 |     box-shadow: 5px 5px 10px 5px black;
 4 |     background: #CCCCCC;
 5 |     width: 10rem;
 6 |     height: 5rem;
 7 |   }
 8 | </style>
 9 | 
10 | <div class="shadow"></div>
11 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-13.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .shadow {
 3 |     box-shadow: 0 0 5px 5px black;
 4 |     background: #CCCCCC;
 5 |     width: 10rem;
 6 |     height: 5rem;
 7 |   }
 8 | </style>
 9 | 
10 | <div class="shadow"></div>
11 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-14.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .shadow {
 3 |     box-shadow: 0 0 25px black inset;
 4 |     background: #CCCCCC;
 5 |     width: 10rem;
 6 |     height: 5rem;
 7 |   }
 8 | </style>
 9 | 
10 | <div class="shadow"></div>
11 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-15.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .shadow {
 3 |     box-shadow: 0 0 10px 0 black, 0 0 25px red inset;
 4 |     background: #CCCCCC;
 5 |     width: 10rem;
 6 |     height: 5rem;
 7 |   }
 8 | </style>
 9 | 
10 | <div class="shadow"></div>
11 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-16.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .outer {
 3 |     background: red;
 4 |     height: 10rem;
 5 |     width: 10rem;
 6 |   }
 7 | 
 8 |   .inner {
 9 |     background: blue;
10 |     color: white;
11 |     height: 8rem;
12 |     width: 8rem;
13 |     opacity: 0.5;
14 |   }
15 | </style>
16 | 
17 | <div class="outer">
18 |   <div class="inner">
19 |     Hello World!
20 |   </div>
21 | </div>
22 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-2.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border-color: red;
 4 |     border-style: solid;
 5 |     border-width: 1px 5px;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="container">Hello world!</div>
10 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-3.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border-color: red;
 4 |     border-style: solid;
 5 |     border-width: 1px 5px 10px;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="container">Hello world!</div>
10 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-4.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border-color: red;
 4 |     border-style: solid;
 5 |     border-width: 1px 5px 10px 20px;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="container">Hello world!</div>
10 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-5.css:
--------------------------------------------------------------------------------
1 | .container {
2 |   border: 5px solid red;
3 | }
4 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-6.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .rounded-corners {
 3 |     background-color: red;
 4 |     border-radius: 10px;
 5 |     height: 5rem;
 6 |     width: 5rem;
 7 |   }
 8 | </style>
 9 | 
10 | <div class="rounded-corners"></div>
11 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-7.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .rounded-corners {
 3 |     background-color: red;
 4 |     border-radius: 20px / 10px;
 5 |     height: 5rem;
 6 |     width: 5rem;
 7 |   }
 8 | </style>
 9 | 
10 | <div class="rounded-corners"></div>
11 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-8.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .rounded-corners {
 3 |     background-color: red;
 4 |     border-bottom-right-radius: 10px 20px;
 5 |     border-bottom-left-radius: 5px;
 6 |     border-top-left-radius: 20px 10px;
 7 |     border-top-right-radius: 50%;
 8 |     height: 5rem;
 9 |     width: 5rem;
10 |   }
11 | </style>
12 | 
13 | <div class="rounded-corners"></div>
14 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/Listing_4-9.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .shadow {
 3 |     box-shadow: 5px 5px black;
 4 |     background: #CCCCCC;
 5 |     width: 10rem;
 6 |     height: 5rem;
 7 |   }
 8 | </style>
 9 | 
10 | <div class="shadow"></div>
11 | 


--------------------------------------------------------------------------------
/04 - Basic Styling/desktop.ini:
--------------------------------------------------------------------------------
1 | [.ShellClassInfo]

2 | ConfirmFileOp=0

3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21

4 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-1.html:
--------------------------------------------------------------------------------
1 | <style>
2 |   .red-background {
3 |     background-color: #FF0000;
4 |   }
5 | </style>
6 | 
7 | <div class="red-background">Hello world!</div>
8 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-10.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .header-image {
 3 |     background-image: url('mountains.jpg');
 4 |     background-size: cover;
 5 |     height: 15rem;
 6 |     border: 3px solid #000000;
 7 |   }
 8 | </style>
 9 | 
10 | <div class="header-image">
11 |   <h1>Welcome to my site</h1>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-11.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .header-image {
 3 |     background-image: url('mountains.jpg');
 4 |     background-size: cover;
 5 |     background-position: center;
 6 |     height: 15rem;
 7 |     border: 3px solid #000000;
 8 |   }
 9 | </style>
10 | 
11 | <div class="header-image">
12 |   <h1>Welcome to my site</h1>
13 | </div>
14 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-12.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .header-image {
 3 |     background-image: url('mountains.jpg');
 4 |     background-size: 100px 300px;
 5 |     height: 15rem;
 6 |     border: 3px solid #000000;
 7 |   }
 8 | </style>
 9 | 
10 | <div class="header-image">
11 |   <h1>Welcome to my site</h1>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-13.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .header-image {
 3 |     background-image: url('mountains.jpg');
 4 |     background-size: cover;
 5 |     background-position: center;
 6 |     height: 15rem;
 7 |     border: 5px solid #000000;
 8 |     padding: 2rem;
 9 |   }
10 | </style>
11 | 
12 | <div class="header-image">
13 |   <h1>Welcome to my site</h1>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-14.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .header-image {
 3 |     background: url('mountains.jpg') center / cover;
 4 |     height: 15rem;
 5 |     border: 3px solid #000000;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="header-image">
10 |   <h1>Welcome to my site</h1>
11 | </div>
12 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-15.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .gradient {
 3 |     background-image: linear-gradient(red, blue);
 4 |     width: 10rem;
 5 |     height: 5rem;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="gradient"></div>
10 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-16.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .gradient {
 3 |     background-image: linear-gradient(red, blue, green);
 4 |     width: 10rem;
 5 |     height: 5rem;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="gradient"></div>
10 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-17.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .gradient {
 3 |     background-image: linear-gradient(
 4 |       transparent, 
 5 |       blue, 
 6 |       transparent
 7 |     );
 8 |     width: 10rem;
 9 |     height: 5rem;
10 |   }
11 | </style>
12 | 
13 | <div class="gradient"></div>
14 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-18.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .gradient {
 3 |     background-image: linear-gradient(
 4 |       to right,
 5 |       red,
 6 |       blue
 7 |     );
 8 |     width: 10rem;
 9 |     height: 5rem;
10 |   }
11 | </style>
12 | 
13 | <div class="gradient"></div>
14 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-19.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .gradient {
 3 |     background-image: linear-gradient(
 4 |       45deg,
 5 |       red,
 6 |       blue
 7 |     );
 8 |     width: 10rem;
 9 |     height: 5rem;
10 |   }
11 | </style>
12 | 
13 | <div class="gradient"></div>
14 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-2.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .background-image {
 3 |     background-image: url('tiles.jpg');
 4 |     height: 5rem;
 5 |     width: 10rem;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="background-image"></div>
10 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-20.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .gradient {
 3 |     background-image: linear-gradient(
 4 |       to right,
 5 |       red 0%,
 6 |       blue 25%
 7 |     );
 8 |     width: 10rem;
 9 |     height: 5rem;
10 |   }
11 | </style>
12 | 
13 | <div class="gradient"></div>
14 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-21.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .gradient {
 3 |     background-image: linear-gradient(
 4 |       to right,
 5 |       red 0%,
 6 |       green 25%,
 7 |       green 75%,
 8 |       blue 100%
 9 |     );
10 |     width: 10rem;
11 |     height: 5rem;
12 |   }
13 | </style>
14 | 
15 | <div class="gradient"></div>
16 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-22.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .gradient {
 3 |     background-image: radial-gradient(red, blue);
 4 |     width: 10rem;
 5 |     height: 5rem;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="gradient"></div>
10 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-23.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .gradient {
 3 |     background-image: radial-gradient(
 4 |       circle,
 5 |       red,
 6 |       blue
 7 |     );
 8 |     width: 10rem;
 9 |     height: 5rem;
10 |   }
11 | </style>
12 | 
13 | <div class="gradient"></div>
14 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-24.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .gradient {
 3 |     background-image: radial-gradient(
 4 |       circle at 25%,
 5 |       red,
 6 |       blue
 7 |     );
 8 |     width: 10rem;
 9 |     height: 5rem;
10 |   }
11 | </style>
12 | 
13 | <div class="gradient"></div>
14 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-25.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .gradient {
 3 |     background-image: radial-gradient(
 4 |       circle at top left,
 5 |       red,
 6 |       blue
 7 |     );
 8 |     width: 10rem;
 9 |     height: 5rem;
10 |   }
11 | </style>
12 | 
13 | <div class="gradient"></div>
14 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-26.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .gradient {
 3 |     background-image: radial-gradient(
 4 |       red,
 5 |       blue,
 6 |       green 75%
 7 |     );
 8 |     width: 10rem;
 9 |     height: 5rem;
10 |   }
11 | </style>
12 | 
13 | <div class="gradient"></div>
14 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-27.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .gradient {
 3 |     background-image: radial-gradient(
 4 |       ellipse at 25%,
 5 |       red,transparent
 6 |     ), radial-gradient(
 7 |       ellipse at 75%,
 8 |       blue,
 9 |       transparent
10 |     );
11 |     width: 10rem;
12 |     height: 5rem;
13 |   }
14 | </style>
15 | 
16 | <div class="gradient"></div>
17 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-28.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .header-image {
 3 |     background-image:
 4 |       radial-gradient(
 5 |         ellipse at top left,
 6 |         white 25%,
 7 |         transparent
 8 |       ),
 9 |       url('mountains.jpg');
10 |     background-size: cover;
11 |     background-position: center;
12 |     height: 15rem;
13 |   }
14 | </style>
15 | 
16 | <div class="header-image"></div>
17 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-3.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .background-image {
 3 |     background-image: url('tiles.jpg');
 4 |     height: 50rem;
 5 |     width: 100rem;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="background-image"></div>
10 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-4.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .background-image {
 3 |     background-color: #999999;
 4 |     background-image: url('tiles.jpg');
 5 |     background-repeat: no-repeat;
 6 |     height: 50rem;
 7 |     width: 100rem;
 8 |   }
 9 | </style>
10 | 
11 | <div class="background-image"></div>
12 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-5.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .background-image {
 3 |     background-color: #999999;
 4 |     background-image: url('tiles.jpg');
 5 |     background-repeat: repeat-y;
 6 |     height: 50rem;
 7 |     width: 100rem;
 8 |   }
 9 | </style>
10 | 
11 | <div class="background-image"></div>
12 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-6.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .background-image {
 3 |     background-color: #999999;
 4 |     background-image: url('tiles.jpg');
 5 |     background-repeat: no-repeat;
 6 |     background-position: center;
 7 |     height: 50rem;
 8 |     width: 100rem;
 9 |   }
10 | </style>
11 | 
12 | <div class="background-image"></div>
13 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-7.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .background-image {
 3 |     background-color: #999999;
 4 |     background-image: url('tiles.jpg');
 5 |     background-repeat: no-repeat;
 6 |     background-position: 50px center;
 7 |     height: 50rem;
 8 |     width: 100rem;
 9 |   }
10 | </style>
11 | 
12 | <div class="background-image"></div>
13 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-8.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .header-image {
 3 |     background-image: url('mountains.jpg');
 4 |     height: 15rem;
 5 |     border: 3px solid #000000;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="header-image">
10 |   <h1>Welcome to my site</h1>
11 | </div>
12 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/Listing_5-9.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .header-image {
 3 |     background-image: url('mountains.jpg');
 4 |     background-repeat: no-repeat;
 5 |     height: 15rem;
 6 |     border: 3px solid #000000;
 7 |   }
 8 | </style>
 9 | 
10 | <div class="header-image">
11 |   <h1>Welcome to my site</h1>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/desktop.ini:
--------------------------------------------------------------------------------
1 | [.ShellClassInfo]

2 | ConfirmFileOp=0

3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21

4 | 


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/mountains.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/modern-css/cea922754a117becdfcff9e15002909760d7484b/05 - Backgrounds and Gradients/mountains.jpg


--------------------------------------------------------------------------------
/05 - Backgrounds and Gradients/tiles.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/modern-css/cea922754a117becdfcff9e15002909760d7484b/05 - Backgrounds and Gradients/tiles.jpg


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-1.css:
--------------------------------------------------------------------------------
1 | .hello {
2 |   font-family:
3 |     Georgia, 
4 |     'Times New Roman',
5 |     serif;
6 | }
7 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-10.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .my-text {
 3 |     border: 1px solid red;
 4 |     width: 10rem;
 5 |   }
 6 | </style>
 7 | 
 8 | <div class="my-text">
 9 |   Here is       some text
10 |      with
11 |         whitespace.
12 | </div>
13 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-11.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .my-text {
 3 |     border: 1px solid red;
 4 |     width: 10rem;
 5 |     white-space: pre;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="my-text">
10 |   Here is       some text
11 |      with
12 |         whitespace.
13 | </div>
14 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-12.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .my-text {
 3 |     border: 1px solid red;
 4 |     overflow: hidden;
 5 |     text-overflow: ellipsis;
 6 |     white-space: nowrap;
 7 |     width: 10rem;
 8 |   }
 9 | </style>
10 | 
11 | <div class="my-text">Here is a really really long string.</div>
12 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-13.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .hello {
 3 |     border: 2px solid red;
 4 |     width: 30rem;
 5 |     text-align: center;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="hello">Hello world!</div>
10 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-14.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .hello {
 3 |     border: 2px solid red;
 4 |     width: 15rem;
 5 |     height: 5rem;
 6 |     line-height: 5rem;
 7 |     font-size: 2rem;
 8 |     text-align: center;
 9 |   }
10 | </style>
11 | 
12 | <div class="hello">Hello world!</div>
13 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-15.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border: 2px dashed blue;
 4 |     width: 20rem;
 5 |     text-align: center;
 6 |   }
 7 | 
 8 |   .hello {
 9 |     border: 2px solid red;
10 |     font-size: 2rem;
11 |   }
12 | 
13 |   .world {
14 |     border: 2px solid red;
15 |     font-size: 4rem;
16 |   }
17 | </style>
18 | 
19 | <div class="container">
20 |   <span class="hello">Hello</span>
21 |   <span class="world">World!</span>
22 | </div>
23 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-16.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border: 2px dashed blue;
 4 |     width: 20rem;
 5 |     text-align: center;
 6 |   }
 7 | 
 8 |   .hello {
 9 |     border: 2px solid red;
10 |     font-size: 2rem;
11 |     vertical-align: middle;
12 |   }
13 | 
14 |   .world {
15 |     border: 2px solid red;
16 |     font-size: 4rem;
17 |     vertical-align: middle;
18 |   }
19 | </style>
20 | 
21 | <div class="container">
22 |   <span class="hello">Hello</span>
23 |   <span class="world">World!</span>
24 | </div>
25 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-17.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: 'SomeWebFont';
 3 |   src: 
 4 |     url('/some-font.woff2') format('woff2'),
 5 |     url('/some-font.woff') format('woff');
 6 | }
 7 | 
 8 | body {
 9 |   font-family: SomeWebFont, Arial, sans-serif;
10 | }
11 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-18.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: 'SomeWebFont';
 3 |   src: url('/some-font.woff2') format('woff2');
 4 |   font-weight: 400;
 5 | }
 6 | 
 7 | @font-face {
 8 |   font-family: 'SomeWebFont';
 9 |   src: url('/some-font-bold.woff2') format('woff2');
10 |   font-weight: 700;
11 | }
12 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-19.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     font-size: 2rem;
 4 |     font-family: Arial, sans-serif;
 5 |     text-shadow: 2px 2px 0px red;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="container">Hello World!</div>
10 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-2.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .parent {
 3 |     font-size: 1.5em;
 4 |   }
 5 | 
 6 |   .child {
 7 |     font-size: 1.5em;
 8 |   }
 9 | </style>
10 | 
11 | <div class="parent">
12 |   I'm the parent
13 |   <div class="child">
14 |     I'm the child
15 |   </div>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-20.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     font-size: 2rem;
 4 |     font-family: Arial, sans-serif;
 5 |     text-shadow: 0px 0px 5px red;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="container">Hello World!</div>
10 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-3.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   div {
 3 |     border: 3px solid currentColor;
 4 |   }
 5 | 
 6 |   .one {
 7 |     color: red;
 8 |   }
 9 | 
10 |   .two {
11 |     color: blue;
12 |   }
13 | </style>
14 | 
15 | <div class="one">One</div>
16 | <div class="two">Two</div>
17 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-4.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .underline {
 3 |     text-decoration: underline;
 4 |   }
 5 | 
 6 |   .strikethrough {
 7 |     text-decoration: line-through;
 8 |   }
 9 | 
10 |   .none {
11 |     text-decoration: none;
12 |   }
13 | </style>
14 | 
15 | <div class="underline">Underlined text</div>
16 | <div class="strikethrough">Strikethrough text</div>
17 | <div class="none">No text decoration</div>
18 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-5.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   div {
 3 |     font-size: 2rem;
 4 |   }
 5 | 
 6 |   .solid {
 7 |     text-decoration: underline solid blue;
 8 |   }
 9 | 
10 |   .double {
11 |     text-decoration: underline double green;
12 |   }
13 | 
14 |   .dotted {
15 |     text-decoration: underline dotted;
16 |   }
17 | 
18 |   .dashed {
19 |     text-decoration: underline dashed purple;
20 |   }
21 | 
22 |   .wavy {
23 |     text-decoration: underline wavy red;
24 |   }
25 | </style>
26 | 
27 | <div class="solid">Solid blue underline</div>
28 | <div class="double">Double green underline</div>
29 | <div class="dotted">Dotted black underline</div>
30 | <div class="dashed">Dashed purple underline</div>
31 | <div class="wavy">Wavy red underline</div>
32 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-6.html:
--------------------------------------------------------------------------------
1 | <style>
2 |   .hello {
3 |     text-transform: uppercase;
4 |   }
5 | </style>
6 | 
7 | <div class="hello">Hello world!</div>
8 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-7.html:
--------------------------------------------------------------------------------
1 | <style>
2 |   .hello {
3 |     letter-spacing: 5px;
4 |   }
5 | </style>
6 | 
7 | <div class="hello">Hello world!</div>
8 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-8.html:
--------------------------------------------------------------------------------
1 | <style>
2 |   .hello {
3 |     font-variant: small-caps;
4 |   }
5 | </style>
6 | 
7 | <div class="hello">Hello world!</div>
8 | 


--------------------------------------------------------------------------------
/06 - Text Styling/Listing_6-9.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .my-text {
 3 |     border: 1px solid red;
 4 |     text-indent: 50px;
 5 |     width: 10rem;
 6 |   }
 7 | </style>
 8 | 
 9 | <div class="my-text">Here is a brief paragraph that has enough content to wrap a few lines.</div>
10 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-1.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border: 1px solid red;
 4 |     width: 200px;
 5 |   }
 6 | 
 7 |   .inner {
 8 |     padding: 25%;
 9 |   }
10 | </style>
11 | 
12 | <div class="container">
13 |   <div class="inner">Hello world!</div>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-10.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .outer {
 3 |     background-color: red;
 4 |     height: 10rem;
 5 |     width: 10rem;
 6 |     position: relative;
 7 |   }
 8 | 
 9 |   .inner {
10 |     background-color: blue;
11 |     height: 7rem;
12 |     width: 7rem;
13 |   }
14 | 
15 |   .core {
16 |     background-color: green;
17 |     position: absolute;
18 |     right: 0;
19 |     height: 4rem;
20 |     width: 4rem;
21 |   }
22 | </style>
23 | 
24 | <div class="outer">
25 |   <div class="inner">
26 |     <div class="core"></div>
27 |   </div>
28 | </div>
29 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-11.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .outer {
 3 |     background-color: red;
 4 |     height: 10rem;
 5 |     width: 10rem;
 6 |     position: relative;
 7 |   }
 8 | 
 9 |   .inner {
10 |     background-color: blue;
11 |     position: relative;
12 |     height: 7rem;
13 |     width: 7rem;
14 |   }
15 | 
16 |   .core {
17 |     background-color: green;
18 |     position: absolute;
19 |     right: 0;
20 |     height: 4rem;
21 |     width: 4rem;
22 |   }
23 | </style>
24 | 
25 | <div class="outer">
26 |   <div class="inner">
27 |     <div class="core"></div>
28 |   </div>
29 | </div>
30 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-12.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .header {
 3 |     background-color: red;
 4 |     color: white;
 5 |     height: 1rem;
 6 |     left: 0;
 7 |     padding: 1rem;
 8 |     position: fixed;
 9 |     top: 0;
10 |     width: 100%;
11 |   }
12 | 
13 |   .body {
14 |     margin-top: 3.5rem;
15 |   }
16 | 
17 |   .overlay {
18 |     background-color: rgba(0, 0, 0, 0.5);
19 |     height: 100%;
20 |     left: 0;
21 |     position: absolute;
22 |     top: 0;
23 |     width: 100%;
24 |   }
25 | </style>
26 | 
27 | <div class="overlay"></div>
28 | <div class="container">
29 |   <div class="header">Header</div>
30 |   <div class="body">
31 |     Some other page content
32 |   </div>
33 | </div>
34 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-13.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .header {
 3 |     background-color: red;
 4 |     color: white;
 5 |     height: 1rem;
 6 |     left: 0;
 7 |     padding: 1rem;
 8 |     position: fixed;
 9 |     top: 0;
10 |     width: 100%;
11 |     z-index: 100;
12 |   }
13 | 
14 |   .body {
15 |     margin-top: 3.5rem;
16 |   }
17 | 
18 |   .overlay {
19 |     background-color: rgba(0, 0, 0, 0.5);
20 |     height: 100%;
21 |     left: 0;
22 |     position: absolute;
23 |     top: 0;
24 |     width: 100%;
25 |     z-index: 200;
26 |   }
27 | </style>
28 | 
29 | <div class="overlay"></div>
30 | <div class="container">
31 |   <div class="header">Header</div>
32 |   <div class="body">
33 |     Some other page content
34 |   </div>
35 | </div>
36 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-14.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container-1 {
 3 |     background-color: red;
 4 |     width: 10rem;
 5 |     height: 10rem;
 6 |     position: relative;
 7 |     z-index: 100;
 8 |   }
 9 | 
10 |   .container-2 {
11 |     background-color: blue;
12 |     width: 10rem;
13 |     height: 10rem;
14 |     position: relative;
15 |     z-index: 100;
16 |   }
17 | 
18 |   .inner-1 {
19 |     background-color: green;
20 |     width: 5rem;
21 |     height: 5rem;
22 |     position: relative;
23 |     top: 7.5rem;
24 |   }
25 | 
26 |   .inner-2 {
27 |     background-color: orange;
28 |     width: 5rem;
29 |     height: 5rem;
30 |     position: relative;
31 |     top: -2.5rem;
32 |   }
33 | </style>
34 | 
35 | <div class="container-1">
36 |   <div class="inner-1"></div>
37 | </div>
38 | <div class="container-2">
39 |   <div class="inner-2"></div>
40 | </div>
41 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-15.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     width: 10rem;
 4 |   }
 5 | 
 6 |   .floating {
 7 |     background-color: red;
 8 |     float: right;
 9 |     height: 3rem;
10 |     width: 3rem;
11 |   }
12 | </style>
13 | 
14 | <div class="container">
15 |   <div class="floating"></div>
16 |   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sapien
17 |   dolor. Nunc condimentum sem nec commodo sollicitudin.
18 | </div>
19 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-16.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     width: 10rem;
 4 |   }
 5 | 
 6 |   .floating,
 7 |   .floating-2 {
 8 |     float: right;
 9 |     height: 3rem;
10 |     width: 3rem;
11 |   }
12 | 
13 |   .floating {
14 |     background-color: red;
15 |   }
16 | 
17 |   .floating-2 {
18 |     background-color: blue;
19 |   }
20 | </style>
21 | 
22 | <div class="container">
23 |   <div class="floating"></div>
24 |   <div class="floating-2"></div>
25 |   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sapien
26 |   dolor. Nunc condimentum sem nec commodo sollicitudin.
27 | </div>
28 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-17.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     width: 10rem;
 4 |   }
 5 | 
 6 |   .floating {
 7 |     background-color: red;
 8 |     float: right;
 9 |     height: 3rem;
10 |     width: 3rem;
11 |   }
12 | 
13 |   .floating-2 {
14 |     background-color: blue;
15 |     float: left;
16 |     height: 5rem;
17 |     width: 3rem;
18 |   }
19 | 
20 |   .content {
21 |     clear: right;
22 |   }
23 | </style>
24 | 
25 | <div class="container">
26 |   <div class="floating"></div>
27 |   <div class="floating-2"></div>
28 |   <div class="content">
29 |     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sapien
30 |     dolor. Nunc condimentum sem nec commodo sollicitudin.
31 |   </div>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-2.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border: 5px solid red;
 4 |     width: 10rem;
 5 |   }
 6 | 
 7 |   .inner {
 8 |     border: 5px solid green;
 9 |   }
10 | </style>
11 | 
12 | <div class="container">
13 |   <div class="inner">Hello world!</div>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-3.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border: 5px solid red;
 4 |     width: 10rem;
 5 |   }
 6 | 
 7 |   .inner {
 8 |     border: 5px solid green;
 9 |     margin: 1rem;
10 |   }
11 | </style>
12 | 
13 | <div class="container">
14 |   <div class="inner">Hello world!</div>
15 | </div>
16 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-4.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     background-color: red;
 4 |     height: 5rem;
 5 |     padding: 1rem;
 6 |     width: 20rem;
 7 |   }
 8 | 
 9 |   .inner {
10 |     background-color: blue;
11 |     height: 3rem;
12 |     margin: auto;
13 |     width: 5rem;
14 |   }
15 | </style>
16 | 
17 | <div class="container">
18 |   <div class="inner"></div>
19 | </div>
20 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-5.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     background: red;
 4 |     margin: 1rem;
 5 |   }
 6 | 
 7 |   .inner {
 8 |     background: blue;
 9 |     color: white;
10 |     margin: 1rem;
11 |   }
12 | </style>
13 | 
14 | <div class="container">
15 |   <div class="inner">Inner</div>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-6.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     background: red;
 4 |     margin: 1rem;
 5 |     padding: 1rem;
 6 |   }
 7 | 
 8 |   .inner {
 9 |     background: blue;
10 |     color: white;
11 |     margin: 1rem;
12 |   }
13 | </style>
14 | 
15 | <div class="container">
16 |   <div class="inner">Inner</div>
17 | </div>
18 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-7.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .block {
 3 |     background-color: red;
 4 |     height: 3rem;
 5 |     width: 3rem;
 6 |   }
 7 | 
 8 |   .green {
 9 |     background-color: green;
10 |   }
11 | 
12 |   .relative {
13 |     background-color: blue;
14 |     position: relative;
15 |     left: 10px;
16 |     top: 10px;
17 |   }
18 | </style>
19 | 
20 | <div class="block"></div>
21 | <div class="block relative"></div>
22 | <div class="block green"></div>
23 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-8.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .outer {
 3 |     background-color: red;
 4 |     height: 10rem;
 5 |     width: 10rem;
 6 |   }
 7 | 
 8 |   .inner {
 9 |     background-color: blue;
10 |     height: 7rem;
11 |     width: 7rem;
12 |   }
13 | 
14 |   .core {
15 |     background-color: green;
16 |     height: 4rem;
17 |     width: 4rem;
18 |   }
19 | </style>
20 | 
21 | <div class="outer">
22 |   <div class="inner">
23 |     <div class="core"></div>
24 |   </div>
25 | </div>
26 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/Listing_7-9.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .outer {
 3 |     background-color: red;
 4 |     height: 10rem;
 5 |     width: 10rem;
 6 |   }
 7 | 
 8 |   .inner {
 9 |     background-color: blue;
10 |     height: 7rem;
11 |     width: 7rem;
12 |   }
13 | 
14 |   .core {
15 |     background-color: green;
16 |     position: absolute;
17 |     right: 0;
18 |     height: 4rem;
19 |     width: 4rem;
20 |   }
21 | </style>
22 | 
23 | <div class="outer">
24 |   <div class="inner">
25 |     <div class="core"></div>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/07 - Layout and Positioning/desktop.ini:
--------------------------------------------------------------------------------
1 | [.ShellClassInfo]

2 | ConfirmFileOp=0

3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21

4 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-1.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .rotate {
 3 |     width: 10rem;
 4 |     height: 5rem;
 5 |     background: skyblue;
 6 |     margin: 5rem;
 7 |     transform: rotate(45deg);
 8 |   }
 9 | </style>
10 | 
11 | <div class="rotate">Hello World!</div>
12 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-10.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border: 1px solid black;
 4 |     width: 15rem;
 5 |     height: 15rem;
 6 |     margin: 5rem;
 7 |   }
 8 | 
 9 |   .box {
10 |     transform: rotate(45deg);
11 |     background: skyblue;
12 |     width: 10rem;
13 |     height: 10rem;
14 |   }
15 | </style>
16 | 
17 | <div class="container">
18 |   <div class="box"></div>
19 | </div>
20 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-11.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .heart {
 3 |     border: 5px solid red;
 4 |     transform: rotate(45deg);
 5 |     width: 10rem;
 6 |     height: 10rem;
 7 |     margin: 10rem auto;
 8 |   }
 9 | </style>
10 | 
11 | <div class="heart"></div>


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-12.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .heart {
 3 |     border: 5px solid red;
 4 |     transform: rotate(45deg);
 5 |     width: 10rem;
 6 |     height: 10rem;
 7 |     margin: 10rem auto;
 8 |   }
 9 | 
10 |   .heart::after,
11 |   .heart::before {
12 |     border-radius: 50%;
13 |     content: '';
14 |     width: 10rem;
15 |     height: 10rem;
16 |     position: absolute;
17 |     background: red;
18 |   }
19 | </style>
20 | 
21 | <div class="heart"></div>
22 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-13.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .heart {
 3 |     background: red;
 4 |     transform: rotate(45deg);
 5 |     width: 10rem;
 6 |     height: 10rem;
 7 |     margin: 10rem auto;
 8 |   }
 9 | 
10 |   .heart::after,
11 |   .heart::before {
12 |     border-radius: 50%;
13 |     content: '';
14 |     width: 10rem;
15 |     height: 10rem;
16 |     position: absolute;
17 |     background: red;
18 |   }
19 | 
20 |   .heart::before {
21 |     transform: translateX(-5rem);
22 |   }
23 | 
24 |   .heart::after {
25 |     transform: translateY(-5rem);
26 |   }
27 | </style>
28 | 
29 | <div class="heart"></div>
30 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-14.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     width: 10rem;
 4 |     height: 10rem;
 5 |     perspective: 500px;
 6 |     margin: 5rem;
 7 |   }
 8 | 
 9 |   .cube {
10 |     position: relative;
11 |     width: 10rem;
12 |     height: 10rem;
13 |     transform-style: preserve-3d;
14 |     transform: rotate3d(1, 1, 0, 45deg);
15 |   }
16 | 
17 |   .face {
18 |     width: 10rem;
19 |     height: 10rem;
20 |     background: skyblue;
21 |     border: 2px solid black;
22 |     position: absolute;
23 |     opacity: 0.5;
24 |     text-align: center;
25 |   }
26 | </style>
27 | 
28 | <div class="container">
29 |   <div class="cube">
30 |     <div class="face top">Top</div>
31 |     <div class="face bottom">Bottom</div>
32 |     <div class="face left">Left</div>
33 |     <div class="face right">Right</div>
34 |     <div class="face front">Front</div>
35 |     <div class="face back">Back</div>
36 |   </div>
37 | </div>
38 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-15.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     width: 10rem;
 4 |     height: 10rem;
 5 |     perspective: 500px;
 6 |     margin: 5rem;
 7 |   }
 8 | 
 9 |   .cube {
10 |     position: relative;
11 |     width: 10rem;
12 |     height: 10rem;
13 |     transform-style: preserve-3d;
14 |     transform: rotate3d(1, 1, 0, 45deg);
15 |   }
16 | 
17 |   .face {
18 |     width: 10rem;
19 |     height: 10rem;
20 |     background: skyblue;
21 |     border: 2px solid black;
22 |     position: absolute;
23 |     opacity: 0.5;
24 |     text-align: center;
25 |   }
26 | 
27 |   .back { transform: rotateY(180deg); }
28 |   .left { transform: rotateY(-90deg); }
29 |   .right { transform: rotateY(90deg); }
30 |   .top { transform: rotateX(90deg); }
31 |   .bottom { transform: rotateX(-90deg); }
32 | 
33 | </style>
34 | 
35 | <div class="container">
36 |   <div class="cube">
37 |     <div class="face top">Top</div>
38 |     <div class="face bottom">Bottom</div>
39 |     <div class="face left">Left</div>
40 |     <div class="face right">Right</div>
41 |     <div class="face front">Front</div>
42 |     <div class="face back">Back</div>
43 |   </div>
44 | </div>
45 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-16.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     width: 10rem;
 4 |     height: 10rem;
 5 |     perspective: 500px;
 6 |     margin: 5rem;
 7 |   }
 8 | 
 9 |   .cube {
10 |     position: relative;
11 |     width: 10rem;
12 |     height: 10rem;
13 |     transform-style: preserve-3d;
14 |     transform: rotate3d(1, 1, 0, 45deg);
15 |   }
16 | 
17 |   .face {
18 |     width: 10rem;
19 |     height: 10rem;
20 |     background: skyblue;
21 |     border: 2px solid black;
22 |     position: absolute;
23 |     opacity: 0.5;
24 |     text-align: center;
25 |   }
26 | 
27 |   .front {
28 |     transform: translateZ(5rem);
29 |   }
30 | 
31 |   .back {
32 |     transform: translateZ(-5rem) rotateY(180deg);
33 |   }
34 |   .left {
35 |     transform: translateX(-5rem) rotateY(-90deg);
36 |   }
37 |   .right {
38 |     transform: translateX(5rem) rotateY(90deg);
39 |   }
40 |   .top {
41 |     transform: translateY(-5rem) rotateX(90deg);
42 |   }
43 |   .bottom {
44 |     transform: translateY(5rem) rotateX(-90deg);
45 |   }
46 | </style>
47 | 
48 | <div class="container">
49 |   <div class="cube">
50 |     <div class="face top">Top</div>
51 |     <div class="face bottom">Bottom</div>
52 |     <div class="face left">Left</div>
53 |     <div class="face right">Right</div>
54 |     <div class="face front">Front</div>
55 |     <div class="face back">Back</div>
56 |   </div>
57 | </div>
58 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-2.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .rotate {
 3 |     width: 10rem;
 4 |     height: 5rem;
 5 |     background: skyblue;
 6 |     margin: 5rem;
 7 |     transform: perspective(200px)
 8 |                rotateX(45deg);
 9 |   }
10 | </style>
11 | 
12 | <div class="rotate">Hello World!</div>
13 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-3.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .rotate {
 3 |     width: 10rem;
 4 |     height: 5rem;
 5 |     background: skyblue;
 6 |     margin: 5rem;
 7 |     transform: perspective(200px)
 8 |                rotateY(45deg);
 9 |   }
10 | </style>
11 | 
12 | <div class="rotate">Hello World!</div>
13 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-4.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .rotate {
 3 |     width: 10rem;
 4 |     height: 5rem;
 5 |     background: skyblue;
 6 |     margin: 5rem;
 7 |     transform: perspective(200px)
 8 |                rotate3d(1, 1, 0, 45deg);
 9 |   }
10 | </style>
11 | 
12 | <div class="rotate">Hello World!</div>
13 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-5.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   div {
 3 |     width: 5rem;
 4 |     height: 5rem;
 5 |     display: inline-block;
 6 |   }
 7 | 
 8 |   .one {
 9 |     background: orangered;
10 |   }
11 | 
12 |   .two {
13 |     background: rebeccapurple;
14 |     transform: translate(2rem, 2rem);
15 |   }
16 | 
17 |   .three {
18 |     background: skyblue;
19 |   }
20 | </style>
21 | 
22 | <div class="one"></div>
23 | <div class="two"></div>
24 | <div class="three"></div>
25 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-6.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   div {
 3 |     width: 5rem;
 4 |     height: 5rem;
 5 |     display: inline-block;
 6 |   }
 7 | 
 8 |   .one {
 9 |     background: orangered;
10 |   }
11 | 
12 |   .two {
13 |     background: rebeccapurple;
14 |     transform: perspective(200px)
15 |                translateZ(2rem);
16 |   }
17 | 
18 |   .three {
19 |     background: skyblue;
20 |   }
21 | </style>
22 | 
23 | <div class="one"></div>
24 | <div class="two"></div>
25 | <div class="three"></div>
26 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-7.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   div {
 3 |     width: 5rem;
 4 |     height: 5rem;
 5 |     display: inline-block;
 6 |   }
 7 | 
 8 |   .one {
 9 |     background: orangered;
10 |   }
11 | 
12 |   .two {
13 |     background: rebeccapurple;
14 |     transform: perspective(200px)
15 |                translate3d(1rem, 2rem, 3rem);
16 |   }
17 | 
18 |   .three {
19 |     background: skyblue;
20 |   }
21 | </style>
22 | 
23 | <div class="one"></div>
24 | <div class="two"></div>
25 | <div class="three"></div>
26 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-8.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .scale {
 3 |     background: skyblue;
 4 |     text-align: center;
 5 |     transform: scale(2, 5);
 6 |     margin: 5rem auto;
 7 |     width: 10rem;
 8 |   }
 9 | </style>
10 | 
11 | <div class="scale">Hello world!</div>
12 | 


--------------------------------------------------------------------------------
/08 - Transforms/Listing_8-9.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .skew {
 3 |     background: skyblue;
 4 |     transform: skew(45deg, 20deg);
 5 |     width: 10rem;
 6 |     font-size: 2rem;
 7 |     text-align: center;
 8 |     margin: 5rem;
 9 |   }
10 | </style>
11 | 
12 | <div class="skew">Hello world!</div>
13 | 


--------------------------------------------------------------------------------
/08 - Transforms/desktop.ini:
--------------------------------------------------------------------------------
1 | [.ShellClassInfo]

2 | ConfirmFileOp=0

3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21

4 | 


--------------------------------------------------------------------------------
/09 - Transitions and Animations/Listing_9-1.css:
--------------------------------------------------------------------------------
1 | button.fancy-button {
2 |   background: blue;
3 | }
4 | 
5 | button.fancy-button:hover {
6 |   background: red;
7 |   transform: scale(1.1);
8 | }
9 | 


--------------------------------------------------------------------------------
/09 - Transitions and Animations/Listing_9-10.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   @keyframes spin {
 3 |     from {
 4 |       transform: rotate(0deg);
 5 |     }
 6 |     to {
 7 |       transform: rotate(360deg);
 8 |     }
 9 |   }
10 | 
11 |   .loader {
12 |     width: 10rem;
13 |     height: 10rem;
14 |     background: skyblue;
15 |     animation: spin 500ms linear infinite;
16 |   }
17 | </style>
18 | 
19 | <div class="loader"></div>
20 | 


--------------------------------------------------------------------------------
/09 - Transitions and Animations/Listing_9-11.css:
--------------------------------------------------------------------------------
1 | @media (prefers-reduced-motion: reduce) {
2 |   .loader {
3 |     animation: none;
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/09 - Transitions and Animations/Listing_9-2.css:
--------------------------------------------------------------------------------
 1 | button.fancy-button {
 2 |   background: blue;
 3 |   transition: 500ms;
 4 | }
 5 | 
 6 | button.fancy-button:hover {
 7 |   background: red;
 8 |   transform: scale(1.1);
 9 | }
10 | 


--------------------------------------------------------------------------------
/09 - Transitions and Animations/Listing_9-3.css:
--------------------------------------------------------------------------------
 1 | button.fancy-button {
 2 |   background: blue;
 3 |   transition: background-color 500ms,
 4 |               transform 500ms 500ms;
 5 | }
 6 | 
 7 | button.fancy-button:hover {
 8 |   background: red;
 9 |   transform: scale(1.1);
10 | }
11 | 


--------------------------------------------------------------------------------
/09 - Transitions and Animations/Listing_9-4.css:
--------------------------------------------------------------------------------
 1 | button.fancy-button {
 2 |   background: blue;
 3 |   transition-property: background-color, transform;
 4 |   transition-duration: 500ms, 500ms;
 5 |   transition-delay: 0ms, 500ms;
 6 | }
 7 | 
 8 | button.fancy-button:hover {
 9 |   background: red;
10 |   transform: scale(1.1);
11 | }
12 | 


--------------------------------------------------------------------------------
/09 - Transitions and Animations/Listing_9-5.css:
--------------------------------------------------------------------------------
 1 | @keyframes colors {
 2 |   0% {
 3 |     background: red;
 4 |   }
 5 | 
 6 |   50% {
 7 |     background: blue;
 8 |   }
 9 | 
10 |   100% {
11 |     background: green;
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/09 - Transitions and Animations/Listing_9-6.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   @keyframes colors {
 3 |     0% {
 4 |       background: red;
 5 |     }
 6 | 
 7 |     50% {
 8 |       background: blue;
 9 |     }
10 | 
11 |     100% {
12 |       background: green;
13 |     }
14 |   }
15 | 
16 |   .box {
17 |     animation: colors 2s;
18 |     width: 10rem;
19 |     height: 10rem;
20 |   }
21 | </style>
22 | 
23 | <div class="box"></div>
24 | 


--------------------------------------------------------------------------------
/09 - Transitions and Animations/Listing_9-7.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   @keyframes color {
 3 |     from {
 4 |       background: red;
 5 |     }
 6 | 
 7 |     to {
 8 |       background: blue;
 9 |     }
10 |   }
11 | 
12 |   .animate {
13 |     background: yellow;
14 |     animation: color 2s;
15 |     animation-delay: 2s;
16 |     width: 10rem;
17 |     height: 10rem;
18 |   }
19 | </style>
20 | 
21 | <div class="animate"></div>
22 | 


--------------------------------------------------------------------------------
/09 - Transitions and Animations/Listing_9-8.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   @keyframes color {
 3 |     from {
 4 |       background-color: red;
 5 |     }
 6 |     to {
 7 |       background-color: blue;
 8 |     }
 9 |   }
10 | 
11 |   @keyframes spin {
12 |     from {
13 |       transform: rotate(0);
14 |     }
15 |     to {
16 |       transform: rotate(360deg);
17 |     }
18 |   }
19 | 
20 |   .animate {
21 |     width: 10rem;
22 |     height: 10rem;
23 |     animation: color 5s alternate infinite,
24 |                spin 1s linear infinite;
25 |   }
26 | </style>
27 | 
28 | <div class="animate"></div>
29 | 


--------------------------------------------------------------------------------
/09 - Transitions and Animations/Listing_9-9.css:
--------------------------------------------------------------------------------
1 | .my-element {
2 |   will-change: transform, opacity;
3 | }
4 | 


--------------------------------------------------------------------------------
/09 - Transitions and Animations/desktop.ini:
--------------------------------------------------------------------------------
1 | [.ShellClassInfo]

2 | ConfirmFileOp=0

3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21

4 | 


--------------------------------------------------------------------------------
/10 - Flexbox/Listing_10-1.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     display: flex;
 4 |     flex-direction: row;
 5 |     border: 1px solid black;
 6 |   }
 7 | 
 8 |   .item,
 9 |   .item2,
10 |   .item3 {
11 |     background: rebeccapurple;
12 |     font-size: 3rem;
13 |     padding: 2rem;
14 |     color: white;
15 |   }
16 | 
17 |   .item2 {
18 |     background: skyblue;
19 |   }
20 | 
21 |   .item3 {
22 |     background: orangered;
23 |   }
24 | </style>
25 | 
26 | <div class="container">
27 |   <div class="item">1</div>
28 |   <div class="item2">2</div>
29 |   <div class="item3">3</div>
30 | </div>
31 | 


--------------------------------------------------------------------------------
/10 - Flexbox/Listing_10-10.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   body {
 3 |     margin: 0;
 4 |   }
 5 | 
 6 |   .container {
 7 |     display: flex;
 8 |     flex-direction: column;
 9 |     height: 100vh;
10 |     border: 5px dashed black;
11 |     box-sizing: border-box;
12 |   }
13 | 
14 |   .header {
15 |     background: skyblue;
16 |     padding: 1rem;
17 |   }
18 | 
19 |   .main {
20 |     display: flex;
21 |     flex-direction: row;
22 |     flex-grow: 1;
23 |     border: 5px dashed blue;
24 |   }
25 | 
26 |   .sidebar {
27 |     background: cornflowerblue;
28 |     padding: 1rem;
29 |   }
30 | 
31 |   .content {
32 |     flex-grow: 1;
33 |     background: beige;
34 |     padding: 1rem;
35 |   }
36 | 
37 |   .sidebar-2 {
38 |     background: turquoise;
39 |     padding: 1rem;
40 |   }
41 | 
42 |   .footer {
43 |     background: orange;
44 |     padding: 1rem;
45 |   }
46 | </style>
47 | 
48 | <div class="container">
49 |   <header class="header">Header</header>
50 |   <main class="main">
51 |     <div class="sidebar">Sidebar</div>
52 |     <div class="content">Content</div>
53 |     <div class="sidebar-2">Sidebar 2</div>
54 |   </main>
55 |   <footer class="footer">Footer</footer>
56 | </div>
57 | 


--------------------------------------------------------------------------------
/10 - Flexbox/Listing_10-2.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border: 1px solid black;
 4 |     padding: 0.5rem;
 5 |     width: 500px;
 6 |     display: flex;
 7 |     flex-direction: row;
 8 |   }
 9 | 
10 |   .item {
11 |     width: 300px;
12 |     text-align: center;
13 |     color: white;
14 |     font-size: 2rem;
15 |   }
16 | 
17 |   .one {
18 |     background: blue;
19 |   }
20 | 
21 |   .two {
22 |     background: red;
23 |   }
24 | 
25 |   .three {
26 |     background: green;
27 |   }
28 | </style>
29 | 
30 | <div class="container">
31 |   <div class="item one">1</div>
32 |   <div class="item two">2</div>
33 |   <div class="item three">3</div>
34 | </div>
35 | 


--------------------------------------------------------------------------------
/10 - Flexbox/Listing_10-3.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border: 1px solid black;
 4 |     padding: 0.5rem;
 5 |     width: 120px;
 6 |     display: flex;
 7 |     flex-direction: row;
 8 |   }
 9 | 
10 |   .item {
11 |     width: 300px;
12 |     text-align: center;
13 |     color: white;
14 |     font-size: 2rem;
15 |   }
16 | 
17 |   .one {
18 |     background: blue;
19 |   }
20 | 
21 |   .two {
22 |     background: red;
23 |   }
24 | 
25 |   .three {
26 |     background: green;
27 |   }
28 | </style>
29 | 
30 | <div class="container">
31 |   <div class="item one">Item 1</div>
32 |   <div class="item two">Item 2</div>
33 |   <div class="item three">Item 3</div>
34 | </div>
35 | 


--------------------------------------------------------------------------------
/10 - Flexbox/Listing_10-4.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border: 1px solid black;
 4 |     padding: 0.5rem;
 5 |     width: 120px;
 6 |     display: flex;
 7 |     flex-direction: row;
 8 |     flex-wrap: wrap;
 9 |   }
10 | 
11 |   .item {
12 |     width: 300px;
13 |     text-align: center;
14 |     color: white;
15 |     font-size: 2rem;
16 |   }
17 | 
18 |   .one {
19 |     background: blue;
20 |   }
21 | 
22 |   .two {
23 |     background: red;
24 |   }
25 | 
26 |   .three {
27 |     background: green;
28 |   }
29 | </style>
30 | 
31 | <div class="container">
32 |   <div class="item one">Item 1</div>
33 |   <div class="item two">Item 2</div>
34 |   <div class="item three">Item 3</div>
35 | </div>
36 | 


--------------------------------------------------------------------------------
/10 - Flexbox/Listing_10-5.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border: 1px solid black;
 4 |     padding: 0.5rem;
 5 |     width: 500px;
 6 |     display: flex;
 7 |     flex-direction: row;
 8 |   }
 9 | 
10 |   .item {
11 |     width: 100px;
12 |     text-align: center;
13 |     color: white;
14 |     font-size: 2rem;
15 |   }
16 | 
17 |   .one {
18 |     background: blue;
19 |   }
20 | 
21 |   .two {
22 |     background: red;
23 |   }
24 | 
25 |   .three {
26 |     background: green;
27 |   }
28 | </style>
29 | 
30 | <div class="container">
31 |   <div class="item one">1</div>
32 |   <div class="item two">2</div>
33 |   <div class="item three">3</div>
34 | </div>
35 | 


--------------------------------------------------------------------------------
/10 - Flexbox/Listing_10-6.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border: 1px solid black;
 4 |     padding: 0.5rem;
 5 |     width: 500px;
 6 |     display: flex;
 7 |     flex-direction: row;
 8 |   }
 9 | 
10 |   .item {
11 |     width: 100px;
12 |     text-align: center;
13 |     color: white;
14 |     font-size: 2rem;
15 |     flex-grow: 1;
16 |   }
17 | 
18 |   .one {
19 |     background: blue;
20 |   }
21 | 
22 |   .two {
23 |     background: red;
24 |   }
25 | 
26 |   .three {
27 |     background: green;
28 |   }
29 | </style>
30 | 
31 | <div class="container">
32 |   <div class="item one">1</div>
33 |   <div class="item two">2</div>
34 |   <div class="item three">3</div>
35 | </div>
36 | 


--------------------------------------------------------------------------------
/10 - Flexbox/Listing_10-7.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border: 1px solid black;
 4 |     padding: 0.5rem;
 5 |     width: 500px;
 6 |     display: flex;
 7 |     flex-direction: row;
 8 |   }
 9 | 
10 |   .item {
11 |     width: 100px;
12 |     text-align: center;
13 |     color: white;
14 |     font-size: 2rem;
15 |     flex-grow: 1;
16 |   }
17 | 
18 |   .one {
19 |     background: blue;
20 |   }
21 | 
22 |   .two {
23 |     background: red;
24 |     flex-grow: 2;
25 |   }
26 | 
27 |   .three {
28 |     background: green;
29 |   }
30 | </style>
31 | 
32 | <div class="container">
33 |   <div class="item one">1</div>
34 |   <div class="item two">2</div>
35 |   <div class="item three">3</div>
36 | </div>
37 | 


--------------------------------------------------------------------------------
/10 - Flexbox/Listing_10-8.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     border: 1px solid black;
 4 |     padding: 0.5rem;
 5 |     width: 300px;
 6 |     display: flex;
 7 |     flex-direction: row;
 8 |   }
 9 | 
10 |   .item {
11 |     width: 200px;
12 |     font-size: 2rem;
13 |     color: white;
14 |     text-align: center;
15 |   }
16 | 
17 |   .one {
18 |     background: blue;
19 |   }
20 | 
21 |   .two {
22 |     background: red;
23 |     flex-shrink: 2;
24 |   }
25 | 
26 |   .three {
27 |     background: green;
28 |   }
29 | </style>
30 | 
31 | <div class="container">
32 |   <div class="item one">1</div>
33 |   <div class="item two">2</div>
34 |   <div class="item three">3</div>
35 | </div>
36 | 


--------------------------------------------------------------------------------
/10 - Flexbox/Listing_10-9.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     background: skyblue;
 4 |     display: flex;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     width: 10rem;
 8 |     height: 10rem;
 9 |   }
10 | 
11 |   .item {
12 |     background: orangered;
13 |     width: 5rem;
14 |     height: 5rem;
15 |   }
16 | </style>
17 | 
18 | <div class="container">
19 |   <div class="item"></div>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/10 - Flexbox/desktop.ini:
--------------------------------------------------------------------------------
1 | [.ShellClassInfo]

2 | ConfirmFileOp=0

3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21

4 | 


--------------------------------------------------------------------------------
/11 - Responsive Design/Listing_11-1.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   color: red;
 3 | }
 4 | 
 5 | @media screen and (max-width: 400px) {
 6 |   h1 {
 7 |     color: blue;
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/11 - Responsive Design/Listing_11-10.css:
--------------------------------------------------------------------------------
 1 | @media screen and (max-width: 700px) {
 2 |   .main {
 3 |     flex-direction: column;
 4 |   }
 5 | 
 6 |   .sidebar {
 7 |     flex-direction: row;
 8 |     justify-content: center;
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/11 - Responsive Design/Listing_11-11.css:
--------------------------------------------------------------------------------
 1 | @media screen and (max-width: 700px) {
 2 |   .main {
 3 |     flex-direction: column;
 4 |   }
 5 | 
 6 |   .sidebar {
 7 |     flex-direction: row;
 8 |     justify-content: center;
 9 |     flex-wrap: wrap;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/11 - Responsive Design/Listing_11-2.css:
--------------------------------------------------------------------------------
1 | @media screen and (max-width: 785px) {
2 |   h1 {
3 |     font-size: 3rem;
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/11 - Responsive Design/Listing_11-3.css:
--------------------------------------------------------------------------------
 1 | @media screen and (max-width: 785px) {
 2 |   h1 {
 3 |     font-size: 3rem;
 4 |   }
 5 | }
 6 | 
 7 | @media screen and (max-width: 480px) {
 8 |   h1 {
 9 |     font-size: 2rem;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/11 - Responsive Design/Listing_11-4.css:
--------------------------------------------------------------------------------
 1 | @media screen and (max-width: 785px) {
 2 |   h1 {
 3 |     font-size: 3rem;
 4 |   }
 5 | }
 6 | 
 7 | @media screen and (max-width: 480px) {
 8 |   h1 {
 9 |     font-size: 2rem;
10 |   }
11 | 
12 |   img {
13 |     width: 250px;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/11 - Responsive Design/Listing_11-5.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     display: flex;
 4 |     flex-direction: row;
 5 |     justify-content: center;
 6 |     background: skyblue;
 7 |     padding: 0.25rem;
 8 |   }
 9 | 
10 |   .item {
11 |     background: red;
12 |     color: white;
13 |     text-align: center;
14 |     margin: 0.25rem;
15 |     font-size: 2rem;
16 |   }
17 | 
18 |   .wide {
19 |     width: 300px;
20 |   }
21 | </style>
22 | 
23 | <div class="container">
24 |   <div class="item">Flex Item 1</div>
25 |   <div class="item wide">Flex Item 2</div>
26 |   <div class="item">Flex Item 3</div>
27 |   <div class="item">Flex Item 4</div>
28 |   <div class="item wide">Flex Item 5</div>
29 |   <div class="item">Flex Item 6</div>
30 | </div>
31 | 


--------------------------------------------------------------------------------
/11 - Responsive Design/Listing_11-6.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     display: flex;
 4 |     flex-direction: row;
 5 |     justify-content: center;
 6 |     flex-wrap: wrap;
 7 |     background: skyblue;
 8 |     padding: 0.25rem;
 9 |   }
10 | 
11 |   .item {
12 |     background: red;
13 |     color: white;
14 |     text-align: center;
15 |     margin: 0.25rem;
16 |     font-size: 2rem;
17 |   }
18 | 
19 |   .wide {
20 |     width: 300px;
21 |   }
22 | </style>
23 | 
24 | <div class="container">
25 |   <div class="item">Flex Item 1</div>
26 |   <div class="item wide">Flex Item 2</div>
27 |   <div class="item">Flex Item 3</div>
28 |   <div class="item">Flex Item 4</div>
29 |   <div class="item wide">Flex Item 5</div>
30 |   <div class="item">Flex Item 6</div>
31 | </div>
32 | 


--------------------------------------------------------------------------------
/11 - Responsive Design/Listing_11-7.css:
--------------------------------------------------------------------------------
1 | img {
2 |   max-width: 100%;
3 |   height: auto;
4 | }
5 | 
6 | h1 {
7 |   font-size: clamp(48px, 4.8vw, 64px);
8 | }
9 | 


--------------------------------------------------------------------------------
/11 - Responsive Design/Listing_11-8.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   body {
 3 |     margin: 0;
 4 |   }
 5 | 
 6 |   .container {
 7 |     display: flex;
 8 |     flex-direction: column;
 9 |     height: 100vh;
10 |   }
11 | 
12 |   .header {
13 |     background: orange;
14 |     padding: 1rem;
15 |   }
16 | 
17 |   .main {
18 |     display: flex;
19 |     flex-direction: row;
20 |     flex-grow: 1;
21 |   }
22 | 
23 |   .content {
24 |     background: salmon;
25 |     padding: 1rem;
26 |     flex-grow: 1;
27 |   }
28 | 
29 |   .sidebar {
30 |     display: flex;
31 |     flex-direction: column;
32 |     background: skyblue;
33 |     padding: 1rem;
34 |   }
35 | 
36 |   .sidebar a {
37 |     margin: 1rem;
38 |     padding: 0.5rem 2rem;
39 |     border: 1px solid black;
40 |   }
41 | 
42 |   .sidebar2 {
43 |     background: lime;
44 |     padding: 1rem;
45 |   }
46 | 
47 |   .footer {
48 |     background: beige;
49 |     padding: 1rem;
50 |   }
51 | </style>
52 | 
53 | <div class="container">
54 |   <header class="header">Header</header>
55 |   <main class="main">
56 |     <nav class="sidebar">
57 |       <a href="/home">Home</a>
58 |       <a href="/about">About</a>
59 |       <a href="/photos">Photos</a>
60 |     </nav>
61 |     <div class="content">
62 |       Hello world!
63 |     </div>
64 |     <div class="sidebar2">
65 |       Sidebar 2
66 |     </div>
67 |   </main>
68 |   <footer class="footer">Footer</footer>
69 | </div>
70 | 


--------------------------------------------------------------------------------
/11 - Responsive Design/Listing_11-9.css:
--------------------------------------------------------------------------------
1 | @media screen and (max-width: 700px) {
2 |   .main {
3 |     flex-direction: column;
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/11 - Responsive Design/cat.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/modern-css/cea922754a117becdfcff9e15002909760d7484b/11 - Responsive Design/cat.jpeg


--------------------------------------------------------------------------------
/11 - Responsive Design/desktop.ini:
--------------------------------------------------------------------------------
1 | [.ShellClassInfo]

2 | ConfirmFileOp=0

3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21

4 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-1.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     display: grid;
 4 |     grid-template-columns: 10rem 10rem;
 5 |     grid-template-rows: 5rem 5rem;
 6 |     gap: 5px;
 7 |   }
 8 | 
 9 |   .item {
10 |     background: lightgray;
11 |     text-align: center;
12 |   }
13 | </style>
14 | 
15 | <div class="container">
16 |   <div class="item">1</div>
17 |   <div class="item">2</div>
18 |   <div class="item">3</div>
19 |   <div class="item">4</div>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-10.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/modern-css/cea922754a117becdfcff9e15002909760d7484b/12 - CSS Grid/Listing_12-10.css


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-11.css:
--------------------------------------------------------------------------------
1 | .item1 {
2 |   background: skyblue;
3 |   grid-row: 2;
4 |   grid-column: 3;
5 | }
6 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-12.css:
--------------------------------------------------------------------------------
1 | .item1 {
2 |   background: skyblue;
3 |   grid-row: 2;
4 |   grid-column: 3;
5 | }
6 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-13.css:
--------------------------------------------------------------------------------
1 | .item1 {
2 |   grid-row: 2;
3 |   grid-column: 3 / 5;
4 | }
5 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-14.css:
--------------------------------------------------------------------------------
1 | .item1 {
2 |   grid-row: 2;
3 |   grid-column: 3 / span 2;
4 | }
5 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-15.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     display: grid;
 4 |     gap: 5px;
 5 |     width: 500px;
 6 |     grid-template-rows: 
 7 |       [header-start] 2rem
 8 |       [content-start] 10rem
 9 |       [footer-start] 2rem
10 |       [footer-end];
11 |     grid-template-columns:
12 |       [sidebar-start] 5rem
13 |       [content-start] 1fr
14 |       [content-end];
15 |   }
16 | 
17 |   .container > div {
18 |     background: lightgray;
19 |   }
20 | 
21 |   .header {
22 |     grid-row: header-start / content-start;
23 |     grid-column: sidebar-start / content-end;
24 |   }
25 | 
26 |   .footer {
27 |     grid-column: sidebar-start / content-end;
28 |   }
29 | </style>
30 | 
31 | <div class="container">
32 |   <div class="item header">Header</div>
33 |   <div class="item sidebar">Sidebar</div>
34 |   <div class="item content">Content</div>
35 |   <div class="item footer">Footer</div>
36 | </div>
37 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-16.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     display: grid;
 4 |     grid-template-rows: 2rem 10rem 2rem;
 5 |     grid-template-columns: 5rem 1fr 1fr;
 6 |     grid-template-areas:
 7 |       'header header header'
 8 |       'sidebar content content'
 9 |       'footer footer footer';
10 |     gap: 5px;
11 |     width: 500px;
12 |   }
13 | 
14 |   .header {
15 |     grid-area: header;
16 |   }
17 | 
18 |   .footer {
19 |     grid-area: footer;
20 |   }
21 | 
22 |   .sidebar {
23 |     grid-area: sidebar;
24 |   }
25 | 
26 |   .content {
27 |     grid-area: content;
28 |   }
29 | 
30 |   .container > div {
31 |     background: lightgray;
32 |   }
33 | </style>
34 | 
35 | <div class="container">
36 |   <div class="item header">Header</div>
37 |   <div class="item sidebar">Sidebar</div>
38 |   <div class="item content">Content</div>
39 |   <div class="item footer">Footer</div>
40 | </div>
41 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-2.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     display: grid;
 4 |     grid-template-columns: 10rem 10rem;
 5 |     grid-template-rows: 5rem 5rem;
 6 |     gap: 5px;
 7 |   }
 8 | 
 9 |   .item {
10 |     background: lightgray;
11 |     text-align: center;
12 |   }
13 | </style>
14 | 
15 | <div class="container">
16 |   <div class="item">1</div>
17 |   <div class="item">2</div>
18 |   <div class="item">3</div>
19 |   <div class="item">4</div>
20 |   <div class="item">5</div>
21 |   <div class="item">6</div>
22 | </div>
23 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-3.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     display: grid;
 4 |     grid-template-columns: 10rem 10rem;
 5 |     grid-template-rows: 5rem 5rem;
 6 |     grid-auto-rows: 5rem;
 7 |     gap: 5px;
 8 |   }
 9 | 
10 |   .item {
11 |     background: lightgray;
12 |     text-align: center;
13 |   }
14 | </style>
15 | 
16 | <div class="container">
17 |   <div class="item">1</div>
18 |   <div class="item">2</div>
19 |   <div class="item">3</div>
20 |   <div class="item">4</div>
21 |   <div class="item">5</div>
22 |   <div class="item">6</div>
23 | </div>
24 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-4.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     display: grid;
 4 |     grid-template-columns: 1fr 1fr 1fr;
 5 |     grid-template-rows: 5rem 5rem;
 6 |     grid-auto-rows: 5rem;
 7 |     gap: 5px;
 8 |     width: 30rem;
 9 |   }
10 | 
11 |   .item {
12 |     background: lightgray;
13 |     text-align: center;
14 |   }
15 | </style>
16 | 
17 | <div class="container">
18 |   <div class="item">1</div>
19 |   <div class="item">2</div>
20 |   <div class="item">3</div>
21 |   <div class="item">4</div>
22 |   <div class="item">5</div>
23 |   <div class="item">6</div>
24 | </div>
25 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-5.css:
--------------------------------------------------------------------------------
1 | .container {
2 |   display: grid;
3 |   grid-template-columns: 200px 1fr 5rem;
4 |   grid-template-rows: 5rem 5rem;
5 | }
6 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-6.css:
--------------------------------------------------------------------------------
1 | .container {
2 |   display: grid;
3 |   grid-template-columns: 1fr 1fr 1fr 1fr;
4 |   grid-template-rows: 5rem;
5 | }
6 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-7.css:
--------------------------------------------------------------------------------
1 | .container {
2 |   display: grid;
3 |   grid-template-columns: repeat(4, 1fr);
4 |   grid-template-rows: repeat(2, 5rem);
5 | }
6 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-8.css:
--------------------------------------------------------------------------------
1 | .container {
2 |   display: grid;
3 |   grid-template-columns: repeat(4, 1fr);
4 |   grid-template-rows: repeat(2, minmax(3rem, auto));
5 |   gap: 5px;
6 |   width: 15rem;
7 | }
8 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/Listing_12-9.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     display: grid;
 4 |     grid-template-columns: repeat(auto-fill, 5rem);
 5 |     grid-template-rows: 5rem;
 6 |     grid-auto-rows: 5rem;
 7 |     gap: 5px;
 8 |   }
 9 | 
10 |   .item {
11 |     background: lightgray;
12 |   }
13 | </style>
14 | 
15 | <div class="container">
16 |   <div class="item">1</div>
17 |   <div class="item">2</div>
18 |   <div class="item">3</div>
19 |   <div class="item">4</div>
20 |   <div class="item">5</div>
21 |   <div class="item">6</div>
22 |   <div class="item">7</div>
23 | </div>
24 | 


--------------------------------------------------------------------------------
/12 - CSS Grid/desktop.ini:
--------------------------------------------------------------------------------
1 | [.ShellClassInfo]

2 | ConfirmFileOp=0

3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21

4 | 


--------------------------------------------------------------------------------
/9781484262931.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/modern-css/cea922754a117becdfcff9e15002909760d7484b/9781484262931.jpg


--------------------------------------------------------------------------------
/Contributing.md:
--------------------------------------------------------------------------------
 1 | # Contributing to Apress Source Code
 2 | 
 3 | Copyright for Apress source code belongs to the author(s). However, under fair use you are encouraged to fork and contribute minor corrections and updates for the benefit of the author(s) and other readers.
 4 | 
 5 | ## How to Contribute
 6 | 
 7 | 1. Make sure you have a GitHub account.
 8 | 2. Fork the repository for the relevant book.
 9 | 3. Create a new branch on which to make your change, e.g. 
10 | `git checkout -b my_code_contribution`
11 | 4. Commit your change. Include a commit message describing the correction. Please note that if your commit message is not clear, the correction will not be accepted.
12 | 5. Submit a pull request.
13 | 
14 | Thank you for your contribution!


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Freeware License, some rights reserved
 2 | 
 3 | Copyright (c) 2020 Joe Attardi
 4 | 
 5 | Permission is hereby granted, free of charge, to anyone obtaining a copy 
 6 | of this software and associated documentation files (the "Software"), 
 7 | to work with the Software within the limits of freeware distribution and fair use. 
 8 | This includes the rights to use, copy, and modify the Software for personal use. 
 9 | Users are also allowed and encouraged to submit corrections and modifications 
10 | to the Software for the benefit of other users.
11 | 
12 | It is not allowed to reuse,  modify, or redistribute the Software for 
13 | commercial use in any way, or for a user’s educational materials such as books 
14 | or blog articles without prior permission from the copyright holder. 
15 | 
16 | The above copyright notice and this permission notice need to be included 
17 | in all copies or substantial portions of the software.
18 | 
19 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22 | AUTHORS OR COPYRIGHT HOLDERS OR APRESS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25 | SOFTWARE.
26 | 
27 | 
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Apress Source Code
 2 | 
 3 | This repository accompanies [*Modern CSS*](http://www.apress.com/9781484262931) by Joe Attardi (Apress, 2020).
 4 | 
 5 | [comment]: #cover
 6 | ![Cover image](9781484262931.jpg)
 7 | 
 8 | Download the files as a zip using the green button, or clone the repository to your machine using Git.
 9 | 
10 | ## Releases
11 | 
12 | Release v1.0 corresponds to the code in the published book, without corrections or updates.
13 | 
14 | ## Contributions
15 | 
16 | See the file Contributing.md for more information on how you can contribute to this repository.


--------------------------------------------------------------------------------
/errata.md:
--------------------------------------------------------------------------------
 1 | # Errata for *Modern CSS*
 2 | 
 3 | ## Chapter 2: CSS Selectors
 4 | 
 5 | ### Page 18
 6 | 
 7 | The caption for Listing 2-2 should read:
 8 | 
 9 | > Applying a margin to all p elements.
10 | 
11 | ### Page 25
12 | 
13 | Under the `:nth-child` pseudo-class, the description of `nth-child(4n)` should read:
14 | 
15 | > Or we could select every *fourth* item with the selector `.my-list > li:nth-child(4n)`.
16 | 
17 | ## Chapter 3: Basic CSS Concepts
18 | 
19 | ### Page 49
20 | 
21 | The second-to-last sentence on this page should read:
22 | 
23 | > There is a newer syntax for these functions that *is* slightly different.
24 | 
25 | ### Page 50
26 | 
27 | The hex code on the last bullet, pure red with 50% alpha, should be `#FF000080`.
28 | 
29 | ## Chapter 4: Basic Styling
30 | 
31 | ### Page 68
32 | 
33 | The second-to-last sentence on this page should read:
34 | 
35 | > Note that when you specify border-radius in this way, an elliptical border-radius does not have a slash separating the horizontal and vertical *radii*.
36 | 
37 | ### Page 71
38 | 
39 | In the paragraph before Listing 4-11, the first sentence should read:
40 | 
41 | > If we add a spread radius and set the blur radius to zero, as shown in Listing 4-11, we can see that the shadow size grows by the spread radius *only*.
42 | 
43 | ## Chapter 6: Text Styling
44 | 
45 | ### Page 117
46 | 
47 | In Listing 6-11, there should be extra whitespace between `is` and `some` in order to produce the result in Figure 6-10.
48 | 
49 | ## Chapter 8: Transforms
50 | 
51 | ### Page 171
52 | 
53 | The italic text in Listing 8-10 is a formatting error and has no special meaning.
54 | 
55 | ### Pages 182-184
56 | 
57 | The italic text in Listing 8-16 is a formatting error and has no special meaning.


--------------------------------------------------------------------------------