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

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

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

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

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

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

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

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

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

LESS CONTENT INSIDE

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

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

Not readable? Change text. captcha txt

Start typing and press Enter to search