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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compstible" content="IE=edge">

    <title>Document</title>
    <link rel="stylesheet" href="StyleBeta.css">
    <script src="https://kit.fontawesome.com/eb496ab1a0.js" crossorigin="anonymous"></script>
</head>

<body>
    <header class="header">
        <div class="menu container">
            <a href="#" class="logo"><img src="Images/cardenas alba material-01.png" height="30px" width="30px"
                    alt=""></a>
            <input type="checkbox" id="menu">
            <label for="menu">
                <img src="Images/menu.png" height="20px" width="20px" class="menu-icono" alt="">
            </label>
            <nav class="navbar">
                <ul>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#Nosotros">Nosotros</a></li>
                    <li><a href="#Areas">Areas de Práctica</a></li>
                    <li><a href="#Contacto">Contacto</a></li>
                </ul>

            </nav>
        </div>
        <div class="header-content container"><!--- Aqui se modifica el tamaño del logo grande-->
            
            <div class="logoimg"> <img src="Images/cardenas alba material-01.png" width="40%" alt=""></div>
            <div class="header-txt container">


                <h4>Nuestra misión</h4>
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Itaque impedit temporibus saepe molestias blanditiis vitae soluta cumque esse a obcaecati?
                    Temporibus tenetur voluptates itaque veniam voluptatibus amet maxime natus voluptatem!
                </p>
                <a href="#Mision" class="btn-1"> Más información </a>
            </div>


        </div>
    </header>
    <Section>
        <div class="imagen-1">


        </div>
        <div class="info-content container">
            <div class="info-txt" id="Nosotros">
                <h1>Nosotros</h1>
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Itaque impedit temporibus saepe molestias blanditiis vitae soluta cumque esse a obcaecati?
                    Temporibus tenetur voluptates itaque veniam voluptatibus amet maxime natus voluptatem!
                </p>
                <a href="#Equipo" class="btn-2"> Más información </a>
            </div>
        </div>
        <div class="meta-content container">
            <h2 id="Mision">Misión</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Itaque impedit temporibus saepe molestias blanditiis vitae soluta cumque esse a obcaecati?
                Temporibus tenetur voluptates itaque veniam voluptatibus amet maxime natus voluptatem!
            </p>
            <h2>Valores</h2>
            <div class="valores-p">
                <ul>
                    <li type="disc">*Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
                    <li type="disc">*Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
                    <li type="disc">*Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
                </ul>
            </div>
            <h2>Visión</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Itaque impedit temporibus saepe molestias blanditiis vitae soluta cumque esse a obcaecati?
                Temporibus tenetur voluptates itaque veniam voluptatibus amet maxime natus voluptatem!
            </p>


        </div>
    </Section>
    <section>
        <div class="Area" id="Areas">
            <div class="imagen-2 container">
                <img src="Images/puente.jpeg" width="100%" height="300px" alt="">
            </div>
            <div class="Area container">
                <h1>áreas de Práctica</h1>
                <h3>Litigio civil y mercantil</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Itaque impedit temporibus saepe molestias blanditiis vitae soluta cumque esse a obcaecati?
                    Temporibus tenetur voluptates itaque veniam voluptatibus amet maxime natus voluptatem!
                </p>
                <a href="#Contacto" class="btn-2"> Más información </a>
            </div>
            <div class="imagen-3 container">
                <img src="Images/museo.jpg" width="100%" height="300px" alt="">
            </div>
            <div class="Area container">
                <h1>áreas de Práctica</h1>
                <h3 id="Derecho">Derecho Laboral</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Itaque impedit temporibus saepe molestias blanditiis vitae soluta cumque esse a obcaecati?
                    Temporibus tenetur voluptates itaque veniam voluptatibus amet maxime natus voluptatem!
                </p>
                <span class="hide" id="hideText">
                    <ul>
                        <li type="disc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
                        <li type="disc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
                        <li type="disc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
                    </ul>

                    <a href="#Contacto" class="btn-2"> Más información </a>
                </span>
                <a href="#Readmore" id="hideTextbtn" class="btn-2r"> Más información </a>
            </div>
            <div class="Area container">
                <h3 id="Equipo"> Abogados Dirigentes</h3>
            </div>
            <div class="Abogados container">
                <h5>Susana Cardenas</h5>
                <h6>Socio<br>
                    Abogado
                    Mediador
                </h6>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Itaque impedit temporibus saepe molestias blanditiis vitae soluta cumque esse a obcaecati?
                    Temporibus tenetur voluptates itaque veniam voluptatibus amet maxime natus voluptatem!
                </p>
                <h5>Oscar Castillo</h5>
                <h6>Socio
                    Abogado
                    Mediador
                </h6>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Itaque impedit temporibus saepe molestias blanditiis vitae soluta cumque esse a obcaecati?
                    Temporibus tenetur voluptates itaque veniam voluptatibus amet maxime natus voluptatem!
                </p>

            </div>


        </div>

    </section>
    <section>
        <div class="Contacto" id="Contacto">
            <div class="Contacto-txt container">
                <h1>Contacto</h1><br>
                <p>Dejanos un mensaje</p><br>

            </div>
            <footer class="footer container">
                <form>
                    <label for="name">Nombre<span>*</span></label><br>
                    <input class="campo" id="name" type="text" name="name" placeholder=" Nombre" required>
                    <label for="telefono">Teléfono</label><br>
                    <input class="campo" id="telefono" type="text" name="telefono" placeholder=" Teléfono">
                    <label for="email">Email<span>*</span></label><br>
                    <input class="campo" id="mail" type="email" name="email" placeholder="Email" required>
                    <label for="msn">Mensaje<span>*</span></label><br>
                    <textarea class="campo" id="msn" cols="30" rows="10" name="msn" placeholder="Descripción del problema legal"></textarea>
                    <input type="submit" class="btn-3" id="enviar" value="Enviar"></input>
                </form>
            </footer>
        </div>
    </section>
    <footer class="pie-pagina">
        <div class="grupo-1">
            <div class="box">
                <figure>
                    <a href="#">
                        <img src="Images/cardenas alba material-01.png" alt="Logotipo cardenas alba">
                    </a>
                </figure>
            </div>
            <div class="box">
                <h1>En que podemos ayudarte</h1>
                <h2>Área de práctica</h2>
                <a href="#Areas" class="btn-4"> Litigio civil </a><br>
                <a href="#Derecho" class="btn-4"> Derecho Laboral </a>

                <h1>Contacto</h1>
                <!--- <h2>Direccion</h2>
                <p> Calle tula 556</p>-->
                <h2>Telefono</h2>
                <p>333333333</p>
                <h2>Correo electronico</h2>
                <p>dsxfs@gmail.com</p>
                <!-- Forma de ingresar ubicacion
            <iframe src="https://www.google.com/maps/1s0" width="1200" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
            
            </iframe>
            -->
            </div>
            <div class="box">
                <h2>Siguenos</h2>
                <div class="red-social">
                    <a href="#" class="fa fa-facebook">
                        <img src="Images/Facebook-logo.png" alt="Facebook logo"
                        height="30px" width="30px">
                    </a>
                    <a href="#" class="Instagram">
                        <img src="Images/Instagram-logo.png" alt="Instagram logo"
                        height="30px" width="30px">
                    </a>
                </div>

            </div>
        </div>

        <div class="grupo-2">
            <small>&copy; 2024 <b> Cardenas & Alba Abogados</b> -Todos los Derechos Reservados.</small>


        </div>
    </footer>

    <script src="scripts.js"></script>
</body>

</html>