main

分支 (1)

管理

管理

main

create-a-slider-crazy
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>youBinAnimal</title>
    <link rel="icon" href="./image/favicon.ico" />
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- header -->
    <header>
        <nav>
            <a href="">Home</a>
            <a href="">Contacts</a>
            <a href="">Info</a>
        </nav>
    </header>

    <!-- carousel -->
    <div class="carousel">
        <!-- list item -->
        <div class="list">
            <div class="item">
            <img src="image/img1.jpg">
                <div class="content">
                    <div class="author">LUNDEV</div>
                    <div class="title">DESIGN SLIDER</div>
                    <div class="topic">ANIMAL</div>
                    <div class="des">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores tenetur officiis quas in excepturi quasi molestiae dicta, aperiam accusamus? Quaerat exercitationem officiis reiciendis debitis. Odio nulla labore expedita quo delectus.
                    </div>
                    <div class="buttons">
                        <button>SEE MORE</button>
                        <button>SUBSCRIBE</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="list">
            <div class="item">
            <img src="image/img2.jpg">
                <div class="content">
                    <div class="author">LUNDEV</div>
                    <div class="title">DESIGN SLIDER</div>
                    <div class="topic">ANIMAL</div>
                    <div class="des">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores tenetur officiis quas in excepturi quasi molestiae dicta, aperiam accusamus? Quaerat exercitationem officiis reiciendis debitis. Odio nulla labore expedita quo delectus.
                    </div>
                    <div class="buttons">
                        <button>SEE MORE</button>
                        <button>SUBSCRIBE</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="list">
            <div class="item">
            <img src="image/img3.jpg">
                <div class="content">
                    <div class="author">LUNDEV</div>
                    <div class="title">DESIGN SLIDER</div>
                    <div class="topic">ANIMAL</div>
                    <div class="des">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores tenetur officiis quas in excepturi quasi molestiae dicta, aperiam accusamus? Quaerat exercitationem officiis reiciendis debitis. Odio nulla labore expedita quo delectus.
                    </div>
                    <div class="buttons">
                        <button>SEE MORE</button>
                        <button>SUBSCRIBE</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="list">
            <div class="item">
            <img src="image/img4.jpg">
                <div class="content">
                    <div class="author">LUNDEV</div>
                    <div class="title">DESIGN SLIDER</div>
                    <div class="topic">ANIMAL</div>
                    <div class="des">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores tenetur officiis quas in excepturi quasi molestiae dicta, aperiam accusamus? Quaerat exercitationem officiis reiciendis debitis. Odio nulla labore expedita quo delectus.
                    </div>
                    <div class="buttons">
                        <button>SEE MORE</button>
                        <button>SUBSCRIBE</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- thubmnail -->
        <div class="thumbnail">
            <div class="item">
                <img src="image/img2.jpg">
                <div class="content">
                    <div class="title">
                        NAME SLIDER
                    </div>
                    <div class="des">
                        Description
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="image/img3.jpg">
                <div class="content">
                    <div class="title">
                        NAME SLIDER
                    </div>
                    <div class="des">
                        Description
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="image/img4.jpg">
                <div class="content">
                    <div class="title">
                        NAME SLIDER
                    </div>
                    <div class="des">
                        Description
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="image/img1.jpg">
                <div class="content">
                    <div class="title">
                        NAME SLIDER
                    </div>
                    <div class="des">
                        Description
                    </div>
                </div>
            </div>
        </div>

        <!-- arrow -->
        <div class="arrows">
            <button id="prev"><</button>
            <button id="next">></button>
        </div>
        <div class="time"></div>
    <script src="app.js"></script>
</body>
</html>