actividad7/index.html at main · Cesar-Rivas/actividad7 · 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
<html>
<head>
  <link rel="icon" href="http://example.com/favicon.png">
  <link rel="stylesheet" href="estilo.css">

</head>
<body>
<!-- César René Rivas Andrade 5-I-->

<div class="grid-container">
<div class=item7"></div>
  <div class="item1">
    <img  src="imagenes/logo.png" alt="Teto´s Cars Logo">
  </div>
  <div class="item2" >
    <div class="dropdown">
      <button class="dropbtn">Menú</button>
      <div class="dropdown-content">
        <a href="#">Trabajos de pintura</a>
        <a href="#">Servicio mécanico</a>
        <a href="#">Engomado ecológico</a>
        <a href="#">Refaccionaria</a>
        <a href="#">Compra/venta de autos</a>
        <a href="#">Accesorios</a>
        <a href="#">Aromatizantes</a>
        <a href="#">Llaveros personalizados</a>
        <a href="#">Productos de limpieza</a>
        <a href="#">Señalamientos</a>
        <a href="#">Herramientas</a>
      </div>
    </div>
    <!-- César René Rivas Andrade 5-I-->
  <h2 id="bordetexto"><b>¿En problemas?</b></h2>
  <b id="bordetexto">Déjanos ayudarte!</b></br></br>
  <img src="imagenes/aside1.PNG" alt="Servicio mécanico" width="300" height="350" style="border-radius: 10px;"></br></br>
  <b id="bordetexto">Contamos con serivicio mécanico profesional las 24 horas</b></br></br>
  <a href="#"><img src="imagenes/contacto.png" alt="Contacto" width="300" height="350"></a></br></br>
  </div>
  <div class="item3">
    <div class="cabecera">
    <div class="slideshow-container">

      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <a href="#"><img src="imagenes/articulo1.png" alt="Cursos" width="1000" height="428"></a>
        <div class="text">Visita nuestros cursos de mécanica básica para accidentes</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <a href="#"><img src="imagenes/articulo2.png" alt="cátalogo de refacciones" width="1000" height="428"></a>
        <div class="text">Visita nuestro cátalogo de refacciones</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <a href="#"><img src="imagenes/articulo3.png" alt="Mapa de accidentes" width="1000" height="428"></a>
        <div class="text">Visita nuestro mapa en tiempo real de accidentes de tráfico</div>
      </div>

      <a class="prev" onclick="plusSlides(-1)">❮</a>
      <a class="next" onclick="plusSlides(1)">❯</a>
      <!-- César René Rivas Andrade 5-I-->
      </div>

      <script>
      var slideIndex = 1;
      showSlides(slideIndex);

      function plusSlides(n) {
        showSlides(slideIndex += n);
      }

      function currentSlide(n) {
        showSlides(slideIndex = n);
      }

      function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";


      }
      </script>
      </div>
  </div>
  <div class="item4">
    <b id="bordetexto">Visita nuestra tienda en línea y no te pierdas de estas grandes ofertas</b></br></br>
    <a href="#"><img src="imagenes/articulo4.png" alt="Promociones tienda en linea" width="1030" height="458"> </a>

  </div><!-- César René Rivas Andrade 5-I-->

  <div class="item5">
    <b id="bordetexto">Visitanos!</b></br></br>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3398.191516830349!2d-106.383746285002!3d31.601211581342927!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86e7664d7e6f7b9d%3A0xf8eff3d8a8dc083f!2sTetos%20Car&#39;s!5e0!3m2!1ses-419!2smx!4v1633884440710!5m2!1ses-419!2smx" width="1030" height="458" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

  </div>
  <div class="item6">
    <img src="imagenes/piepagina.png" alt="Pie de pagina" width="270" height="42"> </br>
    <b id="bordetexto" style="font-size: small;">Teto´s Cars, 2021. Todos los derechos reservados.</b>
  </div>
</div>

</body>
</html>