Custom CSS Style Implementation

I found this custom style.css code online and I was wondering if someone can help or point me in the right direction on how to reformat the code to have it work with Ignition.

body {
  display: flex;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #444;
  justify-content: center;
  align-items: center;
  font-family: arial;
}

.container {
  width: 1000px;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.card {
  position: relative;
}

.face {
  width: 300px;
  height: 200px;
  transition: .4s;
}

.face1 {
  position: relative;
  background: #333;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  z-index: 1;
  transform: translateY(100px);
}

.card:hover .face.face1 {
  transform: translateY(0);
  box-shadow:
    inset 0 0 60px whitesmoke,
    inset 20px 0 80px blue,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px blue,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px blue,
    10px 0 80px #0ff;
}

.lard:hover .face.face1 {
  transform: translateY(0);
  box-shadow:
    inset 0 0 60px whitesmoke,
    inset 20px 0 80px lightgreen,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #a4c639,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px rgba(0, 128, 0, 0.619),
    10px 0 80px #a4c639;
}

.dark:hover .face.face1 {
  transform: translateY(0);
  box-shadow:
    inset 0 0 60px whitesmoke,
    inset 20px 0 80px white,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px white,
    inset -20px 0 300px gray,
    0 0 50px #fff,
    -10px 0 80px white,
    10px 0 80px #0ff;
}

.face.face1 .content {
  opacity: .2;
  transition: 0.5s;
  text-align: center;
}

.card:hover .face.face1 .content {
  opacity: 1;
}

.face.face1 .content i {
  font-size: 3em;
  color: white;
  display: inline-block;
}

.face.face1 .content h3 {
  font-size: 1em;
  color: white;
  text-align: center;
}

.face.face1 .content a {
  transition

I already know how and where to add the style.css file in the Ignition directory, I just need some direction in reformatting the code.

What is your goal with this code, and/or where did you get it from?

Some of that looks like generic 'boilerplate' CSS, and some of it looks meaningful to the output. Without knowing what your end goal is, it's hard to separate the two or tell you the best path forward.

1 Like

Found it on github. It supposed to do something like this:

Animation

2 Likes