AxoloteShop_backup/footer.html at main · danzosr/AxoloteShop_backup · 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
<!--Validamos el tipo de documento como html-->
<!DOCTYPE html>
<html>
<!--Se inicia colocando el encabezado con la relación al archivo de estilos en cascada style.css-->
<head>
    <link rel="stylesheet" href="Css/style.css">
</head>
<!--Iniciamos el footer (pie de página) que será mostrado en casi todas las pestañas-->
<footer>
    <!--Agregamos los atributos de las clases footer-main, container, row y la grid principal para organizar
    la información que debamos colocar.-->
    <div class="footer-main">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <!--Se agrega footer-top-box para colocar una especie de contenedor con subrayado a color, conteniendo
                    el encabezado de la información a colocar-->
                    <div class="footer-top-box">
                        <h3>Redes sociales</h3>
                        <p>Siguenos en nuestras redes sociales</p>
                        <!--Se crea una lista con los "links" a las redes sociales de la página, colocándolos dentro de los iconos
                        de su respectiva red-->
                        <ul>
                            <li><a href="#"><i class="fab fa-facebook" aria-hidden="true"></i></a></li>
                            <li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
                            <li><a href="#"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
                            <li><a href="#"><i class="fab fa-google-plus" aria-hidden="true"></i></a></li>
                            <li><a href="#"><i class="fa fa-rss" aria-hidden="true"></i></a></li>
                            <li><a href="#"><i class="fab fa-pinterest-p" aria-hidden="true"></i></a></li>
                            <li><a href="#"><i class="fab fa-whatsapp" aria-hidden="true"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <!--Agregamos un footer-widget para acomodar el subtitulo en una grid de 1/3 -->
                    <div class="footer-widget">
                        <h4>Acerca de</h4>
                        <!--Despues del subtitulo sólo hace falta agregar la informacion-->
                        <p>Aquí en AjoloteShop buscamos ayudar a jóvenes y adultos a compartir sus artesanías tradicionales con el mundo</p>
                        <p>Permitiéndoles obtener ganancias y generando nuevos empleos</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <!--Repetimos el proceso del paso anterior, esta vez colocando la información de contacto en vez del about us-->
                    <div class="footer-link-contact">
                        <h4>Contact Us</h4>
                        <ul>
                            <li>
                                <p><i class="fas fa-map-marker-alt"></i>Dirección: -------------------- <br>------------<br> -- #------ </p>
                            </li>
                            <li>
                                <p><i class="fas fa-phone-square"></i>Teléfono: <a href="tel:+522-***-****-***">+522-***-****-***</a></p>
                            </li>
                            <li>
                                <p><i class="fas fa-envelope"></i>Correo: <a href="mailto:AxolotlShopEnterprise@gmail.com">contactinfo@gmail.com</a></p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!--Se agrega un copyright bastante sencillo-->
<div class="footer-copyright">
    <p class="footer-company">Todos los derechos reservados, LosPokimones</p>
</div>
</html>
<!--Comentado por Diego Sánchez Luna-->