Front in Aracaju Logo Pure CSS

What is a front in aracaju logo pure css How do you make a front in aracaju logo pure css? This script and codes were developed by Shankar Cabus on 28 August 2021, Saturday.

How do I make an front in aracaju logo pure css?
  1. Front in Aracaju Logo Pure CSS Previews
  2. Front in Aracaju Logo Pure CSS HTML Codes
  3. Front in Aracaju Logo Pure CSS CSS Codes
  4. Front in Aracaju Logo Pure CSS JS Codes
Front in Aracaju Logo Pure CSS Previews

Front in Aracaju Logo Pure CSS HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Front in Aracaju Logo Pure CSS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="challenge">
  <div class="castanha"></div>
  <div class="caju"></div>
</div>
  
    <script src="js/index.js"></script>

</body>
</html>

Front in Aracaju Logo Pure CSS CSS Codes

.challenge {
  position: relative;
  display: inline-block;
  left: calc(42%);
}
.castanha {
  position: absolute;
  -webkit-transform: skewX(20deg);
  -moz-transform: skewX(20deg);
  -o-transform: skewX(20deg);
  transform: skewX(20deg);
  background: #403f3a;
  height: 3.1em;
  width: 1.3em;
  left: 5em;
  top: 0;
  z-index: 10;
}
.castanha:after {
  position: absolute;
  content: "";
  -webkit-transform: skewX(-40deg);
  -moz-transform: skewX(-40deg);
  -o-transform: skewX(-40deg);
  transform: skewX(-40deg);
  background: #848277;
  height: 3.1em;
  width: 1.3em;
  left: -1.3em;
  box-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.3);
}
.castanha:before {
  position: absolute;
  -webkit-transform: skewY(18deg) skewX(-18deg);
  -moz-transform: skewY(18deg) skewX(-18deg);
  -o-transform: skewY(18deg) skewX(-18deg);
  transform: skewY(18deg) skewX(-18deg);
  content: "";
  background: #f79840;
  height: 1.08em;
  width: 6.25em;
  left: -3.8em;
  top: 2.4em;
}
.caju {
  position: absolute;
  -webkit-transform: skewX(25deg);
  -moz-transform: skewX(25deg);
  -o-transform: skewX(25deg);
  transform: skewX(25deg);
  background-image: -webkit-linear-gradient(top, #f35244 0%, #a7402e 100%);
  background-image: -o-linear-gradient(top, #f35244 0%, #a7402e 100%);
  background-image: -moz-linear-gradient(top, #f35244 0%, #a7402e 100%);
  background-image: -ms-linear-gradient(top, #f35244 0%, #a7402e 100%);
  width: 1.4em;
  height: 6.7em;
  left: 2.8em;
  top: 3.6em;
}
.caju:before {
  -webkit-transform: skewX(-40deg);
  -moz-transform: skewX(-40deg);
  -o-transform: skewX(-40deg);
  transform: skewX(-40deg);
  content: "";
  position: absolute;
  background-image: -webkit-linear-gradient(top, #ee5640 0%, #e93b2f 100%);
  background-image: -o-linear-gradient(top, #ee5640 0%, #e93b2f 100%);
  background-image: -moz-linear-gradient(top, #ee5640 0%, #e93b2f 100%);
  background-image: -ms-linear-gradient(top, #ee5640 0%, #e93b2f 100%);
  width: 1.4em;
  height: 6.7em;
  left: 2.8em;
}

Front in Aracaju Logo Pure CSS JS Codes

/* Front in Aracaju Logo: http://www.frontinaracaju.com.br */
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.