Building an Interactive 2 column interactive section
In this video, I walk you through the process of building an interactive 2 column section using the Automatic CSS framework. I start by creating the content section and then proceed to add a card with text, image, and a button. I also demonstrate how to style the website and add interactive effects. Watch me build out this section step by step. You will pick up some interesting knowledge along the way.
See the live version here:
https://training.bricksmaven.com/temp...
Chapters:
00:00 Introduction
02:23 Setting up the structure and adding tags to the elements
07:05 Adding Classes to the Elements
10:44 Styling the Classes
11:50 Styling the Intro Section
14:10 Styling the 2 column section
23:24 Adding ::before Interactive Effects
32:35 Isolate explained
35:27 Adding ::after Interactive Effects
39:02 Make the Columns/Card clickable
42:12 Responsive fix
44:15 Conclusion
--------------------------------------------------------------------------------------------------------
Get the Alpha template and speed up your development process
If you are interested in getting this block go to www.bricksmaven.com and get yourself a license which will give you access to 500+ blocks. We support ACSS, CORE and vanilla CSS.
Get access to 100+ blocks for Bricks builder for free
Visit Bricksmaven and test the Alpha template for free, You get access to 100+ blocks which you can copy and paste in your projects and use forever. The free gift comes with 3 different version: ACSS, CORE and Vanilla CSS. Try it out today, visit https://bricksmaven.com/#pricing
Get the Automatic CSS framework | https://automaticcss.com/ref/3/ |
Voted #1 Framework For WordPress Page Builders. Automatic.css (ACSS) is consistently voted the best framework for WordPress because it combines innovative features, True Builder Integration™, best practices, unparalleled support, and education.
Get the CORE Framework | https://coreframework.com/ |
Supercharge your web design game with Core Framework's robust toolkit to manage, organize, and reuse your stylesheets. Seamlessly create, customize, and control every aspect of your project with our unique visual GUI.