sergiecode-html/audiovisuales.html at master · camilachirinocastell/sergiecode-html · 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
<!DOCTYPE html><!-- Define la versión de HTML que estás utilizando (en este caso, HTML5) -->
<html lang="en">
<!-- La etiqueta html es el contenedor principal de todo el contenido de la página. El atributo lang especifica el idioma del documento.-->

<head><!--¿cómo esta configurada la página? lo lee el navegador y los robots de búsqueda: usar palabras clave-->
    <!--metadatos:-->
    <meta charset="UTF-8"><!--disoposición del teclado (ñ y caracteres especiales)-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--escala, hacer diseño responsive. 1.0 es escala completa. mobile first-->
    <meta name="author" content="Camila ChirinO Castell">
    <meta name="description" content="Proyecto HTML Portfolio Camila Chirino Castell">
    <meta name="keywords" content="portfolio,web developmen, html, frontend">
    <!--palabras clave para posicionarse a nivel CEO-->
    <!--links:-->
    <link rel="stylesheet" href="style.css"><!--conectar con css-->
    <link rel="shortcut icon" href="icons8-corazones-96.png" type="image/x-icon"><!--incono en pestaña del navegador.Referencia de autor/a--><!--<a target="_blank" href="https://icons8.com/icon/67555/favorite">Favorite</a> icono de <a target="_blank" href="https://icons8.com">Icons8</a>-->
    <title>HTML CCC</title><!--lo que aparece en la pestaña del navegador-->
    <style>
        body {
            font-family: "Lucida Console", "Courier New", monospace;
            background: linear-gradient(to right, rgb(189, 189, 255), rgb(255, 233, 236));
            padding: 0;
            margin: 0;
        }

        header {
            text-align: center;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover:not(.active) {
            background-color: #111;
        }

        .active {
            background-color: #04AA6D;
        }

        h1 {
            background-color: black;
            padding: 10px;
            margin: 0;
            color: #92a4ff;
        }

        div.gallery {
            margin: 5px;
            border: 1px solid #ccc;
            float: left;
            width: 33vw;
        }

        div.gallery:hover {
            border: 1px solid #777;
        }

        div.gallery img {
            width: 100%;
            height: auto;
        }

        div.desc {
            padding: 15px;
            text-align: center;
        }

        .centrado {
            display: flex;
            justify-content: center;
        }
        .footer {
            background-color: #333;
            color: #FFF;
            padding: 10px;
            text-align: center;
            clear: both;
        }
    </style>
</head>
<body><!--lo que ve el usuario-->
    <!--links-->
    <script src="index.js"></script><!--conectar con javascript-->
    <!--estructura base-->
    <header>
        <h1>Mercados de la tierra</h1>
        <nav>
         <ul>
            <li><a href="ccc.proyecto.sergiecode.html">Home</a></li>
            <li><a href="preferencias.html">Preferencias</a></li>
            <li><a class="active" href="audiovisuales.html">Audiovisuales</a></li>
            <li><a href="contacto.html">Contacto</a></li>
         </ul>
        </nav>
    </header>
    <hr>
    <div class="centrado">
     <video src="assets/video/Vídeo para historia instagram collage inspiración decoración hogar minimalista aesthetic beige (9).mp4" width="400" autoplay controls></video>
    </div>
    <section class="centrado"><!--Galería basica de imagenes-->
        <div class="gallery"> <!--AGRUPADOR DE BLOQUE-->
          <a href="assets/img/imagen serum.jpg" target="_blank"><img src="/assets/img/imagen serum.jpg" alt="SERUM VITAMINA C" width="600"></a>
          <div class="desc">Serum Vitamina C</div>
        </div>
        <div class="gallery">
          <a href="assets/img/imagen jabon carbon.jpg" target="_blank"><img src="assets/img/imagen jabon carbon.jpg" alt="JABÓN CARBÓN ACTIVADO" width="600"></a>
          <div class="desc">Jabón de carbón activado</div>
        </div>
        <div class="gallery">
         <a href="assets/img/imagen balsamo color.jpg" target="_blank"><img src="assets/img/imagen balsamo color.jpg" alt="BÁLSAMO COLOR" width="600"></a>
         <div class="desc">Bálsamo de labios COLOR</div>
        </div>
    </section>

    <footer class="footer">
        <p>Derechos reservados &copy; 2024</p><!--copy: simbolo en pantalla-->
    </footer>
</body>

</html>