Complemento de página de apilamiento CSS

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: 
 

stack cards

Publicación traducida automáticamente

Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *