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

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

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

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

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

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

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

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

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

LESS CONTENT INSIDE

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

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

Not readable? Change text. captcha txt

Start typing and press Enter to search