├── README.md ├── css └── style.css ├── images └── Background.jpg └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Build-A-Survey-Form 2 | FreeCodeCamp.com Responsive Web Design Certification Project - "Build A Survey Form" 3 | 4 | Survey for programming lovers! -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* google font */ 2 | @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap'); 3 | 4 | /* css reset */ 5 | *{ 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: 'Raleway', sans-serif; 13 | background-image: url("../images/Background.jpg"); 14 | width: 100%; 15 | height: auto; 16 | background-repeat: no-repeat; 17 | background-size: cover; 18 | background-color: #45b6eb; 19 | color: #fff; 20 | font-size: 1.2vw; 21 | } 22 | 23 | #heading { 24 | max-width: 750px; 25 | margin: 4rem auto; 26 | padding: .6rem; 27 | } 28 | #main { 29 | padding: 0% 20% 0% 20%; 30 | } 31 | 32 | #title { 33 | font-size: 2.2rem; 34 | text-align: center; 35 | line-height: 1.2; 36 | padding: .6rem; 37 | } 38 | 39 | #description { 40 | font-size: 1.1rem; 41 | text-align: center; 42 | padding: .2rem; 43 | } 44 | 45 | #survey-form { 46 | background-color: #2222425d; 47 | padding: 3rem 2.5rem; 48 | border-radius: 7px; 49 | } 50 | 51 | #submit { 52 | background: #22d87d; 53 | color: #fff; 54 | padding: .7rem; 55 | font-size: 1.15rem; 56 | cursor: pointer; 57 | } 58 | 59 | #submit:hover { 60 | background: rgb(9, 168, 89); 61 | } 62 | 63 | .form { 64 | width: 100%; 65 | padding: .7rem; 66 | border-radius: 6px; 67 | font-size: 1.0rem; 68 | border: none; 69 | } 70 | 71 | @media only screen and (max-width:480px){ 72 | 73 | #main { 74 | padding: 0% 0% 0% 0%; 75 | } 76 | } -------------------------------------------------------------------------------- /images/Background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreeCodeCamp-Solutions/Build-a-Survey-Form/742f967a5b78b2d720c8ef46e98db034ff2dda10/images/Background.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Programmers Survey Form 7 | 8 | 9 | 10 |

11 |

Programmers Voice! Tell us your choice!

12 |

We love to know about which technology and tools software engineers are using world wide! Each and every Developers opinions are very precious to us!

13 |

14 |

15 |

16 |

17 | Name: 18 |
19 |
20 | Email: 21 |
22 |
23 | Age: 24 | 25 |

26 | 40 |

48 |

54 | 55 | 69 |

77 | 78 | 79 |

80 | Do you have any suggestion about this survey?
81 |

82 | 83 |

84 |

85 |

86 | 87 | 88 | 89 | --------------------------------------------------------------------------------