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

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

.button-5a90aed0041f5 { margin-bottom: 15px; margin-top: px; min-width: 0px !important; } .button-5a90aed0041f5 { border-color: #ffffff !important; color: #ffffff; } .button-5a90aed0041f5:after { background-color:#ffffff; } .button-5a90aed0041f5:hover { border-color: #ffffff !important; color: #222222 !important; } .button-5a90aed0041f5:hover:after { background-color:#ffffff; } .button-5a90aed0041f5:hover i { color: #222222; }
#animated-columns-5a90aed001313.has-border { border-top:1px solid ; } #animated-columns-5a90aed001313.has-border .animated-column-item { border-left-width:1px; border-bottom-width:1px; border-color:; } #animated-columns-5a90aed001313 .animated-column-item { background-color:#3a98fe; min-height:500px; } #animated-columns-5a90aed001313 .animated-column-item:hover { background-color:#3a98fe; } #animated-columns-5a90aed001313 .animated-column-item:hover .animated-column-title:after { background-color:#ffffff } #animated-columns-5a90aed001313 .animated-column-icon { color:#38fffc; font-size:128px; } #animated-columns-5a90aed001313 .animated-column-image-icon { width:128px; } #animated-columns-5a90aed001313 .animated-column-image-icon img { max-width:100%; } #animated-columns-5a90aed001313 .animated-column-item:hover .animated-column-icon{ color:#38fffc; } #animated-columns-5a90aed001313 .animated-column-title, #animated-columns-5a90aed001313 .animated-column-desc{ color:#ffffff; } #animated-columns-5a90aed001313 .animated-column-title { font-size:20px; } #animated-columns-5a90aed001313 .animated-column-title:after { background-color: #ffffff; } #animated-columns-5a90aed001313 .animated-column-item:hover .animated-column-title, #animated-columns-5a90aed001313 .animated-column-item:hover .animated-column-desc { color:#ffffff }
#animated-columns-5a90aed0070ec.has-border { border-top:1px solid ; } #animated-columns-5a90aed0070ec.has-border .animated-column-item { border-left-width:1px; border-bottom-width:1px; border-color:; } #animated-columns-5a90aed0070ec .animated-column-item { background-color:#5841b8; min-height:500px; } #animated-columns-5a90aed0070ec .animated-column-item:hover { background-color:#5841b8; } #animated-columns-5a90aed0070ec .animated-column-item:hover .animated-column-title:after { background-color:#ffffff } #animated-columns-5a90aed0070ec .animated-column-icon { color:#5ed4b2; font-size:128px; } #animated-columns-5a90aed0070ec .animated-column-image-icon { width:128px; } #animated-columns-5a90aed0070ec .animated-column-image-icon img { max-width:100%; } #animated-columns-5a90aed0070ec .animated-column-item:hover .animated-column-icon{ color:#5ed4b2; } #animated-columns-5a90aed0070ec .animated-column-title, #animated-columns-5a90aed0070ec .animated-column-desc{ color:#ffffff; } #animated-columns-5a90aed0070ec .animated-column-title { font-size:20px; } #animated-columns-5a90aed0070ec .animated-column-title:after { background-color: #ffffff; } #animated-columns-5a90aed0070ec .animated-column-item:hover .animated-column-title, #animated-columns-5a90aed0070ec .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-5a90aed00e2c8 { margin-bottom: 15px; margin-top: px; min-width: 0px !important; } .button-5a90aed00e2c8 { border-color: #ffffff !important; color: #ffffff; } .button-5a90aed00e2c8:after { background-color:#ffffff; } .button-5a90aed00e2c8:hover { border-color: #f97352 !important; color: #fff !important; } .button-5a90aed00e2c8:hover:after { background-color:#f97352; } .button-5a90aed00e2c8:hover i { color: #fff; }
FLUENT & SMOOTH

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

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

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

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

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

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

LESS CONTENT INSIDE

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

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

Not readable? Change text. captcha txt

Start typing and press Enter to search