Layout 13: Swiss Poster

Transform a nine-column layout 45 degrees.

Transform a nine-column layout 45 degrees to make a Swiss poster design. Uses cool substring attribute selector.

View layout

CSS Code

 <style type="text/css">
    body {
      background: #309ad3;
      font-family: 'Noto Sans', sans-serif;
      /* 100px 175px 25px 200px 20px 70px 350px 20px 100px; */
      display: grid;
      grid-template-columns: 9.4339622641509% 16.509433962264% 2.3584905660377% 18.867924528302% 1.8867924528302% 6.6037735849057% 33.018867924528% 1.8867924528302% 9.4339622641509%;
      grid-template-rows: repeat(6, 1fr);
      max-height: 100vh;
      transform: rotate(45deg);
    }

     [class^="purple"] {
      background: #34478c;
      height: 100%;
      width: 100%;
    }
    
    [class^="green"] {
      background: #34854b;
      height: 100%;
      width: 100%;
      opacity: .8;
      z-index: 1;
    }

    .green-left {
      grid-column: 2 / 3;
      grid-row: 2 / 4;
    }

    .green-center {
      grid-column: 4 / 5;
      grid-row: 2 / 4;
    }
    .green-right {
      grid-column: 6 / 8;
      grid-row: 2 / 4;
      width: 50%;
    }

    .purple-left {
      grid-column: 2 / 5;
      grid-row: 3 / 6;
    }

    .purple-center {
      grid-column: 6 / 8;
      grid-row: 3 / 6;
    }

    .purple-right {
      grid-column: 9 / 11;
      grid-row: 3 / 6;
    }

    .text-left {
      grid-column: 4 / 5;
      grid-row: 6 / 7;
      justify-self: end;
      align-content: start; 
    }

    .text-right {
      grid-column: 6 / 8;
      grid-row: 6 / 7;
    }

    p {
      font-size: var(--font-size-x-large);
      font-weight: 700;
      padding: 0;
      margin: 0;
    }

  </style>

← Previous Layout 12: Greensock Animation and Interaction of Color Layout 14: Disney Hall, polygon & clip-path Next →