HTML-CSS/index.html at main · NataliaGM1/HTML-CSS · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/colores.css">
</head>
<body>
    <div id="page">
        <h1>HTML5&&CSS3</h1>
        <h2>HTML5</h2>
            <section>
                <img src="/imágenes/html.jpeg" alt="html">
                 <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam nulla sed ipsa quas impedit consectetur labore aliquam, ut quaerat quasi dolorem quae amet numquam explicabo similique asperiores cumque atque nisi, magnam tempore maxime deleniti? Consequatur ratione natus autem magni perspiciatis, quae optio aut quam odio perferendis eaque expedita officia dolore vel molestias soluta quidem ducimus, porro facere eveniet esse. Distinctio facilis nemo quae dolore ex explicabo ipsum ratione inventore non iure corrupti odit itaque debitis rerum, dignissimos accusantium? Reprehenderit, nihil.</p>
            </section>
        <h2>CSS3</h2>
            <section>
                <img src="/imágenes/css.jpeg" alt="css">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium possimus perferendis aliquam molestiae, qui ipsa molestias neque quaerat expedita velit a quia, est earum? Eveniet accusamus, dolor incidunt qui esse recusandae vel illo possimus facere commodi delectus placeat expedita iure, veritatis fuga est quod, voluptas explicabo error voluptates doloribus nemo nostrum at distinctio! Minima, voluptates quo! Quis adipisci illo accusantium placeat, eligendi qui dicta deserunt fugit earum ducimus quas modi vitae, laborum maxime explicabo enim labore doloremque, necessitatibus corrupti minima.</p>
            </section>
    </div>


    <section class="contenedor">
        <h3>Colores de Fondo</h3>
        <div class="tabla_colores">
            <div class="uno">
                <p>Colores</p>
            </div>

            <div class="dos">
                <p>black</p>
            </div>

            <div class="tres">
                <p>teal</p>
            </div>

            <div class="cuatro">
                <p>blue</p>
            </div>

            <div class="cinco">
                <p>navy</p>
            </div>

            <div class="seis">
                <p>lime</p>

            </div>

            <div class="siete">
                <p>white</p>
            </div>

            <div class="ocho">
                <p>purple</p>
            </div>

            <div class="nueve">
                <p>yellow</p>
            </div>

            <div class="diez">
                <p>olive</p>
            </div>

            <div class="once">
                <p>red</p>
            </div>

            <div class="doce">
                <p>black</p>
            </div>

            <div class="trece">
                <p>gray</p>
            </div>

            <div class="catorce">
                <p>olive</p>
            </div>

            <div class="quince">
                <p>red</p>
            </div>

            <div class="dieciseis">
                <p>fuchsia</p>
            </div>

            <div class="diecisiete">
                <p>green</p>
            </div>


            <h3>Colores de letra</h3>

            <div class="coloresdeletra">
                <p class="black">black</p>
                <p class="teal">teal</p>
                <p class="blue">blue</p>
                <p class="navy">navy</p>
                <p class="lime">lime</p>
                <p class="white">white</p>
                <p class="purple">purple</p>
                <p class="yellow">yellow</p> <br/>
                <p class="olive">olive</p>
                <p class="red">red</p>
                <p class="marron">marron</p>
                <p class="gray">gray</p>
                <p class="fuchsia">fuchsia</p>
                <p class="green">green</p>
                <p class="aqua">aqua</p>
                <p class="silver">silver</p>

            </div>
    </section>
</body>
</html>