How to make form display marquee after submitting?

How to make form display marquee after submitting? - javascript

I'm trying to create a section in which the information submitted by user thru a form is displayed as a marquee!
I don't know what exactly should I use to make that happen?
Here are the code for the form:
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: grey;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.marquee-section {
max-width:100%;
max-height: 100%;
height: 300px;
position:relative;
background-color: #ef6;
padding: 10px 20px;
}
.marquee-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.marquee-info {
max-width:600px;
width:100%;
margin:0 auto;
padding: 0 10px;
float: left;
position: relative;
}
.contact-section {
max-width:100%;
max-height: 100%;
height: 580px;
position:relative;
background-color: #fff;
padding: 10px 20px;
}
.contact-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.contactForm {
max-width:600px;
width:100%;
margin:0 auto;
padding: 0 10px;
float: left;
position: relative;
}
#contact input[type="text"], #contact input[type="email"], #contact textarea, #contact button[type="submit"] { font:400 50px/16px "Raleway", Helvetica, Arial, sans-serif; }
#contact {
padding:10px;
margin:5px 0;
}
#contact h3 {
color: #F96;
display: block;
font-size: 50px;
font-weight: 400;
}
#contact h4 {
margin:5px 0 15px;
display:block;
font-size:13px;
}
fieldset label {
font-size: 16px;
font-weight: 500;
}
fieldset {
border: medium none !important;
margin: 0 0 10px !important;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"], #contact input[type="email"], #contact textarea {
width:100%;
max-width:700px;
border-style: solid;
border-color: #afafaf;
border-width: 1px;
border-radius: 5px;
margin-bottom: 5px;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
height: 45px;
font-size: 0.8em;
line-height: 1.2em;
color: #111;
position: relative;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #4872bc;
}
#contact textarea {
height:180px;
max-width:100%;
resize:none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
#contact button[type="submit"] {
cursor:pointer;
margin:0 0 5px;
padding: 10px;
height: 45px;
width: 100%;
max-width: 150px;
color: #282626;
font-size: 16px;
font-weight: 600;
border-style: solid;
border-color: #878787;
border-width: 1px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0);
}
#contact button[type="submit"]:hover {
background-color: rgba(255, 255, 255, 0.3);
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#878787;
}
:-moz-placeholder {
color:#878787;
}
::-moz-placeholder {
color:#878787;
}
:-ms-input-placeholder {
color:#878787;
}
<div class="marquee-section">
<h1 class="marquee-heading">Opinions:</h1>
<div class="marquee-info">
<marquee><span>Climate chnage is real by Wallace C.</span></marquee>
</div>
</div>
<div class="contact-section">
<h1 class="contact-heading">Type the info here!</h1>
<div class="contactForm">
<form id="contact">
<fieldset>
<label for="name">Name</label>
<input name="name" type="text">
</fieldset>
<fieldset>
<label for="name">Email</label>
<input name="email" type="text">
</fieldset>
<fieldset>
<label for="name">Opinion</label>
<textarea name="message" rows="4" cols="50"></textarea>
</fieldset>
<fieldset>
<center><button name="submit" type="submit">Submit</button></center>
</fieldset>
</form>
</div>
</div>
I want the form information after submission to be displayed in the "marquee-info" of the "marquee-section"

You need a fresh approach. <marquee> and <center> are deprecated, you shouldn't even be using a form since you aren't submitting data anywhere and you've got tons and tons of unnecessary CSS. You are also not using the label element correctly - - the for attribute value must match the id of the element that the label is "for", not the name attribute value.
You just need a textbox and a regular button with a click event handler. Then, you'll use JavaScript to modify the left CSS property on a timer. See comments inline:
// Get references to all the DOM elements you'll work with
let output = document.querySelector(".output");
let email = document.getElementById("email");
let message = document.getElementById("message");
let timer = null; // Will reference timer
// Set up button click event handler
document.querySelector("button").addEventListener("click", move);
function move(){
clearTimeout(timer); // Prevent multiple timers
// Get current left position of output
let currentLeft = parseInt(getComputedStyle(output).left, 10);
// If output is off the screen, move it to the right.
// If not, move it 3px to the left
let outputWidth = parseInt(getComputedStyle(output).width, 10);
if(currentLeft < (0 - outputWidth)){
currentLeft = window.innerWidth;
} else {
currentLeft -= 3;
}
// Update and Move the output
output.textContent = message.value;
output.style.left = currentLeft + "px";
// Create a timer to recursively call this function
timer = setTimeout(move, 25);
}
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*, *:after, *:before {
box-sizing: border-box;
}
.marquee-section {
max-width:100%;
max-height: 100%;
height: 300px;
background-color: #ef6;
padding: 10px 20px;
}
.marquee-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.marquee-info {
width:100%;
max-width:600px;
margin:0 auto;
padding: 0 10px;
}
.output { position:absolute; }
.contact-section {
max-width:100%;
max-height: 100%;
height: 580px;
padding: 10px 20px;
}
.contact-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.contactForm {
max-width:600px;
width:100%;
padding:10px;
margin:5px 0;
}
.contactForm input[type="text"], #contact input[type="email"], .contactForm textarea, #contact button[type="submit"] { font:400 50px/16px "Raleway", Helvetica, Arial, sans-serif; }
label {
font-size: 16px;
font-weight: 500;
}
.contactForm input, .contactForm input[type="email"], .contactForm textarea {
width:100%;
max-width:700px;
border-style: solid;
border-color: #afafaf;
border-width: 1px;
border-radius: 5px;
margin-bottom: 5px;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
height: 45px;
font-size: 0.8em;
line-height: 1.2em;
color: #111;
}
.contactForm input:hover, #contact input[type="email"]:hover, .contactForm textarea:hover {
transition:border-color 0.3s ease-in-out;
border:1px solid #4872bc;
}
.contactForm textarea {
height:180px;
max-width:100%;
resize:none;
width: 100%;
}
.contactForm button {
cursor:pointer;
margin:0 0 5px;
padding: 10px;
height: 45px;
width: 100%;
max-width: 150px;
color: #282626;
font-size: 16px;
font-weight: 600;
border-width: 1px solid #878787;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0);
}
.contactForm button:hover {
background-color: rgba(255, 255, 255, 0.3);
transition:background-color 0.3s ease-in-out;
}
.contactForm button:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.contactForm input:focus, .contactForm textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder { color:#878787; }
:-moz-placeholder { color:#878787; }
::-moz-placeholder { color:#878787; }
:-ms-input-placeholder { color:#878787; }
<div class="marquee-section">
<h1 class="marquee-heading">Opinions:</h1>
<div class="marquee-info">
<span class="output">Climate change is real by Wallace C.</span>
</div>
</div>
<div class="contact-section">
<h1 class="contact-heading">Type the info here!</h1>
<div class="contactForm">
<div class="row">
<label for="name">Name</label>
<input id="userName">
</div>
<div class="row">
<label for="email">Email</label>
<input id="email" type="email">
</div>
<div class="row">
<label for="message">Opinion</label>
<textarea id="message"></textarea>
</div>
<div class="row">
<button type="button">Submit</button>
</div>
</div>
</div>

Related

CSS animation not happening when chrome auto-completes password

I am making a simple website, and now I'm working on the login page. It looks like this (run in full page, otherwise some parts miss):
html, body {
width: 100%;
height: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
body {
font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background-color: #2196F3;
height:100%;
overflow: hidden;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid {
-webkit-box-shadow: 0 0 0 30px #2196F3 inset;
-webkit-text-fill-color: white !important;
}
.msg {
font-size: 15px;
display: inline-block;
text-align: center;
word-wrap: break-word;
width: 90%;
max-width: 300px;
line-height: 28px;
min-height: 28px;
background-color: #ffc107;
border-radius: 2px;
color: white;
margin-bottom: 3em;
}
.spacer {
font-size: 15px;
display: block;
text-align: center;
word-wrap: break-word;
width: 90%;
max-width: 300px;
line-height: 28px;
min-height: 28px;
border-radius: 2px;
color: white;
margin-top: 2em;
margin-bottom: 3em;
}
form {
display: block;
position: absolute;
width: 100%;
height: 80%;
left: 0;
margin-top: -100px;
text-align: center;
animation: swipein 0.5s forwards;
}
#keyframes swipein {
from{top:30%;opacity: .8}
to{top:20%;opacity: 1}
}
input, button {
font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
outline: 0;
color: white;
}
.group {
display: inline-block;
position:relative;
margin-bottom: 20px;
}
.group:nth-of-type(1){
margin-top: 15%;
}
input {
font-size:21px;
padding:10px 10px 10px 5px;
display:block;
width:250px;
border:none;
border-bottom:1px solid white;
border-radius: 0;
background-color: transparent;
color: white;
}
input:focus { outline:none; }
label {
color: white;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color: white ;
}
.bar { position:relative; display:block; width:265px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:white;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
li {
list-style-type: none;
padding: 10px;
}
a {
color: white;
padding: 10px;
}
button {
-webkit-appearance: none;
padding: 12px 65px 12px 65px;
background-color: white;
color: #2196F3;
border: none;
border-radius: 2px;
font-size: 18px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
button:hover {
cursor: pointer;
}
#media screen and (min-width: 800px){
logo {
top: 15%;
}
.logo span {
font-size: 2em;
}
.logo h2 {
font-size: 2.7em;
}
.group:nth-of-type(1){
margin-top: 25%;
}
form {
width: 750px;
top: 20%;
left: calc(50% - 375px);
}
input{
width:350px;
}
.bar {
width:365px;
}
}
<title>connerdassen.ddns.net</title>
<script>
function test() {
var button = document.getElementById('button');
button.click();
alert('Click event simulated!');
}
</script>
<body id='body'>
<form id="form" method="POST" action="http://connerdassen.ddns.net/login.php">
<p>
</p><div class="group">
<input id='input' type="text" name="uid" required="">
<span class="bar"></span>
<label>Username</label>
</div><p>
</p><div class="group">
<input id='input' type="password" name="pwd" required="">
<span class="bar"></span>
<label>Password</label>
<li><a href='/signup'>Sign up</a></li>
<button>Log In</button>
</div><br>
</form>
<script>
if((window.location.href).indexOf('?') != -1) {
var afterURL = (window.location.href).substr((window.location.href).indexOf('?') + 1);
var msg = (afterURL.split('msg='))[1];
msg = decodeURIComponent(msg);
}
if(typeof msg !== "undefined" && msg !== "undefined" && msg !== ""){
var form = document.getElementById("form");
var oldForm = form.innerHTML;
form.innerHTML = '<div class="spacer"></div><div class="msg"><span>' + msg + '</span></div>' + oldForm;
}
</script>
</body>
As you see the labels 'Username' and 'Password' are animated up when selecting the input. But when google chrome auto-fills them, the username is automatically animated upwards, but the password label stays, as you can see here. After clicking any key on the keyboard/ mouse, the label is animated up immediately. I want the password to go up immediately. How would I do this?

drop down item to label

I have code below for a contact form I am creating. Is it possible to have whatever item the user selects in each drop down list to appear on the labels next to Location and Category on both the main page and the preview page? Anything helps, cheers.
function openNav() {
document.getElementById("myNav").classList.remove("collapsed");
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
var input = document.getElementById("txtName");
var value = input.value;
var label = document.getElementById("labelName");
label.innerHTML = value;
var input = document.getElementById("txtNumber");
var value = input.value;
var label = document.getElementById("labelNumber");
label.innerHTML = value;
var input = document.getElementById("txtEmail");
var value = input.value;
var label = document.getElementById("labelEmail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("myNav").classList.add("collapsed");
}
document.getElementById('file-upload').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
document.getElementById('filename').innerText = filename;
var labelFile = this.value;
var lastIndex = labelFile.lastIndexOf("\\");
if (lastIndex >= 0) {
labelFile = labelFile.substring(lastIndex + 1);
}
document.getElementById('labelFile').innerText = labelFile;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:525px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
text-decoration:underline;
display: block;
color:#4CAF50;
font-family:Verdana;
font-size: 19px;
font-weight: normal;
margin-bottom: 10px;
}
#contact h6 {
text-decoration:underline;
display: block;
text-align:left;
color:#4CAF50;
font-family:Verdana;
font-size: 15px;
font-weight: normal;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
max-height:150px;/* you can change as you need it */
overflow:auto;/* to get scroll */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 525px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #F9F9F9;
overflow-x: hidden;
transition: 0.5s;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
}
.overlay.collapsed {
padding-top: 25px;
padding-bottom: 25px;
padding-left: 0;
padding-right: 0;
}
.overlay-content {
position: relative;
/*top: 5%;*/
width: 100%;
height: 100%;
text-align: center;
/*margin-top: 25px;*/
}
.overlay-content .container {
height: 100%;
}
.overlay-content fieldset:last-child {
position: absolute;
bottom: 0;
margin-bottom: 0;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
z-index: 100;
}
.overlay a:hover, .overlay a:focus {
color: #bababa;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
font-size:15px;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
float:left;
text-decoration:underline;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
text-align:left;
max-height: 115px;
overflow: auto;
}
#labelName{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelNumber{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelEmail{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelAttach{
float:left;
text-decoration:underline;
font-family:Verdana;
font-size:13px;
padding-top:12px;
color:#4CAF50;
}
#labelFile{
float:left;
font-family:Verdana;
padding-top:16px;
font-size:10px;
padding-left:7px;
}
#filename{
font-family:Verdana;
font-size:10px;
padding-top:16px;
}
#labelLocation{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelLocation1{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelCategory{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelCategory1{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn" id="my-location">Location</button>
<div class="dropdown-content">
Gibraltar House
WLSC
CMF
Motorized
Telepharmacy
Anchorage-PAW
ADC
NSQM
Bellevue-PAW
PNW
</div>
</div>
<div class="dropdown">
<button class="dropbtn" id="my-category">Category</button>
<div class="dropdown-content">
401K
Accidental Death & Dismemberment
Banking Info Change
Bereavement
Building Access
Canada Savings Bonds
Compensation
Customer Incident
Direct Deposit
Effectiveness Assessment Process
Employee and Family Assistance Program
Employee Discount
Employee History
Employee Ownership Plan
Employee Referral Program
Employee Survey
Employment Eligibility Verification
Expenses
Group Health & Dental
Group RRSP
Health & Safety
Health Savings Account
Holiday Calendar
Holidays/Leaves
Life Insurance
Medical Dental & Vision
New Hire Orientation
Other
Payroll
Pension
Personal Info change
Policy
Position Change
Record of Employment
Recruitment
Resignation/Termination
Shipment of Personal Belongings
Short Term Disability
Short Term Incentives Program (STIP)
Sick Leave
Tax Form
Temporary Disability Insurance
Time and Attendance
Training
Tuition Assistance Program (TAP)
Vacation
Work Schedule
Workers Compensation
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<label id="label">Location:</label>
<label id="labelLocation1">Show choice here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
<label id="labelCategory1">Show choice here</label>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail..." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input id="txtName" placeholder="Name" type="text" tabindex="4" >
<input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<fieldset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<p id="filename" style="display: inline-block"></p>
<div id="myNav" class="overlay collapsed">
×
<div class="overlay-content">
<div class="container">
<h5>Summary</h5>
<fieldset class="fieldset">
<label id="label">Location:</label>
<label id="labelLocation">Show here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
<label id="labelCategory">Show here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
</fieldset>
<h6>Contact Information</h6>
<fieldset class="fieldset">
<label id="label">Name:</label>
<label id="labelName"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Contact Number:</label>
<label id="labelNumber"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Email:</label>
<label id="labelEmail"></label>
</fieldset>
<fieldset class="fieldset">
<label id="labelAttach">Attachment:</label>
<label id="labelFile"></label>
<button name="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</div>
</div>
</div>
<span id="button" onclick="openNav()">Preview</span>
</fieldset>
</form>
</div>

I've added the ID category-dropdown and location-dropdown to the divs that contain the list elements.
addDropdownEventListeners loops through all of the list elements and adds a click event listener to each. When a user clicks a list element, it will add the innerHTML corresponding label.
var categoryItems = document.querySelectorAll("#category-dropdown > a"),
locationItems = document.querySelectorAll("#location-dropdown > a");
addDropdownEventListeners(categoryItems, 'Category');
addDropdownEventListeners(locationItems, 'Location');
function addDropdownEventListeners(items, labelName) {
for (var i = 0; i < items.length; i++) {
items[i].addEventListener("click", function(e) {
document.getElementById("label" + labelName + "1").innerHTML = e.target.innerHTML;
document.getElementById("label" + labelName).innerHTML = e.target.innerHTML;
});
}
}
Implemented into your code
var categoryItems = document.querySelectorAll("#category-dropdown > a"),
locationItems = document.querySelectorAll("#location-dropdown > a");
addDropdownEventListeners(categoryItems, 'Category');
addDropdownEventListeners(locationItems, 'Location');
function addDropdownEventListeners(items, labelName) {
for (var i = 0; i < items.length; i++) {
items[i].addEventListener("click", function(e) {
document.getElementById("label" + labelName + "1").innerHTML = e.target.innerHTML;
document.getElementById("label" + labelName).innerHTML = e.target.innerHTML;
});
}
}
function openNav() {
document.getElementById("myNav").classList.remove("collapsed");
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
var input = document.getElementById("txtName");
var value = input.value;
var label = document.getElementById("labelName");
label.innerHTML = value;
var input = document.getElementById("txtNumber");
var value = input.value;
var label = document.getElementById("labelNumber");
label.innerHTML = value;
var input = document.getElementById("txtEmail");
var value = input.value;
var label = document.getElementById("labelEmail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("myNav").classList.add("collapsed");
}
document.getElementById('file-upload').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
document.getElementById('filename').innerText = filename;
var labelFile = this.value;
var lastIndex = labelFile.lastIndexOf("\\");
if (lastIndex >= 0) {
labelFile = labelFile.substring(lastIndex + 1);
}
document.getElementById('labelFile').innerText = labelFile;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:525px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
text-decoration:underline;
display: block;
color:#4CAF50;
font-family:Verdana;
font-size: 19px;
font-weight: normal;
margin-bottom: 10px;
}
#contact h6 {
text-decoration:underline;
display: block;
text-align:left;
color:#4CAF50;
font-family:Verdana;
font-size: 15px;
font-weight: normal;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
max-height:150px;/* you can change as you need it */
overflow:auto;/* to get scroll */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 525px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #F9F9F9;
overflow-x: hidden;
transition: 0.5s;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
}
.overlay.collapsed {
padding-top: 25px;
padding-bottom: 25px;
padding-left: 0;
padding-right: 0;
}
.overlay-content {
position: relative;
/*top: 5%;*/
width: 100%;
height: 100%;
text-align: center;
/*margin-top: 25px;*/
}
.overlay-content .container {
height: 100%;
}
.overlay-content fieldset:last-child {
position: absolute;
bottom: 0;
margin-bottom: 0;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
z-index: 100;
}
.overlay a:hover, .overlay a:focus {
color: #bababa;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
font-size:15px;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
float:left;
text-decoration:underline;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
text-align:left;
max-height: 115px;
overflow: auto;
}
#labelName{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelNumber{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelEmail{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelAttach{
float:left;
text-decoration:underline;
font-family:Verdana;
font-size:13px;
padding-top:12px;
color:#4CAF50;
}
#labelFile{
float:left;
font-family:Verdana;
padding-top:16px;
font-size:10px;
padding-left:7px;
}
#filename{
font-family:Verdana;
font-size:10px;
padding-top:16px;
}
#labelLocation{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelLocation1{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelCategory{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelCategory1{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn" id="my-location">Location</button>
<div class="dropdown-content" id="location-dropdown">
Gibraltar House
WLSC
CMF
Motorized
Telepharmacy
Anchorage-PAW
ADC
NSQM
Bellevue-PAW
PNW
</div>
</div>
<div class="dropdown">
<button class="dropbtn" id="my-category">Category</button>
<div class="dropdown-content" id="category-dropdown">
401K
Accidental Death & Dismemberment
Banking Info Change
Bereavement
Building Access
Canada Savings Bonds
Compensation
Customer Incident
Direct Deposit
Effectiveness Assessment Process
Employee and Family Assistance Program
Employee Discount
Employee History
Employee Ownership Plan
Employee Referral Program
Employee Survey
Employment Eligibility Verification
Expenses
Group Health & Dental
Group RRSP
Health & Safety
Health Savings Account
Holiday Calendar
Holidays/Leaves
Life Insurance
Medical Dental & Vision
New Hire Orientation
Other
Payroll
Pension
Personal Info change
Policy
Position Change
Record of Employment
Recruitment
Resignation/Termination
Shipment of Personal Belongings
Short Term Disability
Short Term Incentives Program (STIP)
Sick Leave
Tax Form
Temporary Disability Insurance
Time and Attendance
Training
Tuition Assistance Program (TAP)
Vacation
Work Schedule
Workers Compensation
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<label id="label">Location:</label>
<label id="labelLocation1">Show choice here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
<label id="labelCategory1">Show choice here</label>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail..." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input id="txtName" placeholder="Name" type="text" tabindex="4" >
<input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<fieldset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<p id="filename" style="display: inline-block"></p>
<div id="myNav" class="overlay collapsed">
×
<div class="overlay-content">
<div class="container">
<h5>Summary</h5>
<fieldset class="fieldset">
<label id="label">Location:</label>
<label id="labelLocation">Show here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
<label id="labelCategory">Show here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
</fieldset>
<h6>Contact Information</h6>
<fieldset class="fieldset">
<label id="label">Name:</label>
<label id="labelName"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Contact Number:</label>
<label id="labelNumber"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Email:</label>
<label id="labelEmail"></label>
</fieldset>
<fieldset class="fieldset">
<label id="labelAttach">Attachment:</label>
<label id="labelFile"></label>
<button name="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</div>
</div>
</div>
<span id="button" onclick="openNav()">Preview</span>
</fieldset>
</form>
</div>

Try this. I have done with jquery. If you don't want to use jquery please tell and I will try without it.
$(function(){
$('#abc a').click(function(){
var location=$(this).text();
$('#labelLocation1').text(location);
});
});
$(function(){
$('#xyz a').click(function(){
var category=$(this).text();
$('#labelCategory1').text(category);
});
});
function openNav() {
document.getElementById("myNav").classList.remove("collapsed");
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
var input = document.getElementById("txtName");
var value = input.value;
var label = document.getElementById("labelName");
label.innerHTML = value;
var input = document.getElementById("txtNumber");
var value = input.value;
var label = document.getElementById("labelNumber");
label.innerHTML = value;
var input = document.getElementById("txtEmail");
var value = input.value;
var label = document.getElementById("labelEmail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("myNav").classList.add("collapsed");
}
document.getElementById('file-upload').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
document.getElementById('filename').innerText = filename;
var labelFile = this.value;
var lastIndex = labelFile.lastIndexOf("\\");
if (lastIndex >= 0) {
labelFile = labelFile.substring(lastIndex + 1);
}
document.getElementById('labelFile').innerText = labelFile;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:525px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
text-decoration:underline;
display: block;
color:#4CAF50;
font-family:Verdana;
font-size: 19px;
font-weight: normal;
margin-bottom: 10px;
}
#contact h6 {
text-decoration:underline;
display: block;
text-align:left;
color:#4CAF50;
font-family:Verdana;
font-size: 15px;
font-weight: normal;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
max-height:150px;/* you can change as you need it */
overflow:auto;/* to get scroll */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 525px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #F9F9F9;
overflow-x: hidden;
transition: 0.5s;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
}
.overlay.collapsed {
padding-top: 25px;
padding-bottom: 25px;
padding-left: 0;
padding-right: 0;
}
.overlay-content {
position: relative;
/*top: 5%;*/
width: 100%;
height: 100%;
text-align: center;
/*margin-top: 25px;*/
}
.overlay-content .container {
height: 100%;
}
.overlay-content fieldset:last-child {
position: absolute;
bottom: 0;
margin-bottom: 0;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
z-index: 100;
}
.overlay a:hover, .overlay a:focus {
color: #bababa;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
font-size:15px;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
float:left;
text-decoration:underline;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
text-align:left;
max-height: 115px;
overflow: auto;
}
#labelName{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelNumber{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelEmail{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelAttach{
float:left;
text-decoration:underline;
font-family:Verdana;
font-size:13px;
padding-top:12px;
color:#4CAF50;
}
#labelFile{
float:left;
font-family:Verdana;
padding-top:16px;
font-size:10px;
padding-left:7px;
}
#filename{
font-family:Verdana;
font-size:10px;
padding-top:16px;
}
#labelLocation{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelLocation1{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelCategory{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelCategory1{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form id="contact">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn" id="my-location">Location</button>
<div class="dropdown-content" id="abc">
Gibraltar House
WLSC
CMF
Motorized
Telepharmacy
Anchorage-PAW
ADC
NSQM
Bellevue-PAW
PNW
</div>
</div>
<div class="dropdown">
<button class="dropbtn" id="my-category">Category</button>
<div class="dropdown-content" id="xyz">
401K
Accidental Death & Dismemberment
Banking Info Change
Bereavement
Building Access
Canada Savings Bonds
Compensation
Customer Incident
Direct Deposit
Effectiveness Assessment Process
Employee and Family Assistance Program
Employee Discount
Employee History
Employee Ownership Plan
Employee Referral Program
Employee Survey
Employment Eligibility Verification
Expenses
Group Health & Dental
Group RRSP
Health & Safety
Health Savings Account
Holiday Calendar
Holidays/Leaves
Life Insurance
Medical Dental & Vision
New Hire Orientation
Other
Payroll
Pension
Personal Info change
Policy
Position Change
Record of Employment
Recruitment
Resignation/Termination
Shipment of Personal Belongings
Short Term Disability
Short Term Incentives Program (STIP)
Sick Leave
Tax Form
Temporary Disability Insurance
Time and Attendance
Training
Tuition Assistance Program (TAP)
Vacation
Work Schedule
Workers Compensation
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<label id="label">Location:</label>
<label id="labelLocation1">Show choice here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
<label id="labelCategory1">Show choice here</label>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail..." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input id="txtName" placeholder="Name" type="text" tabindex="4" >
<input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<fieldset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<p id="filename" style="display: inline-block"></p>
<div id="myNav" class="overlay collapsed">
×
<div class="overlay-content">
<div class="container">
<h5>Summary</h5>
<fieldset class="fieldset">
<label id="label">Location:</label>
<label id="labelLocation">Show here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
<label id="labelCategory">Show here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
</fieldset>
<h6>Contact Information</h6>
<fieldset class="fieldset">
<label id="label">Name:</label>
<label id="labelName"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Contact Number:</label>
<label id="labelNumber"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Email:</label>
<label id="labelEmail"></label>
</fieldset>
<fieldset class="fieldset">
<label id="labelAttach">Attachment:</label>
<label id="labelFile"></label>
<button name="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</div>
</div>
</div>
<span id="button" onclick="openNav()">Preview</span>
</fieldset>
</form>
</div>

Getting info from placeholder to label

I have code below for a contact form I am creating using HTML, CSS and JavaScript. Is it possible to have label2 under the preview button page to say whatever the user typed into the Detail placeholder on the main page? So if someone wrote "Hello" in the Detail placeholder, label2 on the preview page would say "Hello". Anything helps, cheers.
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:477px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
color:white;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: 300;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#label2{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input placeholder="Name" type="text" tabindex="4">
<input placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<filedset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<form id="contact" action="" method="post">
<fieldset class"fieldset">
<h5>Summary</h5>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="label2">Detail Information Here...</label>
</fieldset>
<!-- <fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset> -->
</form>
</div>
</div>
</div>
<span id="button"" onclick="openNav()">Preview</span>
<fieldset>
</form>
</div>

You could add a new label which contains the value of the relative input, then set its innerHTML with the value you need, so:
add an id to the detail input (placeholder) (ex: id="txtDetail")
add a label (near the label "Detail:" to show the value of txtDetail
finally, before to show the preview, copy the value from txtDatail to label, like:
var input = document.getElementById("txtDetail");
var value = input.value; //<-- getting the value from input text
var label = document.getElementById("labelDetail");
label.innerHTML = value; //<-- setting that value in the label in preview section
See following snippet, please:
function openNav() {
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:477px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
color:white;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: 300;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#label2{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input placeholder="Name" type="text" tabindex="4">
<input placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<filedset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<form id="contact" action="" method="post">
<fieldset class"fieldset">
<h5>Summary</h5>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
<label id="label2">Detail Information Here...</label>
</fieldset>
<!-- <fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset> -->
</form>
</div>
</div>
</div>
<span id="button"" onclick="openNav()">Preview</span>
<fieldset>
</form>
</div>
I hope it helps you, bye.

you can use jQuery. here is your edited fiddle:
function openNav() {
document.getElementById("myNav").style.width = "100%";
var detail = $('textarea').val(); //gets the value in the textarea
$('#label2').text(detail); //inserts the value into label2
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:477px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
color:white;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: 300;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#label2{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form id="contact" action="" method="post">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input placeholder="Name" type="text" tabindex="4">
<input placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<filedset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<form id="contact" action="" method="post">
<fieldset class"fieldset">
<h5>Summary</h5>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="label2">Detail Information Here...</label>
</fieldset>
<!-- <fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset> -->
</form>
</div>
</div>
</div>
<span id="button"" onclick="openNav()">Preview</span>
<fieldset>
</form>
</div>

Cannot get two contact forms centerd next to each other

I've been looking at CSS tutorials for hours trying different ways to get them inline, but I can't seem to do it.
I'm currently learning the best techniques for UI/UX and I'm using Copdepen for inspiration.
I'm trying to get these two forms inline with each other.
Any help would be great.
I made a fiddle which renders the contact form properly not the other component which is a map.
Here's the Codepen of the correct working map UI.
You can also use the following snippet:
var myCenter = new google.maps.LatLng(51.308742, -0.320850);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
body {
margin: 0;
background: #78909C
}
.map {
width: 700px;
height: 380px;
margin: calc(50vh - 190px) auto;
box-shadow: 0 0 40px -10px black;
background: rgb(240, 240, 240);
font-family: 'Montserrat', sans-serif;
max-width: calc(100vw - 60px)
}
#map {
width: 65%;
height: 380px;
display: inline-block
}
.map-c {
float: right;
width: 35%;
height: 100%;
padding: 25px;
box-sizing: border-box
}
h1 {
margin: 0;
font-weight: normal;
color: rgb(60, 60, 70);
font-size: 28px
}
p {
font-size: 13px;
margin-top: 20px;
margin-bottom: 30px
}
.det {
font-size: 12px;
margin-bottom: 15px
}
i {
float: left;
font-size: 18px !important;
margin: 0 8px 0 0
}
button {
margin: 15px 4px;
padding: 13px 9px;
display: inline-block;
cursor: pointer;
background: none;
color: #546973;
border: 2px solid #78909C;
transition: all 0.3s;
border-radius: 8px;
outline: 0
}
button:hover {
border-color: rgb(90, 90, 90);
color: rgb(90, 90, 90)
}
button:after {
content: 'Directions';
font-family: 'Montserrat', sans-serif;
display: block;
font-size: 11px;
margin-top: 8px
}
.fa-envelope:after {
content: 'Email';
margin: 8px 13px 0
}
#media only screen and (max-width: 720px) {
.map {
height: 450px;
margin: calc(50vh - 225px) auto;
overflow: hidden
}
#map {
width: 100%;
height: 200px;
}
.map-c {
float: right;
width: 100%;
}
button {
float: right;
margin-top: -75px
}
}
#media only screen and (max-width: 460px) {
p {
display: none
}
h1 {
margin-bottom: 20px
}
button {
float: none;
margin-top: 10px
}
.det {
margin-bottom: 9px
}
}
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 12px;
line-height: 30px;
color: #777;
background: #FFFF;
}
.container {
max-width: 400px;
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px"Open Sans", Helvetica, Arial, sans-serif;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 50px 0;
}
#contact h3 {
color: #F96;
display: block;
font-size: 30px;
font-weight: 400;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #CCC;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #AAA;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #0CF;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #09C;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #999;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Quick Contact</h3>
<h4>Contact us today, and get reply with in 24 hours!</h4>
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="Your Web Site starts with http://" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Type your Message Here...." tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
<div class="map">
<div id="map"></div>
<div class="map-c">
<h1>ABC Stores</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium id cumque est dolores voluptatibus.</p>
<div class="det"><i class="fa fa-map-marker"></i> 102 New Road, New City</div>
<div class="det"><i class="fa fa-phone"></i> 001 2045 509</div>
<div class="det"><i class="fa fa-globe"></i> www.abcstores.com</div>
<center>
<button class="fa fa-car"></button>
<button class="fa fa-envelope"></button>
</center>
</div>
</div>

You can use an html table:
<table>
<tr>
<td>
<form>
...
</form>
</td>
<td>
<form>
...
</form>
</td>
</tr>
</table>
this is my preffered method for getting elements inline. I don't know if you wanted a CSS answer, but this will work.

Trying to implement a simple slideshow - Wont work

I´ve trying to implement this simple slideshow: http://codepen.io/rafaelcastrocouto/pen/doZNMo
But im not having sucess and i dont know what the problem is, the only thing that shows up is the last image of the slideshow, i added the path to the js file, checked if the name are correct, but stil no luck.
var seconds = 2; //time beetwen auto slide
var delay = 8; //time to restart auto slide
var slider = $('#slider');
var images = $('#slider .images');
var controls = $('<div>').addClass('controls');
slider.after(controls);
var width = images.width();
var slideClick = function() {
var b = $(this);
$('.controls div').removeClass('current');
b.addClass('current');
var index = b.index();
images.css('left', -1 * index * width);
};
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div>');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
button.click(function() {
clearInterval(autoSlideInterval);
slideClick.apply(this);
setTimeout(function() {
setInterval(autoSlide, seconds * 1000);
}, delay * 1000);
});
});
var autoSlide = function() {
var next = $('.controls .current').next();
if (next.length) {
slideClick.apply(next);
} else {
var first = $('.controls div').first();
slideClick.apply(first);
}
};
var autoSlideInterval = setInterval(autoSlide, seconds * 1000);
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 90px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 90px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
border: 2px solid #ddd;
margin: 1em auto;
width: 350px;
height: 250px;
overflow: hidden;
}
#slider .images {
position: relative;
transition: left 0.5s;
left: 0;
}
#slider .images img {
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 8px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: firebrick;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/fixedbar.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/slider.js"></script>
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" alt="Image-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FFCC47&txtclr=ffffff&txt=Image-2&w=350&h=250" alt="Image-2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" alt="Image-3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=4763FF&txtclr=ffffff&txt=Image-4&w=350&h=250" alt="Image-4" />
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
Send
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
</body>
</html>

I believe your jquery wasn't included. Here is the same code with jquery included and the slideshow working.
var seconds = 2; //time beetwen auto slide
var delay = 8; //time to restart auto slide
var slider = $('#slider');
var images = $('#slider .images');
var controls = $('<div>').addClass('controls');
slider.after(controls);
var width = images.width();
var slideClick = function() {
var b = $(this);
$('.controls div').removeClass('current');
b.addClass('current');
var index = b.index();
images.css('left', -1 * index * width);
};
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div>');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
button.click(function() {
clearInterval(autoSlideInterval);
slideClick.apply(this);
setTimeout(function() {
setInterval(autoSlide, seconds * 1000);
}, delay * 1000);
});
});
var autoSlide = function() {
var next = $('.controls .current').next();
if (next.length) {
slideClick.apply(next);
} else {
var first = $('.controls div').first();
slideClick.apply(first);
}
};
var autoSlideInterval = setInterval(autoSlide, seconds * 1000);
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 90px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 90px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
border: 2px solid #ddd;
margin: 1em auto;
width: 350px;
height: 250px;
overflow: hidden;
}
#slider .images {
position: relative;
transition: left 0.5s;
left: 0;
}
#slider .images img {
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 8px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: firebrick;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/fixedbar.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/slider.js"></script>
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" alt="Image-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FFCC47&txtclr=ffffff&txt=Image-2&w=350&h=250" alt="Image-2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" alt="Image-3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=4763FF&txtclr=ffffff&txt=Image-4&w=350&h=250" alt="Image-4" />
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
Send
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

How to make form display marquee after submitting? - javascript

Related

CSS animation not happening when chrome auto-completes password

drop down item to label

Getting info from placeholder to label

Cannot get two contact forms centerd next to each other

Trying to implement a simple slideshow - Wont work

Categories

Resources