Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="grid__container">
  <div class="grid__item header">
    <p>W3cplus</p>
    <h1>Crossed Sections with CSS Grid</h1>
  </div>
  <div class="grid__item trophies">
    <ul>
      <li>
        <a href="#">
          <svg t="1635343068820" class="icon" viewBox="0 0 1244 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1179" width="200" height="200">
            <path fill="currentColor" d="M1243.574857 656.603429c0-177.883429-176.054857-322.852571-373.869714-322.852571-209.444571 0-374.345143 144.969143-374.345143 322.852571 0 178.176 164.937143 322.852571 374.345143 322.852571 43.812571 0 88.027429-11.190857 132.059429-22.345143l120.722286 66.852571-33.097143-111.177143C1177.709714 845.787429 1243.574857 756.918857 1243.574857 656.603429zM748.324571 600.941714c-21.906286 0-44.032-22.016-44.032-44.507429 0-22.198857 22.125714-44.544 44.032-44.544 33.316571 0 55.113143 22.308571 55.113143 44.544C803.437714 578.925714 781.641143 600.941714 748.324571 600.941714zM990.427429 600.941714c-21.796571 0-43.702857-22.016-43.702857-44.507429 0-22.198857 21.942857-44.544 43.702857-44.544 32.987429 0 55.076571 22.308571 55.076571 44.544C1045.504 578.925714 1023.414857 600.941714 990.427429 600.941714zM841.874286 309.869714c14.299429 0 28.342857 1.024 42.349714 2.596571-38.070857-179.236571-227.657143-312.429714-444.086857-312.429714-241.956571 0-440.137143 166.692571-440.137143 378.368 0 122.221714 65.938286 222.537143 176.128 300.361143L132.096 812.580571l153.856-77.970286c55.076571 11.008 99.254857 22.308571 154.185143 22.308571 13.824 0 27.501714-0.694857 41.069714-1.755429-8.557714-29.732571-13.568-60.891429-13.568-93.257143C467.638857 467.565714 632.795429 309.869714 841.874286 309.869714zM605.184 189.220571c33.133714 0 55.113143 22.052571 55.113143 55.515429 0 33.389714-21.979429 55.661714-55.113143 55.661714-32.950857 0-66.084571-22.272-66.084571-55.661714C539.099429 211.236571 572.233143 189.220571 605.184 189.220571zM297.142857 300.397714c-32.950857 0-66.267429-22.272-66.267429-55.661714 0-33.462857 33.28-55.515429 66.267429-55.515429 32.987429 0 54.966857 22.052571 54.966857 55.515429C352.109714 278.089143 330.130286 300.397714 297.142857 300.397714z" p-id="1180"></path>
          </svg>
        </a>
      </li>
      <li>
        <a href="#">
          <svg t="1635343097095" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1982" width="200" height="200">
            <path fill="currentColor" d="M728.864 497.056c-12.48-3.712-29.152-6.752-22.624-22.944 14.144-35.136 15.744-73.792 0.416-95.424-28.736-40.576-99.36-29.472-189.44 7.808 0-0.064-28.288 12.224-21.056-9.952 13.856-44.032 11.776-80.896-9.792-102.208-48.896-48.352-178.88 1.824-290.368 111.936C112.48 468.8 64 556.256 64 631.84c0 144.608 187.68 232.544 371.296 232.544 240.704 0 395.776-139.104 395.776-248.832C831.072 549.28 779.616 512.608 728.864 497.056zM435.808 812.576c-146.528 14.272-272.992-51.168-282.496-146.208-9.504-95.04 101.568-183.68 248.096-197.984 146.528-14.304 273.024 51.136 282.496 146.144C693.376 709.6 582.336 798.24 435.808 812.576z" p-id="1983"></path>
            <path fill="currentColor" d="M897.632 235.136c-60.096-62.496-148.704-86.304-230.496-69.984l-0.032 0c-18.944 3.808-30.976 21.28-26.944 38.976 4.032 17.728 22.656 29.056 41.568 25.28 58.176-11.584 121.152 5.376 163.872 49.76 42.656 44.384 54.272 104.928 35.968 157.984l0 0c-5.952 17.28 4.128 35.776 22.592 41.376 18.368 5.568 38.144-3.872 44.096-21.12 0-0.032 0-0.096 0-0.096C973.92 382.656 957.728 297.568 897.632 235.136" p-id="1984"></path>
            <path fill="currentColor" d="M807.904 317.088c-29.024-31.2-71.872-43.04-111.456-34.88-16.16 3.328-26.464 18.752-23.008 34.432 3.456 15.616 19.36 25.632 35.488 22.24l0 0.032c19.328-3.968 40.32 1.824 54.496 17.024 14.208 15.264 18.016 36.032 11.936 54.272l0.032 0c-5.056 15.232 3.52 31.584 19.264 36.512 15.744 4.864 32.608-3.424 37.696-18.688C844.768 390.752 836.992 348.288 807.904 317.088" p-id="1985"></path>
            <path fill="currentColor" d="M484.928 504.064C413.12 485.76 331.968 520.8 300.8 582.72c-31.744 63.168-1.056 133.28 71.488 156.192 75.136 23.712 163.68-12.64 194.464-80.8C597.12 591.488 559.2 522.848 484.928 504.064zM430.08 662.528c-14.592 22.336-45.824 32.128-69.376 21.824-23.2-10.144-30.048-36.096-15.456-57.856 14.432-21.696 44.608-31.36 67.968-21.952C436.864 614.208 444.416 639.968 430.08 662.528zM478.176 603.328c-5.28 8.64-16.928 12.832-26.08 9.216-8.992-3.552-11.808-13.248-6.688-21.728 5.248-8.448 16.48-12.608 25.44-9.184C479.936 584.8 483.2 594.592 478.176 603.328z" p-id="1986"></path>
          </svg>
        </a>
      </li>
      <li>
        <a href="">
          <svg t="1635343152745" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4875" width="200" height="200">
            <path fill="currentColor" d="M512 1024C229.2224 1024 0 794.7776 0 512 0 229.2224 229.2224 0 512 0c282.7776 0 512 229.2224 512 512 0 282.7776-229.2224 512-512 512z m-129.877333-756.48s-36.1984 2.116267-48.981334 24.490667c-12.782933 22.357333-54.306133 137.3696-54.306133 137.3696s13.841067 6.382933 37.2736-10.6496c23.432533-17.0496 30.890667-46.865067 30.890667-46.865067l42.581333-2.116267 1.0752 121.3952s-73.489067-1.0752-88.405333 0c-14.8992 1.058133-23.415467 40.448-23.415467 40.448h111.8208s-9.591467 67.106133-38.3488 116.087467c-28.740267 48.981333-83.063467 87.313067-83.063467 87.313067s39.424 15.9744 77.738667-6.382934c38.3488-22.357333 66.6112-120.712533 66.6112-120.712533l89.941333 110.062933s8.192-52.394667-1.467733-67.1744c-9.659733-14.7968-62.208-74.2912-62.208-74.2912l-22.954667 20.224 16.3328-65.109333h97.962667s0-38.3488-19.1488-40.465067c-19.182933-2.133333-78.813867 0-78.813867 0v-119.278933h88.405334s-1.0752-39.389867-18.1248-39.389867H359.765333l22.357334-64.955733z m170.001066 61.184v358.570667h36.010667l13.090133 45.0048 63.351467-45.0048h89.053867V328.704H552.123733z m42.666667 39.918933h117.879467v277.9136h-41.864534l-53.384533 40.2432-11.639467-40.2432h-10.990933V368.64z" fill="#0E87EA" p-id="4876"></path>
          </svg>
        </a>
      </li>
      <li>
        <a href="">
          <svg t="1635343176251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5667" width="200" height="200">
            <path fill="currentColor" d="M928 254.3c-30.6 13.2-63.9 22.7-98.2 26.4 35.4-21.1 62.3-54.4 75-94-32.7 19.5-69.7 33.8-108.2 41.2C765.4 194.6 721.1 174 672 174c-94.5 0-170.5 76.6-170.5 170.6 0 13.2 1.6 26.4 4.2 39.1-141.5-7.4-267.7-75-351.6-178.5-14.8 25.4-23.2 54.4-23.2 86.1 0 59.2 30.1 111.4 76 142.1-28-1.1-54.4-9-77.1-21.7v2.1c0 82.9 58.6 151.6 136.7 167.4-14.3 3.7-29.6 5.8-44.9 5.8-11.1 0-21.6-1.1-32.2-2.6C211 652 273.9 701.1 348.8 702.7c-58.6 45.9-132 72.9-211.7 72.9-14.3 0-27.5-0.5-41.2-2.1C171.5 822 261.2 850 357.8 850 671.4 850 843 590.2 843 364.7c0-7.4 0-14.8-0.5-22.2 33.2-24.3 62.3-54.4 85.5-88.2z" p-id="5668"></path>
          </svg>
        </a>
      </li>
      <li>
        <a href="">
          <svg t="1635343210594" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6453" width="200" height="200">
            <path fill="currentColor" d="M512.032 831.904c-19.168 0-38.304-9.92-58.144-29.76-7.808-7.808-7.808-20.48 0-28.288s20.48-7.808 28.288 0C494.368 786.08 504.16 792 512.032 792s17.664-5.92 29.856-18.144c7.808-7.808 20.48-7.808 28.288 0s7.808 20.48 0 28.288c-19.84 19.84-38.976 29.76-58.144 29.76z m-512-306.4c0 49.888 4.256 95.136 12.8 135.68s20.544 75.744 36 105.536 35.008 55.904 58.656 78.336 49.344 40.928 77.056 55.456c27.744 14.528 59.456 26.304 95.2 35.264S351.84 951.04 388.8 954.624 466.496 960 510.944 960c44.448 0 85.248-1.792 122.4-5.376s73.6-9.856 109.344-18.848c35.744-8.96 67.552-20.736 95.456-35.264s53.792-33.024 77.6-55.456c23.808-22.432 43.456-48.544 58.944-78.336s27.552-64.96 36.256-105.536c8.704-40.576 13.056-85.792 13.056-135.68 0-89.376-27.744-166.368-83.2-230.976 3.2-8.608 5.952-18.496 8.256-29.6s4.544-26.816 6.656-47.104c2.144-20.288 1.344-43.712-2.4-70.272S942.56 93.888 932.256 66.24l-8-1.632c-5.344-1.088-14.048-0.704-26.144 1.088s-26.208 5.024-42.4 9.696-37.056 13.92-62.656 27.744-52.608 31.328-81.056 52.512c-48.352-14.72-115.008-30.112-200-30.112s-151.808 15.392-200.544 30.112c-28.448-21.184-55.552-38.592-81.344-52.224s-46.4-22.976-61.856-28c-15.456-5.024-29.792-8.256-42.944-9.696s-21.6-1.888-25.344-1.344c-3.744 0.544-6.496 1.152-8.256 1.888-10.304 27.648-17.408 54.752-21.344 81.312s-4.8 49.888-2.656 69.984c2.144 20.096 4.448 35.904 6.944 47.392S80 286.304 83.2 294.56C27.744 358.816 0 435.808 0 525.536z m136.544 113.888c0-58.016 21.344-110.624 64-157.856 12.8-14.4 27.648-25.312 44.544-32.704s36.096-11.616 57.6-12.608 42.048-0.8 61.6 0.608 43.744 3.296 72.544 5.696 53.696 3.616 74.656 3.616c20.96 0 45.856-1.184 74.656-3.616s52.992-4.288 72.544-5.696c19.552-1.408 40.096-1.6 61.6-0.608s40.8 5.216 57.856 12.608c17.056 7.392 32 18.304 44.8 32.704 42.656 47.232 64 99.84 64 157.856 0 34.016-3.552 64.32-10.656 90.944s-16.096 48.928-26.944 66.912c-10.848 18.016-26.048 33.216-45.6 45.632s-38.496 22.016-56.8 28.8c-18.304 6.784-41.952 12.096-70.944 15.904s-54.944 6.112-77.856 6.912c-22.944 0.8-51.808 1.216-86.656 1.216s-63.648-0.416-86.4-1.216c-22.752-0.8-48.608-3.104-77.6-6.912s-52.608-9.12-70.944-15.904c-18.304-6.816-37.248-16.416-56.8-28.8s-34.752-27.616-45.6-45.632c-10.848-18.016-19.84-40.32-26.944-66.912s-10.656-56.928-10.656-90.944zM256.032 608c0-53.024 28.64-96 64-96s64 42.976 64 96-28.64 96-64 96-64-42.976-64-96z m384 0c0-53.024 28.64-96 64-96s64 42.976 64 96-28.64 96-64 96-64-42.976-64-96z" p-id="6454"></path>
          </svg>
        </a>
      </li>
    </ul>
  </div>
  <div class="grid__item info">
    <div class="card">
      <div class="card__details">
        jelly-o brownie sweet
      </div>
    </div>
    <div class="card">

      <div class="card__details">
        Muffin jelly gingerbread
      </div>
    </div>
    <div class="card">

      <div class="card__details">
        sesame snaps chocolate
      </div>
    </div>
  </div>
  <div class="grid__item photo">
    <img src="https://picsum.photos/600/400?random=1" width="600" height="400" alt="" />
  </div>
  <div class="grid__item bio">
    <p>Kiara enjoys long naps on the beach (or any other place, really, she's not very demanding on that matter). Likes to to sunbath a lot. She's friendly with other dogs and very patient. She's a furry, chubby princess.</p>
  </div>
</div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  padding: 20px;

  display: grid;
  place-content: center;
}

img {
  display: block;
  max-width: 100%;
}

.grid__container {
  display: grid;
  grid-template-rows: repeat(3, minmax(100px, max-content));
  grid-template-columns: 200px 1fr 1fr 200px;
  gap: 20px;
  min-inline-size: 60vw;
  max-inline-size: 80vw;
  grid-template-areas:
    "header   header  header info"
    "trophies photo   photo  info"
    "trophies bio     bio    bio";
}

.header {
  grid-area: header;
}

.trophies {
  grid-area: trophies;
}

.info {
  grid-area: info;
}

.photo {
  grid-area: photo;
}

.bio {
  grid-area: bio;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  background: #0c9a9a;
  color: #fff;
  grid-column-start: auto;
  grid-row-start: auto;
  color: #fff;
  background: url(https://picsum.photos/400/?random=11);
  background-size: cover;
  background-position: center;
  box-shadow: -2px 2px 10px 0px rgb(68 68 68 / 40%);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  counter-increment: item-counter;
  width: 100%;
  border-radius: 10px;
  position: relative;
}

.card:nth-of-type(2n) {
  background-image: url(https://picsum.photos/400?random=31);
}

.card:nth-of-type(2n + 1):not(:first-child) {
  background-image: url(https://picsum.photos/400?random=12);
}

.card:hover {
  transform: scale(1.05);
}

.card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.3;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}
.card:hover::after {
  opacity: 0;
}
.card__details {
  position: relative;
  z-index: 1;
  padding: 15px;
  color: #444;
  background: #fff;
  text-transform: lowercase;
  letter-spacing: 1px;
  color: #828282;
  border-radius: 0 0 10px 10px;
}

.card__details::before {
  content: counter(item-counter);
  font-weight: bold;
  font-size: 1.1rem;
  padding-right: 0.5em;
  color: #444;
}

.header p {
  font-size: 1rem;
}

.header h1 {
  font-size: 2.25rem;
  margin: 0;
  color: #00bcd4;
  text-shadow: 1px 1px 0px rgb(255 255 255 / 50%);
}

.header {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.trophies {
  padding: 1rem;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-radius: 0.25rem;
  color: #fff;
}

.trophies ul {
  list-style: none outside none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.trophies a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffeb3b;
  transition: all 0.2s ease-in-out;
}

.trophies a:hover {
  mix-blend-mode: color-dodge;
}

.trophies svg {
  width: 50%;
  height: auto;
}

.info {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  gap: 10px;
}

.photo {
  background: linear-gradient(45deg, #e82929, #ffc107);
  border-radius: 10px;
  overflow: hidden;
}

.photo img {
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
}

.bio {
  background-color: #5e2ca5;
  border-radius: 0.25rem;
  padding: 1.25em;
}

.bio p {
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
}

              
            
!

JS

              
                
              
            
!
999px

Console