Untitled

<!DOCTYPE html>
<html>
<head>
    <title>HTML and CSS Slideshow</title>
    <style>
    body {
        font-family: Helvetica, sans-serif;
        padding: 5%;
        text-align: center;
        font-size: 50;
    }


    #slideshow {
        overflow: hidden;
        height: 510px;
        width: 728px;
        margin: 0 auto;
    }


    .slide {
        float: left;
        height: 510px;
        width: 728px;
    }


    .slide-wrapper {


        width: calc(728px * 4);


        animation: slide 35s ease infinite;
    }


    .slide:nth-child(1) {
        background: white;
    }

    .slide:nth-child(2) {
        background: white;
    }

    .slide:nth-child(3) {
        background: white;
    }

    .slide:nth-child(4) {
        background: white;
    }


    @keyframes slide {


        20% {
            margin-left: 0px;
        }
        40% {
            margin-left: calc(-728px * 1);
        }
        60% {
            margin-left: calc(-728px * 2);
        }
        80% {
            margin-left: calc(-728px * 3);
        }
    }
    </style>
</head>

<body>

    <div id="slideshow">
        <div class="slide-wrapper">

            <div class="slide">
                <h1 class="slide-number">
                    Семёнова Антонина 7 с
                </h1>
                <h4>
                    презентация приготовлена мной же
                </h4>
            </div>
            <div class="slide">
                <h1 class="slide-number">
                    эта презентация о том, чему мы научились за эти 3 месяца
                </h1>
                <h3>
                    спустя 3 месяца мы показываем успехи в обучении создания сайтов и презентаций
                </h3>
            </div>
            <div class="slide">
                <h1 class="slide-number">
                    что мы успели за это время пройти
                </h1>
                <ul>
                  <li class="fragment">как создавать простые сайты на html</li>
                  <li class="fragment">как делать сайты с красивым дизайном с помощью bootstrap</li>
                  <li class="fragment">и как создавать касивые презентации без использования Power Point, Canva и тд</li>
                </ul>
            </div>
            <div class="slide">
                <h1 class="slide-number">
                    Спасибо за внимание!
                </h1>
                <h4>
                    хоть презентация и короткая, но надеюсь, что она вам понравилась
                </h4>
            </div>
        </div>
    </div>
</body>
</html>