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.