#dailycssimages 41 - Cute Startup Logo

dailycssimages-41-cute-startup-logo.markdown

#dailycssimages 41 - Cute Startup Logo

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="container">
  <div class="logo">
    <div class="tower">
      <div class="body"></div>
      <div class="lid"></div>
      <div class="left-leg">
        <div class="leg"></div>
      </div> 
      <div class="right-leg">
        <div class="leg"></div>
      </div>
      <div class="upper">
        <div class="strut"></div>
      </div>
      <div class="lower">
        <div class="strut"></div>
      </div>
    </div>
    <div class="aperture">
      <div class="blades">
        <div class="blade"></div>
        <div class="blade"></div>
        <div class="blade"></div>
        <div class="blade"></div>
        <div class="blade"></div>
      </div>
      <div class="center"></div>
    </div>
    <div class="text">
      <span class="bk">BKLYN</span>
      <span class="snap">SNAP</span>
    </div>
  </div>
</div>

script.js

// Source: https://fast.customer.io/s/cio-mascot-hello-wave.gif

// source: http://wordabovethestreet.org/assets/img/skylines/002.png

// source: https://cdn.shopify.com/s/files/1/0080/8372/products/tattly_jason_santa_maria_aperture_web_design_01_grande.jpg?v=1444337564

// source: https://si.wsj.net/public/resources/images/MK-CH831_ADTECH_G_20131113175012.jpg

// Source: https://pbs.twimg.com/media/B0lLyf8CQAArr-L.jpg

// Source: http://www.mobilemarketer.com/cms/lib/20246.jpg

style.css

@import url('https://fonts.googleapis.com/css?family=Oswald');

* {
  box-sizing: border-box;
}

body {
  background-color: black;
}

.container {
  
}

.logo {
  width: 20em;
  height: 20em;
/*   border: 1px solid white; */
  left: 2em;
  top: 2em;
  position: absolute;
}

.tower {
  position: absolute;
  top: 5em;
  left: 3em;
}

.body {
  position: relative;
  width: 5em;
  height: 6em;
  background-color: #FFF000;
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em;
}

.lid {
  position: relative;
  width: 0;
	height: 0;
	border-left: 3.3em solid transparent;
	border-right: 3.3em solid transparent;
	border-bottom: 3em solid #FFF000;
  top: -9em;
  left: -0.7em;
}

.leg {
  width: 0.3em;
  height: 3em;
  background-color: white;
}

.left-leg .leg {
  position: relative;
  top: -3.2em;
  left: 1.1em;
  transform: rotate(5deg);
}

.right-leg .leg {
  position: relative;
  top: -6.3em;
  left: 3.7em;
  transform: rotate(-5deg);
}

.strut {
  width: 0.2em;
  height: 3em;
  background-color: white;
}

.upper .strut {
  position: relative;
  transform: rotate(60deg);
  top: -9em;
  left: 2.4em;
}

.lower .strut {
  position: relative;
  transform: rotate(-60deg);
  top: -12em;
  left: 2.4em;
}


.text {
  font-family: 'Oswald', sans-serif;
  top: 1em;
  position: relative;
}

.bk {
  font-size: 3em;
  color: white;
  position: relative; 
  top: 1.6em;
  left: 3em;
}

.snap {
  font-size: 3em;
  color: #FFF000;
  position: relative;
  top: 2.5em;
  left: 0.5em;
}

.aperture {
  position: absolute;
  left: 6.5em;
  top: 5.3em;
  transform: rotate(-45deg);
}

.center {
  width: 1.5em;
  height: 1.5em;
/*   border: 0.2em solid white; */
  border-radius: 50%;
  position: relative;
  top: -8em;
}


.blade {
  width: 0.2em;
  height: 2em;
/*   background-color: white; */
  position: relative;
}

.blade:nth-child(1) {
  position: relative;
  left: 0.9em;
  top: 0.1em;
  transform: rotate(20deg);
/*   background-color: red; */
}

.blade:nth-child(2) {
  position: relative;
  left: -0.2em;
  top: -1.2em;
  transform: rotate(-10deg);
/*   background-color: orange; */
}

.blade:nth-child(3) {
  position: relative;
  left: -0.5em;
  top: -1.9em;
  transform: rotate(-70deg);
/*   background-color: green; */
}

.blade:nth-child(4) {
  position: relative;
  left: 0.2em;
  top: -3.3em;
  transform: rotate(-130deg);
/*   background-color: blue; */
}

.blade:nth-child(5) {
  position: relative;
  left: 1.3em;
  top: -5.1em;
  transform: rotate(-180deg);
/*   background-color: purple; */
}