SCSS

by jayesh1511

HTML

<div id="parent">
<div class="head">

<div class="oval">
</div>
<div class="circle" id="left-circle">
</div>
<div class="circle" id="right-circle">
</div>

<div class="eye" id="left-eye">
</div>
<div class="eye" id="right-eye">
</div>
<div class="smile">
</div>

<div id="antenna">

<div class="line" id="vertical-line">
</div>

<div class="line" id="horizontal-line">
</div>

<div class="eye" id="antenna-eye">
</div>

</div>

</div>
<div id="title">
<div class="eye" id="title-eye">
</div>
reddit
</div>


</div>

SCSS

#parent {
  width: 500px;
  height: 150px;
  margin-top: 75px;
  margin-left: 75px;
}

.head {
  width: 150px;
  height: inherit;
  float: left;
  border-radius: 50%;
  background: #FF4300;
}

.oval {
  width: 90px;
  height: 50px;
  background: white;
  border-radius: 45px / 25px;
  margin: auto;
  margin-top: 60px;
}

.circle {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  margin-top: -50px;
  position: absolute;
}

#left-circle {
  margin-left: 30px;
}

#right-circle {
  margin-left: 100px;
}

.eye {
  background: #FF4300;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: -37px;
  position: absolute;
}

#left-eye {
  margin-left: 50px;
}

#right-eye {
  margin-left: 88px;
}

.smile {
  width: 40px;
  height: 12px;
  border: solid 3px #000;
  border-color: #FF4300 transparent transparent transparent;
  border-radius: 50%/13px 13px 0 0;
  transform: rotate(180deg);
  margin-top: -25px;
  margin-left: 53px;
}

#antenna {
  margin-top: -70px;
  margin-left: 78px;
  transform: rotate(15deg);
}

.line {
  background: white;
  border-radius: 3px;
  width: 6px;
  height: 40px;
}

#horizontal-line {
  transform: rotate(90deg);
  margin-top: -50px;
  margin-left: 10px;
  height: 25px;
}

#antenna-eye {
  width: 18px;
  height: 18px;
  background: white;
  margin-top: -21px;
  margin-left: 22px;
}

#title {
  width: 280px;
  height: inherit;
  line-height: 165px;
  margin-left: 20px;
  font-weight: bold;
  font-size: 100px;
  float: left;
}

#title-eye {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #FF4300;
  margin-top: 43px;
  margin-left: 202px;
}