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:
Recommended Posts:
- jQuery | Page Piling Plugin
- How to design page view navigation for mobiles using app-UI plugin?
- How to show Page Loading div until the page has finished loading?
- How to redirect a page to another page in HTML ?
- CSS MarqueeMenu Plugin
- How to hide an element when printing a web page using CSS?
- HTML | Responsive full page image using CSS
- CSS page-break-before Property
- CSS | page-break-after Property
- CSS | page-break-inside Property
- How to disable zoom on a mobile web page using CSS?
- How to create fade-in effect on page load using CSS ?
- CSS | @page rule
- How to design Meet the Team Page using HTML and CSS ?
- How to reload CSS without reloading the page using JavaScript ?
- How to apply CSS page-break to print a table with lots of rows?
- What Happens To CSS When We Load a Page?
- jQuery | Multiscroll Plugin
- jQuery | DrawSVG Plugin
- jQuery | Product Tour Plugin
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.
