diff --git a/background_fuel.jpg b/background_fuel.jpg new file mode 100644 index 0000000..d4700b9 Binary files /dev/null and b/background_fuel.jpg differ diff --git a/background_fuel_1.jpg b/background_fuel_1.jpg new file mode 100644 index 0000000..fb31327 Binary files /dev/null and b/background_fuel_1.jpg differ diff --git a/background_fuel_2.jpg b/background_fuel_2.jpg new file mode 100644 index 0000000..e744b1f Binary files /dev/null and b/background_fuel_2.jpg differ diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 4e52ffb..0000000 --- a/css/style.css +++ /dev/null @@ -1,76 +0,0 @@ -/* google font */ -@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap'); - -/* css reset */ - *{ - margin: 0; - padding: 0; - box-sizing: border-box; - } - - body { - font-family: 'Raleway', sans-serif; - background-image: url("../images/Background.jpg"); - width: 100%; - height: auto; - background-repeat: no-repeat; - background-size: cover; - background-color: #45b6eb; - color: #fff; - font-size: 1.2vw; - } - - #heading { - max-width: 750px; - margin: 4rem auto; - padding: .6rem; - } - #main { - padding: 0% 20% 0% 20%; - } - - #title { - font-size: 2.2rem; - text-align: center; - line-height: 1.2; - padding: .6rem; - } - - #description { - font-size: 1.1rem; - text-align: center; - padding: .2rem; - } - - #survey-form { - background-color: #2222425d; - padding: 3rem 2.5rem; - border-radius: 7px; - } - - #submit { - background: #22d87d; - color: #fff; - padding: .7rem; - font-size: 1.15rem; - cursor: pointer; - } - - #submit:hover { - background: rgb(9, 168, 89); - } - -.form { - width: 100%; - padding: .7rem; - border-radius: 6px; - font-size: 1.0rem; - border: none; -} - - @media only screen and (max-width:480px){ - - #main { - padding: 0% 0% 0% 0%; - } - } \ No newline at end of file diff --git a/images/Background.jpg b/images/Background.jpg deleted file mode 100644 index 96ad37c..0000000 Binary files a/images/Background.jpg and /dev/null differ diff --git a/index.html b/index.html index de38797..57a7faa 100644 --- a/index.html +++ b/index.html @@ -1,89 +1,95 @@ - - - - - - Programmers Survey Form - - - -
-

Programmers Voice! Tell us your choice!

-

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!

-
-
-
-
- -
-
- -
-
- - -
- -
-
-
- Full-time job holder.(Employed)
- Part-time job holder.(Freelancer)
- Looking for a job.(Applier)
- I am a student.(Unemployed) -
-

-
- I am experienced with Windows-OS
- I am experienced with Linux-OS
- I am experienced with Mac-OS
-
- - -


-
- Flutter UI
- Node.js
- Tensorflow
- Github
- Dev-Ops
-
- - -


-
-

- -
-
-
- - - + + + + + + + + Survey form + + + + +
+

Transportation of the future

+

Light survey on type of vehicles used in the future

+
+ + + +
+
+ + +
+ + +
+ + +
+ +
+ + +
+ +
+

Which option do you think will power future cars?

+ +
+ +
+

Would you buy an electric car in the future?

+ + + + + +
+ +
+

What would you like to see improved in future electric cars? + (Check all that apply)

+ + + + + + + +
+ + + +
+

What's you comment on future transportation?

+ +
+ +
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..8fb8e8e --- /dev/null +++ b/style.css @@ -0,0 +1,145 @@ +:root { + --color-white: #f3f3f3; + --color-darkblue: #1b1b32; + --color-darkblue-alpha: rgba(27, 27, 50, 0.8); + --color-green: #37af65; + } + +header h1{ + text-align: center; + font-size: 30px; + margin-top: 1em; +} +header p{ + text-align: center; + font-size: 22px; + font-style: italic; +} + + body { + font-family: 'Poppins', sans-serif; + font-size: 1rem; + font-weight: 400; + line-height: 1.4; + color: var(--color-white); + margin: 0; + } + + /* mobile friendly alternative to using background-attachment: fixed */ +body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: -1; + background: var(--color-darkblue); + background-image: linear-gradient( + 115deg, + rgba(58, 58, 158, 0.8), + rgba(136, 136, 206, 0.7) + ), + url(background_fuel_2.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } + +form { + font-family: 'Poppins', sans-serif; + font-size: 1em; + line-height: 1.5em; + margin: 3em auto; + display: flex; + flex-direction: column; + justify-content: left; + align-items: left; + padding: 2em; + border: 1px solid #4d4a4a; + border-radius: 10px; + max-width: 50em; + background-color: rgb(22, 22, 22, 22); + opacity: 0.8; + color: white; + } + +p{ + font-weight: bold; + margin: 0; +} + +.form-group { +padding: 0.25em; +margin: 0; +display: flex; +flex-direction: column; +} + +#name{ + width: 26em; + } + +#name-label{ + font-weight: bold; +} + +#email-label{ + font-weight: bold; +} + +#number-label{ + font-weight: bold; +} + +#number{ + width: 26em; +} + +#dropbox{ + display: flex; + flex-direction: column; + width: 27em; +} + +.fueloption{ + padding-top: 1em; + margin: 0; +} + +.electricoption { + padding-top: 1em; + margin: 0; +} + +.clue { +font-size: 10px; +padding-top: em; +margin: 0; +} + + +.input-radio, +.input-checkbox { + display: inline-block; + margin-right: 0.625rem; + min-height: 1.25rem; + min-width: 1.25rem; + +} + +.label-radio { +width: 100%; +display: block; +font-size:0; +} +.label-radio .input-checkbox{ + font-size:16px; +} + +.label-radio:first-child{ + color: red; +} +.label-radio:last-child{ + color: green; +} \ No newline at end of file