Articulos

articulos.markdown

Articulos

Caja de articulos

A Pen by HUGO ANDRES DIAZ BERNAL on CodePen.

License.

index.html

<div class="caja">
  <div class="nombre-1">
    <h1>Economia</h1>
  </div>
  <div class="nombre-2">
    <h1>Salud</h1>
  </div>
  <div class="nombre-3">
    <h1>Deporte</h1>
  </div>
  <div class="apellido-1">
    <h2>Colombiana</h2>
    <p>
      Lorem ipsum dolor sit amet      consectetur adipisicing elit. Consectetur eius incidunt architecto distinctio nulla commodi. Eum recusandae animi amet doloremque quibusdam iure, corrupti odio sed aperiam consequatur illum. Pariatur, qui!
    </p>
    <br>
    <p>
      Lorem ipsum dolor sit amet      consectetur adipisicing elit. Consectetur eius incidunt architecto distinctio nulla commodi. Eum recusandae animi amet doloremque quibusdam iure, corrupti odio sed aperiam consequatur illum. Pariatur, qui!
    </p>
  </div>
  <div class="apellido-2">
    <h2>En Bogotá</h2>
        <p>
      Lorem ipsum dolor sit amet      consectetur adipisicing elit. Consectetur eius incidunt architecto distinctio nulla commodi. Eum recusandae animi amet doloremque quibusdam iure, corrupti odio sed aperiam consequatur illum. Pariatur, qui!
    </p>     
    <br>
    <p>
      Lorem ipsum dolor sit amet      consectetur adipisicing elit. Consectetur eius incidunt architecto distinctio nulla commodi. Eum recusandae animi amet doloremque quibusdam iure, corrupti odio sed aperiam consequatur illum. Pariatur, qui!
    </p>
  </div>
  <div class="apellido-2">
    <h2>Fútbol</h2>
        <p>
      Lorem ipsum dolor sit amet      consectetur adipisicing elit. Consectetur eius incidunt architecto distinctio nulla commodi. Eum recusandae animi amet doloremque quibusdam iure, corrupti odio sed aperiam consequatur illum. Pariatur, qui!
    </p>
    <br>
    <p>
      Lorem ipsum dolor sit amet      consectetur adipisicing elit. Consectetur eius incidunt architecto distinctio nulla commodi. Eum recusandae animi amet doloremque quibusdam iure, corrupti odio sed aperiam consequatur illum. Pariatur, qui!
    </p>
  </div>
</div>

style.css

*{
  box-sizing: border-box;
  margin: 0;
}
.caja{
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
[class^="nombre-"]{
  background: yellow;
  color: black;
  margin-top: 0px;
  margin-left: 0px;
  margin-bottom: 10px;
  margin-right: 0px;
  width: 33.33%;
  float: left;
  text-align: center;
  --x:2px;
  border: var(--x) solid white;
  border-radius: 15px;
}
[class^="apellido-"]{
  --x:10px;
  border: var(--x) solid white;
  background: white;
  float: left;
  width: 33.33%;
  text-align: center;
  outline: .005px solid black;
}
div p{
  text-align: justify;
}

Este es un git para definir el modelo de caja o Box-Model