htmlClass/divHeaven.html at master · guyjin/htmlClass · 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
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
    <head>
        <title>
            Div Heaven
        </title>
        <style>
            body {
                font-family: sans-serif;
                padding: 0;
                margin: 0;
                background-color: #efefef;
            }

            header {
                background-color: #fff;
            }

            header h1 {
                font-size: 18px;
                margin: 0;
                padding: 40px;

            }

            nav {
                background: #ccc;
                padding-left: 30px;
            }

            nav ol,
            nav li {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }

            nav li {
                float: left;
            }

            nav a {
                display: block;
                padding: 10px;
                color: #000;
                text-decoration: none;
            }

            nav a:hover {
                background-color: #000;
                color: #fff;
            }

            article {
                margin: 40px;
            }

            article:first-of-type {
                margin-top: 20px;
            }

            p {
                text-indent: 2em;
                line-height: 1.8;
            }

            pre {
                border: 1px solid #030303;
                background #fff;
                color: maroon;
                font-size: 18px;
            }

            dt {
                font-weight: bold;
                font-size: 18px;
            }

            dd {
                font-style: italic;
                padding: 10px 0;
            }

            .clearfix {
                clear: both;
            }

        </style>
    </head>
    <body>
        <header>
            <h1>This is the header</h1>
        </header>
        <nav>
            <ol>
                <li><a class="navLink" href="#article1">Article 1</a></li>
                <li><a class="navLink" href="#article2">Article 2</a></li>
                <div class="clearfix"></div>
            </ol>
        </nav>
        <article>
            <a name="article1"></a>
            <h2>Article Title 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium atque blanditiis deleniti eligendi error eveniet harum hic illo, labore libero nulla omnis placeat porro possimus recusandae reprehenderit, totam veniam veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fuga quos repellat reprehenderit tempore. Deserunt, dolor ducimus eius, expedita explicabo facilis id ipsum itaque laboriosam
                officiis praesentium quibusdam quisquam sed! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore obcaecati praesentium sequi? Aliquid blanditiis distinctio doloremque, laboriosam nemo nulla optio qui recusandae repellat sapiente unde vitae voluptatibus. Eaque, id magni.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, ad, aperiam ducimus eius error explicabo facere in ipsa itaque mollitia nihil odit perspiciatis porro possimus quae quia sapiente tenetur velit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, aut blanditiis cumque dignissimos error in maxime pariatur quam quisquam reprehenderit sapiente similique tempora temporibus. Alias harum maiores quis quo unde.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad at autem deleniti dolorem eius eos error esse excepturi explicabo, fuga illum ipsum, labore molestias optio, perferendis quae reprehenderit tenetur veritatis!</p>
            <pre>
                <code>
    function foo() {
        return bar;
    }
                </code>
            </pre>

        </article>
        <article>
            <a name="article2">
            <h2>Article Title &amp; 2</h2>
            </a>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium atque blanditiis deleniti eligendi error eveniet harum hic illo, labore libero nulla omnis placeat porro possimus recusandae reprehenderit, totam veniam veritatis?</p>

            <dl>
                <dt>Definition Term</dt>
                <dd>
                    Definition goes here.
                </dd>
            </dl>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, ad, aperiam ducimus eius error explicabo facere in ipsa itaque mollitia nihil odit perspiciatis porro possimus quae quia sapiente tenetur velit. Lorem ipsum dolor sit amet, consectetur
                adipisicing elit. Ad at autem deleniti dolorem eius eos error esse excepturi explicabo, fuga illum ipsum, labore molestias optio, perferendis quae reprehenderit tenetur veritatis!</p>

            <hr/>

            <br>

            <img src="http://critterbabies.com/wp-content/gallery/kittens/803864926_1375572583.jpg" alt="a photo of stuff" />

            <blockquote class="outtake">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A architecto blanditiis, cum cumque deleniti dolor dolore est exercitationem ipsa obcaecati placeat possimus quae quo quos similique suscipit veritatis voluptate, voluptatibus?
            </blockquote>
        </article>
        <footer>
            this is the footer
        </footer>
    </body>
</html>