html-css-small-problems/lists_practice.html at main · wor101-ls-javascript/html-css-small-problems · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <title>The Next Reckoning</title>
    <meta charset="utf-8"/>
    <style>
      ul {
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>The Next Reckoning: Capitalism and Climate Change</h1>
      <p>By NATHANIEL RICH</p>
    </header>
    <main>
      <p>The world’s most difficult problem has a solution so simple that it can be
         expressed in four words: Stop burning greenhouse gases. How exactly to pull
        this off is somewhat more complicated — just not as complicated as most
        Americans have been led to believe.
      </p>
    </main>
    <footer>
      <h2>Related articles</h2>
      <ul>
        <li>What Survival Looks Like After the Oceans Rise</li>
        <li>How Big Business is Hedging Against the Apocalypse</li>
        <li>Climate Chaos is Coming–and the Pinkertons Are Ready</li>
      </ul>
    </footer>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <title>your page title goes here</title>
    <meta charset="utf-8"/>
    <style>
      ol {
        list-style-type: upper-roman;
      }
    </style>
  </head>
  <body>
    <h1>5 Reasons to Use jQuery</h1>
    <ol reversed>
      <li>Open Source</li>
      <li>Endless Tutorials</li>
      <li>Huge Library</li>
      <li>Cross-browser Compatibility</li>
      <li>Large Variety of Plugins</li>
    </ol>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <title>your page title goes here</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        Hypertext Markup Language, a standardized system for tagging text files to
        achieve font, color, graphic, and hyperlink effects on World Wide Web pages.
      </dd>
      <dt>Semantic</dt>
      <dd>
        Relating to meaning in language or logic.
      </dd>
      <dt>CSS</dt>
      <dd>
        A style sheet language used for describing the presentation of a document
        written in a markup language.
      </dd>
    </dl>
  </body>
</html> -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>your page title goes here</title>
    <meta charset="utf-8"/>
    <style>
      html {
        font-size: 20px;
      }

      nav ul {
        background-color: yellow;
        width: 100%;
        list-style-type: none;
        padding-left: 0;
        font-size: 0;

      }

      nav li {
        display: inline-block;
        color: blue;
        margin: 0 auto;
        font-size: 1rem;
        text-align: center;
        width: 25%;
      }

      nav a {
        box-sizing: border-box;
        display: inline-block;
        line-height: 2.5;
        padding: 0 10px;
        text-decoration: none;
        width: 100%;
      }

      nav a:hover,
      nav a:focus {
        background-color: green;
        color: yellow;
      }
    </style>
  </head>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </nav>
</html>