bootstrap5_customize_2021
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>我在B站玩編程</title>
        <link rel="stylesheet" href="css/main.css" />
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <nav
            class="
                navbar navbar-expand-lg
                bg-primary bg-gradient
                navbar-dark
                shadow
                fixed-top
            "
        >
            <div class="container">
                <a href="#" class="navbar-brand">我在B站玩編程</a>

                <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#navmenu"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navmenu">
                    <ul class="navbar-nav ms-auto">
                        <!--margin start = margin left-->
                        <li class="nav-item">
                            <div class="nav-link">前端知識</div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link">後端知識</div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link">數據庫知識</div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <section
            class="
                bg-primary bg-gradient
                text-light text-center text-sm-start
                pt-md-11
                pt-3
            "
        >
            <!--padding -->
            <div class="container">
                <div class="d-flex justify-content-between">
                    <!--display flex-->
                    <div>
                        <div class="fs-1">
                            成为一个<span class="text-warning">前端工程师</span>
                        </div>
                        <p class="my-4 fs-4">
                            <!-- margin-top margin-bottom -->
                            Lorem ipsum, dolor sit amet consectetur adipisicing
                            elit. Doloremque corporis quo, similique perferendis
                            distinctio non eius consequuntur error obcaecati
                            quaerat iusto quos fugiat rerum, unde omnis Lorem
                            ipsum, dolor sit amet consectetur adipisicing elit.
                        </p>
                        <button class="btn btn-lg btn-light">
                            开始编程之旅
                        </button>
                    </div>
                    <img
                        src="./img/showcase.svg"
                        alt="showcase"
                        class="w-50 d-none d-md-block"
                    />
                </div>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                <path
                    fill="#ffffff"
                    fill-opacity="1"
                    d="M0,192L34.3,197.3C68.6,203,137,213,206,224C274.3,235,343,245,411,218.7C480,192,549,128,617,133.3C685.7,139,754,213,823,229.3C891.4,245,960,203,1029,170.7C1097.1,139,1166,117,1234,133.3C1302.9,149,1371,203,1406,229.3L1440,256L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
                ></path>
            </svg>
        </section>

        <section>
            <div class="container">
                <div class="row">
                    <p class="mb-3 fs-2 text-center">
                        现在注册账号开始编程之旅
                    </p>
                    <div class="heading-line"></div>
                </div>
                <div class="d-md-flex justify-content-center">
                    <div class="input-group">
                        <input
                            type="text"
                            class="form-control"
                            placeholder="请输入你的邮箱"
                        />
                        <button class="btn btn-primary btn-lg">注册</button>
                    </div>
                </div>
            </div>
        </section>

        <section class="p-5">
            <div class="container">
                <div class="row g-4">
                    <!--gap-->
                    <div class="col-md">
                        <div class="card">
                            <div class="card-body text-center">
                                <div class="card-title">前端知识</div>
                                <div class="card-text">
                                    Lorem ipsum dolor sit amet consectetur,
                                    adipisicing elit. Minus voluptatibus
                                    consequuntur vitae quo quibusdam
                                </div>
                                <a href="#" class="btn btn-light mt-2"
                                    >学习前端</a
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="card">
                            <div class="card-body text-center">
                                <div class="card-title">前端知识</div>
                                <div class="card-text">
                                    Lorem ipsum dolor sit amet consectetur,
                                    adipisicing elit. Minus voluptatibus
                                    consequuntur vitae quo quibusdam
                                </div>
                                <a href="#" class="btn btn-light mt-2"
                                    >学习前端</a
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="card">
                            <div class="card-body text-center">
                                <div class="card-title">前端知识</div>
                                <div class="card-text">
                                    Lorem ipsum dolor sit amet consectetur,
                                    adipisicing elit. Minus voluptatibus
                                    consequuntur vitae quo quibusdam
                                </div>
                                <a href="#" class="btn btn-light mt-2"
                                    >学习前端</a
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-primary bg-gradient text-light">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                <path
                    fill="#fff"
                    fill-opacity="1"
                    d="M0,96L48,128C96,160,192,224,288,213.3C384,203,480,117,576,117.3C672,117,768,203,864,202.7C960,203,1056,117,1152,117.3C1248,117,1344,203,1392,245.3L1440,288L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
                ></path>
            </svg>
            <div class="container text-center text-sm-start">
                <div class="row align-items-center justify-content-between">
                    <div class="col-md">
                        <img src="img/1.svg" alt="1" class="img-fluid" />
                    </div>
                    <div class="col-md p-5">
                        <h2>课程介绍</h2>
                        <p class="lead">
                            Lorem ipsum, dolor sit amet consectetur adipisicing
                            elit. Praesentium ea ratione corporis et provident.
                            Quia!
                        </p>
                        <p>
                            Lorem, ipsum dolor sit amet consectetur adipisicing
                            elit. Amet nostrum, aperiam assumenda vitae, beatae
                            at sint quaerat consequatur maxime, hic voluptatum
                            ex. Dolor minus perferendis magni autem
                            exercitationem quis quos.
                        </p>
                        <a href="" class="btn btn-light">查看更多</a>
                    </div>
                </div>
            </div>

            <div class="container text-center text-sm-start mt-8">
                <div class="row align-items-center justify-content-between">
                    <div class="col-md p-5">
                        <h2>课程介绍</h2>
                        <p class="lead">
                            Lorem ipsum, dolor sit amet consectetur adipisicing
                            elit. Praesentium ea ratione corporis et provident.
                            Quia!
                        </p>
                        <p>
                            Lorem, ipsum dolor sit amet consectetur adipisicing
                            elit. Amet nostrum, aperiam assumenda vitae, beatae
                            at sint quaerat consequatur maxime, hic voluptatum
                            ex. Dolor minus perferendis magni autem
                            exercitationem quis quos.
                        </p>
                        <a href="" class="btn btn-light">查看更多</a>
                    </div>

                    <div class="col-md">
                        <img src="img/2.svg" alt="1" class="img-fluid" />
                    </div>
                </div>
            </div>

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                <path
                    fill="#fff"
                    fill-opacity="1"
                    d="M0,96L48,128C96,160,192,224,288,213.3C384,203,480,117,576,117.3C672,117,768,203,864,202.7C960,203,1056,117,1152,117.3C1248,117,1344,203,1392,245.3L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
                ></path>
            </svg>
        </section>

        <section class="p-5">
            <div class="container">
                <h2 class="text-center">常见问题</h2>
                <div class="heading-line"></div>
                <div
                    class="accordion accordion-flush"
                    id="accordionFlushExample"
                >
                    <div class="accordion-item shadow mb-7">
                        <h2 class="accordion-header" id="flush-headingOne">
                            <button
                                class="accordion-button"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseOne"
                                aria-expanded="false"
                                aria-controls="flush-collapseOne"
                            >
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            </button>
                        </h2>
                        <div
                            id="flush-collapseOne"
                            class="accordion-collapse collapse show"
                            aria-labelledby="flush-headingOne"
                            data-bs-parent="#accordionFlushExample"
                        >
                            <div class="accordion-body">
                                Placeholder content for this accordion, which is
                                intended to demonstrate the
                                <code>.accordion-flush</code> class. This is the
                                first item's accordion body.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item shadow mb-7">
                        <h2 class="accordion-header" id="flush-headingTwo">
                            <button
                                class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseTwo"
                                aria-expanded="false"
                                aria-controls="flush-collapseTwo"
                            >
                                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores, recusandae!
                            </button>
                        </h2>
                        <div
                            id="flush-collapseTwo"
                            class="accordion-collapse collapse"
                            aria-labelledby="flush-headingTwo"
                            data-bs-parent="#accordionFlushExample"
                        >
                            <div class="accordion-body">
                                Placeholder content for this accordion, which is
                                intended to demonstrate the
                                <code>.accordion-flush</code> class. This is the
                                second item's accordion body. Let's imagine this
                                being filled with some actual content.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item shadow mb-7">
                        <h2 class="accordion-header" id="flush-headingThree">
                            <button
                                class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseThree"
                                aria-expanded="false"
                                aria-controls="flush-collapseThree"
                            >
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas nostrum officiis et laborum earum vero?
                            </button>
                        </h2>
                        <div
                            id="flush-collapseThree"
                            class="accordion-collapse collapse"
                            aria-labelledby="flush-headingThree"
                            data-bs-parent="#accordionFlushExample"
                        >
                            <div class="accordion-body">
                                Placeholder content for this accordion, which is
                                intended to demonstrate the
                                <code>.accordion-flush</code> class. This is the
                                third item's accordion body. Nothing more
                                exciting happening here in terms of content, but
                                just filling up the space to make it look, at
                                least at first glance, a bit more representative
                                of how this would look in a real-world
                                application.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="p-5">
            <div class="container">
                <h2 class="text-center">讲师介绍</h2>
                <div class="heading-line"></div>
                <p class="lead text-center mb-5">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    Hic, unde?
                </p>
                <div class="row g-4">
                    <div class="col-md-6 col-lg-3">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img
                                    src="img/01-man.jpeg"
                                    class="mb-3 rounded-circle"
                                />
                                <h3 class="card-title">张三</h3>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit. Accusamus, ratione!
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img
                                    src="img/02-man.jpeg"
                                    class="mb-3 rounded-circle"
                                />
                                <h3 class="card-title">张三</h3>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit. Accusamus, ratione!
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img
                                    src="img/03-man.jpeg"
                                    class="mb-3 rounded-circle"
                                />
                                <h3 class="card-title">张三</h3>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit. Accusamus, ratione!
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img
                                    src="img/01-man.jpeg"
                                    class="mb-3 rounded-circle"
                                />
                                <h3 class="card-title">张三</h3>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit. Accusamus, ratione!
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="p-5">
            <div class="container">
                <h2 class="text-center mb-4">联系我们</h2>
                <div class="heading-line"></div>

                <ul class="list-group list-group-flush">
                    <li class="list-group-item">电话：120XXXXXX</li>
                    <li class="list-group-item">邮箱： bilibil@bili.com</li>
                    <li class="list-group-item">地址：上海市XXXX区</li>
                </ul>
            </div>
        </section>

        <footer class="p-5 bg-dark text-white text-center">
            <div class="container">
                <p class="lead">Copyright &copy; 2021 我在B站玩編程</p>
            </div>
        </footer>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"
        ></script>
    </body>
</html>