Wayfair Logo

This is a small experiment to make Wayfair logo using HTML and CSS

by jayesh1511

HTML

<div id="topmost-parent-view">
<div class='topParentView clearBackground'>
  <div class='innerRectangleView topTransformDiv'>
    <div class='innerSquareView largeInnerSquareView'>
      <div class='innerSquareView shortInnerSquareView triangleLeft topLeftTriangleColor'></div>
      <div class='innerSquareView mediumInnerSquareView topLeftColor'></div>
    </div>
    <div class='innerSquareView largeInnerSquareView'></div>
    <div class='innerSquareView largeInnerSquareView rightTriangularViews'>
      <div class='innerSquareView mediumInnerSquareView bottomRightColor'></div>
      <div class='innerSquareView shortInnerSquareView triangleRight bottomRightTriangleColor'></div>
    </div>
  </div>

  <div class='innerRectangleView negativeRotatedDiv'>
    <div class='innerSquareView largeInnerSquareView'>
      <div class='innerSquareView shortInnerSquareView triangleLeft bottomLeftTriangleColor'></div>
      <div class='innerSquareView mediumInnerSquareView bottomLeftColor'></div>
    </div>
    <div class='innerSquareView largeInnerSquareView centerColor middleViewWidth'></div>
    <div class='innerSquareView largeInnerSquareView rightTriangularViews'>
      <div class='innerSquareView mediumInnerSquareView topRightColor'></div>
      <div class='innerSquareView shortInnerSquareView triangleRight topRightTriangleColor'></div>
    </div>
  </div>
</div>

<div id="title">
Wayfair
</div>
<div id="registered-trademark">
®
</div>
</div>

CSS

#topmost-parent-view {
 clear: both;
 width: 850px;
}

.topParentView {
  height: 200px;
  width: 220px;
  position: relative;
  float: left;
}

.innerRectangleView {
  width: 240px;
  height: 80px;
}

.floatLeft {
  float: left;
}

.innerSquare {
  float: right;
}

.innerSquareView {
  float: left;
  height: inherit;
}

.shortInnerSquareView {
  width: 26.67px;
}

.largeInnerSquareView {
  width: 80px;
}

.triangleLeft {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-right: 26.67px solid #fdf;
  border-bottom: 40px solid transparent;
}

.triangleRight {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-left: 26.67px solid #fdf;
  border-bottom: 40px solid transparent;
}

.clearBackground {
  background: white;
}

.negativeRotatedDiv {
  -ms-transform: translate(-20px, -20px) rotate(-45deg);
  -webkit-transform: translate(-20px, -20px) rotate(-45deg);
  transform: translate(-20px, -20px) rotate(-45deg);
}

.topTransformDiv {
  -ms-transform: translate(-20px, 60px) rotate(45deg);
  -webkit-transform: translate(-20px, 60px) rotate(45deg);
  transform: translate(-20px, 60px) rotate(45deg);
}

.centerColor {
  background: #6B317C
}

.topLeftColor {
  background: #C9D453
}

.topRightColor {
  background: #97CE75
}

.bottomLeftColor {
  background: #E6D000
}

.bottomRightColor {
  background: #C685DF
}

.topLeftTriangleColor {
  border-right-color: #C9D453;
  margin-left: 9px;
}

.topRightTriangleColor {
  border-left-color: #97CE75
}

.bottomLeftTriangleColor {
  border-right-color: #E6D000;
  margin-left: 9px;
}

.bottomRightTriangleColor {
  border-left-color: #C685DF
}

.rightTriangularViews {
  left: 1px;
  position: relative;
}

.mediumInnerSquareView {
  width: 45.54px;
  margin-right: -1px;
  margin-left: -1px;
}

#title {
  width: 620px;
  float: left;
  height: 200px;
  line-height: 200px;
  font-weight: bold;
  color: #6C3277;
  font-size: 175px;
}

#registered-trademark {
  width: 10px;
  height: 200px;
 ...