#dailycssimages 50 - Party City - Modernized

dailycssimages-50-party-city-modernized.markdown

#dailycssimages 50 - Party City - Modernized

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="logo">
  <div class="confetti">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <h1>Party City</h1>
  <h2>NOBODY HAS MORE PARTY FOR LESS</h2>
</div>



<!-- <div class="building">
  <div class="left-storefront"></div>
  <div class="left-column"></div>
  <div class="body"></div>
  <div class="right-column"></div>
  <div class="right-storefront"></div>
</div> -->

script.js

// Source: http://s2.q4cdn.com/832897007/files/images/overview_vid_thumb1.jpg

// Source: https://static1.squarespace.com/static/520a98dfe4b008a4a3c2e3d5/56f4b79cd51cd4255126b9c0/56f4b7bfd51cd4255126ba55/1458878400660/confetti-party-design-logo-design.jpg

// https://s-media-cache-ak0.pinimg.com/564x/e7/51/6d/e7516d9478555d7c200c91da615a562c.jpg

style.css

@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Roboto');

* { 
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
      box-sizing: border-box; 
 font-family: 'Cuprum', sans-serif;
}

.logo {
  width: 500px; 
  height: 500px;
  left: 10%;
  top: 10%;
  position: absolute;
  text-align: center;
}

.confetti {
  width: 300px;
  height: 200px;
  position: relative;
  margin: 10% auto;
}

.confetti > div {
  border-radius: 50%;
  position: relative;
}

.confetti > div:nth-child(1) {
  width: 5px; 
  height: 5px;
  background-color: magenta;
  left: 45%;
  top: 20%;
}

.confetti > div:nth-child(2) {
  width: 7px; 
  height: 7px;
  background-color: #78d3d3;
  left: 40%;
}

.confetti > div:nth-child(3) {
  width: 9px; 
  height: 9px;
  background-color: lemonchiffon;
  left: 50%;
}

.confetti > div:nth-child(4) {
  width: 11px; 
  height: 11px;
  background-color: magenta;
  left: 60%;
}

.confetti > div:nth-child(5) {
  width: 9px; 
  height: 9px;
  background-color: #78d3d3;
  left: 70%;
}

.confetti > div:nth-child(6) {
  width: 7px; 
  height: 7px;
  background-color: lemonchiffon;
  left: 80%;
}

.confetti > div:nth-child(7) {
  width: 5px; 
  height: 5px;
  background-color: magenta;
  left: 70%;
}

.confetti > div:nth-child(8) {
  width: 7px; 
  height: 7px;
  background-color: #78d3d3;
  left: 60%;
}

.confetti > div:nth-child(9) {
  width: 9px; 
  height: 9px;
  background-color: lemonchiffon;
  left: 70%;
}

.confetti > div:nth-child(10) {
  width: 11px; 
  height: 11px;
  background-color: magenta;
  left: 80%;
}

.confetti > div:nth-child(11) {
  width: 5px; 
  height: 5px;
  background-color: magenta;
  left: 10%;
}

.confetti > div:nth-child(12) {
  width: 7px; 
  height: 7px;
  background-color: #78d3d3;
  left: 20%;
}

.confetti > div:nth-child(13) {
  width: 9px; 
  height: 9px;
  background-color: lemonchiffon;
  left: 30%;
}

.confetti > div:nth-child(14) {
  width: 11px; 
  height: 11px;
  background-color: magenta;
  left: 20%;
}

.confetti > div:nth-child(15) {
  width: 9px; 
  height: 9px;
  background-color: #78d3d3;
  left: 10%;
}

.confetti > div:nth-child(16) {
  width: 7px; 
  height: 7px;
  background-color: lemonchiffon;
  left: 20%;
}

.confetti > div:nth-child(17) {
  width: 5px; 
  height: 5px;
  background-color: magenta;
  left: 30%;
}

.confetti > div:nth-child(18) {
  width: 7px; 
  height: 7px;
  background-color: #78d3d3;
  left: 40%;
}

.confetti > div:nth-child(19) {
  width: 9px; 
  height: 9px;
  background-color: lemonchiffon;
  left: 30%;
}

.confetti > div:nth-child(20) {
  width: 11px; 
  height: 11px;
  background-color: magenta;
  left: 20%;
}


h1 {
 font-family: 'Dancing Script', cursive; 
  position: relative;
  font-size: 4em;
  top: -40%;
}

h2 {
font-family: 'Roboto', sans-serif;
  position: relative;
  font-size: 16px;
  top: -48%;
}

/* .building:after {
  content: "";
  display: table;
  clear: both;
}

.left-storefront {
  width: 200px;
  height: 200px;
  background-color: #E8E7BB;
  float: left;
}

.left-column {
  width: 100px;
  height: 300px;
  background-color: #FDFFEA;
  float: left;
}

.body {
  width: 300px;
  height: 300px;
  background-color: #E8E7BB;
  float: left;
}

.right-column {
  width: 100px;
  height: 300px;
  background-color: #FDFFEA;
  float: left;
}

.right-storefront {
  width: 200px;
  height: 200px;
  background-color: #E8E7BB;
  float: left;
} */