Логотип в css

Предлагаю вашему вниманию пример создания дизайна логотипа на чистом css.

HTML

<div class="square">

 <div class="circle">
 <span class="petal1"></span>
 <span class="petal2"></span>
 <span class="petal3"></span>
 <span class="petal4"></span>
 <div class="orangish"></div>
 </div>
 <div class="blacktop"></div>
 <div class="lettering">

<span>E</span>
<span>S</span>
<span>T</span>
<span>D</span>
<span> </span>
<span>2</span>
<span>0</span>
<span>1</span>
<span>4</span>

</div>
 <div class="text-holder">
 <h3>JAX</h3>
 <h1>Florida</h1>
 <h3 class="orl">ORL</h3>

 </div>
 <div class="underline"></div>
 <span class="subtitle">#BADGEHUNTING</span>
 <span class="club">CLUB</span>
</div>

CSS

h1 {
 font-family: 'Pacifico', cursive;
 display: inline-block;
}

h3 {
 font-family: 'Bree Serif', serif;
 color: #343433;
 display: inline-block;
}

body {
 background: #e4502d;
}
body .square {
 height: 300px;
 width: 300px;
 border: 15px solid #faf2d9;
 margin: 0 auto;
 margin-top: 100px;
 position: relative;
 transform: rotate(45deg);
 background: #f2bb60;
}

.blacktop {
 border: 90px solid;
 width: 0px;
 color: #faf2d9;
 border-bottom-color: transparent;
 border-right-color: transparent;
 z-index: 0;
 position: absolute;
}

.blacktop:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 border: 85px solid;
 width: 0px;
 height: 0px;
 color: #343433;
 border-bottom-color: transparent;
 border-right-color: transparent;
 z-index: 0;
 top: -90px;
 left: -90px;
}

.circle {
 position: absolute;
 width: 60px;
 height: 60px;
 background: #faf2d9;
 top: 56px;
 left: 56px;
 z-index: 20;
 border-radius: 50%;
 z-index: 10;
}

.orangish {
 position: absolute;
 background: #F2BB60;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 top: 21px;
 margin-left: 20px;
}

span.petal1, span.petal2, span.petal3 {
 display: block;
 height: 8px;
 width: 75%;
 background: #e4502d;
 margin: 26px;
 margin-left: 8px;
}

span.petal2 {
 transform: rotate(90deg);
 margin-top: -34px;
}

span.petal3 {
 transform: rotate(45deg);
 margin-top: -34px;
}

span.petal4 {
 display: block;
 position: absolute;
 height: 8px;
 width: 75%;
 background: #e4502d;
 margin: 26px;
 left: -18px;
 top: 0px;
 -webkit-transform: rotate(-45deg);
}

.text-holder {
 text-align: center;
 margin-top: 38px;
 margin-left: -36px;
 transform: rotate(-45deg);
 width: 120%;
}

.text-holder h1 {
 font-weight: 900;
 font-size: 70px;
 margin-left: 20px;
 margin-right: 20px;
 color: #e4502d;
 text-shadow: -3px 2px 2px white;
}

.text-holder h3 {
 font-size: 22px;
 display: inline-block;
 vertical-align: 50%;
}

/*
.text-holder h3:first-child{
 left:0;
 bottom:-58px;
}

.text-holder h3:last-child{
 top: 71px;
right: -3px;
}*/
.underline {
 position: absolute;
 border-bottom: 5px;
 border-style: solid;
 border-radius: 80px;
 color: #e4502d;
 transform: rotate(-45deg) skew(-70deg);
 width: 55%;
 right: 32px;
 bottom: 131px;
 box-shadow: 3px 3px 1px 0px white;
}

.subtitle, .club {
 font-family: 'Arvo', serif;
 display: block;
 font-weight: 700;
 transform: rotate(-45deg);
 position: absolute;
 right: 5px;
 bottom: 87px;
 font-size: 18px;
 color: #343433;
}

.club {
 color: #faf2d9;
 font-size: 25px;
 right: 24px;
 bottom: 54px;
 letter-spacing: 4PX;
}

div.lettering {
 position: absolute;
 width: 30px;
 height: 50px;
 padding: 25px;
 margin: auto;
 margin-top: 10px;
 margin-left: 75px;
 transform: rotate(-45deg);
}
div.lettering span {
 font: 12px Monaco, MonoSpace;
 height: 50px;
 position: absolute;
 width: 0px;
 left: 0;
 top: 0;
 padding: 0px;
 color: white;
 transform-origin: bottom center;
}
div.lettering span:nth-child(1) {
 transform: rotate(-60deg);
}
div.lettering span:nth-child(2) {
 transform: rotate(-45deg);
}
div.lettering span:nth-child(3) {
 transform: rotate(-30deg);
}
div.lettering span:nth-child(4) {
 transform: rotate(-15deg);
}
div.lettering span:nth-child(5) {
 transform: rotate(0deg);
}
div.lettering span:nth-child(6) {
 transform: rotate(15deg);
}
div.lettering span:nth-child(7) {
 transform: rotate(30deg);
}
div.lettering span:nth-child(8) {
 transform: rotate(45deg);
}
div.lettering span:nth-child(9) {
 transform: rotate(60deg);
}