Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is Web Slide Desk in HTML5 ?

  • Last Updated : 19 Oct, 2021

WebSlides is an open-source library used to create presentations, landings, tables of content, longforms, and portfolios with basic knowledge of HTML and CSS.  You might wonder about the need and importance of WebSlides when we have plenty of stunning third-party applications for this purpose. We can easily infer the indispensable importance of showcasing our skills, ideas, and work across the internet. What if we can design our desired showcasing with the use of a compact, beautiful, and easy-to-use library. Easy design, easiest sharing, and no compatibility issues. WebSlides do this for us! 

Approach: We can create WebSlides designs from scratch or customize demos. To explore WebSlides we will create a few slides from scratch. First, we will design two slides individually. Then we will design a third one and combine all of them to make a Web Slide Desk.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Let’s first explore some features of WebSlides.

1. Background: We can add different backgrounds to slides:  



  • Add class bg-primary in section to set #44d as background.
  • Add class bg-black-blue in section to set #123 as background.
  • Add class bg-gradient-v in section to set vertical gradient background.
  • Add class bg-gradient-r in section to set radial gradient background.
  • Add class bg-gradient-h in section to set horizontal gradient background.
  • Add class dark for transparent background with low opacity and class light for relatively high opacity in span tag for background.
  • You can also use video as background by specifying class background-video in the video tag.

And a lot more colors can be used as background by specifying the proper class in the section of the slide. We can place background at different positions on screen by use of appropriate class in span tag for background. Some of the classes are:

  • background-center
  • background-center-top
  • background-center-bottom
  • background-left
  • background-right-top

2. Wrap: Use a div with the class wrap to layout content and classes work properly. Place content inside this div.

3. Alignment: You can align your content at different locations. you can align it left, right, or centralize it. Also, you can place it at the top or bottom of the slide. Some classes are:

  • content-left
  • content-right
  • content-center
  • slide-top
  • slide-bottom
  • alignleft
  • alignright
  • size-30
  • size-50

You can use a combination of these classes also.

4. Animations: You can Use different Animations in your content. Just use the appropriate class with the content you want to animate. Classes are:

  • fadeIn
  • fadeInUp
  • zoomIn
  • slideInLeft
  • slideInRight

5. Typography: You can present your content with the use of semantic typography classes. These all classes use Roboto font that’s why we linked to it in the head tag. The text-subtitle class turns text into capital caps. Some typography classes are following:

  • text-landing
  • text-intro
  • text-shadow
  • text-data
  • text-context
  • text-cols
  • text-label
  • text-serif
  • text-pull-left
  • text-pull-right

Steps to design slides:

  1. Download WebSlides.
  2. Create a HTML file “yourFileName.html” in root.
  3. Start coding, add the following code to HTML file.

HTML






<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <!-- Linking to Roboto Google Fonts 
        used in webSlides -->
    <link rel="preconnect" href=
        "https://fonts.googleapis.com">
    <link rel="preconnect" href=
        "https://fonts.gstatic.com" crossorigin>
    <link href=
wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,
400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  
    <!--Linking to CSS WebSlides  -->
    <link rel="stylesheet" type='text/css'
        media='all' href="static/css/webslides.css">
</head>
  
<body></body>
  
</html>


Here we are linking to Roboto google font and CSS used throughout the slides. Before jumping into the code don’t forget to go through the following key takeaways

  • create an article tag with the id “webslides”.
  • Inside this article, each parent section indicates an individual slide.
  • HTML class attribute is used to apply desired changes.

Example 1: In this example, we will be going to use:

  • Article tag with id webslides. This tag works as a container for all slides.
  • Section tag. This tag indicates an individual slide.
  • Span tag. This tag sets background for the slide.
  • Div tag with class wrap. This tag act as wrapper for all the div tags that layouts and manages whole content.
  • Div tag with two classes content-center and zoomIn.
    • content-center centralizes whole content of the div.
    • ZoomIn creates a zoom in animation for content of the div.
  • Div tag with class text-subtitle. This class converts the text to capital caps.

index.html

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <!-- Linking to Roboto Google Fonts 
        used in webSlides -->
    <link rel="preconnect" href=
        "https://fonts.googleapis.com">
    <link rel="preconnect" href=
        "https://fonts.gstatic.com" crossorigin>
  
    <link href=
wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,
400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  
    <!--Linking to CSS WebSlides -->
    <link rel="stylesheet" type='text/css' 
        media='all' href="static/css/webslides.css">
  
    <style>
  
        /* To customize the look and feel of font. */
        p,
        h4 {
            color: white;
        }
  
        h2 {
            color: black;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
  
    <!-- Use class of vertical if you want 
        to add vertical sliding in slides -->
    <article id="webslides">
  
        <!--Slide # 1 -->
        <section>
  
            <!-- Set BackGround -->
            <span class="background light" 
                style="background-image:url(
           "></span>
             
            <div class="wrap">
                <div class="content-center zoomIn">
                    <h4>HTML 5 Presentations</h4>
                    <div class="text-subtitle">
                        <p>Using WebSlides</p>
                    </div>
                </div>
            </div>
        </section>
    </article>
</body>
  
</html>


Output:

Slide#1

you’re done with the first slide.

Example 2: Here we are using,

  • Section tag with class bg-white. This tag indicates an individual slide with white background.
  • Div tag with class wrap. This tag act as wrapper for all the div tags that layouts and manages whole content.
  • Div tag with two classes card-50 and bg-gray.
    • card-50 creates a card of size 50.
    • bg-gray sets the background color of card as gray.
    • This div contains a figure tag and another div tag.
  • Figure tag contains an image for left side of card.
  • Div tag with class flex-content. This tag contains content for right side of card.
  • Flex-content class layouts the content relatively.

index.html

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <!--Linking to Roboto Google Fonts 
        used in webSlides-->
    <link rel="preconnect" href=
        "https://fonts.googleapis.com">
    <link rel="preconnect" href=
        "https://fonts.gstatic.com" crossorigin>
    <link href=
wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;
1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  
    <!--Linking to CSS WebSlides -->
    <link rel="stylesheet" type='text/css' 
        media='all' href="static/css/webslides.css">
  
    <style>
  
        /* To customize the look and feel of font. */
        .slide-top {
            color: black;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <!-- Use class of vertical if you want to 
        add vertical sliding in slides -->
    <article id="webslides">
  
        <!--Slide # 2 -->
        <section class="bg-white">
            <div class="wrap">
                <div class="card-50 bg-gray">
                    <figure>
                        <img src=
                            alt="Nature">
                    </figure>
                    <div class="flex-content">
                        <h2>
                            Magic Of Nature
                        </h2>
                        <p class="text-subtitle">
                            Don't you feel?
                        </p>
  
                        <p class="text-intro">
                            "God is the most beautiful, and 
                            beauty is the expression of God. 
                            If you can't appreciate beauty 
                            in the world how can you 
                            understand God?"
                        </p>
  
                        <p class="text-context">
                            A qoute about Nature by Amit Ray.
                        </p>
  
                        <p class="text-intro text-shadow">
                            Nature teaches more than she 
                            preaches. There are no sermons 
                            in stones. It is easier to get 
                            a spark out of a stone than a 
                            moral.
                            —John Burroughs
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </article>
</body>
  
</html>


Output:

Slide#2

Web Slide Desk

Web Slide Desk is a combination of Web Slides. Let’s create one new slide and then make a deck. Here, we will use the first and second slide, create a new slide and combine all of them to create a Web Slide Desk.

In third slide, we are using,

  • Section with class bg-gradient-r. This tag sets a radial gradient background for the slide.
  • Div with content-center. This tag centralize the content of  the div.
  • P tags with classes text-landing and text-shadow. These tags applies the specified effects to text.
  • Script tag to Link Web Slides JS.
  • script tag to initialize webslides.

index.html

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <!--Linking to Roboto Google Fonts 
        used in webSlides-->
    <link rel="preconnect" href=
        "https://fonts.googleapis.com">
    <link rel="preconnect" href=
        "https://fonts.gstatic.com" crossorigin>
    <link href=
wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;
1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  
    <!--Linking to CSS WebSlides -->
    <link rel="stylesheet" type='text/css' 
        media='all' href="static/css/webslides.css">
  
    <style>
        .zoomIn {
            color: white;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
  
    <!-- Use class of vertical if you want to 
        add vertical sliding in slides -->
  
    <article id="webslides">
        <!--Slide # 1 -->
        <section>
            <!-- Set BackGround -->
            <span class="background light" 
            style="background-image:url(
            </span>
  
            <div class="wrap">
                <div class="content-center zoomIn">
                    <h3>HTML 5 Presentations</h3>
                    <div class="text-subtitle">
                          
<p>Using WebSlides</p>
  
                    </div>
                </div>
            </div>
        </section>
        <!--Slide # 2 -->
        <section class="bg-white">
            <!-- Set BackGround -->
            <div class="wrap">
                <div class="card-50 bg-gray">
                    <figure>
                        <img src=
                            alt="Nature">
                    </figure>
                    <div class="flex-content">
                        <h2>
                            Magic Of Nature
                        </h2>
                        <p class="text-subtitle">
                            Don't you feel?
                        </p>
  
                        <p class="text-intro">
                            "God is the most beautiful, 
                            and beauty is the expression 
                            of God. If you can't appreciate 
                            beauty in the world how can you 
                            understand God?"
                        </p>
  
                        <p class="text-context">
                            A qoute about Nature by Amit Ray.
                        </p>
  
                        <p class="text-intro text-shadow">
                            Nature teaches more than she 
                            preaches. There are no sermons 
                            in stones. It is easier to get 
                            a spark out of a stone than a 
                            moral.
                            —John Burroughs
                        </p>
  
                    </div>
                </div>
            </div>
        </section>
        <!--Slide # 3 -->
        <section class="bg-gradient-r">
            <div class="slide-top content-center">
                <h2>GeeksforGeeks</h2>
            </div>
            <div class="content-center">
                <p class="text-landing">
                    Leave the road, take the trails.
                </p>
  
                <p class="text-shadow">
                    —Pythagoras
                </p>
  
            </div>
        </section>
    </article>
    <!--Linking to JS WebSlides  -->
    <script src="static/js/webslides.js"></script>
    <script>
        window.ws = new WebSlides();
    </script>
</body>
  
</html>


Output:

Web Slide Desk

It is not the whole story! You can do a lot more with WebSlides. Head towards the web slides folder you downloaded. Explore more classes, components, and templates. The ball is in your court now!




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!