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

响应式网页设计项目2

1. 原画

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

2. 实战

https://codepen.io/Neos15/pen/LYOywZX

3. 代码1.0

3.1 HTML


    
    

        

        

            
Handcrafted, home-made masterpieces

            

                
                
            

        


        

            

                

                    

                    

                        
Premium Materials

                        

                            Our trombones use the shiniest brass which is sourced locally. This will increase the
                            longevity of your purchase.
                        

                    

                

                

                    

                    

                        
Fast Shipping

                        

                            Our trombones use the shiniest brass which is sourced locally. This will increase the
                            longevity of your purchase.
                        

                    

                

                

                    

                        
                    

                    

                        
Quality Assurance

                        

                            Our trombones use the shiniest brass which is sourced locally. This will increase the
                            longevity of your purchase.
                        

                    

                

            

            

                
            

            

                

                    
TENOR TROMBONE

                    
$600

                    
    
                        
  1. Lorem ipsum.
    2. 
                        
  2. Lorem ipsum.
    3. 
                        
  3. Lorem ipsum dolor.
    4. 
                        
  4. Lorem ipsum.
    5. 
                    

                    
                

                

                    
BASS TROMBONE

                    
$900

                    
    
                        
  1. Lorem ipsum.
    2. 
                        
  2. Lorem ipsum.
    3. 
                        
  3. Lorem ipsum dolor.
    4. 
                        
  4. Lorem ipsum.
    5. 
                    

                    
                

                

                    
Valve TROMBONE

                    
$1200

                    
    
                        
  1. Lorem ipsum.
    2. 
                        
  2. Lorem ipsum.
    3. 
                        
  3. Lorem ipsum dolor.
    4. 
                        
  4. Lorem ipsum.
    5.

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;
}
freecodecamp

相关

标签