I cant insert cell in my table using javascript - javascript

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

How to insert multiple picture and display it using javascript?

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?

How to remove NodeList at once?

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>

HTML and JavaScript Issue 'Uncaught TypeError: Cannot set property 'textContent' of null' found in console

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

Can't make placeholder and input field's border disappear on focus - Javascript

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>

Place bullets navigation bar inside the slideshow

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;
}

Categories