En este artículo, aprenderemos cómo implementar el efecto de apilamiento de páginas para una interfaz de sitio web utilizando el complemento CSS codyhouse-framework . Es un tipo de estilo de página web de apilamiento utilizado en el desarrollo de páginas web para incluir una interfaz interactiva atractiva. Proporciona una interfaz o marco ligero para los desarrolladores.
Nota: descargue el complemento CSS codyhouse-framework en la carpeta de trabajo e incluya los archivos necesarios en la sección principal de su código HTML. Además, cree una carpeta de «imágenes» y guarde todas las imágenes requeridas utilizadas para las fuentes de imágenes en el código. Tenga cuidado con las rutas de los archivos en consecuencia.
<enlace href=”https://fonts.googleapis.com/css? tipo = «texto/css»/>
<link href=”style.css” rel=”stylesheet” type=”text/css”/>
<script src=”scripts.js”></script>
Ejemplo: El siguiente ejemplo demuestra el efecto de apilamiento de páginas para la página web dada utilizando elementos HTML y el complemento codyhouse-framework basado en CSS . Los elementos HTML como «main», «li», «p», «div» se utilizan para diseñar la estructura de la página para una mejor apariencia. Diferentes clases como «tarjetas de pila», «cuadrícula», «componente de texto», «contenedor», «cubierta de objeto» y muchas más clases del archivo «style.css» del complemento se adjuntan a las etiquetas HTML como se muestra a continuación para el resultado esperado.
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= "https://www.geeksforgeeks.org/hyperlink-vs-hypertext/" 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= "https://www.geeksforgeeks.org/html-tutorials/" 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= "https://www.geeksforgeeks.org/css-tutorials/" 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>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA