How to Create Presentation Slides with HTML and CSS | Code Junction

 How to Create Presentation Slides with HTML and CSS | Easy Way To Learn



Hey guys, as I am creating new projects using HTML and CSS, I learned a  lot of new things.
One day at college we had a presentation so I decided to give a presentation with my new skills.

So for that, I created a local website for presentation with some minimal transitions.
When I gave a presentation I just saw my teacher's face she seemed to be surprised.

Though she praised me for my work and also gave me maximum marks for presentation

If you guys want to create a presentation using HTML and CSS.

The codes are given below.

Step 1:- Create an HTML File using these codes.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://kit.fontawesome.com/ace108cc98.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <section id="page-1" class="page">
    <h1>Welcome to my Presentation</h1>
    <p>
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
</p>
    <div>
        <a href="#page-2" class="btn">
           Next Page <i class="fas fa-arrow-circle-down"></i>
        </a>
    </div>
</section>

<!--Page 2-->
<section id="page-2" class="page">
    <h1>Slide 1</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore eveniet, quas similique veniam fugiat tempore, esse voluptates, minus maxime asperiores voluptatem. Fugit quisquam minima magnam quo exercitationem illum tenetur, expedita adipisci maiores doloribus odio, dolor possimus nisi inventore alias facere.</p>
    <div>
        <a href="#page-1" class="btn btn-dark">
           Prev Page <i class="fas fa-arrow-circle-up"></i>
        </a>
        <a href="#page-3" class="btn">
            Next Page <i class="fas fa-arrow-circle-down"></i>
         </a>
    </div>
</section>

<!--Page 3-->
<section id="page-3" class="page">
    <h1>Slide 2</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore eveniet, quas similique veniam fugiat tempore, esse voluptates, minus maxime asperiores voluptatem. Fugit quisquam minima magnam quo exercitationem illum tenetur, expedita adipisci maiores doloribus odio, dolor possimus nisi inventore alias facere.</p>
    <div>
        <a href="#page-2" class="btn btn-dark">
           Prev Page <i class="fas fa-arrow-circle-up"></i>
        </a>
        <a href="#page-4" class="btn">
            Next Page <i class="fas fa-arrow-circle-down"></i>
         </a>
    </div>
</section>

<!--Page 4-->
<section id="page-4" class="page">
    <h1>Slide 3</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore eveniet, quas similique veniam fugiat tempore, esse voluptates, minus maxime asperiores voluptatem. Fugit quisquam minima magnam quo exercitationem illum tenetur, expedita adipisci maiores doloribus odio, dolor possimus nisi inventore alias facere.</p>
    <div>
        <a href="#page-3" class="btn btn-dark">
           Prev Page <i class="fas fa-arrow-circle-up"></i>
        </a>
    </div>
</section>

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

<script>
  // Smooth Scrolling
  $('.btn').on('click', function(event) {
      if (this.hash !== '') {
        event.preventDefault();
        const hash = this.hash;
        $('html, body').animate(
          {
            scrollTop: $(hash).offset().top
          },
          800
        );
      }
    });
</script>

</body>
</html>


Step 2:-Create CSS file and name it as style.css



:root{
    --page-1-color: steelblue;
    --page-2-color: tan;
    --page-3-color: teal;
    --page-4-color: slateblue;
 
    --animate-speed: 1.5s;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4rem;
    color:white;
    margin:0;
    padding:0;
    overflow: hidden;
}

#page-1{background: var(--page-1-color)}
#page-2{background: var(--page-2-color)}
#page-3{background: var(--page-3-color)}
#page-4{background: var(--page-4-color)}

.page{
    display: flex;
    flex-direction: column;
    height:130vh;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding:0 4rem;
}

.page h1{
    font-size: 4rem;
    line-height: 1.2;
    margin:1rem;
}

.page p{
    font-size:1.3rem;
}

.btn{
    display: inline-block;
    text-decoration: none;
    background: white;
    color:#333;
    margin-top: 1rem;
    padding:1rem 2rem;
    font-size:1.1rem;
    transition:all 0.3s ease-in;
}

.btn:hover,.btn-dark{
    background: #333;
    color:#fff;
}

.btn-dark:hover{
    background: #f4f4f4;
    color:#333;
}

#page-1 h1{
    transform: translateY(-1200px);
    animation:heading var(--animate-speed) forwards ease-in;
}

@keyframes heading {
    to{
        transform: translateY(0);
    }
}
     


#page-1 p{
    transform: translateX(-1800px);
    animation:para var(--animate-speed) forwards ease-in 1.5s;
}

@keyframes para {
    to{
        transform: translateX(0);
    }
}

Note: Please Change content of slides

Guys if you like these codes then please share this with your friends.
And you can also SUBSCRIBE my channel on youtube.

Comments