<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Aprendo en Casa</title>
    <link rel="shortcut icon" href="img/nico.png" type="image/x-icon">
    <link rel="stylesheet" href="css/estilos.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&display=swap" rel="stylesheet"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/stile.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="stilo.css">
</head>
<body>
    <header>
        <nav>
            <a href="#">Inicio</a>
            <a href="#">El COVID-19</a>
            <a href="#">Portafolio</a>
            <a href="#">¿Que dicen los peruanos?</a>
            <a href="#">Informate acerca del covid</a>
        </nav>
        <section class="textos-header">
            <h1><img src="img/logo.jpg" alt="" class="imagen-about-us"> </h1>
            <h2><audio id="demo" src="Audio/audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">Reproducir el Audio</button>
  <button onclick="document.getElementById('demo').pause()">Pausar el Audio</button>
  <button onclick="document.getElementById('demo').volume+=0.1">Aumentar el Volumen</button>
  <button onclick="document.getElementById('demo').volume-=0.1">Disminuir el Volumen</button>
</div></h2>
        </section>
        <div class="wave" style="height: 150px; overflow: hidden;"><svg viewBox="0 0 500 150" preserveAspectRatio="none"
                style="height: 100%; width: 100%;">
                <path d="M0.00,49.98 C150.00,150.00 349.20,-50.00 500.00,49.98 L500.00,150.00 L0.00,150.00 Z"
                    style="stroke: none; fill: #fff;"></path>
            </svg></div>
    </header>
    <main>
        <section class="contenedor sobre-nosotros">
            <h2 class="titulo">EL COVID-19</h2>
            <div class="contenedor-sobre-nosotros">
                <video src="video/video.mp4" controls style="height: 50%; width: 50%">
  Tu navegador no implementa el elemento <code>video</code>.
</video>
                <div class="contenido-textos">
                    <h3><span>1</span>¿Que es Covid-19?</h3>
                    <p>Los coronavirus son una familia de virus que pueden causar enfermedades como el resfriado común, el síndrome respiratorio agudo grave (SARS, por sus siglas en inglés), y el síndrome respiratorio de Oriente Medio (MERS, por sus siglas en inglés). En 2019 se identificó un nuevo coronavirus como la causa de un brote de enfermedades que se originó en China.</p>
                    <h3><span>2</span>¿Cuales son los signos y Sintomas del Covid-19?</h3>
                    <p>Los signos y síntomas de la enfermedad del coronavirus 2019 (COVID-19) pueden aparecer entre dos y 14 días después de la exposición al virus. Este período entre la exposición y la aparición de los síntomas se llama el período de incubación. Los signos y los síntomas comunes pueden incluir:Fiebre,Tos,Cansancio. Otros síntomas pueden ser:
                    Falta de aire o dificultad para respirar,Dolores musculares,Escalofríos,Dolor de garganta,Pérdida del sentido del gusto o del olfatoDolor de cabeza,Dolor en el pecho</p>
                </div>
            </div>
        </div>
        <div class="container">
    <main class="container">
  <div id="carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel" data-slide-to="0" class="active"></li>
      <li data-target="#carousel" data-slide-to="1"></li>
      <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
      <div class="carousel-inner">
      <div class="carousel-item active">
          <div align="center"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-rrJcj37Ufyi7nRC8O6239tUm0jflOue402mTBNdzM5wquSXL8MhAPRwaR-L-9AR7ELk&usqp=CAU" class="d-block w-100" alt="1"></div>
      </div>
      <div class="carousel-item">
        <div align="center"><img src="https://campus.mundomandalaperu.com/courses/PROMPANDEMIA1/course-pic.png" class="d-block w-100" alt="2"></div>
      </div>
      <div class="carousel-item">
        <div align="center"><img src="https://campus.mundomandalaperu.com/courses/IISEMINARIO2021/course-pic.png" class="d-block w-100" alt="3"></div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Anterior</span>
    </a>
    <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Siguiente</span>
    </a>
  </div> 
  </main> 
      </div>
    </div>
        <div class="container">
      <div class="row">
        <div class="card-group">
  <div class="card" style="right: 18rem;">
    <img src="img/1.png"  width="180" height="200" class="img-fluid" alt="Responsive image">
  <div class="card-body">
    <h5 class="card-title">CERTIFICADO</h5>
    <p class="card-text"></p>
<a href="https://getbootstrap.com/docs/4.5/components/card/" class="btn btn-primary">DAR CLICK</a>
  </div>
  </div>
  <div class="card">
    <img src="img/1.png"  width="180" height="200" class="img-fluid" alt="Responsive image">
  <div class="card-body">
    <h5 class="card-title">ALUMNOS REGISTRADOS</h5>
    <p class="card-text"></p>
    <a href="tablas/tabla.html" class="btn btn-primary">DAR CLICK</a>
  </div>
  </div>
  <div class="card">
    <img src="img/2.png"  width="180" height="200" class="img-fluid" alt="Responsive image">
  <div class="card-body">
    <h5 class="card-title">REGISTRATE AQUI</h5>
    <p class="card-text"></p>
    <a href="formularios/formularios.html" class="btn btn-primary">DAR CLICK</a>
  </div>
</div>
<div class="card">
    <img src="img/3.png"  width="180" height="200" class="img-fluid" alt="Responsive image">
  <div class="card-body">
    <h5 class="card-title">VISITA NUESTRA MAQUETACIÓN ACERCA DEL COVID-19</h5>
    <p class="card-text"></p>
    <a href="maquetacion/maquetacion3.html" class="btn btn-primary">DAR CLICK</a>
  </div>
</div>
</div>
</div>
        <section class="portafolio">
            <div class="contenedor">
                <h2 class="titulo">Portafolio</h2>
                <div class="galeria-port">
                    <div class="imagen-port">
                        <img src="img/img1.jpg" alt="">
                        <div class="hover-galeria">
                            <img src="img/icono1.png" alt="">
                            <p>Nuestro trabajo</p>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img2.jpg" alt="">
                        <div class="hover-galeria">
                            <img src="img/icono1.png" alt="">
                            <p>Nuestro trabajo</p>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img3.jpg" alt="">
                        <div class="hover-galeria">
                            <img src="img/icono1.png" alt="">
                            <p>Nuestro trabajo</p>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img1.jpg" alt="">
                        <div class="hover-galeria">
                            <img src="img/icono1.png" alt="">
                            <p>Nuestro trabajo</p>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img4.jpg" alt="">
                        <div class="hover-galeria">
                            <img src="img/icono1.png" alt="">
                            <p>Nuestro trabajo</p>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img5.jpg" alt="">
                        <div class="hover-galeria">
                            <img src="img/icono1.png" alt="">
                            <p>Nuestro trabajo</p>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img6.jpg" alt="">
                        <div class="hover-galeria">
                            <img src="img/icono1.png" alt="">
                            <p>Nuestro trabajo</p>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img7.jpg" alt="">
                        <div class="hover-galeria">
                            <img src="img/icono1.png" alt="">
                            <p>Nuestro trabajo</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="clientes contenedor">
            <h2 class="titulo">¿Que dicen los Peruanos?</h2>
            <div class="cards">
                <div class="card">
                    <img src="img/face1.jpg" alt="">
                    <div class="contenido-texto-card">
                        <h4>Flor Martinez Purizaga</h4>
                        <p>¡Me parece increible como estan enseñando a los jovenes de hoy en dia
                        sigan asi y muchos exitos!</p>
                    </div>
                </div>
                <div class="card">
                    <img src="img/face2.jpg" alt="">
                    <div class="contenido-texto-card">
                        <h4>Antonella Perez Gonzales</h4>
                        <p>¡Me encanto saber que se puede hacer rapida esta prueba y descartar si tienes o no el Covid-19!</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="about-services">
            <div class="contenedor">
                <h2 class="titulo">!Informate acerca del covid!</h2>
                <div class="servicio-cont">
                    <div class="servicio-ind">
                        <img src="img/ilustracion1.svg" alt="">
                        <h3><form method="get" action="codigo base.html"><input type="submit" value="Prueba gratis" /></h3>
                        <p>¡Haste una prueba rapida ahora!</p>
                    </div>
                    <div class="servicio-ind">
                        <img src="img/ilustracion4.svg" alt="">
                        <h3>Comentarios</h3>
                        <p>Deja tu comentario acerca de la prueba rápida, muchas gracias</p>
                        <span class="">
      <input id="enviar" name="enviar" value="" />
      <label for="Comentarios"><button id="enviar">enviar</button></label>
    </span>
                    </div>
                    <div class="servicio-ind">
                        <img src="img/ilustracion3.svg" alt="">
                        <h3>calificación</h3>
                        <p><select id="calificación" name="calificación">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
      <form method="get" action=""><input type="submit" value="enviar" /></p>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <div class="contenedor-footer">
            <div class="content-foo">
                <h4>Celular</h4>
                <p>902078884</p>
            </div>
            <div class="content-foo">
                <h4>Correo Electronico</h4>
                <p>0112140012@uladech.pe</p>
            </div>
            <div class="content-foo">
                <h4>Ubicación</h4>
                <p>Chimbote-La Victoria</p>
            </div>
        </div>
        <h2 class="titulo-final">&copy; NICANOR CONTRERAS NIETO | </h2>
    </footer>
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>