制作一个产品登录页（build a product landing page）

响应式网页设计项目2

1. 原画

https://codepen.io/freeCodeCamp/full/RKRbwL

2. 实战

3. 代码1.0

3.1 HTML

<body>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <div id="page-wrapper">
        <header id="header">
            <div class="logo">
                <img id="header-img"
                    src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
                    alt="original trombones logo">
            </div>
            <nav id="nav-bar">
                <ul>
                    <li><a class="nav-link" href="#features">Features</a></li>
                    <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
                    <li><a class="nav-link" href="#pricing">Pricing</a></li>
                </ul>
            </nav>
        </header>

        <section id="hero">
            <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" required>
                <input id="submit" type="submit" value="Get Started" class="btn">
            </form>
        </section>

        <div class="container">
            <section id="features">
                <div class="grid">
                    <div class="icon"><i class="fa fa-3x fa-fire" aria-hidden="true"></i></div>
                    <div class="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="grid">
                    <div class="icon"><i class="fa fa-3x fa-truck" aria-hidden="true"></i></div>
                    <div class="desc">
                        <h2>Fast Shipping</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="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
                    </div>
                    <div class="desc">
                        <h2>Quality Assurance</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="how-it-works">
                <iframe id="video"
                src="//player.bilibili.com/player.html?aid=593942349&bvid=BV1Fq4y187Q4&cid=503731391&page=1"
        height="560px"            scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
            </section>
            <section id="pricing">
                <div class="product" id="tenor">
                    <div class="level">TENOR TROMBONE</div>
                    <h2>$600</h2>
                    <ol>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum dolor.</li>
                        <li>Lorem ipsum.</li>
                    </ol>
                    <button class="btn">Select</button>
                </div>
                <div class="product" id="bass">
                    <div class="level">BASS TROMBONE</div>
                    <h2>$900</h2>
                    <ol>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum dolor.</li>
                        <li>Lorem ipsum.</li>
                    </ol>
                    <button class="btn">Select</button>
                </div>
                <div class="product" id="valve">
                    <div class="level">Valve TROMBONE</div>
                    <h2>$1200</h2>
                    <ol>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum dolor.</li>
                        <li>Lorem ipsum.</li>
                    </ol>
                    <button class="btn">Select</button>
                </div>
            </section>
            <footer>
                <ul>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Terms</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <span>Copyright 2016, Original Trombones</span>
            </footer>
        </div>
    </div>
</body>

3.2 css

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

html {
  font-size:10px;
}
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body {
  font-family: 'Lato', sans-serif;
  font-size:1.6rem;
  line-height:1.4;
  color:#333;
}
#page-wrapper {
  background:#eee;
}
#header {
  position: fixed;
  top:0;
  min-height:75px;
  padding:0 20px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  background-color:#eee;
}
@media (max-width:600px) {
  header {
    flex-wrap:wrap;
  }
}
.logo {
  width:60vw;
}
@media (max-width:600px) {
  .logo {
    margin-top:15px;
    width:100%;
    position:relative;
  }
}
.logo > img {
  width:100%;
  height:100%;
  margin-left:20px;
  max-width: 300px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
@media (max-width:600px) {
  .logo > img {
    margin:0 auto;
  }
}
nav {
  font-weight:400;
}
@media (max-width:600px) {
  nav {
    margin-top:10px;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:0 50px;
  }
}
nav > ul {
  width: 35vw;
  display: flex;
  flex-direction:row;
  justify-content:space-around;
}
@media (max-width: 650px) {
  nav > ul {
    flex-direction: column;
  }
}
li {
  list-style-type:none;
}
a {
  color:#000;
  text-decoration:none;
}
#hero {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin-top:50px;
  height:200px;
}
#hero > h2 {
  margin-bottom:20px;
}
#hero input[type="email"] {
  max-width:275px;
  width:100%;
  padding:5px;
}
.btn {
  padding: 0 10px;
  font-size:1em;
  font-weight:900;
  text-transform:uppercase;
  border-radius:2px;
  cursor:pointer;
}
#hero input[type="submit"] {
  background:#f1c40f;
  margin:15px 0;
  max-width:150px;
  width:100%;
  height:30px;
  border:0;
}
.container {
  max-width:1000px;
  width:100%;
  margin:0 auto;
}
#features {
  margin-top:30px;
}
.grid {
  display:flex;
}
#features .icon {
  display:flex;
  align-items:center;
  justify-content:center;
  height:135px;
  width:20vw;
  color:darkorange;
}
@media (max-width: 600px) {
  #features .icon {
    display: none;
  }
}
#features .desc {
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:80vw;
  height:135px;
  padding:5px;
}
#how-it-works {
  display:flex;
  justify-content:center;
  margin-top:50px;
}
#how-it-works > iframe {
  max-width:800px;
  width:100%;
}
#pricing {
  margin-top:50px;
  display:flex;
  flex-direction:row;
  justify-content:cneter;
}
.product {
  margin:10px;
  border:1px solid #000;
  border-radius:3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:calc( 100% / 3)
}
.product > .level {
  background:#ddd;
  width:100%;
  color:black;
  font-weight:700;
  padding:15px 0;
  text-transform:uppercase;
}
.product > h2 {
  margin-top:15px;
}
.product > ol {
  margin:15px 0;
}
.product > ol > li {
  padding:5px 0;
}
.product > button {
  background:#f1c40f;
  margin:15px 0;
  max-width:150px;
  width:100%;
  height:30px;
  border:0;
}
footer {
  margin-top:30px;
  background:#ddd;
  padding:20px;
}
footer > ul {
  display:flex;
  justify-content: flex-end;
}
footer > ul > li {
  padding:0 10px;
}
footer > span {
  margin-top:5px;
  display:flex;
  justify-content: flex-end;
  font-size:0.9rem;
  color:#444;
}

posted @ 2022-02-15 16:21 沧浪浊兮阅读(423) 评论(0) 收藏举报

刷新页面返回顶部

拼命十三郎

唤起一天明月，照我满怀冰雪，浩荡百川流

制作一个产品登录页（build a product landing page）

1. 原画

2. 实战

3. 代码1.0

3.1 HTML

3.2 css