yoksel

BODY {
  background:
    -webkit-linear-gradient(0,
    transparent 1.7em, rgba(64, 224, 208,.5) 1.7em, 
    transparent 2em, transparent 2.5em, 
    rgba(64, 224, 208,.5) 2.5em,
    transparent 
    ),
    -webkit-linear-gradient(0,
    rgba(0, 139, 139,.5) .5em, transparent .5em,

yoksel

DIV {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: .7em;
  }
DIV:before,
DIV:after {
  content: "";
  display: block;

yoksel

BODY {
  perspective: 500px;
  perspective-origin: center -5em;
  }
.side,
.container {
  width: 10em;
  height: 10em;
  }

yoksel

.flags {
  white-space: nowrap;
  }
.flags:nth-child(2) {
  margin-left: -320px;
  }
.flags:nth-child(3) {
  margin-left: -160px;
  }
SPAN {

yoksel

.arrow {
  position: relative;
  margin: 50px auto;
  }
  .arrow:before,
  .arrow:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;

yoksel

.ribbon {
  position: relative;
  width: 80%;
  min-width: 300px;
  margin: 3em auto;
  
  }
H1 {
  margin: 0 1em;
  background: orangered;

yoksel

DIV {
  width: 2em;
  height: 2em;
  margin-top: 3em;
  background: transparent;
  border-radius: 50%;
  box-shadow:
    2em 0 0 crimson,
    4em 0 0 red,
    6em 0 0 orangered,

yoksel

BODY {
  background: #efefef;
  font-size: 1.7em;
  }
DIV {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  }
DIV:before,

yoksel

DIV {
  width: 1em;
  height: 1em;
  background: firebrick;
  box-shadow:
    1em 0 0 crimson,
    2em 0 0 red,
    3em 0 0 orangered,
    4em 0 0 orange,
    5em 0 0 gold,

yoksel

BODY {
  text-align: center;
  color: #999;
  text-shadow: 1px 0 1px rgba(0,0,0,.5);
  }
DIV {
  display: inline-block;
  position: relative;
  width: 45%;
  height: 15em;