|
4 | 4 | <meta charset="UTF-8" /> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
6 | 6 | <title>HTML/CSS Fundamentals</title> |
7 | | -<link rel="stylesheet" href="/styles.css" /> |
| 7 | + <link rel="stylesheet" href="/styles.css" /> |
8 | 8 | </head> |
9 | 9 | <body> |
10 | 10 | <div class="wrapper"> |
11 | | - <!-- Simple box with border, margin, and background color --> |
| 11 | + |
12 | 12 | <div class="box">box1</div> |
13 | 13 |
|
14 | | - <!-- Box model example with labeled elements for margin, border, padding, and content --> |
15 | 14 | <div class="box2"> |
16 | 15 | box2 |
17 | 16 | <span class="text">Margin</span> |
|
21 | 20 | </div> |
22 | 21 | </div> |
23 | 22 |
|
24 | | - <!-- Container demonstrating box-sizing differences (content-box vs. border-box) --> |
25 | | - <div class="container"> |
26 | | - <div class="item1">item 1</div> |
27 | | - <div class="item2">item 2</div> |
28 | | - <div class="item3">item 3</div> |
29 | | - <div class="item4">item 4</div> |
30 | | - </div> |
31 | | - |
32 | | - <!-- Flexbox container centered on the page --> |
33 | | - <div class="container2"> |
34 | | - <div class="item5">item 5</div> |
35 | | - <div class="item6">item 6</div> |
36 | | - <div class="item7">item 7</div> |
37 | | - <div class="item8">item 8</div> |
38 | | - </div> |
39 | | - |
40 | | - <!-- Flexbox container demonstrating justify-content (center and space-between) --> |
41 | | - <div class="container3"> |
42 | | - <div class="item9">item 9</div> |
43 | | - <div class="item10">item 10</div> |
44 | | - <div class="item11">item 11</div> |
45 | | - <div class="item12">item 12</div> |
46 | | - </div> |
47 | | - |
48 | | - <!-- Flexbox container demonstrating flex-direction column --> |
49 | | - <div class="container4"> |
50 | | - <div class="item13">item 13</div> |
51 | | - <div class="item14">item 14</div> |
52 | | - <div class="item15">item 15</div> |
53 | | - <div class="item16">item 16</div> |
54 | | - </div> |
55 | | - |
56 | | - <!-- Flexbox container with wrapping enabled --> |
57 | | - <div class="container5"> |
58 | | - <div class="item17">item 17</div> |
59 | | - <div class="item18">item 18</div> |
60 | | - <div class="item19">item 19</div> |
61 | | - <div class="item20">item 20</div> |
62 | | - <div class="item21">item 21</div> |
63 | | - <div class="item22">item 22</div> |
64 | | - <div class="item23">item 23</div> |
65 | | - <div class="item24">item 24</div> |
66 | | - <div class="item25">item 25</div> |
67 | | - <div class="item26">item 26</div> |
68 | | - </div> |
69 | 23 | </body> |
70 | 24 | </html> |
0 commit comments