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

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

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

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

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

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

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

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

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

LESS CONTENT INSIDE

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

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

Not readable? Change text. captcha txt

Start typing and press Enter to search