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