How do I merge the following form with the following background?
Question
I was hoping someone could help me figure this out, i'm a newbie when it comes to coding.
I've made a form and a background in two seperate files. What i'm trying to achieve is:
- Merge both files, wherein the form should be on the middle-right side of the screen and I want the background to stay like it is, it should keep changing both the images and background colour.
- In the form, my scrollbar is going out of the div which has a border-radius, I want it to stay inside.
- In the form, if you look at the dropdown menu, the bottom arrow isn't properly aligned, how can I move it towards it's left so it's visible properly.
I've tried a few solutions already, but either I mess up the background or the form's alignment changes. Please have a look at the following code for both the files and hopefully help a brother out.
I've also attached their Codepen links: (i) For the background: (ii) For the form:
CODE FOR THE BACKGROUND:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="SurveyForm.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous">
<title>Lego Technic Survey Form</title>
</head>
<body>
<div class="images" id="one">
<img class="cars" id="lambo" src="Lamborgini.png" alt="">
</div>
<div class="images" id="two">
<img class="cars" id="bugatti" src="Bugatti.png" alt="">
</div>
<div class="images" id="three">
<img class="cars" id="porsche" src="Porsche.png" alt="">
</div>
<div class="images" id="four">
<img class="cars" id="dodge" src="Dodge.png" alt="">
</div>
<div class="images" id="five">
<img class="cars" id="chevrolet" src="Chevrolet.png" alt="">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("images");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
CSS:
body {
margin: 0;
height: 100vh;
}
#one {
background-color: #9dde75;
}
#two {
background-color: #66b1e0;
}
#three {
background-color: #e65643;
}
#four {
background-color: #3e3c42;
}
#five {
background-color: #ee8952d7;
}
#one, #two, #three, #four, #five {
height: 100%;
background-position: center;
background-repeat: no-repeat;
}
.cars {
width: 500px;
margin-top: 250px;
margin-left: 100px;
background-attachment: fixed;
}
#porsche {
margin-top: 200px;
}
#chevrolet {
margin-top: 180px;
}
CODE FOR THE FORM:
HTML:
<body>
<div class="neumorphic-form">
<div class="logo">
<img src="legologo.png" alt="">
</div>
<div>
<h1 id="title">Lego Technic Survey Form</h1>
</div>
<div>
<p id="description">Thank you for taking the time to help us be more creative</p>
</div>
<div class="fields">
<form id="survey-form" action="">
<div class="username">
<label for="name" id="name-label" hidden>Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
</div>
<div class="email">
<label for="email" id="email-label" hidden>Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email address">
</div>
<div class="number">
<label for="tel" id="number-label" hidden>Contact Number:</label>
<input type="tel" id="number" name="number" placeholder="Enter your contact number"><br>
</div>
<div class="favourite">
<p>Which is your favorite Lego Technic Building Set?</p>
</div>
<div class="dropdownoptions">
<select name="buildingset" id="dropdown">
<option disabled selected value>Select any one set</option>
<option value="Lamborgini Sián FKP 37">Lamborgini Sián FKP 37</option>
<option value="Bugatti Chiron">Bugatti Chiron</option>
<option value="Porsche 911 RSR">Porsche 911 RSR</option>
<option value="Dodge Charger">Dodge Charger</option>
<option value="Chevrolet Corvette ZR1">Chevrolet Corvette ZR1</option>
</select>
</div>
<p>Would you recommend to buy Lego Technic to a friend?</p>
<div class="neumorph">
<input type="radio" id="definitely" class="radiocheck" name="a" checked>
<label for="definitely">Definitely</label><br>
<input type="radio" id="maybe" class="radiocheck" name="a">
<label for="maybe">Maybe</label><br>
<input type="radio" id="notsure" class="radiocheck" name="a">
<label for="notsure">Not Sure</label>
<p>Which Lego Technic sets would you like to see in the future?</p>
<input type="checkbox" class="radiocheck" id="ferrarilaferrari" name="b" value="ferrarilaferrari" checked>
<label for="ferrarilaferrari"> Ferrari LaFerrari</label><br>
<input type="checkbox" class="radiocheck" id="zenvots1gt" name="b" value="Zenvots1gt">
<label for="Zenvots1gt"> Zenvo TS1 GT</label><br>
<input type="checkbox" class="radiocheck" id="koenigseggone" name="b" value="koenigseggone">
<label for="koenigseggone"> Koenigsegg One</label><br>
<input type="checkbox" class="radiocheck" id="mercedesamgone" name="b" value="mercedesamgone">
<label for="mercedesamgone"> Mercedes-AMG One</label><br>
<input type="checkbox" class="radiocheck" id="paganihuayrabc" name="b" value="paganihuayrabc">
<label for="paganihuayrabc"> Pagani Huayra BC</label><br>
<input type="checkbox" class="radiocheck" id="astonmartinvalkyrie" name="b" value="astonmartinvalkyrie">
<label for="astonmartinvalkyrie"> Aston Martin Valkyrie</label><br>
<input type="checkbox" class="radiocheck" id="mercedesbenzmaybachexelero" name="b" value="mercedesbenzmaybachexelero">
<label for="mercedesbenzmaybachexelero"> Mercedes Benz Maybach Exelero</label><br>
<input type="checkbox" class="radiocheck" id="rollsroycesweptail" name="b" value="rollsroycesweptail">
<label for="rollsroycesweptail"> Rolls Royce Sweptail</label> <br><br>
</div>
<div class="comments">
<textarea id="textarea" name="textarea" placeholder="Enter your comments or suggestions here..." rows="6" cols="40"></textarea>
</div>
<button type="button" id="submit">Submit</button>
</form>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
font-family: 'Lato', sans-serif;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
color: #555;
background: #ecf0f3;
}
.neumorphic-form {
overflow: scroll;
overflow-x: hidden;
width: 430px;
height: 700px;
padding: 60px 35px 35px 35px;
border-radius: 40px;
background: #ecf0f3;
box-shadow: 13px 13px 20px #cbced1,
-13px -13px 20px #ffffff;
}
.logo {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
box-shadow: 0px 0px 2px #5f5f5f,
0px 0px 0px 5px #ecf0f3,
8px 8px 15px #a7aaaf,
-8px -8px 15px #ffffff;
}
img {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
#title {
text-align: center;
font-size: 24px;
padding-top: 18px;
letter-spacing: 0.5px;
}
#description {
text-align: center;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
}
.fields {
width: 100%;
padding: 25px 5px 5px 5px;
}
.fields input, textarea, #dropdown {
border: none;
outline:none;
background: none;
font-size: 16px;
color: #555;
padding: 15px 10px 15px 10px;
}
.username, .email, .number, .comments, #dropdown {
margin-bottom: 20px;
border-radius: 25px;
box-shadow: inset 8px 8px 8px #cbced1,
inset -8px -8px 8px #ffffff;
}
#name, #email, #number, #textarea, #dropdown {
width: 100%;
}
textarea {
resize: none;
}
button {
outline: none;
border:none;
cursor: pointer;
width:100%;
height: 60px;
border-radius: 30px;
font-size: 20px;
font-weight: 700;
font-family: 'Lato', sans-serif;
color:#fff;
text-align: center;
background: #ed462f;
box-shadow: 3px 3px 8px #b1b1b1,
-3px -3px 8px #ffffff;
transition: 0.5s;
}
button:hover {
background:#992c1d;
}
button:active {
background:#ed462f;
}
label, input {
vertical-align: middle;
font-weight: 400;
}
p {
margin-top: 15px;
margin-left: 5px;
margin-right: 5px;
text-align: justify;
}
#dropdown {
margin-bottom: 10px;
}
.neumorph > input[type=radio].radiocheck,
.neumorph > input[type=checkbox].radiocheck {
position: relative;
-webkit-appearance: none;
width: 30px;
height: 30px;
margin: 10px;
background-color: #eeeeee;
box-shadow: 5px 5px 10px rgba(0,0,0,.2),
-5px -5px 10px rgba(255,255,255,1),
inset 0 0 0 rgba(0,0,0,.2),
inset 0 0 0 rgba(255,255,255,.2);
outline: none;
cursor: pointer;
transition: all .3s ease-in-out;
}
.neumorph > input[type=radio].radiocheck:checked,
.neumorph > input[type=checkbox].radiocheck:checked {
background-color: #ed462f;
box-shadow: 0 0 0 rgba(0,0,0,.2),
0 0 0 rgba(255,255,255,1),
inset 5px 5px 10px rgba(0,0,0,.2),
inset -5px -5px 10px rgba(255,255,255,.2);
}
.neumorph > input[type=radio].radiocheck {
border-radius: 50%;
}
.neumorph > input[type=checkbox].radiocheck {
border-radius: 20%;
}
.neumorph > input[type=radio].radiocheck::before,
.neumorph > input[type=checkbox].radiocheck::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #eee;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.neumorph > input[type=radio].radiocheck::before {
content: "\f111";
font-size: 10px;
}
.neumorph > input[type=checkbox].radiocheck::before {
content: "\f00c";
font-size: 15px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(212, 212, 212, 0.555);
border: 4px solid transparent;
border-radius: 8px;
background-clip: padding-box;
}
::-webkit-scrollbar {
width: 16px;
}
Thank you!
1 answers
solution1
0 ACCPTED 2020-08-13 15:36:48
I added a container for both components, merged them and fixed css. The key was to put the images slideshow in position: fixed; and center the form.
body { margin: 0; height: 100vh; }.images-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; }.images { height: 100%; } #one { background-color: #9dde75; } #two { background-color: #66b1e0; } #three { background-color: #e65643; } #four { background-color: #3e3c42; } #five { background-color: #ee8952d7; } #one, #two, #three, #four, #five { height: 100%; background-position: center; background-repeat: no-repeat; }.cars { width: 500px; margin-top: 250px; margin-left: 100px; } #porsche { margin-top: 200px; } #chevrolet { margin-top: 180px; }.neumorphic-form { z-index: 2 overflow: scroll; margin: 0 auto; overflow-x: hidden; width: 430px; height: 700px; padding: 60px 35px 35px 35px; border-radius: 40px; background: #ecf0f3; box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #ffffff; }.logo { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; box-shadow: 0px 0px 2px #5f5f5f, 0px 0px 0px 5px #ecf0f3, 8px 8px 15px #a7aaaf, -8px -8px 15px #ffffff; }.neumorphic-form img { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; } #title { text-align: center; font-size: 24px; padding-top: 18px; letter-spacing: 0.5px; } #description { text-align: center; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }.fields { width: 100%; padding: 25px 5px 5px 5px; }.fields input, textarea, #dropdown { border: none; outline: none; background: none; font-size: 16px; color: #555; padding: 15px 10px 15px 10px; }.username, .email, .number, .comments, #dropdown { margin-bottom: 20px; border-radius: 25px; box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #ffffff; } #name, #email, #number, #textarea, #dropdown { width: 100%; } textarea { resize: none; } button { outline: none; border: none; cursor: pointer; width: 100%; height: 60px; border-radius: 30px; font-size: 20px; font-weight: 700; font-family: 'Lato', sans-serif; color: #fff; text-align: center; background: #ed462f; box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #ffffff; transition: 0.5s; } button:hover { background: #992c1d; } button:active { background: #ed462f; } label, input { vertical-align: middle; font-weight: 400; } p { margin-top: 15px; margin-left: 5px; margin-right: 5px; text-align: justify; } #dropdown { margin-bottom: 10px; }.neumorph>input[type=radio].radiocheck, .neumorph>input[type=checkbox].radiocheck { position: relative; -webkit-appearance: none; width: 30px; height: 30px; margin: 10px; background-color: #eeeeee; box-shadow: 5px 5px 10px rgba(0, 0, 0, .2), -5px -5px 10px rgba(255, 255, 255, 1), inset 0 0 0 rgba(0, 0, 0, .2), inset 0 0 0 rgba(255, 255, 255, .2); outline: none; cursor: pointer; transition: all.3s ease-in-out; }.neumorph>input[type=radio].radiocheck:checked, .neumorph>input[type=checkbox].radiocheck:checked { background-color: #ed462f; box-shadow: 0 0 0 rgba(0, 0, 0, .2), 0 0 0 rgba(255, 255, 255, 1), inset 5px 5px 10px rgba(0, 0, 0, .2), inset -5px -5px 10px rgba(255, 255, 255, .2); }.neumorph>input[type=radio].radiocheck { border-radius: 50%; }.neumorph>input[type=checkbox].radiocheck { border-radius: 20%; }.neumorph>input[type=radio].radiocheck::before, .neumorph>input[type=checkbox].radiocheck::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #eee; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }.neumorph>input[type=radio].radiocheck::before { content: "\f111"; font-size: 10px; }.neumorph>input[type=checkbox].radiocheck::before { content: "\f00c"; font-size: 15px; }::-webkit-scrollbar-thumb { background-color: rgba(212, 212, 212, 0.555); border: 4px solid transparent; border-radius: 8px; background-clip: padding-box; }::-webkit-scrollbar { width: 16px; }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous"> <div class="neumorphic-form"> <div class="logo"> <img src="https://i.postimg.cc/G23dM93h/legologo.png" alt=""> </div> <div> <h1 id="title">Lego Technic Survey Form</h1> </div> <div> <p id="description">Thank you for taking the time to help us be more creative</p> </div> <div class="fields"> <form id="survey-form" action=""> <div class="username"> <label for="name" id="name-label" hidden>Name:</label> <input type="text" id="name" name="name" placeholder="Enter your name"> </div> <div class="email"> <label for="email" id="email-label" hidden>Email:</label> <input type="email" id="email" name="email" placeholder="Enter your email address"> </div> <div class="number"> <label for="tel" id="number-label" hidden>Contact Number:</label> <input type="tel" id="number" name="number" placeholder="Enter your contact number"><br> </div> <div class="favourite"> <p>Which is your favorite Lego Technic Building Set?</p> </div> <div class="dropdownoptions"> <select name="buildingset" id="dropdown"> <option disabled selected value>Select any one set</option> <option value="Lamborgini Sián FKP 37">Lamborgini Sián FKP 37</option> <option value="Bugatti Chiron">Bugatti Chiron</option> <option value="Porsche 911 RSR">Porsche 911 RSR</option> <option value="Dodge Charger">Dodge Charger</option> <option value="Chevrolet Corvette ZR1">Chevrolet Corvette ZR1</option> </select> </div> <p>Would you recommend to buy Lego Technic to a friend?</p> <div class="neumorph"> <input type="radio" id="definitely" class="radiocheck" name="a" checked> <label for="definitely">Definitely</label><br> <input type="radio" id="maybe" class="radiocheck" name="a"> <label for="maybe">Maybe</label><br> <input type="radio" id="notsure" class="radiocheck" name="a"> <label for="notsure">Not Sure</label> <p>Which Lego Technic sets would you like to see in the future?</p> <input type="checkbox" class="radiocheck" id="ferrarilaferrari" name="b" value="ferrarilaferrari" checked> <label for="ferrarilaferrari"> Ferrari LaFerrari</label><br> <input type="checkbox" class="radiocheck" id="zenvots1gt" name="b" value="Zenvots1gt"> <label for="Zenvots1gt"> Zenvo TS1 GT</label><br> <input type="checkbox" class="radiocheck" id="koenigseggone" name="b" value="koenigseggone"> <label for="koenigseggone"> Koenigsegg One</label><br> <input type="checkbox" class="radiocheck" id="mercedesamgone" name="b" value="mercedesamgone"> <label for="mercedesamgone"> Mercedes-AMG One</label><br> <input type="checkbox" class="radiocheck" id="paganihuayrabc" name="b" value="paganihuayrabc"> <label for="paganihuayrabc"> Pagani Huayra BC</label><br> <input type="checkbox" class="radiocheck" id="astonmartinvalkyrie" name="b" value="astonmartinvalkyrie"> <label for="astonmartinvalkyrie"> Aston Martin Valkyrie</label><br> <input type="checkbox" class="radiocheck" id="mercedesbenzmaybachexelero" name="b" value="mercedesbenzmaybachexelero"> <label for="mercedesbenzmaybachexelero"> Mercedes Benz Maybach Exelero</label><br> <input type="checkbox" class="radiocheck" id="rollsroycesweptail" name="b" value="rollsroycesweptail"> <label for="rollsroycesweptail"> Rolls Royce Sweptail</label> <br><br> </div> <div class="comments"> <textarea id="textarea" name="textarea" placeholder="Enter your comments or suggestions here..." rows="6" cols="40"></textarea> </div> <button type="button" id="submit">Submit</button> </form> </div> </div> <div class="images-container"> <div class="images" id="one"> <img class="cars" id="lambo" src="https://i.postimg.cc/Xqp3bhyR/Lamborgini.png" alt=""> </div> <div class="images" id="two"> <img class="cars" id="bugatti" src="https://i.postimg.cc/KvCcZZfJ/Bugatti.png" alt=""> </div> <div class="images" id="three"> <img class="cars" id="porsche" src="https://i.postimg.cc/kGzCXcQB/Porsche.png" alt=""> </div> <div class="images" id="four"> <img class="cars" id="dodge" src="https://i.postimg.cc/3RL7z7Wj/Dodge.png" alt=""> </div> <div class="images" id="five"> <img class="cars" id="chevrolet" src="https://i.postimg.cc/1zrycDQj/Chevrolet.png" alt=""> </div> </div> <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("images"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 2000); // Change image every 2 seconds } </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I reverse the process of the following form element disabling function
How do I bind following object with following model?
How do i make my background image transparent in CSS if I have the following code?
How do I change the styling for the following?
How do I center the following navbar in Boostrap?
How do i achieve the following in HTML?
How do I simplify the following code?
how do i put the following in a for loop
I do not understand the following javascript
How do I vertically align the following flex element?
Related Tags