Open In App
Related Articles

CSS Stacking Page Plugin

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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=
                                        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=
                                       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=
                                       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>

                    

 Output: 

stack cards

Last Updated : 13 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads