<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Bangers" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Comfortaa" />
</head>

<body>
    <div class="grid">
        <header>
        </header>

        <aside class="sidebar-left box left-box">
                <div class="evenboxinner"> left?</div>
                <div>
                    <ul class="menu">
                        <li>#Java</li>
                        <li>#JavaScript</li>
                        <li>#nodeJS</li>
                        <li>#angular</li>
                        <li>#react</li>
                        <li>#react-native</li>
                    </ul>
                </div>
        </aside>

        <article class="box mid-box">
            <div class="oddboxinner"> Article with a very very long title to see the rotation?</div>
            <div class="content">
                    This is sample content
                    
            </div>
        </article>

        <aside class="sidebar-right box right-box">
                <div class="evenboxinner"> right ?</div>
        </aside>

        <footer>
        </footer>
    </div>
</body>

</html>
/* the grid */

.grid {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-template-rows: repeat(3, 100px);
  grid-gap: 1em;
  grid-template-areas: "header header header"
                       "sidebar-1 article sidebar-2";
                       /* "footer footer footer"; */
}

header {
  grid-area: header;
  background-color: aqua;
}

/* footer {
  grid-area: footer;
  background-color: blueviolet;
} */

.sidebar-left {
  grid-area: sidebar-1;
}

article {
  grid-area: article;
}

.sidebar-right {
  grid-area: sidebar-2;

}



/* the comics */
.box{
  min-height: 500px;
  /* width:250px;
  height:250px; */
  background:#fff;
  border: solid black;
  border-color: black;
}

.left-box{
  font-family: Comfortaa, Helvetica;
  min-height: 250px;
  border-width: 3px 4px 3px 5px;
  border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
  transform: rotate(2deg);
}
.mid-box{
  font-family: Comfortaa, Helvetica;
  /* min-height: 2500px; */
  /* width:350px; */
  border-width: 3px 3px 5px 5px;
  /* border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
  transform: rotate(-2deg); */
}

.right-box{
  font-family: Comfortaa, Helvetica;
  min-height: 250px;
  border-width: 5px 3px 3px 5px;
  border-radius:95% 4% 97% 5%/4% 94% 3% 95%;
  transform: rotate(2deg);
}

.oddboxinner{
  margin:15px;
  transform: rotate(-1deg);
  font-family: 'Bangers', cursive;
  font-size: 25px;
}
.evenboxinner{
  font-family: 'Bangers', cursive;
  font-size: 25px;
  transform: rotate(2deg);
  margin:15px;
  padding:0 5px;
  float:right;
  background:#ddd;
  border:1px solid #222;
  box-shadow:3px 3px 0 #222;
}

.left-box .menu {
  padding: 0px 0px 0px 10px;
  list-style-type: none;
}

.box .content {
  margin:15px;
  padding-top: 30px;
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Lato'

External JavaScript

This Pen doesn't use any external JavaScript resources.