/* animation-play-state: running; image */

.main2 {

width: 100%; height: 329px;

display: flex;

background: url('images/blog-image3.jpg') repeat-x 0 center/auto 100%;

animation: smooth 10s linear infinite;

animation-play-state: running;

/* main:hover, main:focus {

animation-play-state: running;

} */

@keyframes smooth {

to {

background-position: 1970px center;

/* single projection */

.main3 {

width: 100%;

padding: 20px 0 0 0;

.projection {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

align-items: center;

padding-bottom: 20px;

margin-bottom: 20px;
 border-bottom: 1px solid #eee;

.projection > div {

width: 180px; height: 120px;

background: rgba(180,160,120,.2);

.projection:not(:first-child:last-child) > div {

border: 2px solid transparent;

background-clip: content-box;

.projection:last-child {

margin-bottom: 0;

border-bottom: 0;

.projection:nth-of-type(1) > div {

margin-left: -6px;

box-shadow: 0 0 6px rgba(180,160,120,.8);

.projection:nth-of-type(2) > div {

border-bottom: 0;

box-shadow: 0px 6px 5px -5px rgba(180,160,120,.6);

.projection:nth-of-type(3) > div {

border-right: 0;

border-bottom: 0;

box-shadow: 5px 5px 5px -4px rgba(180,160,120,.6);

.projection:nth-of-type(4) > div {

border-right: 0;
 border-left: 0;

box-shadow: 6px 0 5px -5px rgba(180,160,120,.6), -6px 0 5px -5px rgba(180,160,120,.6);

.projection:nth-of-type(5) > div {

box-shadow: 0 0 0 1px rgba(180,160,120,.6);

/* sibling fade */

span {

padding: 0 16px;

transition: opacity 0.3s;

.sibling-fade:hover span:not(:hover) {

opacity: 0.5;

/* shifting card */

.shiftcard {

display: flex;

padding: 24px;

justify-content: center;

align-items: center;

background: #f3f1fe;

.shifting-card {

width: 350px;

display: flex;
 flex-direction: column;

align-items: center;

background: #fff;

border-radius: 10px;

margin: 0.5rem;

transition: transform 0.2s ease-out;

box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);

.shifting-card .content {

text-align: center;

margin: 2rem;

line-height: 1.5;

color: #101010;

/* shape seprator */

.shape-separator {

position: relative;

height: 48px;

background: #9C27B0;

.shape-separator::after {

content: '';

background-image: url("images/blog-image4.jpg");

position: absolute;

width: 100%;

height: 12px;
 bottom: 0;

/* title: Shake on invalid input */

@keyframes shake {

0% {

margin-left: 0rem;

25% {

margin-left: 0.5rem;

75% {

margin-left: -0.5rem;

100% {

margin-left: 0rem;

input:invalid {

animation: shake 0.2s ease-in-out 0s 2;

box-shadow: 0 0 0.6rem #ff0000;

/* shake */

.main4 {

width: 100%; height: 229px;

display: flex;

.main4 > span {

color: white;

margin: auto;

padding: .3em 1em .5em;

border-radius: 3px;

box-shadow: 0 0 .5em #b4a078;

animation: shake-baidu 2s ease 0s infinite;

animation-play-state: paused;

.main4:hover > span,

.main4 > span:hover {

animation-play-state: running;

@keyframes shake-baidu {

from { transform: rotate(0deg); }

4% { transform: rotate(5deg); }

12.5% { transform: rotate(-5deg); }

21% { transform: rotate(5deg); }

29% { transform: rotate(-5deg); }

37.5% { transform: rotate(5deg); }

46% { transform: rotate(-5deg); }

50%,to { transform: rotate(0deg); }

/* shadpw weaken background */

.main5 {

width: 100%;

user-select: none;
 font: 14px / 1 Helvetica, sans-serif;

.main5 > h5 {

margin: 30px 30px 15px;

.main5 > section {

width: 100%;

padding: 16px;

overflow: hidden;

position: relative;

.main5 > section:nth-of-type(1) .overlay {

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

background: rgba(0, 0, 0, .8);

.main5 > section .lightbox {

width: 60%; height: 51px;

background-color: #FFF;

border-radius: 8px;

display: flex;

justify-content: center;

align-items: center;

z-index: 1;

.main5 > section:nth-of-type(1) .lightbox {

position: absolute;

top: 50%; left: 50%;

transform: translate(-50%, -50%);

.main5 > section:nth-of-type(2) .lightbox {

position: absolute;

top: 50%; left: 50%;

transform: translate(-50%, -50%);

box-shadow: 0 0 0 50vmax rgba(0, 0, 0, .8);

.main5 > section dialog{

width: 400px; height: 130px;

margin: auto;

padding: 53px 151px;

.main5 > section dialog::backdrop {

background: rgba(0, 0, 0, .8)

/* rotating card */

.card {

perspective: 150rem;

position: relative;

height: 40rem;

max-width: 400px;

margin: 2rem;

box-shadow: none;

background: none;

.card-side {

height: 35rem;
 border-radius: 15px;

transition: all 0.8s ease;

backface-visibility: hidden;

position: absolute;

top: 0;

left: 0;

width: 80%;

padding: 2rem;

color: white;

.card-side.back {

transform: rotateY(-180deg);

background-color: #4158D0;

background-image: linear-gradient(43deg, #4158D0 0%,#C850C0 46%, #FFCC70 100%);

.card-side.front {

background-color: #0093E9;

background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

.card:hover .card-side.front {

transform: rotateY(180deg);

.card:hover .card-side.back {

transform: rotateY(0deg);

}
/* title: Responsive layout with sidebar */

.container2 {

display: grid;

grid-template-columns: 1fr minmax(150px, 20%);

height: 100px;

.main6, aside {

padding: 12px;

text-align: center;

.main6 {

background: #d4f2c4;

aside {

background: #81cfd9;

/* border iwth trainvke */

.container3 {

position: relative;

background: #ffffff;

padding: 15px;

border: 1px solid #dddddd;

.container3::before,

.container3::after {

content: '';

position: absolute;

bottom: 100%;

left: 19px;

border: 11px solid transparent;

border-bottom-color: #dddddd;

.container3::after {

left: 20px;

border: 10px solid transparent;

border-bottom-color: #ffffff;

/* bounce */

.main7{

width: 100%; height: 584px;

padding: 52px 39px;

background: #0c1a39 url('./static/starry-sky.jpg') no-repeat center bottom / 100% 489.5px;

.ball {

width: 0;

margin: auto;

padding: 20px;
 border-radius: 50%;

background: #b4a078 radial-gradient(at 30% 30%, #f7f5f1, #b4a078);

/* when the animation is complete, keep the last frame */

animation: bounce 2s cubic-bezier(.1,.25,1,.25) forwards;

@keyframes bounce {

40%,

60%,

80%,

to {

transform: translateY(380px);

animation-timing-function: ease-in;

50% {

transform: translateY(260px);

70% {

transform: translateY(300px);

90% {

transform: translateY(360px);

/* bounce loader */

@keyframes bouncing-loader {

to {

opacity: 0.1;
 transform: translate3d(0, -16px, 0);

.bouncing-loader {

display: flex;

justify-content: center;

.bouncing-loader > div {

width: 16px;

height: 16px;

margin: 3rem 0.2rem;

background: #8385aa;

border-radius: 50%;

animation: bouncing-loader 0.6s infinite alternate;

.bouncing-loader > div:nth-child(2) {

animation-delay: 0.2s;

.bouncing-loader > div:nth-child(3) {

animation-delay: 0.4s;

/* title: Box-sizing reset */

div {

box-sizing: border-box;

}
*,

*::before,

*::after {

box-sizing: inherit;

.box {

display: inline-block;

width: 120px;

height: 120px;

padding: 8px;

margin: 8px;

background: #F24333;

color: white;

border: 1px solid #BA1B1D;

border-radius: 4px;

.content-box {

box-sizing: content-box;

/* break image */

.imgmale {

display: block;

font-family: sans-serif;

font-weight: 300;

height: auto;
 line-height: 2;

position: relative;

text-align: center;

width: 100%;

.imgmale::before {

content: "Sorry, this image is unavailable.";

display: block;

margin-bottom: 8px;

.imgmale::after {

content: "(url: " attr(src) ")";

display: block;

font-size: 12px;

/* */

.animated-border-button {

background-color: #263059;

border: none;

color: #ffffff;

outline: none;

padding: 12px 40px 10px;

position: relative;

}
.animated-border-button::before,

.animated-border-button::after {

border: 0 solid transparent;

transition: all 0.3s;

content: '';

height: 0;

position: absolute;

width: 24px;

.animated-border-button::before {

border-top: 2px solid #263059;

right: 0;

top: -4px;

.animated-border-button::after {

border-bottom: 2px solid #263059;

bottom: -4px;

left: 0;

.animated-border-button:hover::before,

.animated-border-button:hover::after {

width: 100%;

}
/* swing */

.button-swing {

color: #65b5f6;

background-color: transparent;

border: 1px solid #65b5f6;

border-radius: 4px;

padding: 0 16px;

cursor: pointer;

transition: all 0.2s ease-in-out;

.button-swing:focus {

animation: swing 1s ease;

animation-iteration-count: 1;

@keyframes swing {

15% {

transform: translateX(5px);

30% {

transform: translateX(-5px);

50% {

transform: translateX(3px);

65% {

transform: translateX(-3px);
 }

80% {

transform: translateX(2px);

100% {

transform: translateX(0);