Animated Columns

INTRODUCING ANIMATED COLUMNS

Spice up any boring content with this beautiful and fluid animated contents. It is cross- browser and highly performant.

#animated-columns-5ad867e63bd0a.has-border { border-top:1px solid ; } #animated-columns-5ad867e63bd0a.has-border .animated-column-item { border-left-width:1px; border-bottom-width:1px; border-color:; } #animated-columns-5ad867e63bd0a .animated-column-item { background-color:#3edbd9; min-height:500px; } #animated-columns-5ad867e63bd0a .animated-column-item:hover { background-color:#3edbd9; } #animated-columns-5ad867e63bd0a .animated-column-item:hover .animated-column-title:after { background-color:#ffffff } #animated-columns-5ad867e63bd0a .animated-column-icon { color:#5841b8; font-size:128px; } #animated-columns-5ad867e63bd0a .animated-column-image-icon { width:128px; } #animated-columns-5ad867e63bd0a .animated-column-image-icon img { max-width:100%; } #animated-columns-5ad867e63bd0a .animated-column-item:hover .animated-column-icon{ color:#5841b8; } #animated-columns-5ad867e63bd0a .animated-column-title, #animated-columns-5ad867e63bd0a .animated-column-desc{ color:#ffffff; } #animated-columns-5ad867e63bd0a .animated-column-title { font-size:20px; } #animated-columns-5ad867e63bd0a .animated-column-title:after { background-color: #ffffff; } #animated-columns-5ad867e63bd0a .animated-column-item:hover .animated-column-title, #animated-columns-5ad867e63bd0a .animated-column-item:hover .animated-column-desc { color:#ffffff }
如果您是教育工作者

我们有专门针对教育行业的端到端课程,以及多种合作方式。我们将为您提供整套解决方案,从师资,设备,到课程。您只需一个合适的场地,便可开展工作。

.button-5ad867e63f824 { margin-bottom: 15px; margin-top: px; min-width: 0px !important; } .button-5ad867e63f824 { border-color: #ffffff !important; color: #ffffff; } .button-5ad867e63f824:after { background-color:#ffffff; } .button-5ad867e63f824:hover { border-color: #ffffff !important; color: #222222 !important; } .button-5ad867e63f824:hover:after { background-color:#ffffff; } .button-5ad867e63f824:hover i { color: #222222; }
#animated-columns-5ad867e63f1ef.has-border { border-top:1px solid ; } #animated-columns-5ad867e63f1ef.has-border .animated-column-item { border-left-width:1px; border-bottom-width:1px; border-color:; } #animated-columns-5ad867e63f1ef .animated-column-item { background-color:#3a98fe; min-height:500px; } #animated-columns-5ad867e63f1ef .animated-column-item:hover { background-color:#3a98fe; } #animated-columns-5ad867e63f1ef .animated-column-item:hover .animated-column-title:after { background-color:#ffffff } #animated-columns-5ad867e63f1ef .animated-column-icon { color:#38fffc; font-size:128px; } #animated-columns-5ad867e63f1ef .animated-column-image-icon { width:128px; } #animated-columns-5ad867e63f1ef .animated-column-image-icon img { max-width:100%; } #animated-columns-5ad867e63f1ef .animated-column-item:hover .animated-column-icon{ color:#38fffc; } #animated-columns-5ad867e63f1ef .animated-column-title, #animated-columns-5ad867e63f1ef .animated-column-desc{ color:#ffffff; } #animated-columns-5ad867e63f1ef .animated-column-title { font-size:20px; } #animated-columns-5ad867e63f1ef .animated-column-title:after { background-color: #ffffff; } #animated-columns-5ad867e63f1ef .animated-column-item:hover .animated-column-title, #animated-columns-5ad867e63f1ef .animated-column-item:hover .animated-column-desc { color:#ffffff }
#animated-columns-5ad867e64095a.has-border { border-top:1px solid ; } #animated-columns-5ad867e64095a.has-border .animated-column-item { border-left-width:1px; border-bottom-width:1px; border-color:; } #animated-columns-5ad867e64095a .animated-column-item { background-color:#5841b8; min-height:500px; } #animated-columns-5ad867e64095a .animated-column-item:hover { background-color:#5841b8; } #animated-columns-5ad867e64095a .animated-column-item:hover .animated-column-title:after { background-color:#ffffff } #animated-columns-5ad867e64095a .animated-column-icon { color:#5ed4b2; font-size:128px; } #animated-columns-5ad867e64095a .animated-column-image-icon { width:128px; } #animated-columns-5ad867e64095a .animated-column-image-icon img { max-width:100%; } #animated-columns-5ad867e64095a .animated-column-item:hover .animated-column-icon{ color:#5ed4b2; } #animated-columns-5ad867e64095a .animated-column-title, #animated-columns-5ad867e64095a .animated-column-desc{ color:#ffffff; } #animated-columns-5ad867e64095a .animated-column-title { font-size:20px; } #animated-columns-5ad867e64095a .animated-column-title:after { background-color: #ffffff; } #animated-columns-5ad867e64095a .animated-column-item:hover .animated-column-title, #animated-columns-5ad867e64095a .animated-column-item:hover .animated-column-desc { color:#ffffff }

Multiple columns

AUDIO SHORTCODE

Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.

.button-5ad867e643c60 { margin-bottom: 15px; margin-top: px; min-width: 0px !important; } .button-5ad867e643c60 { border-color: #ffffff !important; color: #ffffff; } .button-5ad867e643c60:after { background-color:#ffffff; } .button-5ad867e643c60:hover { border-color: #f97352 !important; color: #fff !important; } .button-5ad867e643c60:hover:after { background-color:#f97352; } .button-5ad867e643c60:hover i { color: #fff; }
FLUENT & SMOOTH

Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.

.button-5ad867e644372 { margin-bottom: 15px; margin-top: px; min-width: 0px !important; } .button-5ad867e644372 { border-color: #ffffff !important; color: #ffffff; } .button-5ad867e644372:after { background-color:#ffffff; } .button-5ad867e644372:hover { border-color: #f97352 !important; color: #fff !important; } .button-5ad867e644372:hover:after { background-color:#f97352; } .button-5ad867e644372:hover i { color: #fff; }
RESPONSIVE

Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.

.button-5ad867e644809 { margin-bottom: 15px; margin-top: px; min-width: 0px !important; } .button-5ad867e644809 { border-color: #ffffff !important; color: #ffffff; } .button-5ad867e644809:after { background-color:#ffffff; } .button-5ad867e644809:hover { border-color: #f97352 !important; color: #fff !important; } .button-5ad867e644809:hover:after { background-color:#f97352; } .button-5ad867e644809:hover i { color: #fff; }
ADVANCED OPTIONS

Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.

.button-5ad867e644b9a { margin-bottom: 15px; margin-top: px; min-width: 0px !important; } .button-5ad867e644b9a { border-color: #ffffff !important; color: #ffffff; } .button-5ad867e644b9a:after { background-color:#ffffff; } .button-5ad867e644b9a:hover { border-color: #f97352 !important; color: #fff !important; } .button-5ad867e644b9a:hover:after { background-color:#f97352; } .button-5ad867e644b9a:hover i { color: #fff; }
#animated-columns-5ad867e64332c.has-border { border-top:1px solid #dbdbdb; } #animated-columns-5ad867e64332c.has-border .animated-column-item { border-left-width:1px; border-bottom-width:1px; border-color:#dbdbdb; } #animated-columns-5ad867e64332c .animated-column-item { background-color:#ffffff; min-height:550px; } #animated-columns-5ad867e64332c .animated-column-item:hover { background-color:#3d4045; } #animated-columns-5ad867e64332c .animated-column-item:hover .animated-column-title:after { background-color:#d4d4d4 } #animated-columns-5ad867e64332c .animated-column-icon { color:#f97352; font-size:32px; } #animated-columns-5ad867e64332c .animated-column-image-icon { width:32px; } #animated-columns-5ad867e64332c .animated-column-image-icon img { max-width:100%; } #animated-columns-5ad867e64332c .animated-column-item:hover .animated-column-icon{ color:#f97352; } #animated-columns-5ad867e64332c .animated-column-title, #animated-columns-5ad867e64332c .animated-column-desc{ color:#3d4045; } #animated-columns-5ad867e64332c .animated-column-title { font-size:14px; } #animated-columns-5ad867e64332c .animated-column-title:after { background-color: #3d4045; } #animated-columns-5ad867e64332c .animated-column-item:hover .animated-column-title, #animated-columns-5ad867e64332c .animated-column-item:hover .animated-column-desc { color:#d4d4d4 }

LESS CONTENT INSIDE

#animated-columns-5ad867e646e5d.has-border { border-top:1px solid #dbdbdb; } #animated-columns-5ad867e646e5d.has-border .animated-column-item { border-left-width:1px; border-bottom-width:1px; border-color:#dbdbdb; } #animated-columns-5ad867e646e5d .animated-column-item { background-color:#ffffff; min-height:400px; } #animated-columns-5ad867e646e5d .animated-column-item:hover { background-color:#f97352; } #animated-columns-5ad867e646e5d .animated-column-item:hover .animated-column-title:after { background-color:#ffffff } #animated-columns-5ad867e646e5d .animated-column-icon { color:#f97352; font-size:32px; } #animated-columns-5ad867e646e5d .animated-column-image-icon { width:32px; } #animated-columns-5ad867e646e5d .animated-column-image-icon img { max-width:100%; } #animated-columns-5ad867e646e5d .animated-column-item:hover .animated-column-icon{ color:#ffffff; } #animated-columns-5ad867e646e5d .animated-column-title, #animated-columns-5ad867e646e5d .animated-column-desc{ color:#3d4045; } #animated-columns-5ad867e646e5d .animated-column-title { font-size:12px; } #animated-columns-5ad867e646e5d .animated-column-title:after { background-color: #3d4045; } #animated-columns-5ad867e646e5d .animated-column-item:hover .animated-column-title, #animated-columns-5ad867e646e5d .animated-column-item:hover .animated-column-desc { color:#ffffff }
联系我们

我们期待听到您的声音,有任何疑问,请直接填写后发送给我们,我将尽快于您取得联系。谢谢您的关注!

Not readable? Change text. captcha txt

Start typing and press Enter to search