SCSS

by jayesh1511

HTML

<div id="parent">
<div id="outer-rectangle">
<div class="square" id="blue">

<div class="dots-in-blue-holder">
<div class="dot" id="in-blue-first">
</div>
<div class="dot" id="in-blue-second">
</div>
</div>

</div>
<div class="square" id="red">
<div class="dot" id="in-red">
</div>
</div>
</div>
<div id="trademark">
TM
</div>
</div>
<div class="text">
<div id="title">
Domino's
</div>
<div id="registered-trademark">
®
</div>
</div>

SCSS

#parent {
  margin-top: 50px;
  margin-left: 150px;
  height: 130px;
  background: transparent;
  float: left;
}

#outer-rectangle {
  width: 155px;
  background: transparent;
  transform: rotate(-45deg);
  float: left;
}

.square {
  width: 75px;
  height: 75px;
}

#blue {
  background: #0773AD;
  float: left;
  border-radius: 8px 0px 0px 8px;
}

#red {
  background: #E61E29;
  float: right;
  border-radius: 0px 8px 8px 0px;
  text-align: center;
}

.dot {
  height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
}

#in-blue-first {
  position: relative;
  left: 10%;
}

#in-blue-second {
  position: relative;
  left: 16%;
}

.dots-in-blue-holder {
  position: relative;
  height: 25px;
  width: 106px;
  background: transparent;
  transform: rotate(45deg);
  top: 35px;
  left: -5px;
}

#in-red {
  display: inline-block;
  top: 33%;
  position: relative;
}

#trademark {
  position: relative;
  color: #0773AD;
  font-size: 11px;
  left: 70px;
  top: 26px; 
}

.text {
  width: 260px;
  height: 70px;
  display: flex;
  position: absolute;
  margin-top: 175px;
  margin-left: 100px;
}

#title {
  color: #0773AD;
  font-weight: bold;
  font-size: 60px;
  flex: 0 0 65%;
}

#registered-trademark {
  margin-top: 18px;
  color: #0773AD;
  flex: 1;
  font-size: 10px;
}