FlexBox
em {
color: #ff9966;
}
code {
background: #FF06050A;
color: #6394C8;
}
.item {
color: #6394C8;
font-size: 1.5rem;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 100px;
background: #351D57;
margin: 5px;
border: 2px solid #A83E75;
box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, .6);
}
.flex_container {
padding: 1rem;
box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, .6);
background: rgba(99, 148, 200, .2);
animation: animate_container 2s cubic-bezier(.66, -0.0, .28, 1.0) infinite both alternate;
}
.flex_container:hover {
animation: none
}
@keyframes animate_container {
0%{
width: 95%;
}
20% {
width: 95%;
}
80% {
width: 200px;
}
100% {
width: 200px;
}
}
h3 {
padding: 1rem;
margin: 2rem;
display: block;
width: 100vw;
background: white;
color: white;
background: #333;
position: sticky;
top: 0px;
box-shadow: 0 0 #333,
-100vw 0 #333,
100vw 0 #333;
}
Flexbox-zombies # [1]
I recently fi...