Skip to content
Related Articles

Related Articles

CSS Stacking Page Plugin
  • Last Updated : 17 Aug, 2020

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

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :