Hi i am creating this app and then i use javascript so that whatever i input in the boxes i could see it in my DETAILS HISTORY. and i did insert cells and stuff but when i run it i could see my table data getting inserted but only a few seconds then it will disappear i dont know why i hope you cn help me <3. here below is my codes
let enter = document.getElementById("btn");
enter.addEventListener("click", displayFunction);
let row = 1;
function displayFunction() {
let detail = document.getElementById("detail-input").value;
let amount = document.getElementById("amount-input").value;
if (!detail || !amount) {
alert("Please Fill in the Boxes");
return;
}
let table = document.getElementById("myTable");
let newRow = table.insertRow(row);
let cell1 = newRow.insertCell(0);
let cell2 = newRow.insertCell(1);
cell1.innerHTML = detail;
cell2.innerHTML = amount;
row++;
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins";
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.685);
}
.form-container {
min-width: 500px;
min-height: 600px;
background: linear-gradient(
55deg,
rgb(71, 126, 247),
rgba(53, 52, 52, 0.295)
);
padding: 20px 30px;
border: 5px solid rgb(37, 37, 49);
border-radius: 10px;
text-align: center;
color: rgb(58, 57, 57);
box-shadow: 2px 2px 20px #333;
position: relative;
}
.form-container h1 {
margin-bottom: 2rem;
}
.form-container h3 {
margin-bottom: 2rem;
position: relative;
}
.form-container h3::before {
content: "";
width: 4rem;
height: 2px;
background-color: rgb(41, 32, 32);
position: absolute;
top: 50%;
left: 20%;
}
.form-container h3::after {
content: "";
width: 4rem;
height: 2px;
background-color: rgb(41, 32, 32);
position: absolute;
top: 50%;
right: 20%;
}
form {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
form input {
width: 100%;
height: 100%;
padding: 10px;
background: none;
outline: none;
border: none;
border-bottom: 2px solid rgb(41, 32, 32);
}
.detail {
margin-top: 20px;
}
.amount {
margin-top: 50px;
}
#btn {
text-decoration: none;
color: #000;
border: 1px solid;
border-radius: 20px;
background: #fff;
padding: 10px 20px;
position: absolute;
bottom: 28%;
cursor: pointer;
transition: 500ms ease-out;
}
#btn:hover {
background: #000;
color: #fff;
}
.history {
margin-top: 80px;
display: flex;
justify-content: space-around;
align-items: center;
}
.col-2 {
border: 1px solid;
padding: 5px 10px;
background: #fff;
}
.label-1 {
color: green;
}
.label-2 {
color: red;
}
.label-3 {
color: rgb(24, 166, 223);
}
.details-container {
margin-left: 10px;
width: 500px;
height: 600px;
border: 5px solid #333;
border-radius: 10px;
text-align: center;
background: linear-gradient(
55deg,
rgb(71, 126, 247),
rgba(53, 52, 52, 0.295)
);
}
.details-container h1 {
margin-top: 20px;
}
#myTable {
border-collapse: collapse;
background: #fff;
border: 1px solid;
width: 100%;
}
#myTable,
td,
th {
border: 2px solid;
padding: 10px 20px;
}
td {
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Expenses Tracker App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="form-container">
<h1>EXPENSES TRACKER APP</h1>
<h3>New Entry</h3>
<form id="form">
<div class="detail">
<div class="col-1">
<label>Details</label>
<input type="text" id="detail-input" />
</div>
</div>
<div class="amount">
<div class="col-1">
<label>Amount</label>
<input type="number" id="amount-input" />
</div>
</div>
<button id="btn">Enter</button>
</form>
<div class="history">
<div class="col-2 col-ie">
<p class="label-1">INFLOW</p>
<p id="inflow">$0.00</p>
</div>
<div class="col-2">
<p class="label-2">OUTFLOW</p>
<p id="outflow">$0.00</p>
</div>
<div class="col-2">
<p class="label-3">BALANCE</p>
<p id="balance">$0.00</p>
</div>
</div>
</div>
<div class="details-container">
<h1>DETAILS HISTORY</h1>
<table id="myTable">
<tr>
<th>Details</th>
<th>Amount</th>
</tr>
</table>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
You are submitting the form - you can change the button to type="button" OR
Don't use a submit button click to perform code, instead use the submit event and preventDefault()
let enter = document.getElementById("form").addEventListener("submit", displayFunction);
function displayFunction(e) {
e.preventDefault(); <<<
let enter = document.getElementById("form").addEventListener("submit", displayFunction);
let row = 1;
function displayFunction(e) {
e.preventDefault();
let detail = document.getElementById("detail-input").value;
let amount = document.getElementById("amount-input").value;
if (!detail || !amount) {
alert("Please Fill in the Boxes");
return;
}
let table = document.getElementById("myTable");
let newRow = table.insertRow(row);
let cell1 = newRow.insertCell(0);
let cell2 = newRow.insertCell(1);
cell1.innerHTML = detail;
cell2.innerHTML = amount;
row++;
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins";
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.685);
}
.form-container {
min-width: 500px;
min-height: 600px;
background: linear-gradient( 55deg, rgb(71, 126, 247), rgba(53, 52, 52, 0.295));
padding: 20px 30px;
border: 5px solid rgb(37, 37, 49);
border-radius: 10px;
text-align: center;
color: rgb(58, 57, 57);
box-shadow: 2px 2px 20px #333;
position: relative;
}
.form-container h1 {
margin-bottom: 2rem;
}
.form-container h3 {
margin-bottom: 2rem;
position: relative;
}
.form-container h3::before {
content: "";
width: 4rem;
height: 2px;
background-color: rgb(41, 32, 32);
position: absolute;
top: 50%;
left: 20%;
}
.form-container h3::after {
content: "";
width: 4rem;
height: 2px;
background-color: rgb(41, 32, 32);
position: absolute;
top: 50%;
right: 20%;
}
form {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
form input {
width: 100%;
height: 100%;
padding: 10px;
background: none;
outline: none;
border: none;
border-bottom: 2px solid rgb(41, 32, 32);
}
.detail {
margin-top: 20px;
}
.amount {
margin-top: 50px;
}
#btn {
text-decoration: none;
color: #000;
border: 1px solid;
border-radius: 20px;
background: #fff;
padding: 10px 20px;
position: absolute;
bottom: 28%;
cursor: pointer;
transition: 500ms ease-out;
}
#btn:hover {
background: #000;
color: #fff;
}
.history {
margin-top: 80px;
display: flex;
justify-content: space-around;
align-items: center;
}
.col-2 {
border: 1px solid;
padding: 5px 10px;
background: #fff;
}
.label-1 {
color: green;
}
.label-2 {
color: red;
}
.label-3 {
color: rgb(24, 166, 223);
}
.details-container {
margin-left: 10px;
width: 500px;
height: 600px;
border: 5px solid #333;
border-radius: 10px;
text-align: center;
background: linear-gradient( 55deg, rgb(71, 126, 247), rgba(53, 52, 52, 0.295));
}
.details-container h1 {
margin-top: 20px;
}
#myTable {
border-collapse: collapse;
background: #fff;
border: 1px solid;
width: 100%;
}
#myTable,
td,
th {
border: 2px solid;
padding: 10px 20px;
}
td {
color: #000;
}
<div class="container">
<div class="form-container">
<h1>EXPENSES TRACKER APP</h1>
<h3>New Entry</h3>
<form id="form">
<div class="detail">
<div class="col-1">
<label>Details</label>
<input type="text" id="detail-input" />
</div>
</div>
<div class="amount">
<div class="col-1">
<label>Amount</label>
<input type="number" id="amount-input" />
</div>
</div>
<button id="btn">Enter</button>
</form>
<div class="history">
<div class="col-2 col-ie">
<p class="label-1">INFLOW</p>
<p id="inflow">$0.00</p>
</div>
<div class="col-2">
<p class="label-2">OUTFLOW</p>
<p id="outflow">$0.00</p>
</div>
<div class="col-2">
<p class="label-3">BALANCE</p>
<p id="balance">$0.00</p>
</div>
</div>
</div>
<div class="details-container">
<h1>DETAILS HISTORY</h1>
<table id="myTable">
<tr>
<th>Details</th>
<th>Amount</th>
</tr>
</table>
</div>
</div>
let enter = document.getElementById("btn");
enter.addEventListener("click", displayFunction);
let row = 1;
function displayFunction() {
let detail = document.getElementById("detail-input").value;
let amount = document.getElementById("amount-input").value;
if (!detail || !amount) {
alert("Please Fill in the Boxes");
return;
}
let table = document.getElementById("myTable");
console.log(table)
let newRow = table.insertRow(row);
let cell1 = newRow.insertCell(0);
console.log(newRow);
let cell2 = newRow.insertCell(1);
cell1.innerHTML = detail;
cell2.innerHTML = amount;
row++;
return;
}
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins";
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.685);
}
.form-container {
min-width: 500px;
min-height: 600px;
background: linear-gradient(
55deg,
rgb(71, 126, 247),
rgba(53, 52, 52, 0.295)
);
padding: 20px 30px;
border: 5px solid rgb(37, 37, 49);
border-radius: 10px;
text-align: center;
color: rgb(58, 57, 57);
box-shadow: 2px 2px 20px #333;
position: relative;
}
.form-container h1 {
margin-bottom: 2rem;
}
.form-container h3 {
margin-bottom: 2rem;
position: relative;
}
.form-container h3::before {
content: "";
width: 4rem;
height: 2px;
background-color: rgb(41, 32, 32);
position: absolute;
top: 50%;
left: 20%;
}
.form-container h3::after {
content: "";
width: 4rem;
height: 2px;
background-color: rgb(41, 32, 32);
position: absolute;
top: 50%;
right: 20%;
}
form {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
form input {
width: 100%;
height: 100%;
padding: 10px;
background: none;
outline: none;
border: none;
border-bottom: 2px solid rgb(41, 32, 32);
}
.detail {
margin-top: 20px;
}
.amount {
margin-top: 50px;
}
#btn {
text-decoration: none;
color: #000;
border: 1px solid;
border-radius: 20px;
background: #fff;
padding: 10px 20px;
position: absolute;
bottom: 28%;
cursor: pointer;
transition: 500ms ease-out;
}
#btn:hover {
background: #000;
color: #fff;
}
.history {
margin-top: 80px;
display: flex;
justify-content: space-around;
align-items: center;
}
.col-2 {
border: 1px solid;
padding: 5px 10px;
background: #fff;
}
.label-1 {
color: green;
}
.label-2 {
color: red;
}
.label-3 {
color: rgb(24, 166, 223);
}
.details-container {
margin-left: 10px;
width: 500px;
height: 600px;
border: 5px solid #333;
border-radius: 10px;
text-align: center;
background: linear-gradient(
55deg,
rgb(71, 126, 247),
rgba(53, 52, 52, 0.295)
);
}
.details-container h1 {
margin-top: 20px;
}
#myTable {
border-collapse: collapse;
background: #fff;
border: 1px solid;
width: 100%;
}
#myTable,
td,
th {
border: 2px solid;
padding: 10px 20px;
}
td {
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Expenses Tracker App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="form-container">
<h1>EXPENSES TRACKER APP</h1>
<h3>New Entry</h3>
<div id="form">
<div class="detail">
<div class="col-1">
<label>Details</label>
<input type="text" id="detail-input" />
</div>
</div>
<div class="amount">
<div class="col-1">
<label>Amount</label>
<input type="number" id="amount-input" />
</div>
</div>
</div>
<button id="btn">Enter</button>
<div class="history">
<div class="col-2 col-ie">
<p class="label-1">INFLOW</p>
<p id="inflow">$0.00</p>
</div>
<div class="col-2">
<p class="label-2">OUTFLOW</p>
<p id="outflow">$0.00</p>
</div>
<div class="col-2">
<p class="label-3">BALANCE</p>
<p id="balance">$0.00</p>
</div>
</div>
</div>
<div class="details-container">
<h1>DETAILS HISTORY</h1>
<table id="myTable">
<tr>
<th>Details</th>
<th>Amount</th>
</tr>
</table>
</div>
</div>
</body>
</html>
thats correct its because you use form here is result after replacing with div.
[https://jsfiddle.net/vishalpatil550/5xmu081o/7/][1]
Related
I'm trying to append the picture that inserted, so it can be viewed.
So here the code where i can input or insert the picture :
<style>
body {
height: 100%;
padding: 0;
margin: 0;
background-color: white;
max-width: 1920px;
}
.main-container {
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background-image: url('/img/');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.listing-container {
width: 60%;
padding: 30px;
margin: auto;
border-radius: 35px;
box-shadow: 0px 0px 7px #00000029;
background-color: white;
}
.input-credential {
color: #3C58A7;
}
.form-label {
margin-left: 15px;
font-size: 25px;
font-family: Montserrat-Bold;
}
.question-mark {
color: #3C58A7;
}
.question-mark:hover {
cursor: pointer;
}
.form-control {
font-family: Montserrat-Regular;
}
.input-border {
padding-bottom: 15px;
padding-top: 15px;
border-radius: 25px;
box-shadow: 0px 0px 5px #00000029;
}
.error-message {
font-size: 16px;
color: red;
padding: 15px 12px;
font-family: Montserrat-Regular;
}
.input-gambar {
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
#input-gambar-text {
padding-left: 42.5%;
color: #3C58A7;
}
#input-gambar-text:hover {
color: rgb(103, 99, 99);
}
.grid {
margin-top: 50px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}
.grid .form-element {
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px 5px rgba(100, 100, 100, 0.1);
}
.grid .form-element input {
display: none;
}
.grid .form-element img {
width: 200px;
height: 200px;
}
.grid .form-element div {
position: relative;
height: 40px;
margin-top: -40px;
background: rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 40px;
font-size: 13px;
color: #f5f5f5;
font-weight: 600;
}
.grid .form-element div span {
font-size: 40px;
}
#tombol-cancel-gambar {
margin: auto;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 25px;
color: white;
font-size: 25px;
background-color: #3C58A7;
border-radius: 45px;
border-color: #3C58A7;
font-family: Montserrat-Bold;
align-items: center;
display: flex;
}
#tombol-cancel-gambar:hover {
color: #3C58A7;
background-color: white;
border-color: #3C58A7;
}
</style>
<body>
<div class="main-container">
<div class="listing-container">
<div class="row">
<div class="col-lg-12">
<div class="mb-3 input-credential">
<label class="form-label" for="myfile">
Masukkan Gambar
<span class="question-mark" data-toggle="tooltip" data-placement="bottom" title="Masukkan gambar produk anda">
<i class="fas fa-question-circle"></i>
</span>
</label>
<div class="grid" id="preview_test1">
<div class="form-element" id="test1">
<input type="file" id="file-1" accept="image/*" multiple>
<label for="file-1" id="file-1-preview">
<img src="/img/insert_gambar_penambahan_listing_barang.jpg" alt="" id="size-preview-image">
<div>
<span>+</span>
</div>
</label>
</div>
</div>
<div id="preview_test2">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
And this is the function that i used to show multiple picture that i inserted :
function cancel_form_data_gambar() {
$("#preview_test1").empty();
$("#preview_test2").empty();
$("#preview_test1").append('<div class="form-element" id="test1"></div>');
$("#test1").append('<input type="file" id="file-1" accept="image/*" multiple>');
$("#test1").append('<label for="file-1" id="file-1-preview"></label>');
$("#file-1-preview").append('<img src="/img/insert_gambar_penambahan_listing_barang.jpg" alt="" id="size-preview-image">');
$("#file-1-preview").append('<div> <span>+</span> </div>');
}
function readURL(input) {
$("#preview_test1").empty();
for (var i = 0; i < input.length; i++) {
$("#preview_test2").append('<img id="test_gambar' + i + '"src="#">');
}
for (var i = 0; i < input.length; i++) {
if (input.files && input.files[i]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#test_gambar' + i + '').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[i]);
}
}
$('#preview_test2').append('<button type="button" id="tombol-cancel-gambar" onclick="cancel_form_data_gambar()" class="btn btn-primary listing-button">Cancel Gambar</button>');
}
$("#file-1").change(function() {
readURL(this);
});
the picture is suppose to be showed in id="#preview_test2" after the picture was inserted. But the picture won't appear in id="#preview_test2" and only the button appear in there. So, how can i solve it?
I m making some project.
When I click "number1" button, I thought "number2" and "drag-zone" box is removed at once
But It's not happened. I have to click "number1" to three time to remove "the number2" and "drag-zone"
I want to remove that at once. What's my problem in my code?
I don't know How could I remove NodeList at once
let list = document.getElementsByClassName("boxDrop");
function remove(num) {
if (num === 0) {
for (let i = 0; i < list[1].childNodes.length; i++)
list[1].removeChild(list[1].childNodes[i]);
}
}
* {
align-items: center;
text-align: center;
justify-content: space-evenly;
}
button {
border: none;
background-color: transparent;
font-size: 20px;
border-radius: 10px;
}
button:hover {
background-color: rgb(252, 211, 77);
}
.thumbDropBox {
display: flex;
border: 3px solid rgb(209, 178, 2);
padding: 15px;
margin-top: 100px;
cursor: pointer;
}
.drop-zone {
display: flex;
border: 3px dashed rgb(253, 196, 39);
margin: 10px;
width: 200px;
height: 200px;
padding: 20px;
font-size: 30px;
font-weight: bold;
border-radius: 14px;
}
.drop-zone__over {
border-style: solid;
}
.drop-zone__input {
display: none;
}
.drop-zone__thumb {
background-color: rgb(235, 235, 235);
height: 100%;
width: 100%;
border-radius: 15px;
overflow: hidden;
position: relative;
}
.drop-zone__thumb::after {
content: attr(data-label);
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
background-color: rgb(192, 192, 192);
position: absolute;
bottom: 0;
}
.question {
display: inline-block;
padding: 20px;
font-size: 30px;
}
<div class="thumbDropBox">
<div class="boxDrop">
<div class="drop-zone">
<span class="drop-zone__prompt">Drag or Choose</span>
<input type="file" class="drop-zone__input">
<!-- <div class="drop-zone__thumb" data-label="eskdflsdf.txt"></div> -->
</div>
<button onclick="remove(0)">Number1</button>
</div>
<div class="boxDrop">
<div class="drop-zone">
<span class="drop-zone__prompt">Drag or Choose</span>
<input type="file" class="drop-zone__input">
<!-- <div class="drop-zone__thumb" data-label="eskdflsdf.txt"></div> -->
</div>
<button onclick="remove(1)">Number2</button>
</div>
</div>
<span class="question">Whose is the Better?</span>
So I have been following this youtube tutorial on how to create a login/sign up form and I've run into a problem. Whilst coding the JS, I tried testing out the continue button without any values submitted into the input groups, and nothing happened. So I went to check the console and I was met with this error message, "Uncaught TypeError: Cannot set property 'textContent' of null". The error occurs around the 'messageElement.textContent = message;' area. Any help would be greatly appreciated.
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");
messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
loginForm.addEventListener("submit", e => {
e.preventDefault();
// Perform your AJAX/Fetch login
setFormMessage(loginForm, "error", "Invalid username/password combination");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
});
inputElement.addEventListener("input", () => {
clearInputError(inputElement);
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap') * {
box-sizing: border-box;
}
/*Navugation Bar*/
nav {
z-index: 1;
height: 120px;
background: black;
box-shadow: grey;
overflow: hidden;
background-color: black;
position: sticky;
top: 0;
width: 100%;
}
nav ul {
float: centre;
text-align: center;
}
nav ul li {
display: inline-block;
line-height: 0px;
margin: 0px 15px;
padding: 30px;
}
nav ul li a {
position: sticky;
color: grey;
font-size: 20px;
text-transform: uppercase;
padding: 50px;
text-decoration: none;
width: 100px;
}
nav ul li a:hover {
color: white;
font-size: 30px
}
/*Home Page*/
.header-image {
padding: 0px;
position: sticky;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
width: 100%;
background-color: black;
height: 290px
}
#Home-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
.first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
border-bottom: 20px solid white;
}
.first-container-h2 {
color: white;
text-align: center;
font-size: 4em;
}
#second-container-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.second-container-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.second-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 20px;
}
.second-container:hover {
font-size: 1em;
color: white;
}
.logo {
float: center;
width: 20%;
float: center;
text-align: center;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-color: black;
height: 100px;
border: none
}
/* Footer*/
.footer-wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
footer {
width: 100%;
height: 300px;
float: right;
text-align: center;
position: relative;
bottom: 0;
background-color: black;
}
/*About Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.About-page-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 1em;
}
.About-page-container:hover {
font-size: 30px;
color: white;
}
.about-page-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.AB-container-h {
color: white;
text-align: center;
}
/* Resources*/
.R-first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.R-first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
}
/*Login Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
/* Login in and Sign Up Form*/
#Login-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#Login-page-main {
--color-primary-dark: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-primary-dark: #cc3333;
--color-success: #4bb544;
--color-error: red;
border-radius: 4px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 400px;
margin: 2rem;
padding: 5rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, .7);
color: white;
border: 3px solid white;
width: 1000px
}
.form--hidden {
display: none
}
.form>*:firstchild {
margin-top: 0;
}
.form>*:lastchild {
margin-bottom: 0;
}
.form__title {
margin-bottom: 2rem;
text-align: center;
font-size: 3rem;
}
.form__message {
margin-bottom: 1rem;
}
.form__message--success {
color: var(--color-success);
}
.form__message--error {
text-align: center;
color: var(--color-error);
}
.form__input-group {
margin-bottom: 2rem;
}
input,
select,
textarea {
color: white;
}
.form__input-error-message {
color: var(--color-error);
border-bottom: var(--color-error)
}
.form__input-error-message {
margin-top: 2rem;
font-size: 1.5rem;
color: var(--color-error);
}
.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: white;
background-color: rgb(0, 0, 0, .7);
outline: none;
cursor: pointer;
border: none;
border-radius: 20px
}
.form__button:hover {
background-color: white;
color: black
}
.form__button:active {
transform: scale(0.98)
}
.form__text {
font-size: 20px;
text-align: center;
cursor: pointer;
}
.form-text,
.form-textarea {
border-style: none;
}
.form__link {
text-decoration: none;
color: white
}
.form__link:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clarte Mentale - Login</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body id="Login-page">
<div class="header-image">
<a href="Home.html">
<img src="Website Header.png">
</a>
</div>
<nav>
<ul>
<li>Welcome</li>
<li>About</li>
<li>Resources</li>
<li>Login</li>
</ul>
</nav>
<div class="About-me-page-header">
<h1 style="font-size:48px">Login Page</h1>
<p style="font-size:35px">
Contents:
</p>
<ul style="font-size:25px">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<main id="Login-page-main">
<div class="container">
<div class="form-container">
<!-- Login FormUp Form-->
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<!-- Sign Up Form-->
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkLogin">Already have an account? Sign</a>
</p>
</form>
</main>
<footer>
<button class="logo" class="footer-wrapper" onclick="topFunction()" id="myBtn" title="Go to top">
<img src="Logo.png">
</button>
</footer>
<script src="Javascript.js"></script>
<script src="Login.js"></script>
</body>
</html>
You have <div class="form__messsage ... "> instead of <div class="form__message ... ">. Fixing that should work. GL.
Try and replace DomContentLoaded with load
Hi there I'm playing around with this name plate calculator as I'm lerning JS. Basically you insert your name and every letter costs 5 dollars.
When I insert an invalid name, a placeholder pops out ('Please insert a valid name') and a red border around the input field. So far so good.
What I want to do is:
-once I inserted an invalid name, when I click again on the input field I want the placeholder and the border to disappear but I don't know how to say 'is focused' in JS. I tried personName = document.activeElement but it's not working.
Here the JS code
let btn = document.querySelector('.button')
let cost = document.querySelector('.cost')
let yourPlate = document.querySelector('.yourplate')
let refresh = document.querySelector('.refresh')
btn.addEventListener('click', () => {
let personName = document.querySelector('.input').value;
yourPlate.classList.add('show');
cost.innerText = personName.trim().length * 5;
if(personName == '' || personName.length < 2) {
document.querySelector('.input').style.border = '2px solid red'
document.querySelector('.input').value = ''
document.querySelector('.input').placeholder = 'Please insert a valid name'
yourPlate.classList.remove('show')
}
})
refresh.addEventListener('click', ()=> {
document.querySelector('.input').value = '';
yourPlate.classList.remove('show')
document.querySelector('.input').style.border = 'none'
document.querySelector('.input').placeholder = ''
})
And HERE the snippet
let btn = document.querySelector('.button')
let cost = document.querySelector('.cost')
let yourPlate = document.querySelector('.yourplate')
let refresh = document.querySelector('.refresh')
btn.addEventListener('click', () => {
let personName = document.querySelector('.input').value;
yourPlate.classList.add('show');
cost.innerText = personName.trim().length * 5;
if(personName == '' || personName.length < 2) {
document.querySelector('.input').style.border = '2px solid red';
document.querySelector('.input').value = ''
document.querySelector('.input').placeholder = 'Please insert a valid name'
yourPlate.classList.remove('show')
}
})
refresh.addEventListener('click', ()=> {
document.querySelector('.input').value = '';
yourPlate.classList.remove('show')
document.querySelector('.input').style.border = 'none'
document.querySelector('.input').placeholder = ''
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: verdana;
}
body {
background: url('utah2.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
background-blend-mode: darken;
}
.body {
position: absolute;
width: 100vw;
height: 100vh;
background: rgba(20,0,0,.5);
}
.container {
height: 55vh;
min-width: 90vw;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
padding-top: 20px;
background: url('utah.jpg');
background-size: cover;
background-position: fixed;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
box-shadow: 3px 3px 10px black;
}
.calculate {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding-bottom: 20px;
width: 100%;
}
.yourplate {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.4em;
position: absolute;
top: 43%;
display: none;
}
.yourplate.show {
display: block;
}
.cost {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.8em;
}
h1 {
border-bottom: 1px solid black;
}
h3 {
position: relative;
top:-25px;
}
.input {
outline: none;
border: none;
border-radius: 5px;
height: 2em;
width: 70%;
}
.button {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
}
.refresh {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
position: relative;
top: 20px;
background: lightgreen;
}
.button:active {
transform: scale(.95);
background: rgba(0,147,255,0.5);
outline: none;
}
.dot1, .dot2, .dot3, .dot4 {
width: 15px;
height: 15px;
background: radial-gradient(rgba(150,150,150,.7), rgba(50,50,50));
border-radius: 50%;
position: absolute;
box-shadow: 1px 1px 5px black, 0 0 10px rgb(183, 65, 14);
}
.dot1 {
top: 20px;
left: 20px;
}
.dot2 {
bottom: 20px;
right: 20px;
}
.dot3 {
bottom: 20px;
left: 20px;
}
.dot4 {
top: 20px;
right: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Plate Cost</title>
</head>
<body>
<div class="body"></div>
<div class="container">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="dot4"></div>
<h1>PLATE CALCULATOR</h1>
<h3>Enter your name and calculate the cost</h3>
<p class="yourplate">Your plate costs <span class="cost"></span> dollars</p>
<div class="calculate">
<input type="text" class="input"><br>
<button type="submit" class="button">Calculate</button>
<button class="refresh">Refresh</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
You could add an additional handler for focus event.
document.querySelector('.input').addEventListener('focus', (event) => {
event.target.style.border = 'none';
event.target.placeholder = '';
})
you can add a onKeyUp funtion on your input field and check after every single input if input is valid.
you should use the focus event for that like so:
let btn = document.querySelector('.button');
let cost = document.querySelector('.cost');
let yourPlate = document.querySelector('.yourplate');
let refresh = document.querySelector('.refresh');
let input = document.querySelector('.input');
const refreshInputField = () => {
input.value = '';
yourPlate.classList.remove('show');
input.style.border = 'none';
input.placeholder = '';
}
input.addEventListener('focus', refreshInputField);
btn.addEventListener('click', () => {
let personName = document.querySelector('.input').value;
yourPlate.classList.add('show');
cost.innerText = personName.trim().length * 5;
if(personName == '' || personName.length < 2) {
input.style.border = '2px solid red';
input.value = ''
input.placeholder = 'Please insert a valid name'
yourPlate.classList.remove('show')
}
})
refresh.addEventListener('click', refreshInputField)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: verdana;
}
body {
background: url('utah2.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
background-blend-mode: darken;
}
.body {
position: absolute;
width: 100vw;
height: 100vh;
background: rgba(20,0,0,.5);
}
.container {
height: 55vh;
min-width: 90vw;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
padding-top: 20px;
background: url('utah.jpg');
background-size: cover;
background-position: fixed;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
box-shadow: 3px 3px 10px black;
}
.calculate {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding-bottom: 20px;
width: 100%;
}
.yourplate {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.4em;
position: absolute;
top: 43%;
display: none;
}
.yourplate.show {
display: block;
}
.cost {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.8em;
}
h1 {
border-bottom: 1px solid black;
}
h3 {
position: relative;
top:-25px;
}
.input {
outline: none;
border: none;
border-radius: 5px;
height: 2em;
width: 70%;
}
.button {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
}
.refresh {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
position: relative;
top: 20px;
background: lightgreen;
}
.button:active {
transform: scale(.95);
background: rgba(0,147,255,0.5);
outline: none;
}
.dot1, .dot2, .dot3, .dot4 {
width: 15px;
height: 15px;
background: radial-gradient(rgba(150,150,150,.7), rgba(50,50,50));
border-radius: 50%;
position: absolute;
box-shadow: 1px 1px 5px black, 0 0 10px rgb(183, 65, 14);
}
.dot1 {
top: 20px;
left: 20px;
}
.dot2 {
bottom: 20px;
right: 20px;
}
.dot3 {
bottom: 20px;
left: 20px;
}
.dot4 {
top: 20px;
right: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Plate Cost</title>
</head>
<body>
<div class="body"></div>
<div class="container">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="dot4"></div>
<h1>PLATE CALCULATOR</h1>
<h3>Enter your name and calculate the cost</h3>
<p class="yourplate">Your plate costs <span class="cost"></span> dollars</p>
<div class="calculate">
<input type="text" class="input"><br>
<button type="submit" class="button">Calculate</button>
<button class="refresh">Refresh</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Further reading
focus event
If you do not know what event to use just go and read the event list and find one suitable for you: https://www.w3schools.com/jsref/dom_obj_event.asp
I suggest using onfocus
document.querySelector('input.input').onfocus = function(e){console.log(true)
this.style.border = 'none'};
EXAMPLE:
let btn = document.querySelector('.button')
let cost = document.querySelector('.cost')
let yourPlate = document.querySelector('.yourplate')
let refresh = document.querySelector('.refresh')
btn.addEventListener('click', () => {
let personName = document.querySelector('.input').value;
yourPlate.classList.add('show');
cost.innerText = personName.trim().length * 5;
if(personName == '' || personName.length < 2) {
document.querySelector('.input').style.border = '2px solid red';
document.querySelector('.input').value = ''
document.querySelector('.input').placeholder = 'Please insert a valid name'
yourPlate.classList.remove('show')
}
})
refresh.addEventListener('click', ()=> {
document.querySelector('.input').value = '';
yourPlate.classList.remove('show')
document.querySelector('.input').style.border = 'none'
document.querySelector('.input').placeholder = ''
})
document.querySelector('input.input').onfocus = function(e){console.log(true)
this.style.border = 'none'};
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: verdana;
}
body {
background: url('utah2.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
background-blend-mode: darken;
}
.body {
position: absolute;
width: 100vw;
height: 100vh;
background: rgba(20,0,0,.5);
}
.container {
height: 55vh;
min-width: 90vw;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
padding-top: 20px;
background: url('utah.jpg');
background-size: cover;
background-position: fixed;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
box-shadow: 3px 3px 10px black;
}
.calculate {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding-bottom: 20px;
width: 100%;
}
.yourplate {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.4em;
position: absolute;
top: 43%;
display: none;
}
.yourplate.show {
display: block;
}
.cost {
color: white;
text-shadow: 0 0 10px black, 0 0 10px black;
font-size: 1.8em;
}
h1 {
border-bottom: 1px solid black;
}
h3 {
position: relative;
top:-25px;
}
.input {
outline: none;
border: none;
border-radius: 5px;
height: 2em;
width: 70%;
}
.button {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
}
.refresh {
padding: .5em 1em;
border-radius: 5px;
border: none;
background: white;
box-shadow: 3px 3px 10px rgba(0,0,0,.5);
outline: none;
font-size: .9em;
letter-spacing: .5px;
position: relative;
top: 20px;
background: lightgreen;
}
.button:active {
transform: scale(.95);
background: rgba(0,147,255,0.5);
outline: none;
}
.dot1, .dot2, .dot3, .dot4 {
width: 15px;
height: 15px;
background: radial-gradient(rgba(150,150,150,.7), rgba(50,50,50));
border-radius: 50%;
position: absolute;
box-shadow: 1px 1px 5px black, 0 0 10px rgb(183, 65, 14);
}
.dot1 {
top: 20px;
left: 20px;
}
.dot2 {
bottom: 20px;
right: 20px;
}
.dot3 {
bottom: 20px;
left: 20px;
}
.dot4 {
top: 20px;
right: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Plate Cost</title>
</head>
<body>
<div class="body"></div>
<div class="container">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="dot4"></div>
<h1>PLATE CALCULATOR</h1>
<h3>Enter your name and calculate the cost</h3>
<p class="yourplate">Your plate costs <span class="cost"></span> dollars</p>
<div class="calculate">
<input type="text" class="input"><br>
<button type="submit" class="button">Calculate</button>
<button class="refresh">Refresh</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I created a site, where i have a slideshow with a bullet navigation, i think its called bullet, but its located outside of the slideshow and i want it inside close to the bottom.
However i cant figure how to do it. How can i place the circles for navigation inside the images of the slideshow ?
I placed into a free host in order to you see the issue with the images: http://optential.co.nf/
var seconds = 5; //time beetwen 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);
background-size: cover;
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: 100px;
background-repeat: no-repeat;
text-align: right;
}
#btn {
width: 10em;
}
.mail2.fixed {
box-shadow: 10px 6px 15px grey;
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 100px;
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 {
width: 100%;
height: 90%;
overflow: hidden;
}
#slider .images {
width: 100%;
position: relative;
transition: left 1s;
left: 0;
}
#slider .images img {
z-index: -1;
width: 100%;
background-size: 100%;
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 5px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: red;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundos.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: 100%;
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/fixedbar.js"></script>
<script src="js/slider.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">
<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...">
<input type="submit" value="Get started for free">
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
<input type="submit" id ="btn" value="Get started for free">
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" 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>
<script src="js/slider.js"></script>
</body>
</html>
You can add a simple negative CSS margin to your dots blocs:
.controls > div {
margin-top: -20px;
}