FCC第一个项目——Build a Tribute Page

这里记录FCC学习过程中运用所学创建的第一个项目

完成条件

  1. 目标: 设计一个类似于: https://codepen.io/FreeCodeCamp/full/NNvBQW/的页面
  2. 规则1: 代码是开源的,你可以借鉴,但请不要抄袭
  3. 规则2: 用你喜爱的任何库来定制属于你自己的风格,实现下面的功能
  4. 功能1: 你可以用图片和文本来实现这个致敬页面
  5. 功能2: 你可以点击链接穿越到另一个网站,获得关于这个主题的更多信息

完成后的网站缩略图

演示地址

https://codepen.io/websyn/full/zXLGbm

代码

<!doctype html>
<html lang="en">

<head>
    <title>A Tribute Page</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
    <style>
        html {
            font-size: 1rem;
        }

        @include media-breakpoint-up(sm) {
            html {
                font-size: 1.2rem;
            }
        }

        @include media-breakpoint-up(md) {
            html {
                font-size: 1.4rem;
            }
        }

        @include media-breakpoint-up(lg) {
            html {
                font-size: 1.6rem;
            }
        }

        body {
            margin-top: 50px;
            font-family: Serif;
        }

        h2 {
            font-family: Lobster, Serif;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-7">
                <h1>
                    <dt>Leslie Cheung</dt>
                </h1>
                <blockquote>
                    <p>"I am who I am, a different color sparkler."</p>
                    <cite class="blockquote-footer" title="Leslie Cheung">Leslie Cheung</cite>
                </blockquote>
            </div>
            <div class="col text-center">
                <img class="rounded-circle img-thumbnail mb-2"
                    src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3419892179,1707910431&fm=58"
                    alt="Leslie Cheung's head picture">
                <br>
                <cite>Leslie Cheung</cite>
            </div>
        </div>
        <hr>
        <div class="jumbotron">
            <h2 class="text-center display-5 mb-4">Picture Show</h2>
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="https://s2.ax1x.com/2019/05/03/ENBmjI.jpg" alt="First slide">
                        <div class="carousel-caption">
                            <h5>Leslie Cheung</h5>
                            <p>This is a picture of Leslie Cheung's life.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="https://s2.ax1x.com/2019/05/03/ENBegA.jpg" alt="Second slide">
                        <div class="carousel-caption">
                            <h5>Leslie Cheung</h5>
                            <p>This is a picture of Leslie Cheung's life.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="https://s2.ax1x.com/2019/05/03/ENBZ3d.jpg" alt="Third slide">
                        <div class="carousel-caption">
                            <h5>Leslie Cheung</h5>
                            <p>This is a picture of Leslie Cheung's life.</p>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <hr>
            <h2 class="text-center display-5 mt-5 mb-4">Personal information</h2>
            <table class="table text-center">
                <caption class="text-right">It's just a brief personal information</caption>
                <tbody>
                    <tr>
                        <th scope="row">Native name</th>
                        <td>張國榮</td>
                    </tr>
                    <tr>
                        <th scope="row">Pronunciation</th>
                        <td>Cheung Kwok-wing</td>
                    </tr>
                    <tr>
                        <th scope="row">Born</th>
                        <td>Cheung Fat-chung (張發宗)
                            September 12, 1956
                            Kowloon, Hong Kong</td>
                    </tr>
                    <tr>
                        <th scope="row">Died</th>
                        <td>April 1, 2003 (aged 46)
                            Mandarin Oriental, Hong Kong, Central, Hong Kong</td>
                    </tr>
                    <tr>
                        <th scope="row">Cause of death</th>
                        <td>Suicide</td>
                    </tr>
                    <tr>
                        <th scope="row">Resting place</th>
                        <td><em>Cremated, location undisclosed</em></td>
                    </tr>
                    <tr>
                        <th scope="row">Residence</th>
                        <td>Hong Kong</td>
                    </tr>
                    <tr>
                        <th scope="row">Nationality</th>
                        <td>Chinese</td>
                    </tr>
                    <tr>
                        <th scope="row">Other names</th>
                        <td>Leslie Cheung</td>
                    </tr>
                    <tr>
                        <th scope="row">Education</th>
                        <td>Bachelor of Textile (dropped out)</td>
                    </tr>
                    <tr>
                        <th scope="row">Alma mater</th>
                        <td>University of Leeds (dropped out)</td>
                    </tr>
                </tbody>
            </table>
            <hr>
            <h2 class="text-center display-5 mb-4">Personal life</h2>
            <p>
                In 1977, during the filming the RTV television series Love Story, the then 20 year-old Cheung met and
                fallen in love with his 17 year-old co-star, Teresa Mo (毛舜筠), and they got along after they finished the
                series. In 1979, Cheung proposed to Mo with flowers in marriage. But his sudden proposal startled Mo and
                she began to distanced herself from him. Although Cheung and Teresa Mo eventually broke up shortly after
                the proposal and briefly lost contact, they later remained close friends again when they reunited for
                the 1992 film All's Well, Ends Well.
            </p>
            <p>
                Cheung later went into a brief relationship with an actress Shirley Yim [zh], the younger sister of
                Michelle Yim, but they broke up in 1980, due to their incompatibly for each other's lifestyles.
            </p>
            <p>
                Cheung and Ngai Sze-pui (倪詩蓓), a Hong Kong model and actress whom he met on the set of ATV television
                series Agency 24, were in a relationship for two years from 1981 to 1983.
            </p>
            <p>
                In 1984, at the house of Albert Yeung, Cheung met Cindy Yeung, the youngest daughter of Albert Yeung who
                had recently returned from Boston. Cindy Yeung was also a fan of Cheung and was seven years younger than
                him. Cheung and Yeung went out on several dates until the latter returned to Boston. They continued
                their relationship through phone calls and letters, but would later part ways on the following year but
                still remained good friends. Cheung felt that if he was not in showbiz, he may have already been married
                with children like most of his friends.
            </p>
            <p>...</p>
            <h3>If you have time, you should read more about this incredible human being on his <a
                    href="https://en.wikipedia.org/wiki/Leslie_Cheung" target="_blank">Wikipedia entry</a>.</h3>
        </div>
        <footer class="text-center">
            <hr>
            <p>
                Written and coded by <a href="./index.html">Syn</a>.
            </p>
        </footer>

    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
</body>

</html>
最后修改:2019 年 09 月 19 日 12 : 39 AM
如果觉得我的文章对你有用,请随意赞赏

1 条评论

  1. 罗木、

    泪目(´இ皿இ`)

发表评论