<!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-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>CodePici - By JuanDelgado06</h1>
  </div>
  <div class="center-flex">
    <div class="color">
        <div class="color-1">color 1</div>
        <div class="color-2">color 2</div>
        <div class="color-3">color 3</div>
        <div class="color-4">color 4</div>
        <div class="color-5">color 5</div>
        <div class="color-6">color 6</div>
        <div class="color-7">color 7</div>
        <div class="color-8">color 8</div>
    </div>
  </div>
  <div class="container">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda est omnis rem doloribus iure autem veniam numquam corporis quo dolor voluptas libero officia optio repudiandae modi non commodi, labore perspiciatis!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis rem voluptatem, tempore porro ipsa pariatur, libero, consequatur laborum non consequuntur ullam quis repellendus dicta totam reprehenderit commodi veniam sit similique?</p>
    <p>Labore perspiciatis!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis rem voluptatem, tempore porro ipsa pariatur, libero, consequatur laborum non consequuntur ullam quis repellendus dicta totam reprehenderit commodi veniam sit similique?.Reiciendis rem voluptatem, tempore porro ipsa pariatur, libero, consequatur.</p>
  </div>
</body>
</html>
@import url("https://use.typekit.net/jdh7noy.css");
@import url('https://rsms.me/inter/inter.css');
// font-family: 'Inter', sans-serif;

//Escoger colores

$c-color1: #D92378;
$c-color2: #15cf0e;
$c-color3: #11A0D9;
$c-color4: #052133;
$c-color5: #03121b;
$c-color6: #52C5F2;
$c-color7: #ffa500;
$c-color8: #e07800;
$c-default: #f2f2f2;

*,*::before,::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 16px;
    letter-spacing: .5px;
    background:  $c-color4;
    color: $c-color6;
}
.container {
  max-width: 1000px;
  margin: 0 auto;
  width: 95%;
}
h1 {
    font-family: 'Inter', sans-serif;
    font-size: 4rem;
    text-align: center;
    margin: 1.5rem 0 0;
    color: #f2f2f2;
    letter-spacing: -.02em;
}
p {
    font-weight: normal;
    font-size: 1rem;
  color: #f2f2f2;
}

.center-flex {
  width: 95%;
  // height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.color {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
    background: $c-default;
    border-radius: 10px;
    margin-top: 2rem;
    color: $c-color5;
    > div {
        border-radius: 6px;
        padding: 30px 20px;
    }
  @media screen and (min-width:500px) {
    grid-template-columns: repeat(4, 1fr);
  }
  
  @media screen and (min-width:700px) {
    grid-template-columns: repeat(8, 1fr);
  }

    &-1 {
        order: 8;
        background: $c-color1;
        margin: 5px; 
    }
    &-2 {
        order: 5;
        background: $c-color2;
        margin: 5px; 
    }
    &-3 {
        order: 3;
        background: $c-color3;
        margin: 5px; 
    }
    &-4 {
        order: 1;
        background: $c-color4;
        color:  $c-default;
        margin: 5px; 
    }
    &-5 {
        order: 2;
        background: $c-color5;
        color: $c-default;
        margin: 5px; 
    }
    &-6 {
        order: 4;
        background: $c-color6;
        margin: 5px; 
    }
    &-7 {
        order: 6;
        background: $c-color7;
        margin: 5px; 
    }
    &-8 {
        order: 7;
        background: $c-color8;
        margin: 5px; 
    }
}

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    background: $c-color4;
    color: $c-color6;
}

h1 {
    text-align: center;
}

h4  {
    font-size: 1.8em;
    margin: 0;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.