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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


 

Output: 
 

stack cards

 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.