codeequality-htmlcss-intro-demos/01-ClassesAndId_Demo.html at master · CodeEquality/codeequality-htmlcss-intro-demos · 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
<!DOCTYPE html>

<html>
    <head>
        <title> Classes and IDs demo | Code Equality's Introduction to HTML $amp; CSS</title>
        <link rel="stylesheet" href="css/01-Demo.css"/>
    </head>

    <body>
        <h1 id="important">Important Main Title </h1>

        <h2 class="highlight">Sub-title 1</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam leo diam, pharetra in nunc in, ultricies convallis nunc. Ut hendrerit laoreet purus id euismod. Pellentesque iaculis eget nunc a pulvinar. Nunc sed enim massa. Vestibulum hendrerit imperdiet turpis id tempus. Morbi pulvinar commodo dui id auctor. Integer vitae consectetur risus. Ut non lorem nec nunc varius rutrum. Suspendisse viverra mauris ultricies, dictum nibh et, laoreet nisl. Donec sit amet viverra libero, ut facilisis ante. Fusce metus nunc, aliquam at nibh mollis, tincidunt hendrerit justo. Sed rhoncus quis lacus eu ornare.
        </p>

        <h2>Sub-title 2</h2>
        <p class="favorite highlight">
            Aenean eget nibh ac turpis pretium congue vitae sed tortor. Donec vitae laoreet nibh, facilisis gravida nisl. Duis egestas lorem ut lacus fermentum, et aliquet massa mollis. Nulla libero ante, viverra sit amet luctus in, condimentum sed libero. Nam vehicula ante dui, a rutrum justo lobortis quis. Mauris nisi est, ultrices a porttitor vel, iaculis at velit. Quisque nec euismod mi. Duis ac ultricies mauris. Aenean sagittis magna at ornare venenatis. In pulvinar velit sit amet ante convallis euismod. Nullam elit urna, feugiat non libero sit amet, mollis condimentum risus. Fusce facilisis mi sed odio rutrum pharetra. Fusce in molestie quam.
        </p>

        <h2 id="important">Sub-title 3</h2>
        <p>
            Vestibulum lacinia tristique tempor. In et quam nec orci cursus lobortis sit amet vitae elit. <span class="highlight">Phasellus sem odio, porta in interdum id, venenatis vel dolor. Morbi dapibus neque ac nisl tristique tempor. Proin sodales feugiat nunc ut mattis. </span>Duis ac quam quis leo mollis bibendum id tincidunt enim. In a quam et est ullamcorper cursus ac vitae ipsum. Nulla elit magna, semper et faucibus sit amet, vulputate eget nibh. Sed suscipit dictum odio a pellentesque. Mauris vestibulum nunc posuere neque elementum ornare. Vestibulum accumsan tellus ut neque tempus, a pretium elit fermentum. Pellentesque eu lorem molestie, dignissim elit convallis, consectetur mauris. Morbi mollis, lectus in dictum dapibus, risus arcu tincidunt elit, nec auctor lectus nulla in risus. Sed sapien odio, auctor non ligula ac, sagittis condimentum nibh. Duis id convallis nisi.
        </p>

        <h2>Sub-title 4</h2>
        <p>
            Suspendisse cursus laoreet mauris ut congue. Quisque commodo lacinia nisi, interdum sollicitudin leo ullamcorper eu. Integer posuere adipiscing commodo. Aliquam vel dolor interdum lectus facilisis suscipit. Suspendisse adipiscing pellentesque nisi et pretium. Cras tincidunt, magna placerat convallis bibendum, elit tortor porta massa, id ultricies diam tortor sit amet magna. Sed posuere massa a lacus feugiat faucibus. Mauris sodales mi justo, vel placerat mi suscipit nec. Sed et risus nec justo pulvinar scelerisque. Mauris auctor turpis non enim dapibus iaculis. Pellentesque hendrerit dapibus libero. Vestibulum vehicula dolor vel eros blandit ornare. Vestibulum iaculis, lorem vel placerat ornare, mauris neque vehicula tellus, nec dapibus felis velit nec leo. Duis sodales quis tellus at vestibulum. Etiam elementum justo vehicula neque egestas, vitae tincidunt lacus blandit. Cras ultricies massa at urna porttitor tincidunt.
        </p>

        <h2>Sub-title 5</h2>
        <p>
            Nam ullamcorper risus eget sapien vestibulum, hendrerit viverra magna fringilla. Morbi dapibus, dui id tincidunt fringilla, nisl neque condimentum nisi, pellentesque tristique lorem mauris id metus. Ut imperdiet at dolor eget feugiat. Proin aliquam fermentum enim, quis ullamcorper nisi. Nam tempus posuere dignissim. Aliquam non faucibus nunc. Quisque imperdiet imperdiet cursus. Nam id viverra nibh, pellentesque ullamcorper orci. Vivamus faucibus condimentum diam eu ornare. Morbi interdum libero ut sapien eleifend, eu lobortis ante malesuada. Ut non dolor orci. Donec id massa nibh. Phasellus vitae imperdiet orci.
        </p>
    </body>
</html>