0

hace poco pedí ayuda, la verdad me esta costando bastante usar css, he intentado muchas cosas sin éxito, el dilema es que quiero que queden dos columnas con los nombres imágenes y datos de personas, y luego una columna en el extremos derecho de la pagina con datos de la fundación, cómo en la siguiente imagenintroducir la descripción de la imagen aquí

Gracias a lo que me han enseñado en esta comunidad he aprendido bastante pero esto no he logrado sacarlo lo intente usando float pensando que podrian en orden, en el html cree dos div cada div con 3 datos de personas pero tampoco he podido hacerlo de esa forma.

DEJO ADJUNTO EL CSS Y EL HTML DE ANTEMANO GRACIAS POR SU AYUDA

/*Configuracion general de pagina*/
*{
    padding: 0%;
    margin: 0%;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    
}
/*Aplicamos display:flex al headerpara que ponga en línea el nav con el botón de iniciar sesión*/
header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    background: #8bc34a;
}

nav{
    display: flex;
    align-items: center;
}

nav > ul{
    display: flex;
}

nav ul li a{
    margin-left: 5px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 7px 12px;
    text-transform: uppercase;
    
}
#btn1{
    margin-left: 20px;
}

#sesion{
    font-size: 18px;
    margin-right: 25px;
    background: #00bcd4;
    border-radius: 50px;
    border: #dcedc8 solid 5px;
    color: white;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 7px 15px;
    text-transform: uppercase;
 
}

.logo{
    margin-left: 10%;
    height: 60px;
    border-radius: 50px;
}

#sesion{
    background: #00bcd4;
    border-radius: 50px;
    border: #dcedc8 solid 5px;
    
}
/*Hovers de Barra de Navegacion*/
.logo:hover{
    border: #00bcd4 solid 2px;
    transition: .2s;
}

#sesion:hover{
    color: #00bcd4;
    background: #dcedc8;
    border: #00bcd4 solid 5px;
    transition: .5s;
}

.boton:hover{
    color: #00bcd4;
    transition: .5s;
}

/*Cosas que dejo pre hechas para funcionalidades de mas adelante uwu*/
.checkbtn{
    font-size: 30px;
    color: #fff;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}
#check{
    display: none;
}

/*Seccion de contenido*/
section{
    background: url(img/fondo.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    height: calc(100vh - 30px - 80px);
}
.cuadros{
    background-color: white;
    max-width:35% ;
    border-radius: 5%;
    margin-top: 1%;

}
.cuadros2{
   background-color: white;
    max-width:35% ;
    border-radius: 5%;
    margin-top: 1%;

}

.colaboradores{
    
}

.imgPersona{
max-height: 130px;
max-width: 100px; 
border-radius: 5%;

}

.textP{
    column-count: 1;
    text-align: center;
    font-size: 18px;
    color: #212121;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}
h1{
    color: #212121;
    font-size: 50px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#parrafo{
    color: #212121;
    font-size: 20px;
    text-align: justify;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h2{
    color: black;
    font-size: 25px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0px 37%;
}

/*Footer*/
footer{
    background: #757575;
    height: 30px;
    width: 100%;
}

.texto{
    display: inline-block;
    color: white;
    font-size: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 7px 20px;
}

#instituto{
    float: right;
}
<!DOCTYPE html>
<html lang="es">

<head>
    <!--MetaDatos, Titulo y Conecciones(Librerias)-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="QuienesSomos.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
    <title>Papaya | Quienes Somos</title>
</head>

<body>
    <!--Navegacion-->
     <header>
        <nav>
            <input type="checkbox" id="check">
            <label for="check" class="checkbtn"><i class="fas fa-bars"></i></label>
            <a href="Index.html" class="enlace"><img src="img/images.jpg" class="logo" alt="No se encuentra imagen"></a>
            <ul>
                <li><a id="btn1" class="boton" href="QuienesSomos.html">Quienes Somos</a></li>
                <li><a class="boton" href="#">Galeria</a></li>
                <li><a class="boton" href="#">Contacto</a></li>
            </ul>
        </nav>
        <a id="sesion" href="#">Iniciar Sesión</a>
    </header>
    <!--Contenido-->
    <section>
        <div class="colaboradores">
            <div class="cuadros">
            <h2>Leandro</h2>
            <p class="textP">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates</p>
            <a  href="#"><img class="imgPersona" src="img/SiluetaHombre.png" alt="No se encuentre imagen"></a></div>
             <div class="cuadros"> <h2>Pablo</h2>
            <p class="textP">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates</p>
            <a href="#"><img class="imgPersona" src="img/SiluetaHombre.png" alt="No se encuentre imagen"></a></div>
             <div class="cuadros"> <h2>Maria</h2>
            <p class="textP">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates</p>
            <a href="#"><img class="imgPersona" src="img/SiluetaMujer.png" alt="No se encuentre imagen"></a></div>
              <div class="cuadros2"><h2>Alejandro</h2>
            <p class="textP">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates</p>
            <a href="#"><img class="imgPersona" src="img/SiluetaHombre.png" alt="No se encuentre imagen"></a></div>
              <div class="cuadros2"><h2>Gracia</h2>
            <p class="textP">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates</p>
            <a href="#"><img class="imgPersona" src="img/SiluetaMujer.png" alt="No se encuentre imagen"></a></div>
             <div class="cuadros2"> <h2>Lucia</h2>
            <p class="textP">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates</p>
            <a href="#"><img class="imgPersona" src="img/SiluetaMujer.png" alt="No se encuentre imagen"></a>
        </div>
        <div class="qs">
            <h1>Quienes Somos</h1>
            <aside>
            <p id="parrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates
                expedita,
                aliquid obcaecati quis! Minus et magni ullam totam optio? Fuga doloremque quidem quisquam suscipit
                dolorem quis?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam hic, dolore officiis odio
                mollitia nihil, tempore distinctio eius natus recusandae molestias illo repudiandae. Quam, cupiditate
                mollitia velit commodi dignissimos officia?Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Fugiat autem saepe quia culpa eaque numquam explicabo asperiores quis recusandae laboriosam cupiditate
                inventore veniam in doloribus repellat, sunt fugit placeat illum! Lorem, ipsum dolor sit amet
            consectetur adipisicing elit.</p>
            </aside>
        </div>
    </section>
    <!--Footer-->
    <footer>
        <p class="texto">Cesar Aros | Andres Nuñez | Mario Mora</p>
        <p class="texto" id="instituto">Instituto Santo Tomas | Informatica</p>
    </footer>
</body>
</html>

1
  • 1
    No uses floats, usa flexbox y grid en el canal de jon mircha tienes excelentes tutoriales de ambos el 31 mar. 2022 a las 2:05

1 respuesta 1

0

Te dejo el codigo de una implementacion sencilla usando Flexbox te recomiendo estudiar esta caracteristica de css.

https://developer.mozilla.org/es/docs/Web/CSS/flex

* {
  padding: 0%;
  margin: 0%;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
/*Aplicamos display:flex al headerpara que ponga en línea el nav con el botón de iniciar sesión*/
header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  background: #8bc34a;
}

nav {
  display: flex;
  align-items: center;
}

nav > ul {
  display: flex;
}

nav ul li a {
  margin-left: 5px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 7px 12px;
  text-transform: uppercase;
}
#btn1 {
  margin-left: 20px;
}

#sesion {
  font-size: 18px;
  margin-right: 25px;
  background: #00bcd4;
  border-radius: 50px;
  border: #dcedc8 solid 5px;
  color: white;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 7px 15px;
  text-transform: uppercase;
}

.logo {
  margin-left: 10%;
  height: 60px;
  border-radius: 50px;
}

#sesion {
  background: #00bcd4;
  border-radius: 50px;
  border: #dcedc8 solid 5px;
}
/*Hovers de Barra de Navegacion*/
.logo:hover {
  border: #00bcd4 solid 2px;
  transition: 0.2s;
}

#sesion:hover {
  color: #00bcd4;
  background: #dcedc8;
  border: #00bcd4 solid 5px;
  transition: 0.5s;
}

.boton:hover {
  color: #00bcd4;
  transition: 0.5s;
}

/*Cosas que dejo pre hechas para funcionalidades de mas adelante uwu*/
.checkbtn {
  font-size: 30px;
  color: #fff;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check {
  display: none;
}

/*Seccion de contenido*/
section {
  background: url(img/fondo.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  height: calc(100vh - 30px - 80px);
  width: 100%;
  display: flex;
}
.cuadros {
  background-color: white;
  max-width: 35%;
  border-radius: 5%;
  margin-top: 1%;
}
.cuadros2 {
  background-color: white;
  max-width: 35%;
  border-radius: 5%;
  margin-top: 1%;
}

.colaboradores {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 50%;
}

.imgPersona {
  max-height: 130px;
  max-width: 100px;
  border-radius: 5%;
}

.textP {
  column-count: 1;
  text-align: center;
  font-size: 18px;
  color: #212121;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
  color: #212121;
  font-size: 50px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

#parrafo {
  color: #212121;
  font-size: 20px;
  text-align: justify;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.aside {
  width: 40%;
}
h2 {
  color: black;
  font-size: 25px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 0px 37%;
}

/*Footer*/
footer {
  background: #757575;
  height: 30px;
  width: 100%;
}

.texto {
  display: inline-block;
  color: white;
  font-size: 12px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 7px 20px;
}

#instituto {
  float: right;
}
  <header>
      <nav>
        <input type="checkbox" id="check" />
        <label for="check" class="checkbtn">
          <i class="fas fa-bars"></i>
        </label>
        <a href="Index.html" class="enlace">
          <img src="img/images.jpg" class="logo" alt="No se encuentra imagen" />
        </a>
        <ul>
          <li>
            <a id="btn1" class="boton" href="QuienesSomos.html">Quienes Somos</a>
          </li>
          <li>
            <a class="boton" href="#">Galeria</a>
          </li>
          <li>
            <a class="boton" href="#">Contacto</a>
          </li>
        </ul>
      </nav>
      <a id="sesion" href="#">Iniciar Sesión</a>
    </header>
    <section>
      <div class="colaboradores">
        <div class="cuadros">
          <h2>Leandro</h2>
          <p
            class="textP"
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates</p>
          <a href="#">
            <img class="imgPersona" src="img/SiluetaHombre.png" alt="No se encuentre imagen" />
          </a>
        </div>
        <div class="cuadros">
          <h2>Pablo</h2>
          <p
            class="textP"
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates</p>
          <a href="#">
            <img class="imgPersona" src="img/SiluetaHombre.png" alt="No se encuentre imagen" />
          </a>
        </div>
        <div class="cuadros">
          <h2>Maria</h2>
          <p
            class="textP"
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates</p>
          <a href="#">
            <img class="imgPersona" src="img/SiluetaMujer.png" alt="No se encuentre imagen" />
          </a>
        </div>
        <div class="cuadros2">
          <h2>Alejandro</h2>
          <p
            class="textP"
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates</p>
          <a href="#">
            <img class="imgPersona" src="img/SiluetaHombre.png" alt="No se encuentre imagen" />
          </a>
        </div>
        <div class="cuadros2">
          <h2>Gracia</h2>
          <p
            class="textP"
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates</p>
          <a href="#">
            <img class="imgPersona" src="img/SiluetaMujer.png" alt="No se encuentre imagen" />
          </a>
        </div>
        <div class="cuadros2">
          <h2>Lucia</h2>
          <p
            class="textP"
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates</p>
          <a href="#">
            <img class="imgPersona" src="img/SiluetaMujer.png" alt="No se encuentre imagen" />
          </a>
        </div>
      </div>
      <aside class="aside">
        <h1>Quienes Somos</h1>
        <p id="parrafo">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sit animi neque voluptates
          expedita,
          aliquid obcaecati quis! Minus et magni ullam totam optio? Fuga doloremque quidem quisquam suscipit
          dolorem quis?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam hic, dolore officiis odio
          mollitia nihil, tempore distinctio eius natus recusandae molestias illo repudiandae. Quam, cupiditate
          mollitia velit commodi dignissimos officia?Lorem ipsum dolor sit, amet consectetur adipisicing elit.
          Fugiat autem saepe quia culpa eaque numquam explicabo asperiores quis recusandae laboriosam cupiditate
          inventore veniam in doloribus repellat, sunt fugit placeat illum! Lorem, ipsum dolor sit amet
          consectetur adipisicing elit.
        </p>
      </aside>
    </section>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.