增加产品落地网页。

LandingPage/index.html

@@ -0,0 +1,265 @@
+<style>
+    body {
+        background-color: rgb(237,237,237);
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+
+    h2 {
+        margin: 0;
+    }
+
+    p {
+        margin: 0;
+    }
+
+    header {
+        background-color: rgb(237,237,237);
+        display: flex;
+        width: 100%;
+        height: auto;
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        padding-bottom: 40px;
+    }
+
+    footer {
+        background-color: rgb(220,220,220);
+        display: flex;
+        flex-direction: column;
+    }
+
+    #header-img {
+        width: 100%;
+        height: 100%;
+        max-width: 300px;
+        margin: 0 auto 0 0;
+    }
+    
+    #nav-bar {
+        position: fixed;
+        top: 0px;
+        right: 0px;
+        margin: 0 0 0 auto;
+        display: flex;
+        flex-direction: row;
+    }
+
+    ul {
+        display: flex;
+        flex-direction: row;
+        list-style: none;
+    }
+
+    .nav-link {
+        text-decoration: none;
+        color: black;
+        margin: auto 20px auto 20px;
+    }
+
+    #Login {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 100px;
+    }
+
+    #form {
+        display: flex;
+        flex-direction: column;
+        margin: auto;
+        align-items: center;
+    }
+
+    .btn {
+        background-color: rgb(255, 208, 0);
+        color: black;
+        font-weight: bold;
+        border:none;
+        font-size: 18px;
+        padding: 8px 20px 8px 20px;
+    }
+
+    #email {
+        border: none;
+        width: 300px;
+        height: 28px;
+        padding: 6px;
+        border-radius: 2px;
+    }
+
+    .form-margin {
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    #features {
+        margin: auto;
+    }
+
+    #HowItWorks {
+        display: flex;
+        margin: 20px auto 40px auto;
+    }
+
+    #video {
+        background-color: aquamarine;
+        width: 800px;
+        height: 600px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .features-title {
+        font-size: 20px;
+        font-weight: bolder;
+    }
+
+    .features-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: auto;
+    }
+
+    .icon {
+        width: 30px;
+        height: auto;
+        margin: 60px;
+    }
+
+    #Pricing {
+        background-color: blue;
+        width: 940px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        column-gap: 20px;
+        margin: 40px auto 40px auto;
+    }
+
+    .priceItem {
+        height: 300px;
+        background-color: aquamarine;
+        border-radius: 4px;
+        border: black;
+    }
+
+    @media (max-width: 940px) {
+        #Pricing {
+            background-color: blue;
+            width: 100%;
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            column-gap: 20px;
+            margin: 40px auto 40px auto;
+        }
+
+    }
+
+    @media (max-width: 800px) {
+        header {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        ul {
+            display: flex;
+            flex-direction: column;
+            list-style: none;
+            align-items: center;
+        }
+
+        #header-img {
+            width: 100%;
+            height: 100%;
+            max-width: 300px;
+            margin: auto;
+        }
+
+        #nav-bar {
+            margin: auto;
+        }
+
+        .href-text {
+            text-decoration: none;
+            color: black;
+            margin: auto 40px auto auto;
+        }
+    }
+</style>
+
+<header id="header">
+    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
+    <nav id="nav-bar" class="nav-link">
+        <ul>
+            <li><a href="#features" class="nav-link">Features</a></li>
+            <li><a href="#HowItWorks" class="nav-link">How It Works</a></li>
+            <li><a href="#Pricing" class="nav-link">Pricing</a></li>
+        </ul>
+    </nav>
+</header>
+
+<main>
+<section id="login">
+    <h2>Handcrafted, home-made masterpieces</h2>
+    <form id="form" action="https://www.freecodecamp.com/email-submit">
+        <input id="email" type="email" name="email" placeholder="Enter your email address" class="form-margin" required>
+        <input id="submit" type="submit" value="GET STARTED" class="btn">
+    </form>
+</section>
+
+<section id="features">
+    <div class="features-item">
+        <div class="features-icon">
+            <img src="./img/icon.png" class="icon">
+        </div>
+        <div class="features-desc">
+            <h2>Premium Materials</h2>
+            <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
+        </div>
+    </div>
+    <div class="features-item">
+        <div class="features-icon">
+            <img src="./img/icon.png" class="icon">
+        </div>
+        <div class="features-desc">
+            <h2>Premium Materials</h2>
+            <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
+        </div>
+    </div>
+    <div class="features-item">
+        <div class="features-icon">
+            <img src="./img/icon.png" class="icon">
+        </div>
+        <div class="features-desc">
+            <h2>Premium Materials</h2>
+            <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
+        </div>
+    </div>
+</section>
+
+<section id="HowItWorks">
+    <iframe id="video" src="https://www.bilibili.com/video/BV1Y54y1r7Cg?from=search&seid=3208808148645764628" frameborder="0"></iframe>
+</section>
+
+<section id="Pricing">
+    <div class="priceItem">
+
+    </div>
+
+    <div class="priceItem">
+
+    </div>
+
+    <div class="priceItem">
+
+    </div>
+</section>
+
+</main>
+
+<footer>
+    <p>Copyright 2016, Original Trombones</p>
+    <p>Copyright 2016, Original Trombones</p>
+</footer>

nginx/TributePage.conf

@@ -7,7 +7,7 @@ server {
     #access_log  logs/host.access.log  main;
 
     location / {
-        root   /Users/xumingxin/Documents/my-tx-server-git/FreeCodeCamp/SurveyForm;
+        root   /Users/xumingxin/Documents/my-tx-server-git/FreeCodeCamp/LandingPage;
         index  index.html index.htm;
     }