FCC第二个项目——Build a Personal Portfolio Webpage

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

完成条件

  1. 目标: 设计一个类似于: https://codepen.io/freeCodeCamp/full/YqLyXB/的个人作品集
  2. 规则1: 代码是开源的,你可以借鉴,但请不要抄袭
  3. 规则2: 用你喜爱的任何库来定制属于你自己的风格,实现下面的功能
  4. 规则3: 你可以用你自己的css和框架,而不仅仅是Bootstrap
  5. 功能: 你可以通过滚动来浏览这个页面的所有内容
  6. 功能: 你可以通过点击不同的按钮来跳到不同的社交媒体页
  7. 功能: 你可以看到不同项目的缩略图
  8. 功能: 你可以点击导航条上的按钮来调到网页上的不同区域

完成后的网站缩略图

演示地址

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

代码

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

<head>
    <title>Personal Portfolio Webpage</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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
    <style>
        nav a {
            font-size: 1.2rem;
        }

        body {
            padding-top: 4.5rem;
        }

        .bg {
            background: url("https://s2.ax1x.com/2019/05/03/ENBlE8.png") center;
        }

        .bg2 {
            background: url("https://s2.ax1x.com/2019/05/03/ENBKDP.png") center;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <nav class="navbar fixed-top p-3 navbar-expand-lg navbar-light bg-info shadow">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img class="rounded" src="https://s2.ax1x.com/2019/05/03/ENBuut.jpg" width="30" height="30"
                        class="d-inline-block align-top" alt=""> Syn
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <div class="navbar-nav ml-auto">
                        <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                        <a class="nav-item nav-link" href="#about">About</a>
                        <a class="nav-item nav-link" href="#portfolio">Portfolio</a>
                        <a class="nav-item nav-link" href="#contact">Contact</a>
                    </div>
                </div>
            </div>
        </nav>
    </div>
    <div class="bg text-center" style="padding: 10rem 0rem 10rem 0rem;">
        <div class="container">
            <h1 class="display-2 py-5">Syn's Personal Portfolio Webpage</h1>
            <h2 class="display-4 py-2">Long may the sun shine !</h2>
            <hr class="pb-4">
            <a class="btn btn-light mb-5 mx-2" href="https://twitter.com/Syndeveloper" target="_blank"><i
                    class="fab fa-twitter"></i> Twitter</a>
            <a class="btn btn-light mb-5 mx-2" href="https://github.com/codersyn" target="_blank"><i
                    class="fab fa-github"></i> Github</a>
            <a class="btn btn-light mb-5 mx-2" href="#"><i class="fab fa-linkedin-in"></i> Linkedin</a>
        </div>
    </div>
    <div class="bg2 text-center" style="padding: 20rem 0rem 20rem 0rem;" id="about">
        <h1>About me</h1>
        <p class="col-4 mx-auto">Hello, everyone. my name is Syn, and i am 13 years old. now i am a school student. i
            love WEB . and i like sports very much. WEB brings lots of fun. and sports makse me happy. i like this
            sentence:" nothing is impossible." so i always try my best to do everything well,and never give up easily.
            so this is me ,i hope to make friends with you all. thank you for watching !</p>
    </div>
    <div class="bg text-center" style="padding: 10rem 0rem 10rem 0rem;" id="portfolio">
        <h1 class="text-center pb-3">Portfolio</h1>
        <div class="row">
            <div class="card col mx-2">
                <img class="card-img-top" src="https://s2.ax1x.com/2019/05/03/ENBMHf.png" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Tribute Page</h5>
                    <p class="card-text">This is my first protfolio, and content is a tribute page.</p>
                    <a href="https://codepen.io/websyn/full/zXLGbm" class="btn btn-primary">Look</a>
                </div>
            </div>
            <div class="card col mx-2">
                <img class="card-img-top" src="https://s2.ax1x.com/2019/05/03/ENBMHf.png" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Tribute Page</h5>
                    <p class="card-text">This is my first protfolio, and content is a tribute page.</p>
                    <a href="https://codepen.io/websyn/full/zXLGbm" class="btn btn-primary disabled">Look</a>
                </div>
            </div>
            <div class="card col mx-2">
                <img class="card-img-top" src="https://s2.ax1x.com/2019/05/03/ENBMHf.png" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Tribute Page</h5>
                    <p class="card-text">This is my first protfolio, and content is a tribute page.</p>
                    <a href="https://codepen.io/websyn/full/zXLGbm" class="btn btn-primary disabled">Look</a>
                </div>
            </div>
            <div class="card col mx-2">
                <img class="card-img-top" src="https://s2.ax1x.com/2019/05/03/ENBMHf.png" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Tribute Page</h5>
                    <p class="card-text">This is my first protfolio, and content is a tribute page.</p>
                    <a href="https://codepen.io/websyn/full/zXLGbm" class="btn btn-primary disabled">Look</a>
                </div>
            </div>
        </div>
    </div>
    <div class="bg2 text-center" style="padding: 10rem 0rem 10rem 0rem;" id="contact">
        <h1>Contact</h1>
        <div class="container">
            <form class="m-5">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="inputName">Name</label>
                        <input type="text" class="form-control" id="inputName" placeholder="Your name">
                    </div>
                    <div class="form-group col-6">
                        <label for="inputEmail4">Email</label>
                        <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="inputCity">City</label>
                        <input type="text" class="form-control" id="inputCity">
                    </div>
                    <div class="form-group col-md-4">
                        <label for="inputState">State</label>
                        <select id="inputState" class="form-control">
                            <option selected>Choose...</option>
                            <option>...</option>
                        </select>
                    </div>
                    <div class="form-group col-md-2">
                        <label for="inputZip">Zip</label>
                        <input type="text" class="form-control" id="inputZip">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputMessage">Message</label>
                    <input type="text" class="form-control form-control-lg" id="inputMessage" placeholder="Message">
                </div>
                <button type="submit" class="btn btn-primary">Seed</button>
            </form>
        </div>
    </div>
    <footer class="mt-5 text-center">Written and coded by <a href="#">Syn</a>.</footer>
    <!-- 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 年 05 月 25 日 10 : 26 AM
如果觉得我的文章对你有用,请随意赞赏

1 条评论

  1. 罗木、

    (´இ皿இ`)泪目

发表评论