Responsive grid with CSS Grids

Responsive grid with CSS Grids

by jayesh1511

HTML

<div id="parent">
<div id="title">
CHASE
</div>
<div id="logo">
<div class="bar" id="first">
  <div class="rectangle"></div>
  <div class="triangle"></div>
</div>

<div class="bar" id="second">
  <div class="rectangle"></div>
  <div class="triangle"></div>
</div>

<div class="bar" id="third">
  <div class="rectangle"></div>
  <div class="triangle"></div>
</div>

<div class="bar" id="fourth">
  <div class="rectangle"></div>
  <div class="triangle"></div>
</div>

</div>
</div>

CSS

#parent {
  margin-left: 40px;
  margin-top: 100px;
  width: 500px;
  clear: both;
}

#title {
  width: 410px;
  float: left;
  height: 170px;
  line-height: 150px;
  font-weight: bold;
  font-size: 120px;
}

#logo {
  width: 90px;
  float: left;
}

.rectangle {
  width: 45px;
  height: 35px;
  background: #0B7CD0;
  margin-top: 0px;
  border-radius: 8px 0 0 0;
  float: left;
}

.triangle {
   width: 0;
   height: 0;
   border-bottom: 35px solid #0B7CD0;
   border-right: 35px solid transparent;
   float: left;
   margin-top: 0px;
}

.bar {
  width: 90px;
  height: 35px;
  background: transparent;
  position: absolute;
}

#first {
  transform: rotate(-90deg);
  margin-left: 8px;
  margin-top: 30px;
}

#second {
  transform: rotate(0deg);
  margin-top: 8px;
  margin-left: 75px;
}

#third {
  transform: rotate(90deg);
  margin-left: 100px;
  margin-top: 75px;
}

#fourth {
  transform: rotate(180deg);
  margin-top: 98px;
  margin-left: 32px;
}