Edit on GitHub

Develop Styles

Develop styles using CSS modules #

Let's also add some style elements using CSS modules to create a dynamic application. Override the below code into your <your-awesome-component>/src/styles/your-awesome-component.css:

body {
  font-family: sans-serif;
}

p {
  padding: 15px;
}
@keyframes partyLights {
  0%{background-position:0% 51%}
  50%{background-position:100% 50%}
  100%{background-position:0% 51%}
}

@keyframes shake {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

.party {
  animation-name: shake;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.houseParty {
    -webkit-clip-path: polygon(2% 97%, 98% 97%, 98% 44%, 51% 8%, 3% 45%);
  clip-path: polygon(2% 97%, 98% 97%, 98% 44%, 51% 8%, 3% 45%);
  background: linear-gradient(269deg, #ff90f1, #27ff8f, #6db0ff, #a398ff);
  background-size: 800% 800%;
  animation: partyLights 5s ease infinite;
  min-height: 12em;
}

.house {
  clip-path: polygon(2% 97%, 98% 97%, 98% 44%, 51% 8%, 3% 45%);
  background-color: #474747;
  padding: 10em 2em 2em 2em;
  border-radius: 10px;
  min-height: 35vh;
}

.container {
  width: 50vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;

  position: relative;
  transition: filter .7s ease-in-out;
}

.container:before {
  content: '';
  display: block;
  position: absolute;
  background-image: url(//goo.gl/8f5GrX);
  background-position: center;
  background-size: 95%;
  background-repeat: no-repeat;
  width: 45%;
  height: 45%;
  z-index: 999;
  left: 47%;
  top: -9%;
}

.room {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 2em;
  padding-right: 2.5em;
}

.message {
  display: block;
  position: absolute;
  width: 19em;
  height: 11em;
  z-index: 999;
  left: 4.5em;
  top: 7.5em;
  color: white;
  font-weight: 100;
  font-family: helvetica;
  font-size: 27px;
}

a, a:hover, a:active, a:visited {
  color: rgb(93, 245, 255);
  text-decoration: none;
}

Create a file named: <your-awesome-component>/src/styles/guest-list.css. Copy the code from below into this file:

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

label { font-size: 2em; }
input[type=checkbox] { display:none; }
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}
input[type=checkbox] + label:before { content: "\f096"; }
input[type=checkbox] + label:before { letter-spacing: 10px; }
input[type=checkbox]:checked + label:before { content: "\f046"; }
input[type=checkbox]:checked + label:before { letter-spacing: 5px; }

.guestList {
  position: absolute;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.93);
  left: 10%;
  border: 2px solid whitesmoke;
  display: inline-block;
  padding-left: 4em;
  padding-right: 4em;
  padding-bottom: 3em;
  padding-top: 1.7em;
  border-radius: 3px;
  margin: 2em;
}

.guestList h1 {
  font-size: 2.5em;
}

.guestName {
  margin-bottom: .5em;
}

Create a file named: <your-awesome-component>/src/styles/render-friend.css. Copy the code from below into this file:

@keyframes shake {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

.join {
  animation-name: shake;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.friend {
  border-radius: 50%;
  background-color: #efefef;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  float: right;
}