CSS Stacking Page Plugin

In this article, we will learn how to implement the stacking pages effect for a website interface using CSS codyhouse-framework plugin. It is a type of stacking web page style used in developing web pages for including some attractive interactive interface. It provides a light-weight interface or framework to the developers.

Note: Please download the CSS codyhouse-framework plugin in the working folder and include the required files in the head section of your HTML code. Also, create a “images” folder and save all the required images used for image sources in the code. Please take care of the file paths accordingly.

<link href=”https://fonts.googleapis.com/css? type=”text/css”/>
<link href=”style.css” rel=”stylesheet” type=”text/css”/>
<script src=”scripts.js”></script>

Example: The following example demonstrates the stacking pages effect for the given web page using HTML elements and CSS based codyhouse-framework plugin. HTML elements like “main”,”li”,”p”,”div” are used to design the page structure for better looks. Different classes like “stack-cards”, “grid”, “text-component”,”container”,”object-cover” and many more classes of the “style.css” file of the plugin are attached to the HTML tags as shown below for the expected output.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1" />
    <link href=
"https://fonts.googleapis.com/css?family=Playfair+Display|Roboto:400,700&display=swap"
        rel="stylesheet" />
    <link rel="stylesheet"
          href="style.css" />
    <title>Stacking Page Plugins</title>
</head>
 
<body data-theme="dark">
    <main class="padding-y-xl">
        <div class="container
                    max-width-adaptive-md
                    margin-bottom-lg">
 
            <!-- Plugin's classes are used -->
            <ul class="stack-cards js-stack-cards">
                <li data-theme="default"
                    class="stack-cards__item
                           js-stack-cards__item bg
                           radius-lg shadow-md">
                    <div class="grid">
                        <div class="col-6 flex
                                    items-center
                                    height-100%">
                            <div class="text-component padding-md">
                                <h2>Stack 1</h2>
                                <p class="display@xs">
                                    It is the easiest language you can say,
                                    very easy to grasp this language and
                                    easy to develop..
                                </p>
                                <p>
                                    <a href=
"https://www.geeksforgeeks.org/hyperlink-vs-hypertext/"
                                        class="btn btn--accent">
                                        Add more content
                                    </a>
                                </p>
 
                            </div>
                        </div>
                        <div class="col-6 height-100%">
                            <img class="width-100%
                                            height-100%
                                            object-cover"
                                 src="images/background1.jpg"
                                 alt="image name" />
                        </div>
                    </div>
                </li>
 
                <li data-theme="default"
                    class="stack-cards__item bg
                           js-stack-cards__item
                           radius-lg shadow-md">
                    <div class="grid">
                        <div class="col-6 flex
                                        items-center
                                        height-100%">
                            <div class="text-component padding-md">
                                <h2>Stack 2</h2>
                                <p class="display@xs">
                                    This language is so much flexible that
                                    you can create whatever you want, a
                                    flexible way to design web pages along
                                    with the text..
                                </p>
 
 
                                <p>
                                    <a href=
"https://www.geeksforgeeks.org/html-tutorials/"
                                       class="btn btn--accent">
                                        Add more content
                                    </a>
                                </p>
 
                            </div>
                        </div>
 
                        <div class="col-6 height-100%">
                            <img class="width-100%
                                            height-100%
                                            object-cover"
                                 src="images/background2.jpg"
                                 alt="Image name" />
                        </div>
                    </div>
                </li>
 
                <li data-theme="default"
                    class="stack-cards__item bg
                           js-stack-cards__item
                           radius-lg shadow-md">
                    <div class="grid">
                        <div class="col-6 flex
                                        items-center
                                        height-100%">
                            <div class="text-component
                                            padding-md">
                                <h2>Stack 3</h2>
                                <p class="display@xs">
                                    You can make linkable text like
                                    users can connect from one page to
                                    another page or website through these
                                    characteristics.
                                </p>
                                <p>
                                    <a href=
"https://www.geeksforgeeks.org/css-tutorials/"
                                       class="btn btn--accent">
                                        Add more content
                                    </a>
                                </p>
 
                            </div>
                        </div>
 
                        <div class="col-6 height-100%">
                            <img class="width-100%
                                            height-100%
                                            object-cover"
                                 src="assets/images/background3.jpg"
                                 alt="Image name" />
                        </div>
                    </div>
                </li>
            </ul>
        </div>
 
        <div class="container max-width-adaptive-sm">
            <div class="text-component
                        line-height-lg
                        v-space-md">
 
                <p>
                    HTML stands for HyperText Markup Language.
                    It is used to design web pages using a
                    markup language. HTML is the combination
                    of Hypertext and Markup language. Hypertext
                    defines the link between the web pages.
                    A markup language is used to define the text
                    document within tag which defines the
                    structure of web pages. HTML is a markup
                    language that is used by the browser to
                    manipulate text, images,and other content
                    to display it in the required format.
                </p>
 
            </div>
        </div>
    </main>
</body>
 
</html>