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:
