Responsive grid with CSS Grids

Responsive grid with CSS Grids

by jayesh1511

HTML

<div id="parent">

<div class="disk" id="first">
<div class="halfCircle">
</div>
<div class="halfCircle rotate-horizontally">
</div>
</div>

<div class="disk" id="second">
<div class="halfCircle">
</div>
<div class="halfCircle rotate-horizontally">
</div>
</div>

<div class="disk" id="third">
<div class="halfCircle">
</div>
<div class="halfCircle rotate-horizontally">
</div>
</div>

<div class="horizontal-white-line" id="first-line">
</div>
<div class="horizontal-white-line" id="second-line">
</div>
<div class="horizontal-white-line" id="third-line">
</div>
<div id="title">
adidas
</div>
<div id="registered-trademark">
®
</div>
</div>

CSS

.halfCircle {
     height: 150px;
     width: 75px;
     border-radius: 0 150px 150px 0;
     float: left;
     position: absolute;
     clip: rect(0px, 75px, 150px, 58px);
     background: black;     
}

.rotate-horizontally {  
     transform: rotate(180deg);
     margin-left: 41px;
}

#parent {
  margin-left: 50px;
  margin-top: 50px;
  width: 200px;
  height: 170px;
  background: transparent;
  position: absolute;
}

#first {
  margin-left: -14px;
  margin-top: 78px;
  transform: rotate(-45deg);
}

#second {
  margin-left: 60px;
}

#third {
   margin-left: 168px;
   margin-top: -5px;
   transform: rotate(45deg);
}

.disk {
  position: absolute;
}

.horizontal-white-line {
  width: 140px;
  height: 5px;
  background: white;
  margin-left: 45px;
  position: absolute;
}

#first-line {
  margin-top: 85px;
}

#second-line {
   margin-top: 95px;
}

#third-line {
   margin-top: 105px;
}

#title {
  position: absolute;
  margin-top: 120px;
  margin-left: 50px;
  font-weight: bold;
  font-size: 50px;
}

#registered-trademark {
  width: 10px;
  height: 20px;
  margin-top: 127px;
  margin-left: 180px;
  font-size: 11px;
}