alejandro055/comentarios.html

## comentarios.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comentarios</title>
    <link rel="shortcut icon" href="img/logo photoshop.png" type="image/x-icon">
    <link rel="stylesheet" href="css/estilopag2.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <section class="textos-header">
            <h1>Comentarios de nuestros clientes</h1>
            <h2>Porque tu opinión nos importa!</h2>
        </section>

        <div style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M0.00,49.98 C324.21,56.75 324.21,56.75 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: rgba(209, 38, 195, 0.041);"></path></svg></div>

    </header>
    <main>


      <div class="containerComentarios">
        <div class="row align-items-start">
          <div class="col">

            <figure class="figure">
              <img src="img/img/estudiante1.jpg" class="figure-img img-fluid rounded" alt="...">
              <figcaption class="figure-caption">Hola, soy Ana López, estudiante de odontología en GEA Bolivia. Elegí esta institución por su excelente
                reputación y no me ha decepcionado. Los profesores son increíblemente dedicados y siempre están dispuestos a ayudar. Además, los recursos
                y las instalaciones son de primera calidad, lo que nos permite aprender y practicar con las mejores herramientas y técnicas disponibles.
                Estoy muy contenta con mi elección y estoy segura de que GEA Bolivia me está preparando de la mejor manera para mi futura carrera profesional.</figcaption>
            </figure>

          </div>
          <div class="col">

            <figure class="figure">
              <img src="img/img/estudiante2.jpg" class="figure-img img-fluid rounded" alt="...">
              <figcaption class="figure-caption">Hola, soy Carla Martínez, estudiante de medicina en GEA Bolivia. La formación aquí es realmente completa y desafiante.
                Los profesores no solo son expertos en sus campos, sino que también se preocupan por nuestro desarrollo personal y profesional. Estoy segura de que estoy recibiendo
                 la mejor educación posible para convertirme en una excelente médica.</figcaption>
            </figure>

          </div>
        </div>


        <div class="row align-items-center">
          <div class="col">

            <figure class="figure">
              <img src="img/img/estudiante5.jpg" class="figure-img img-fluid rounded" alt="...">
              <figcaption class="figure-caption">Me llamo Valeria Suárez y estudio odontología en GEA Bolivia. Lo que más me gusta
                de la institución es la combinación de teoría y práctica. Las instalaciones son modernas y bien equipadas, y los profesores son
                 muy apasionados por su trabajo. Estoy segura de que esta formación me permitirá ser una odontóloga competente y exitosa.</figcaption>
            </figure>

          </div>
          <div class="col">

            <figure class="figure">
              <img src="img/img/estudiante6.jpg" class="figure-img img-fluid rounded" alt="...">
              <figcaption class="figure-caption">Hola, soy Andrés Rojas, estudiante de medicina en GEA Bolivia.
                Estoy muy satisfecho con la educación que estoy recibiendo aquí. Los docentes son muy accesibles y siempre están dispuestos a ayudar.
                 Además, las oportunidades de prácticas clínicas nos permiten aplicar lo aprendido en situaciones reales, lo cual es invaluable para nuestra
                 formación.</figcaption>
            </figure>

          </div>

        </div>


        <div class="row align-items-center">
          <div class="col">

            <figure class="figure">
              <img src="img/img/estudiante4.jpg" class="figure-img img-fluid rounded" alt="...">
              <figcaption class="figure-caption">Soy Mariana Gutiérrez, estudiante de programación en GEA Bolivia. Desde el primer día, supe que había tomado la decisión correcta.
                La calidad de la enseñanza es impresionante y los proyectos que realizamos nos preparan muy bien para el mundo laboral. Además, hay un ambiente de camaradería y
                 apoyo entre los estudiantes que hace que aprender sea una experiencia muy agradable.</figcaption>
            </figure>

          </div>

          <div class="col">

            <figure class="figure">
              <img src="img/img/estudiante3.jpg" class="figure-img img-fluid rounded" alt="...">
              <figcaption class="figure-caption">Hola, me llamo Lucía Fernández y estoy cursando ofimática en GEA Bolivia. Los cursos son muy prácticos y aplicables
                a la vida real. Me encanta cómo cada clase nos prepara para ser más eficientes y competentes en el uso de herramientas digitales. Sin duda, esta
                 formación me está abriendo muchas puertas en el ámbito laboral.</figcaption>
            </figure>

          </div>


        </div>
      </div>

    </main>
    <footer>
        <div class="contenedor-footer">
            <div class="content-foo">
                <h4>Comenta tu experiencia GEA</h4>
                <p>Coméntanos cómo te pareció nuestros cursos y capacitaciones. Manda un correo a geabolivia12@gmail.com con el asunto "Comentario" y comenta tu experiencia con nosotros!</p>
            </div>

        </div>
    </footer>

</body>
</html>

## estilopag2.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'open sans';
}

.contenedor {
    padding: 60px 0;
    width: 90%;
    max-width: 1000px;
    margin: auto;
    overflow: hidden;
}

.titulo {
    color: #642a73;
    font-size: 30px;
    text-align: center;
    margin-bottom: 60px;
}
.titulo-formulario{
    color: #4d0686;
}
.form-label{
    color: #af20d3;
    font-size: 20px;
}

.coment{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
/* Comentarios */

.containerComentarios{
    margin-top: 20px;
    padding: 20px;
    background-color: #e9ecef;
}

/* Header */

header {
    width: 100%;
    height: 600px;
    background: #bc4e9c;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, hsla(340, 95%, 50%, 0.459), hsla(317, 45%, 52%, 0.664)), url(../img/img/portada2Imagen.jpg );
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, hsla(340, 95%, 50%, 0.459), hsla(317, 45%, 52%, 0.664)), url(../img/img/registrarse.jpg);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}


header .textos-header{
    display: flex;
    height: 430px;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.textos-header h1{
    font-size: 50px;
    color:#fff;
}

.textos-header h2{
    font-size: 30px;
    font-weight: 300;
    color:#fff;
}

.wave{
    position: absolute;
    bottom: 0;
    width: 100%;
}


.contenido-textos h3{
    margin-bottom: 15px;
}

.contenido-textos h3 span{
    background: #4d0686;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    padding: 2px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    margin-right: 5px;
}

.contenido-textos p{
    padding: 0px 0px 30px 15px;
    font-weight: 300;
    text-align: justify;
}

/* Galeria */


.portafolio{
    background: #f2f2f2;
}

.galeria-port{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.imagen-port{
    width: 24%;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
}

.imagen-port > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hover-galeria{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transform: scale(0);
    background: hsla(273,91%,27%, 0.7);
    transition: transform .5s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hover-galeria img{
    width: 50px;
}

.hover-galeria p{
    color: #fff;
}

.imagen-port:hover .hover-galeria{
    transform: scale(1);
}


/* footer */

footer{
    background: #414141;
    padding: 60px 0 30px 0;
    margin: auto;
    overflow: hidden;
}

.contenedor-footer{
    display: flex;
    width: 90%;
    justify-content: space-evenly;
    margin: auto;
    padding-bottom: 50px;
    border-bottom: 1px solid #ccc;
}

.content-foo{
    text-align: center;
}

.content-foo h4{
    color: #fff;
    border-bottom: 3px solid #af20d3;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.content-foo p{
    color: #ccc;
}

.titulo-final{
    text-align: center;
    font-size: 24px;
    margin: 20px 0 0 0;
    color: #9e9797;
}

@media screen and (max-width:900px){
    header{
        background-position: center;
    }

    .contenedor-sobre-nosotros{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .sobre-nosotros .contenido-textos{
        width: 90%;
    }

    .imagen-about-us{
        width: 90%;
    }

    /* Galeria */

    .imagen-port{
        width: 44%;
    }

    /* Clientes */

    .cards{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .cards .card{
        width: 90%;
    }

    .cards .card:first-child{
        margin-bottom: 30px;
    }

    /* servicios */

    .servicio-cont{
        justify-content: center;
        flex-direction: column;
    }

    .servicio-ind{
        width: 100%;
        text-align: center;
    }

    .servicio-ind:nth-child(1), .servicio-ind:nth-child(2){
        margin-bottom: 60px;
    }

    .servicio-ind img{
        width: 90%;
    }
}

@media screen and (max-width:500px){
    nav{
        text-align: center;
        padding: 30px 0 0 0;
    }

    nav > a{
        margin-right: 5px;
    }

    .textos-header h1{
        font-size: 35px;
    }

    .textos-header h2{
        font-size: 20px;
    }

    /* ABOUT US */

    .imagen-about-us{
        margin-bottom: 60px;
        width: 99%;
    }

    .sobre-nosotros .contenido-textos{
        width: 95%;
    }

    /* Galeria */

    .imagen-port{
        width: 95%;
    }

    /* Clients */

    .cards .card{
        height: 450px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cards .card img{
        width: 90px;
        height: 90px;
    }

    /* Footer */

    .contenedor-footer{
        flex-direction: column;
        border: none;
    }

    .content-foo{
        margin-bottom: 20px;
        text-align: center;
    }

    .content-foo h4{
        border: none;
    }

    .content-foo p{
        color: #ccc;
        border-bottom: 1px solid #f2f2f2;
        padding-bottom: 20px;
    }

    .titulo-final{
        font-size: 20px;
    }
}

## estilos.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'open sans';
}

.contenedor {
    padding: 60px 0;
    width: 90%;
    max-width: 1000px;
    margin: auto;
    overflow: hidden;
}

.titulo {
    color: #642a73;
    font-size: 30px;
    text-align: center;
    margin-bottom: 60px;
}

/* Header */

header {
    width: 100%;
    height: 600px;
    background: #bc4e9c;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, hsla(340, 95%, 50%, 0.459), hsla(317, 45%, 52%, 0.664)), url(../img/img/portadaImagen.jpg );
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, hsla(340, 95%, 50%, 0.459), hsla(317, 45%, 52%, 0.664)), url(../img/img/portadaImagen.jpg);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

nav{
    text-align: right;
    padding: 30px 50px 0 0;
}

nav > a{
    color:#fff;
    font-weight: 300;
    text-decoration: none;
    margin-right: 10px;
}

nav > a:hover{
    text-decoration: underline;
}

header .textos-header{
    display: flex;
    height: 430px;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.textos-header h1{
    font-size: 50px;
    color:#fff;
}

.textos-header h2{
    font-size: 30px;
    font-weight: 300;
    color:#fff;
}

.wave{
    position: absolute;
    bottom: 0;
    width: 100%;
}

/* sobre nosotros */

main .sobre-nosotros{
    padding: 30px 0 60px 0;
}
.contenedor-sobre-nosotros{
    display: flex;
    justify-content: space-evenly;
}

.imagen-about-us{
    width: 48%;
}

.sobre-nosotros .contenido-textos{
    width: 48%;
}

.contenido-textos h3{
    margin-bottom: 15px;
}

.contenido-textos h3 span{
    background: #4d0686;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    padding: 2px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    margin-right: 5px;
}

.contenido-textos p{
    padding: 0px 0px 30px 15px;
    font-weight: 300;
    text-align: justify;
}

/* Nuestros cursos */


.portafolio{
    background: #f2f2f2;
}

.galeria-port{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.imagen-port{
    width: 24%;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
}

.imagen-port > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hover-galeria{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transform: scale(0);
    background: hsla(273,91%,27%, 0.7);
    transition: transform .5s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hover-galeria img{
    width: 50px;
}

.hover-galeria p{
    color: #fff;
}

.imagen-port:hover .hover-galeria{
    transform: scale(1);
}

/* Comentarios */

.cards{
    display: flex;
    justify-content: space-evenly;
}

.cards .card{
    background: #4d0686;
    display: flex;
    width: 46%;
    height: 200px;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 5px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);
}

.cards .card img{
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: 50%;
    display: block;
}

.cards .card > .contenido-texto-card{
    width: 60%;
    color: #fff;
}

.cards .card > .contenido-texto-card p{
    font-weight: 300;
    padding-top: 5px;
}

/*  Beneficios GEA */

.about-services{
    background: #f2f2f2;
    padding-bottom: 30px;
}


.servicio-cont{
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.servicio-ind{
    width: 28%;
    text-align: center;
}

.servicio-ind img{
    width: 90%;
}

.servicio-ind h3{
    margin: 10px 0;
}

.servicio-ind p{
    font-weight: 300;
    text-align: justify;
}

/* footer */

footer{
    background: #414141;
    padding: 60px 0 30px 0;
    margin: auto;
    overflow: hidden;
}

.contenedor-footer{
    display: flex;
    width: 90%;
    justify-content: space-evenly;
    margin: auto;
    padding-bottom: 50px;
    border-bottom: 1px solid #ccc;
}

.content-foo{
    text-align: center;
}

.content-foo h4{
    color: #fff;
    border-bottom: 3px solid #af20d3;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.content-foo p{
    color: #ccc;
}

.titulo-final{
    text-align: center;
    font-size: 24px;
    margin: 20px 0 0 0;
    color: #9e9797;
}

@media screen and (max-width:900px){
    header{
        background-position: center;
    }

    .contenedor-sobre-nosotros{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .sobre-nosotros .contenido-textos{
        width: 90%;
    }

    .imagen-about-us{
        width: 90%;
    }

    /* Cursos GEA */

    .imagen-port{
        width: 44%;
    }

    /* Comentarios */

    .cards{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .cards .card{
        width: 90%;
    }

    .cards .card:first-child{
        margin-bottom: 30px;
    }

    /* Beneficios GEA */

    .servicio-cont{
        justify-content: center;
        flex-direction: column;
    }

    .servicio-ind{
        width: 100%;
        text-align: center;
    }

    .servicio-ind:nth-child(1), .servicio-ind:nth-child(2){
        margin-bottom: 60px;
    }

    .servicio-ind img{
        width: 90%;
    }
}

@media screen and (max-width:500px){
    nav{
        text-align: center;
        padding: 30px 0 0 0;
    }

    nav > a{
        margin-right: 5px;
    }

    .textos-header h1{
        font-size: 35px;
    }

    .textos-header h2{
        font-size: 20px;
    }

    /* sobre nosotros*/

    .imagen-about-us{
        margin-bottom: 60px;
        width: 99%;
    }

    .sobre-nosotros .contenido-textos{
        width: 95%;
    }

    /* Cursos GEA */

    .imagen-port{
        width: 95%;
    }

    /* Comentarios */

    .cards .card{
        height: 450px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cards .card img{
        width: 90px;
        height: 90px;
    }

    /* Footer */

    .contenedor-footer{
        flex-direction: column;
        border: none;
    }

    .content-foo{
        margin-bottom: 20px;
        text-align: center;
    }

    .content-foo h4{
        border: none;
    }

    .content-foo p{
        color: #ccc;
        border-bottom: 1px solid #f2f2f2;
        padding-bottom: 20px;
    }

    .titulo-final{
        font-size: 20px;
    }
}

## index.html
<!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>Página web AlexCG</title>
    <link rel="shortcut icon" href="img/alexcgdesign.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">
</head>

<body>
    <header>
        <nav>
            <a href="#">Inicio</a>
            <a href="#">Acerca de</a>
            <a href="#">Portafolio</a>
            <a href="#">Servicios</a>
            <a href="#">Contacto</a>
        </nav>
        <section class="textos-header">
            <h1>Potencia tus ventas al menos un 200%</h1>
            <h2>Con una página web potente</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">Nuestro producto</h2>
            <div class="contenedor-sobre-nosotros">
                <img src="img/ilustracion2.svg" alt="" class="imagen-about-us">
                <div class="contenido-textos">
                    <h3><span>1</span>Los mejores productos</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt veniam eius aspernatur ad
                        consequuntur aperiam minima sed dicta odit numquam sapiente quam eum, architecto animi pariatur,
                        velit doloribus laboriosam ut.</p>
                    <h3><span>2</span>Los mejores productos</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt veniam eius aspernatur ad
                        consequuntur aperiam minima sed dicta odit numquam sapiente quam eum, architecto animi pariatur,
                        velit doloribus laboriosam ut.</p>
                </div>
            </div>
        </section>
        <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 nuestros clientes</h2>
            <div class="cards">
                <div class="card">
                    <img src="img/face1.jpg" alt="">
                    <div class="contenido-texto-card">
                        <h4>Name</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, sapiente!</p>
                    </div>
                </div>
                <div class="card">
                    <img src="img/face2.jpg" alt="">
                    <div class="contenido-texto-card">
                        <h4>Name</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, sapiente!</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="about-services">
            <div class="contenedor">
                <h2 class="titulo">Nuestros servicios</h2>
                <div class="servicio-cont">
                    <div class="servicio-ind">
                        <img src="img/ilustracion1.svg" alt="">
                        <h3>Name</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, qui?</p>
                    </div>
                    <div class="servicio-ind">
                        <img src="img/ilustracion4.svg" alt="">
                        <h3>Name</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, qui?</p>
                    </div>
                    <div class="servicio-ind">
                        <img src="img/ilustracion3.svg" alt="">
                        <h3>Name</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, qui?</p>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <div class="contenedor-footer">
            <div class="content-foo">
                <h4>Phone</h4>
                <p>8296312</p>
            </div>
            <div class="content-foo">
                <h4>Email</h4>
                <p>8296312</p>
            </div>
            <div class="content-foo">
                <h4>Location</h4>
                <p>8296312</p>
            </div>
        </div>
        <h2 class="titulo-final">&copy; AlexCG Design | Jordan Alexander</h2>
    </footer>
</body>

</html>

## paginaprincipal.html
<!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>GEA Bolivia</title>
    <link rel="shortcut icon" href="img/logo photoshop.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">
</head>

<body>
    <header>
        <nav>
            <a href="#">Inicio</a>
            <a href="comentarios.html">Comentarios</a>
            <a href="nuestroPersonal/PersonalGeaBol.html">Nuestro Personal</a>
            <a href="registro.html">Registrate</a>
        </nav>
        <section class="textos-header">
            <h1>Sé uno de los mejores estudiantes</h1>
            <h2>de toda Bolivia</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">Acerca de nosotros</h2>
            <div class="contenedor-sobre-nosotros">
                <img src="img/ilustracion2.svg" alt="" class="imagen-about-us">
                <div class="contenido-textos">
                    <h3><span>1</span>¿Quiénes somos?</h3>
                    <p>GEA Bolivia es una institución la cual ofrece una infinidad de cursos online, especialmente para profesionales y estudiantes universitarios.
                        Puedes capacitarte semana tras semana. En GEA queremos ser líderes de la educación boliviana, es
                        por eso que nuestro personal está altamente capacitado, todo esto con un único fin: Ser la empresa líder
                        en educación.
                    </p>
                    <h3><span>2</span>¿Cuánto duran nuestros cursos?</h3>
                    <p>En GEA, tenemos dos tipos de capacitaciones: Las conferencias y los cursos. Las conferencias tienen una duración de 2 días, en cada día se da una conferencia
                        de 2 horas. En estas conferencias se tocan temas sobre habilidades blandas o cursos básicos que se puedan llevar en dos días. En caso de querer cursos más
                        especializados, contamos con nuestros cursos regulares, los cuales tienen una duración de 2 meses.
                    </p>
                </div>
            </div>
        </section>
        <section class="portafolio">
            <div class="contenedor">
                <h2 class="titulo">Nuestros cursos</h2>
                <div class="galeria-port">
                    <div class="imagen-port">
                        <img src="img/img/excel.jpg" alt="">
                        <div class="hover-galeria">
                        <a href="https://youtu.be/iEbZxJ7OJOs">
                            <img src="img/icono1.png" alt="">
                            <p>Excel</p>
                        </a>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img/fotografía.jpg" alt="">
                        <div class="hover-galeria">
                            <a href="https://youtu.be/BcQUkNgG5Ks">
                                <img src="img/icono1.png" alt="">
                                <p>Fotografía</p>
                            </a>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img/word.jpg" alt="">
                        <div class="hover-galeria">
                            <a href="https://youtu.be/MPDtnhvNuZk">
                                <img src="img/icono1.png" alt="">
                                <p>Word</p>
                            </a>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img/dentista.jpg" alt="">
                        <div class="hover-galeria">
                            <a href="https://youtu.be/lmfHjaGbXeU">
                                <img src="img/icono1.png" alt="">
                                <p>Ortodoncia</p>
                            </a>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img/doctor.jpg" alt="">
                        <div class="hover-galeria">
                            <a href="https://youtu.be/Xl6KrJ0X_TE">
                                <img src="img/icono1.png" alt="">
                            <p>Enf. Crónicas</p>
                            </a>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img/robot.jpg" alt="">
                        <div class="hover-galeria">
                            <a href="https://youtu.be/EK4mH2Zo4TI">
                                <img src="img/icono1.png" alt="">
                                <p>Robótica</p>
                            </a>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img/conta.jpg" alt="">
                        <div class="hover-galeria">
                            <a href="https://youtu.be/MoPISyUoJHo">
                                <img src="img/icono1.png" alt="">
                                <p>Contabilidad</p>
                            </a>
                        </div>
                    </div>
                    <div class="imagen-port">
                        <img src="img/img/diseño.jpg" alt="">
                        <div class="hover-galeria">
                            <a href="https://youtu.be/oI8CuoAHCUM">
                                <img src="img/icono1.png" alt="">
                                <p>Diseño gráfico</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <section class="clientes contenedor">
            <h2 class="titulo">¿Qué dicen nuestros estudiantes?</h2>
            <div class="cards">
                <div class="card">
                    <img src="img/img/face1.jpg" alt="">
                    <div class="contenido-texto-card">
                        <h4>Alexia Aguirre</h4>
                        <p>Gracias a GEA, puedo postular a trabajos más importantes y con mayor
                            rédito económico.
                        </p>
                    </div>
                </div>
                <div class="card">
                    <img src="img/img/est2.jpg" alt="">
                    <div class="contenido-texto-card">
                        <h4>Ricardo Aleman</h4>
                        <p>Me sirvió muchos los cursos para poder aprender sobre temas que se me hacían difícil.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="about-services">
            <div class="contenedor">
                <h2 class="titulo">Beneficios de ser parte de GEA</h2>
                <div class="servicio-cont">
                    <div class="servicio-ind">
                        <img src="img/ilustracion1.svg" alt="">
                        <h3>Aprendizaje</h3>
                        <p>Aprende todo lo que tú quieras, a tan solo un clic de distancia.</p>
                    </div>
                    <div class="servicio-ind">
                        <img src="img/ilustracion4.svg" alt="">
                        <h3>Trabajo</h3>
                        <p>Ten un curriculum más completo que el resto de las personas</p>
                    </div>
                    <div class="servicio-ind">
                        <img src="img/ilustracion3.svg" alt="">
                        <h3>Actualización</h3>
                        <p>Entérate de las últimas tendencias en el mercado laboral y educativo.</p>
                    </div>
                </div>
            </div>
        </section>

    </main>
    <footer>
        <div class="contenedor-footer">
            <div class="content-foo">
                <h4>Teléfono</h4>
                <p>72575011</p>
            </div>
            <div class="content-foo">
                <h4>Email</h4>
                <p>geabolivia12@gmail.com</p>
            </div>
            <div class="content-foo">
                <h4>Ubicación</h4>
                <p>Irpavi calle 18A</p>
            </div>
        </div>
    </footer>
</body>

</html>

## personal.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'open sans';
}

.contenedor {
    padding: 60px 0;
    width: 90%;
    max-width: 1000px;
    margin: auto;
    overflow: hidden;
}

.contenerores{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.titulo {
    color: #642a73;
    font-size: 30px;
    text-align: center;
    margin-bottom: 60px;
}
.titulo-formulario{
    color: #4d0686;
}
.form-label{
    color: #af20d3;
    font-size: 20px;
}


/* Header */

header {
    width: 100%;
    height: 600px;
    background: #bc4e9c;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, hsla(340, 95%, 50%, 0.459), hsla(317, 45%, 52%, 0.664)), url(../img/img/portada2Imagen.jpg );
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, hsla(340, 95%, 50%, 0.459), hsla(317, 45%, 52%, 0.664)), url(../img/img/registrarse.jpg);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}


header .textos-header{
    display: flex;
    height: 430px;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.textos-header h1{
    font-size: 50px;
    color:#fff;
}

.textos-header h2{
    font-size: 30px;
    font-weight: 300;
    color:#fff;
}

.wave{
    position: absolute;
    bottom: 0;
    width: 100%;
}


.contenido-textos h3{
    margin-bottom: 15px;
}

.contenido-textos h3 span{
    background: #4d0686;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    padding: 2px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    margin-right: 5px;
}

.contenido-textos p{
    padding: 0px 0px 30px 15px;
    font-weight: 300;
    text-align: justify;
}

/* Galeria */


.portafolio{
    background: #f2f2f2;
}

.galeria-port{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.imagen-port{
    width: 24%;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
}

.imagen-port > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hover-galeria{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transform: scale(0);
    background: hsla(273,91%,27%, 0.7);
    transition: transform .5s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hover-galeria img{
    width: 50px;
}

.hover-galeria p{
    color: #fff;
}

.imagen-port:hover .hover-galeria{
    transform: scale(1);
}


/* footer */

footer{
    background: #414141;
    padding: 60px 0 30px 0;
    margin: auto;
    overflow: hidden;
}

.contenedor-footer{
    display: flex;
    width: 90%;
    justify-content: space-evenly;
    margin: auto;
    padding-bottom: 50px;
    border-bottom: 1px solid #ccc;
}

.content-foo{
    text-align: center;
}

.content-foo h4{
    color: #fff;
    border-bottom: 3px solid #af20d3;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.content-foo p{
    color: #ccc;
}

.titulo-final{
    text-align: center;
    font-size: 24px;
    margin: 20px 0 0 0;
    color: #9e9797;
}

@media screen and (max-width:900px){
    header{
        background-position: center;
    }

    .contenedor-sobre-nosotros{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .sobre-nosotros .contenido-textos{
        width: 90%;
    }

    .imagen-about-us{
        width: 90%;
    }

    /* Galeria */

    .imagen-port{
        width: 44%;
    }

    /* Clientes */

    .cards{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .cards .card{
        width: 90%;
    }

    .cards .card:first-child{
        margin-bottom: 30px;
    }

    /* servicios */

    .servicio-cont{
        justify-content: center;
        flex-direction: column;
    }

    .servicio-ind{
        width: 100%;
        text-align: center;
    }

    .servicio-ind:nth-child(1), .servicio-ind:nth-child(2){
        margin-bottom: 60px;
    }

    .servicio-ind img{
        width: 90%;
    }
}

@media screen and (max-width:500px){
    nav{
        text-align: center;
        padding: 30px 0 0 0;
    }

    nav > a{
        margin-right: 5px;
    }

    .textos-header h1{
        font-size: 35px;
    }

    .textos-header h2{
        font-size: 20px;
    }

    /* ABOUT US */

    .imagen-about-us{
        margin-bottom: 60px;
        width: 99%;
    }

    .sobre-nosotros .contenido-textos{
        width: 95%;
    }

    /* Galeria */

    .imagen-port{
        width: 95%;
    }

    /* Clients */

    .cards .card{
        height: 450px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cards .card img{
        width: 90px;
        height: 90px;
    }

    /* Footer */

    .contenedor-footer{
        flex-direction: column;
        border: none;
    }

    .content-foo{
        margin-bottom: 20px;
        text-align: center;
    }

    .content-foo h4{
        border: none;
    }

    .content-foo p{
        color: #ccc;
        border-bottom: 1px solid #f2f2f2;
        padding-bottom: 20px;
    }

    .titulo-final{
        font-size: 20px;
    }
}

## registro.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro</title>
    <link rel="shortcut icon" href="img/logo photoshop.png" type="image/x-icon">
    <link rel="stylesheet" href="css/estilopag2.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&display=swap" rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>

<body>
    <header>
        <section class="textos-header">
            <h1>Regístrate</h1>
            <h2>para construir un futuro brillante</h2>
        </section>

        <div style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M0.00,49.98 C324.21,56.75 324.21,56.75 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: rgba(209, 38, 195, 0.041);"></path></svg></div>

    </header>
    <main>

        <div class="formulario">
            <h1 class="titulo-formulario">Regístrate a nuestros cursos</h1>
                <label for="exampleFormControlInput1" class="form-label">Email</label>
                <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="ejemplo@gmail.com">
              </div>
              <div class="mb-4">
                <label for="exampleFormControlInput1" class="form-label">Celular</label>
                <input type="email" class="form-control" id="exampleFormControlInput1">
              </div>
              <div class="mb-5">
                <label for="exampleFormControlInput1" class="form-label">Departamento</label>
                <input type="email" class="form-control" id="exampleFormControlInput1">
              </div>
              <div class="mb-7">
                <label for="exampleFormControlInput1" class="form-label">Edad</label>
                <input type="email" class="form-control" id="exampleFormControlInput1">
              </div>
              <div class="mb-8">
                <label for="exampleFormControlInput1" class="form-label">Grado académico</label>
                <input type="email" class="form-control" id="exampleFormControlInput1">
              </div>
              <div class="mb-6">
                <h1 class="titulo-formulario">Escribe el o los cursos que desees</h1>
                <label for="exampleFormControlTextarea1" class="form-label">Deseo cursar:</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
              </div>
        </div>


        <button type="button" class="btn btn-primary btn-sm">Registrarse</button>


    </main>
    <footer>
        <div class="contenedor-footer">
            <div class="content-foo">
                <h4>Teléfono</h4>
                <p>72575011</p>
            </div>
            <div class="content-foo">
                <h4>Email</h4>
                <p>geabolivia12@gmail.com</p>
            </div>
            <div class="content-foo">
                <h4>Ubicación</h4>
                <p>Irpavi calle 18A</p>
            </div>
        </div>
    </footer>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Comentarios</title>
	<link rel="shortcut icon" href="img/logo photoshop.png" type="image/x-icon">
	<link rel="stylesheet" href="css/estilopag2.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&display=swap" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
	</head>
	<body>
	<header>
	<section class="textos-header">
	<h1>Comentarios de nuestros clientes</h1>
	<h2>Porque tu opinión nos importa!</h2>
	</section>

	<div style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M0.00,49.98 C324.21,56.75 324.21,56.75 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: rgba(209, 38, 195, 0.041);"></path></svg></div>

	</header>
	<main>


	<div class="containerComentarios">
	<div class="row align-items-start">
	<div class="col">

	<figure class="figure">
	<img src="img/img/estudiante1.jpg" class="figure-img img-fluid rounded" alt="...">
	<figcaption class="figure-caption">Hola, soy Ana López, estudiante de odontología en GEA Bolivia. Elegí esta institución por su excelente
	reputación y no me ha decepcionado. Los profesores son increíblemente dedicados y siempre están dispuestos a ayudar. Además, los recursos
	y las instalaciones son de primera calidad, lo que nos permite aprender y practicar con las mejores herramientas y técnicas disponibles.
	Estoy muy contenta con mi elección y estoy segura de que GEA Bolivia me está preparando de la mejor manera para mi futura carrera profesional.</figcaption>
	</figure>

	</div>
	<div class="col">

	<figure class="figure">
	<img src="img/img/estudiante2.jpg" class="figure-img img-fluid rounded" alt="...">
	<figcaption class="figure-caption">Hola, soy Carla Martínez, estudiante de medicina en GEA Bolivia. La formación aquí es realmente completa y desafiante.
	Los profesores no solo son expertos en sus campos, sino que también se preocupan por nuestro desarrollo personal y profesional. Estoy segura de que estoy recibiendo
	la mejor educación posible para convertirme en una excelente médica.</figcaption>
	</figure>

	</div>
	</div>


	<div class="row align-items-center">
	<div class="col">

	<figure class="figure">
	<img src="img/img/estudiante5.jpg" class="figure-img img-fluid rounded" alt="...">
	<figcaption class="figure-caption">Me llamo Valeria Suárez y estudio odontología en GEA Bolivia. Lo que más me gusta
	de la institución es la combinación de teoría y práctica. Las instalaciones son modernas y bien equipadas, y los profesores son
	muy apasionados por su trabajo. Estoy segura de que esta formación me permitirá ser una odontóloga competente y exitosa.</figcaption>
	</figure>

	</div>
	<div class="col">

	<figure class="figure">
	<img src="img/img/estudiante6.jpg" class="figure-img img-fluid rounded" alt="...">
	<figcaption class="figure-caption">Hola, soy Andrés Rojas, estudiante de medicina en GEA Bolivia.
	Estoy muy satisfecho con la educación que estoy recibiendo aquí. Los docentes son muy accesibles y siempre están dispuestos a ayudar.
	Además, las oportunidades de prácticas clínicas nos permiten aplicar lo aprendido en situaciones reales, lo cual es invaluable para nuestra
	formación.</figcaption>
	</figure>

	</div>

	</div>



	<div class="row align-items-center">
	<div class="col">

	<figure class="figure">
	<img src="img/img/estudiante4.jpg" class="figure-img img-fluid rounded" alt="...">
	<figcaption class="figure-caption">Soy Mariana Gutiérrez, estudiante de programación en GEA Bolivia. Desde el primer día, supe que había tomado la decisión correcta.
	La calidad de la enseñanza es impresionante y los proyectos que realizamos nos preparan muy bien para el mundo laboral. Además, hay un ambiente de camaradería y
	apoyo entre los estudiantes que hace que aprender sea una experiencia muy agradable.</figcaption>
	</figure>

	</div>

	<div class="col">

	<figure class="figure">
	<img src="img/img/estudiante3.jpg" class="figure-img img-fluid rounded" alt="...">
	<figcaption class="figure-caption">Hola, me llamo Lucía Fernández y estoy cursando ofimática en GEA Bolivia. Los cursos son muy prácticos y aplicables
	a la vida real. Me encanta cómo cada clase nos prepara para ser más eficientes y competentes en el uso de herramientas digitales. Sin duda, esta
	formación me está abriendo muchas puertas en el ámbito laboral.</figcaption>
	</figure>

	</div>


	</div>
	</div>

	</main>
	<footer>
	<div class="contenedor-footer">
	<div class="content-foo">
	<h4>Comenta tu experiencia GEA</h4>
	<p>Coméntanos cómo te pareció nuestros cursos y capacitaciones. Manda un correo a geabolivia12@gmail.com con el asunto "Comentario" y comenta tu experiencia con nosotros!</p>
	</div>

	</div>
	</footer>

	</body>
	</html>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'open sans';
	}

	.contenedor {
	padding: 60px 0;
	width: 90%;
	max-width: 1000px;
	margin: auto;
	overflow: hidden;
	}

	.titulo {
	color: #642a73;
	font-size: 30px;
	text-align: center;
	margin-bottom: 60px;
	}
	.titulo-formulario{
	color: #4d0686;
	}
	.form-label{
	color: #af20d3;
	font-size: 20px;
	}

	.coment{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	}
	/* Comentarios */

	.containerComentarios{
	margin-top: 20px;
	padding: 20px;
	background-color: #e9ecef;
	}

	/* Header */

	header {
	width: 100%;
	height: 600px;
	background: #bc4e9c;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, hsla(340, 95%, 50%, 0.459), hsla(317, 45%, 52%, 0.664)), url(../img/img/portada2Imagen.jpg );
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, hsla(340, 95%, 50%, 0.459), hsla(317, 45%, 52%, 0.664)), url(../img/img/registrarse.jpg);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	}


	header .textos-header{
	display: flex;
	height: 430px;
	width: 100%;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	}

	.textos-header h1{
	font-size: 50px;
	color:#fff;
	}

	.textos-header h2{
	font-size: 30px;
	font-weight: 300;
	color:#fff;
	}

	.wave{
	position: absolute;
	bottom: 0;
	width: 100%;
	}



	.contenido-textos h3{
	margin-bottom: 15px;
	}

	.contenido-textos h3 span{
	background: #4d0686;
	color: #fff;
	border-radius: 50%;
	display: inline-block;
	text-align: center;
	width: 30px;
	height: 30px;
	padding: 2px;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
	margin-right: 5px;
	}

	.contenido-textos p{
	padding: 0px 0px 30px 15px;
	font-weight: 300;
	text-align: justify;
	}

	/* Galeria */


	.portafolio{
	background: #f2f2f2;
	}

	.galeria-port{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	}

	.imagen-port{
	width: 24%;
	margin-bottom: 10px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
	}

	.imagen-port > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	}

	.hover-galeria{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: scale(0);
	background: hsla(273,91%,27%, 0.7);
	transition: transform .5s;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	}

	.hover-galeria img{
	width: 50px;
	}

	.hover-galeria p{
	color: #fff;
	}

	.imagen-port:hover .hover-galeria{
	transform: scale(1);
	}




	/* footer */

	footer{
	background: #414141;
	padding: 60px 0 30px 0;
	margin: auto;
	overflow: hidden;
	}

	.contenedor-footer{
	display: flex;
	width: 90%;
	justify-content: space-evenly;
	margin: auto;
	padding-bottom: 50px;
	border-bottom: 1px solid #ccc;
	}

	.content-foo{
	text-align: center;
	}

	.content-foo h4{
	color: #fff;
	border-bottom: 3px solid #af20d3;
	padding-bottom: 5px;
	margin-bottom: 10px;
	}

	.content-foo p{
	color: #ccc;
	}

	.titulo-final{
	text-align: center;
	font-size: 24px;
	margin: 20px 0 0 0;
	color: #9e9797;
	}

	@media screen and (max-width:900px){
	header{
	background-position: center;
	}

	.contenedor-sobre-nosotros{
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

	.sobre-nosotros .contenido-textos{
	width: 90%;
	}

	.imagen-about-us{
	width: 90%;
	}

	/* Galeria */

	.imagen-port{
	width: 44%;
	}

	/* Clientes */

	.cards{
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

	.cards .card{
	width: 90%;
	}

	.cards .card:first-child{
	margin-bottom: 30px;
	}

	/* servicios */

	.servicio-cont{
	justify-content: center;
	flex-direction: column;
	}

	.servicio-ind{
	width: 100%;
	text-align: center;
	}

	.servicio-ind:nth-child(1), .servicio-ind:nth-child(2){
	margin-bottom: 60px;
	}

	.servicio-ind img{
	width: 90%;
	}
	}

	@media screen and (max-width:500px){
	nav{
	text-align: center;
	padding: 30px 0 0 0;
	}

	nav > a{
	margin-right: 5px;
	}

	.textos-header h1{
	font-size: 35px;
	}

	.textos-header h2{
	font-size: 20px;
	}

	/* ABOUT US */

	.imagen-about-us{
	margin-bottom: 60px;
	width: 99%;
	}

	.sobre-nosotros .contenido-textos{
	width: 95%;
	}

	/* Galeria */

	.imagen-port{
	width: 95%;
	}

	/* Clients */

	.cards .card{
	height: 450px;
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	.cards .card img{
	width: 90px;
	height: 90px;
	}

	/* Footer */

	.contenedor-footer{
	flex-direction: column;
	border: none;
	}

	.content-foo{
	margin-bottom: 20px;
	text-align: center;
	}

	.content-foo h4{
	border: none;
	}

	.content-foo p{
	color: #ccc;
	border-bottom: 1px solid #f2f2f2;
	padding-bottom: 20px;
	}

	.titulo-final{
	font-size: 20px;
	}
	}
	<!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>Página web AlexCG</title>
	<link rel="shortcut icon" href="img/alexcgdesign.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">
	</head>

	<body>
	<header>
	<nav>
	<a href="#">Inicio</a>
	<a href="#">Acerca de</a>
	<a href="#">Portafolio</a>
	<a href="#">Servicios</a>
	<a href="#">Contacto</a>
	</nav>
	<section class="textos-header">
	<h1>Potencia tus ventas al menos un 200%</h1>
	<h2>Con una página web potente</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">Nuestro producto</h2>
	<div class="contenedor-sobre-nosotros">
	<img src="img/ilustracion2.svg" alt="" class="imagen-about-us">
	<div class="contenido-textos">
	<h3><span>1</span>Los mejores productos</h3>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt veniam eius aspernatur ad
	consequuntur aperiam minima sed dicta odit numquam sapiente quam eum, architecto animi pariatur,
	velit doloribus laboriosam ut.</p>
	<h3><span>2</span>Los mejores productos</h3>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt veniam eius aspernatur ad
	consequuntur aperiam minima sed dicta odit numquam sapiente quam eum, architecto animi pariatur,
	velit doloribus laboriosam ut.</p>
	</div>
	</div>
	</section>
	<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 nuestros clientes</h2>
	<div class="cards">
	<div class="card">
	<img src="img/face1.jpg" alt="">
	<div class="contenido-texto-card">
	<h4>Name</h4>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, sapiente!</p>
	</div>
	</div>
	<div class="card">
	<img src="img/face2.jpg" alt="">
	<div class="contenido-texto-card">
	<h4>Name</h4>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, sapiente!</p>
	</div>
	</div>
	</div>
	</section>
	<section class="about-services">
	<div class="contenedor">
	<h2 class="titulo">Nuestros servicios</h2>
	<div class="servicio-cont">
	<div class="servicio-ind">
	<img src="img/ilustracion1.svg" alt="">
	<h3>Name</h3>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, qui?</p>
	</div>
	<div class="servicio-ind">
	<img src="img/ilustracion4.svg" alt="">
	<h3>Name</h3>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, qui?</p>
	</div>
	<div class="servicio-ind">
	<img src="img/ilustracion3.svg" alt="">
	<h3>Name</h3>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, qui?</p>
	</div>
	</div>
	</div>
	</section>
	</main>
	<footer>
	<div class="contenedor-footer">
	<div class="content-foo">
	<h4>Phone</h4>
	<p>8296312</p>
	</div>
	<div class="content-foo">
	<h4>Email</h4>
	<p>8296312</p>
	</div>
	<div class="content-foo">
	<h4>Location</h4>
	<p>8296312</p>
	</div>
	</div>
	<h2 class="titulo-final">© AlexCG Design \| Jordan Alexander</h2>
	</footer>
	</body>

	</html>