响应式网页设计项目2

1. 原画

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

2. 实战

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

3. 代码1.0

3.1 HTML

    

        

            

                freeCodeCamp Survey Form
            
            

                Thank you for taking the time to help us improve the platform
            
        


        


            

                Name
                
            

            

                Email
                
            

            

                Age(optional)
                
            

            

                Which option best describes your current role?
                
                    Select
                    A
                    B
                    C
                    D
                
            

            

                
Would you recommend freeCodeCamp to a friend?
                Op1-1

                Op1-2

            
            
            

                
What would you like to see improved? (Check all that apply)
                Op2-1

                Op2-2

                Op2-3

                Op2-4

                Op2-5

            

            

                Any comments or suggestions?

                
            

            Submit
        
    

3.2 css

@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');

:root {
  --color-white: white;
  --color-darkblue: #1b1b32;
  --color-darkblue-alpha: rgba(27, 27, 50, 0.8);
  --color-green: #37af65;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Poppins',sans-serif;
  font-size:1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-white);
  margin:0;
}
body::before {
  content:'';
  position: fixed;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  z-index:-1;
  background-image:linear-gradient(115deg,
  rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)),
    url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}
h1 {
  font-weight: 400;
  line-height: 1.2;
}
p {
  font-size: 1.125rem; 
}
h1,p {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
label {
  display: flex;
  align-items: center;
  font-size:1.125rem;
}
input,
button,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.container {
  width: 100%;
  margin: 3.125rem auto 0 auto;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
header {
  padding: 0 0.625rem;
  margin-bottom: 1.875rem;
}
.description {
  font-style: italic;
  font-weight:200px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.4)
}
.clue {
  margin-left: 0.25rem;
  font-size: 0.9rem;
  color: #e4e4e4;
}
.text-center {
  text-align: center;
}
form {
  background: var(--color-darkblue-alpha);
  padding: 2.5rem 0.625rem;
  border-radius: 0.25rem;
}
@media (min-width: 480px) {
  form {
    padding: 2.5rem;
  }
}
.form-group {
  margin: 0 auto 1.25rem auto;
  padding: 0.25rem;
}
.form-control {
  display: block;
  width:100%;
  height:2.375rem;
  padding: 0.375rem 0.75rem;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition:  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
  border: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.input-radio,
.input-checkbox {
  display: inline-block;
  margin-right: 0.625rem;
  min-height: 1.25rem;
  min-width: 1.25rem;
}

.input-textarea {
  min-height: 120px;
  width: 100%;
  padding: 0.625rem;
  resize: vertical;
}

.summit-button {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: var(--color-green);
  color: inherit;
  border-radius: 2px;
  cursor: pointer;
}