The Campfire Made of HTML and CSS

CAMPFIRE MADE USING HTML AND CSS

The campfire

This is just another creation of mine using HTML(Haml)and CSS(SCSS).There is nothing more to say about this now because of i am providing complete code which i had used here.So first take a look at the demo after that we can get into the coding section.

DEMO:

FullScreenView

Now let's get ino the coding section where we first meet the HTML.

HTML(Haml):

.container
  .glow
  .logs
    .one
      .log
    .two
      .log
    .three
      .log
  .fire
    .flames
      .one
        .flame
      .two
        .flame
      .three
        .flame
    .flames.inner
      .one
        .flame
      .two
        .flame
      .three
        .flame

CSS(SCSS):

$background: #1c2766;
$bark: #725442;
$wood: #91725c;

$flame-outer: #ff770f;
$flame-inner: #ffda77;

$log-width: 20rem;

html{
  font-size: 1vh;
  @media screen and (max-aspect-ratio: 1/1){
    font-size: 1vw;
  }
  // using rem as an easy custom-sized unit that guarantees everything scales correctly to the viewport size
  margin:0;
  padding:0;
}
body{
  margin:0;
  padding:0;
  height: 100vh;
  width: 100vw;
  background: $background;
}

.container{
  width: 80rem;
  height: 80rem;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  *{
    position: absolute;
  }
}

.logs{
  bottom:0;
  left:50%;
  transform: translatex(-50%);
  width: 10rem;
  .two{
    width:$log-width;
    bottom:0;
    left: 50%;
    transform: translatex(-50%);
    .log{
      position:relative;
      width:100%;
      height: 0.75 * $log-width;
      background: $bark;
      margin-bottom: -8rem;
      clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
    }
    &::before{
      content:'';
      display:block;
      position:relative;
      width: (0.4 * $log-width);
      height: (0.9 * 0.4 * $log-width);
      background: $bark;
      margin:0 auto;
      border-radius: 50%;
      transform: translatey(60%);
    }
    &::after{
      content:'';
      display:block;
      position:relative;
      width: $log-width;
      height: (0.9 * $log-width);
      border-radius: 50%;
      background: $wood;
      box-sizing: border-box;
      border: 1rem $bark solid;
    }
  }
  .one, .three{
    width:0.9 * $log-width;
    margin-left: -18rem;
    bottom:-11rem;
    .log{
      position:relative;
      width:100%;
      height: 0.9 * $log-width;
      background: $bark;
      clip-path: polygon(0% 0%, 100% 0%, 100% 41%, 11% 100%);
      transform-origin: 0 0;
      transform: skewy(-10deg);
    }
    &::before{
      content:'';
      display:block;
      position:relative;
      width: (0.4 * 0.6 * $log-width);
      height: (0.4 * 0.9 * $log-width);
      background: $bark;
      margin-right:0;
      margin-left:auto;
      border-radius: 50%;
      transform:translate(45%, 57%);
    }
    &::after{
      content:'';
      display:block;
      position:relative;
      width: 0.6*$log-width;
      height: (0.9 * $log-width);
      border-radius: 50%;
      background: $wood;
      transform: translate(-50%, -100%);
      box-sizing:border-box;
      border: 1rem $bark solid;
    }
  }
  .three{
    transform: scalex(-1);
    margin-left: 10rem;
  }
}

.fire{
  left:50%;
  bottom:24.5rem;
}
.flames{
  > *{
    bottom:0;
    right:0;
    .flame{
      bottom:0;
      right:0;
      background: rgba($flame-outer, 0.6);
      width: 35rem;
      height: 48rem;
      border-radius: 0 40rem;
      transform-origin: 100% 100%;
    }
  }
  .two{
    transform: rotate(30deg);
  }
  .three{
    transform: scalex(-1);
  }
  &.inner{
    >* .flame{
      background: rgba($flame-inner, 0.4);
      width: 20rem;
      height: 24rem;
    }
  }
}
.glow{
  background: radial-gradient(closest-side, $flame-outer, rgba($flame-outer, 0));
  width: 100%;
  height: 100%;
  top: -8rem;
}

// ANIMATIONS

.one .flame, .inner .one .flame{
  animation-delay: -0.2s;
}
.two .flame, .inner .one .flame{
  animation-delay: -0.5s;
}
.three .flame, .inner .one .flame{
  animation-delay: -0.9s;
}

.flame{
  animation:
    wave 1s ease-in-out infinite alternate,
    flicker 0.3s ease-in-out infinite alternate,
    height 0.5s ease infinite alternate;
}
.inner .flame{
  animation:
    wave 0.8s ease-in-out infinite alternate,
    flicker 0.2s ease-in-out infinite alternate,
    heightsmall 0.3s ease infinite alternate;
}
.glow{
  animation:
    glow 0.8s ease-in-out infinite alternate,
    flicker 0.3s ease-in-out infinite alternate;
}



@keyframes wave{
  from{
    transform:rotate(-5deg);
  }
  to{
    transform:rotate(5deg);
  }
}

@keyframes flicker{
  from{
    opacity: 0.8;
  }
  to{
    opacity: 1;
  }
}

@keyframes height{
  from{
    height: 48rem;
    width: 35rem;
  }
  to{
    height: 44rem;
    width: 30rem;
  }
}

@keyframes heightsmall{
  from{
    height: 24rem;
    width: 20rem;
  }
  to{
    height: 23rem;
    width: 18rem;
  }
}
@keyframes glow{
  from{
    transform: scale(1.1);
  }
  to{
    transform: scale(1);
  }
}

That's all for today keep going keep practising....

HAPPY CODING.