I have created a login and signup page with the help of youtube videos but i have written all login and signup page code in index.html but i want to create separate login and signup page but when i try to do so both page are not linked together i didn't know javascript i just copied the code can anyone help me how to separate index.html login and signup page
I tried to separate index.html login and signup page but stuck in it please anyone can help
login.html
<!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>Responsive Login and Signup Form</title>
<!--CSS-->
<link rel="stylesheet" href="style.css" />
<!--Boxicons-->
<link
href="https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css"
rel="stylesheet"
/>
</head>
<body>
<!--login page-->
<section class="container forms">
<div class="form login">
<div class="form-content">
<header>Login</header>
<form action="#">
<div class="field input-field">
<input type="email" placeholder="Email" class="input">
</div>
<div class="field input-field">
<input type="password" placeholder="Password" class="password">
<i class="bx bx-hide eye-icon"></i>
</div>
<div class="form-link">
Forgot password?
</div>
<div class="field button-field">
<button>Login</button>
</div>
</form>
<div class="form-link">
<span>Don't have an account?
Signup</span>
</div>
</div>
<div class="line"></div>
<div class="media-options">
<a href="#" class="field facebook">
<i class="bx bxl-facebook facebook-icon"></i>
<span>Login with Facebook</span>
</a>
</div>
<div class="media-options">
<a href="#" class="field google">
<img src="icons8-google-48.png" alt="" class="google-img" />
<span>Login with Google</span>
</a>
</div>
</div>
</body>
</html>
signup.html
<!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>Signup</title>
<!--CSS-->
<link rel="stylesheet" href="style.css" />
<!--Boxicons-->
<link
href="https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css"
rel="stylesheet"
/>
</head>
<body>
<section class="container forms">
<div class="form signup">
<div class="form-content">
<header>Signup</header>
<form action="#">
<div class="field input-field">
<input type="email" placeholder="Email" class="input">
</div>
<div class="field input-field">
<input type="password" placeholder="Create password" class="password">
</div>
<div class="field input-field">
<input type="password" placeholder="Confirm password" class="password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="field button-field">
<button>Signup</button>
</div>
</form>
<div class="form-link">
<span>Already have an account? Signup</span>
</div>
</div>
<div class="line"></div>
<div class="media-options">
<a href="#" class="field facebook">
<i class='bx bxl-facebook facebook-icon'></i>
<span>Login with Facebook</span>
</a>
</div>
<div class="media-options">
<a href="#" class="field google">
<img src="icons8-google-48.png" alt="" class="google-img" />
<span>Login with Google</span>
</a>
</div>
</div>
</section>
</body>
</html>
style.css
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #4070f4;
column-gap: 30px;
}
.form{
position: absolute;
max-width: 430px;
width: 100%;
padding: 30px;
border-radius: 6px;
background: #fff;
}
.form.signup{
opacity: 0;
pointer-events: none;
}
.forms.show-signup .form.signup{
opacity: 1;
pointer-events: auto;
}
.forms.show-signup .form.login{
opacity: 0;
pointer-events: none;
}
header{
font-size: 28px;
font-weight: 600;
color: #232836;
text-align: center;
}
form{
margin-top: 30px;
}
.form .field{
position: relative;
height: 50px;
width: 100%;
margin-top: 20px;
border-radius: 6px;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
border-radius: 6px;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #CACACA;
}
.field input:focus{
border-bottom-width: 2px;
}
.eye-icon{
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
font-size: 18px;
color: #8b8b8b;
cursor: pointer;
padding: 5px;
}
.field button{
color: #fff;
background-color: #0171d3;
transition: all 0.3s ease;
cursor: pointer;
}
.field button:hover{
background-color: #016dcb;
}
.form-link{
text-align: center;
margin-top: 10px;
}
.form-link span,
.form-link a{
font-size: 14px;
font-weight: 400;
color: #232836;
}
.form a{
color: #0171d3;
text-decoration: none;
}
.form-content a:hover{
text-decoration: underline;
}
.line{
position: relative;
height: 1px;
width: 100%;
margin: 36px 0;
background-color: #d4d4d4;
}
.line::before{
content: 'Or';
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
background-color: #fff;
color: #232836;
padding: 0 15px;
}
.media-options a{
display: flex;
align-items: center;
justify-content: center;
}
a.facebook{
color: #fff;
background-color: #4267b2;
}
a.facebook .facebook-icon{
height: 28px;
width: 28px;
color: #0171d3;
font-size: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
.facebook-icon,
img.google-img{
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
}
img.google-img{
height: 20px;
width: 20px;
object-fit: cover;
}
a.google{
border: 1px solid #CACACA;
}
a.google span{
font-weight: 500;
opacity: 0.6;
color: #232836;
}
script.js
const forms = document.querySelector(".forms"),
pwShowHide = document.querySelectorAll(".eye-icon"),
links = document.querySelectorAll(".link");
pwShowHide.forEach(eyeIcon => {
eyeIcon.addEventListener("click", () => {
let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
pwFields.forEach(password => {
if(password.type === "password"){
password.type = "text";
eyeIcon.classList.replace("bx-hide", "bx-show");
return;
}
password.type = "password";
eyeIcon.classList.replace("bx-show", "bx-hide");
})
})
})
links.forEach(link => {
link.addEventListener("click", e => {
e.preventDefault(); //preventing form submit
forms.classList.toggle("show-signup");
})
})
There is no need of javascript to link 2 html pages. Simply HTML tags are enough.
Create 2 html files signup.html & login.html. Paste code for login in login.html and code of signup in signup.html
Add below code in login.html to link it to signup page
Signup</span>
Add below code in signup.html to link it to login page
Signup</span>
Related
I want to replace the inp element to span element the code is working fine for 1 time only when I click 2nd time on the check btn value goes undefined
let text = document.getElementsByClassName('text');
let items = document.querySelectorAll('.items');
let checkBtn = document.querySelector('.check-icon');
// Creating a SPAN element and appending it to div
for (let i = 0; i < text.length; i++) {
checkBtn.addEventListener('click', () => {
let span = document.createElement('span');
let val = document.createTextNode(text[i].value);
span.appendChild(val);
span.setAttribute('class', 'text');
items[i].appendChild(span);
text[i].value = '' // setting the input value to empty once clicked onto the check button
text[i].parentNode.replaceChild(span, text[i]);
})
}
.mainContainer {
height: 400px;
width: 900px;
background-color: white;
margin: 200px auto;
border: 5px solid black;
border-radius: 8px;
}
.heading {
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center;
position: relative;
top: 15px;
}
.container {
width: 800px;
height: auto;
border: 2px solid black;
display: grid;
grid-template-columns: 230px 230px 230px 50px 50px;
align-items: center;
margin: auto;
position: relative;
top: 30px;
padding: 10px;
background-color: #007bff;
}
.items {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #fff;
}
.text {
width: 130px;
}
.icons {
font-size: 18px;
border: 2px solid #fff;
margin-left: 12px;
color: #007bff;
cursor: pointer;
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.icons:hover {
color: #fff;
background-color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
</div>
<div class="check-icon icons">
<i class="fa fa-check" aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Second time around the span does not have a value
const container = document.querySelector(".container");
// Creating a SPAN element and appending it to div
container.addEventListener('click', (e) => {
const tgt = e.target.closest(".icons");
if (tgt) {
if (tgt.classList.contains("swapped")) return; // stop
if (tgt.classList.contains("check-icon")) {
tgt.classList.add("swapped")
let texts = document.querySelectorAll('.text');
let items = document.querySelectorAll('.items');
texts.forEach((text, i) => {
let span = document.createElement('span');
let val = document.createTextNode(text.value ? text.value : '');
span.appendChild(val);
span.classList.add('text');
items[i].appendChild(span);
if (text.value) text.value = '' // setting the input value to empty once clicked onto the check button
text.parentNode.replaceChild(span, text);
})
}
}
})
.mainContainer {
height: 400px;
width: 900px;
background-color: white;
margin: 200px auto;
border: 5px solid black;
border-radius: 8px;
}
.heading {
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center;
position: relative;
top: 15px;
}
.container {
width: 800px;
height: auto;
border: 2px solid black;
display: grid;
grid-template-columns: 230px 230px 230px 50px 50px;
align-items: center;
margin: auto;
position: relative;
top: 30px;
padding: 10px;
background-color: #007bff;
}
.items {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #fff;
}
.text {
width: 130px;
}
.icons {
font-size: 18px;
border: 2px solid #fff;
margin-left: 12px;
color: #007bff;
cursor: pointer;
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.icons:hover {
color: #fff;
background-color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
</div>
<div class="check-icon icons">
<i class="fa fa-check" aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I recently made a simon game using JS,HTML5,CSS3 and Bootstrap v4.5.Now the issue occurs on phones i.e. when display of viewport is below 726px.While testing locally on Chrome developer tools the site looks the way I want the website to look.Below is the image on Chrome developer tools
https://www.flickr.com/photos/189671520#N03/50243919798/in/dateposted/
Below is the screenshot of the same page taken on actual pone https://www.flickr.com/photos/189671520#N03/50244763957/in/dateposted/
The key difference is on the edge of each color ,the border radius as well as the border color black is not being applied !. Looking forward for help.
the code for CSS is
body {
text-align: center;
font-family: "Press Start 2P", cursive;
background-color: #011f3f;
color: #fef2bf;
}
.btn {
margin: 3px 0px;
display: inline-block;
height: 210px;
width: 210px;
border: 10px solid black;
border-radius: 20%;
padding: 0px;
}
.btn-close:nth-child(odd) {
text-align: right;
}
.btn-close:nth-child(even) {
text-align: left;
}
.btn-close {
padding: 7px 10.5px;
}
footer {
font-size: 1rem;
margin: 0 0 1% 0;
}
.game-over {
background-color: red;
opacity: 0.8;
}
#level-title {
font-size: 2.85rem;
margin: 2% 5%;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}
.simon-rules {
color: #fef2bf;
text-decoration: none;
}
.simon-rules:hover {
color: red;
text-decoration: none;
}
/*****************************************colors*****************************************/
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
#media (max-width: 726px) {
.btn {
margin: 0px;
height: 86px;
width: 86px;
border: 5px solid black;
}
.btn-close {
padding: 5px 2.5px;
}
footer {
margin-bottom: 5%;
}
#level-title {
height: 70px;
font-size: 1.85rem;
margin: 4% 5%;
}
}
the code in HTML is
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Simon</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<link
href="https://fonts.googleapis.com/css?family=Press+Start+2P"
rel="stylesheet"
/>
</head>
<body>
<h1 id="level-title">Press Me To Start</h1>
<div class="container">
<div class="row">
<div class="col-6 btn-close">
<div type="button" id="green" class="btn green"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="red" class="btn red"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="yellow" class="btn yellow"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="blue" class="btn blue"></div>
</div>
</div>
</div>
<footer class="fixed-bottom">
<a
href="https://www.youtube.com/watch?v=1Yqj76Q4jJ4"
class="simon-rules"
target="_blank"
>What is Simon Game?</a
><br />
© Yash Salvi
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
If possible can anyone also help me know that on phone when user clicks on my "Press me to Start" i.e. on "h1" then I have used "h1" as a button and assigned the onclick function to it.Now the problem is that when user taps say on the "Press" it gets copied and browser asks if I want to do google search of the clicked word.
I want this "click to google search on any word" disabled.
[Text](https://raxy45.github.io/SIMON_GAME/) Link to github page
I'm currently working on a website that shows a visual representation of all the movies I watched. A Movie List if you will. I figured out how to filter the list based on button presses using JS, however, it only filters by 1 button at a time. I'd like the list to be filtered based on multiple buttons.
For example: "All completed movies with a rating of 3 and the action genre*".
Or: "All completed and watching movies"
I've never learned JS (though I plan to eventually) so I am kinda lost on how to do this.
Here's my current code:
filterSelection("all")
function filterSelection(c) {
var eles = document.getElementsByClassName("flex-card");
for(var i=0; i < eles.length; i++) {
if (c === "all" || eles[i].classList.contains(c)) {
eles[i].classList.remove("displayNone");
}
else {
eles[i].classList.add("displayNone");
}
}
}
.card:hover .overlay {
display: none;
}
.btn:hover {
background-color: hsl(14,80%,70%);
}
.displayNone {
display: none;
}
.yellow {
color: hsl(14,80%,70%);
}
.heading {
color: white;
}
.button-container {
margin: 0px 0px 12px;
text-align: center;
padding-bottom: 12px;
}
.btn {
color: hsl(14,80%,30%);
background-color: hsl(43,83%,55%);
border: 1px solid rgba(0, 0, 0, 0.94);
border-radius: 10px;
text-align: center;
font-weight: 600;
font-size: 10px;
line-height: 20px;
width: 80px;
margin: 5px 0px 5px 5px;
padding: 0px 12px;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding-left: 15%;
padding-right: 15%;
}
/* I am using a 7:10 aspect ratio (width:height) */
.flex-card {
position: relative;
height: 265px;
width: 185px;
perspective: 1000px;
margin-right: 1rem;
margin-bottom: 1rem;
}
.a {
}
.card {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s 0s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.image {
object-fit: cover;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
transition: .1s ease;
}
.title {
text-align: center;
color: white;
font-size: 14px;
font-weight: 600;
margin: 8px;
}
.subtitle {
margin: 8px;
font-size: 12px;
font-weight: 600;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>New page</title>
<link href="css/new.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color: rgb(19,23,29);">
<div>
<h1 style="text-align: center;" class="heading">Movie List</h1>
<div class="button-container" data-pg-name="Buttons">
<button class="btn" onclick="filterSelection('all')">All</button>
<button class="btn" onclick="filterSelection('watching')">Watching</button>
<button class="btn" onclick="filterSelection('planned')">Planned</button>
<button class="btn" onclick="filterSelection('completed')">Completed</button>
<button class="btn" onclick="filterSelection('dropped')">Dropped</button>
<br>
<button class="btn" onclick="filterSelection('five')">5</button>
<button class="btn" onclick="filterSelection('four')">4</button>
<button class="btn" onclick="filterSelection('three')">3</button>
<button class="btn" onclick="filterSelection('two')">2</button>
<button class="btn" onclick="filterSelection('one')">1</button>
<br>
<button class="btn" onclick="filterSelection('action')">Action</button>
<button class="btn" onclick="filterSelection('horror')">Horror</button>
<button class="btn" onclick="filterSelection('romance')">Romance</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
</div>
</div>
<div class="flex-container">
<div class="watching five flex-card">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="planned three flex-card">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="completed two flex-card">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
</div>
</body>
</html>
also on jsfidle
It would be possible to store all clicked selectors in an array, and render cards based on the whole array's state, not just the last clicked button. Quick and dirty example could look like this:
const allCards = document.querySelectorAll(".flex-card");
var displayAll = true // special value for displaying all - default true
var activeCards = [] // array holding all selected values
function toggleSelector(c) {
if (c === 'all') {
displayAll = !displayAll
activeCards = [] // optional
return
}
displayAll = false
if (activeCards.includes(c)) {
activeCards = activeCards.filter(card => card !== c)
} else {
activeCards.push(c)
}
}
// quick dirty way to render cards
function renderCards() {
if (displayAll) {
allCards.forEach(card => showCard(card))
return
}
allCards.forEach(card => hideCard(card))
for (let card of allCards) {
for (let cardClass of card.classList) {
if (activeCards.includes(cardClass)) {
showCard(card)
break;
}
}
}
}
// on each click toggle clicked selector and re-render cards
function filterSelection(c) {
toggleSelector(c)
renderCards()
}
function showCard(card) {
card.classList.remove("displayNone");
}
function hideCard(card) {
card.classList.add("displayNone");
}
renderCards()
.card:hover .overlay {
display: none;
}
.btn:hover {
background-color: hsl(14,80%,70%);
}
.displayNone {
display: none;
}
.yellow {
color: hsl(14,80%,70%);
}
.heading {
color: white;
}
.button-container {
margin: 0px 0px 12px;
text-align: center;
padding-bottom: 12px;
}
.btn {
color: hsl(14,80%,30%);
background-color: hsl(43,83%,55%);
border: 1px solid rgba(0, 0, 0, 0.94);
border-radius: 10px;
text-align: center;
font-weight: 600;
font-size: 10px;
line-height: 20px;
width: 80px;
margin: 5px 0px 5px 5px;
padding: 0px 12px;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding-left: 15%;
padding-right: 15%;
}
/* I am using a 7:10 aspect ratio (width:height) */
.flex-card {
position: relative;
height: 265px;
width: 185px;
perspective: 1000px;
margin-right: 1rem;
margin-bottom: 1rem;
}
.a {
}
.card {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s 0s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.image {
object-fit: cover;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
transition: .1s ease;
}
.title {
text-align: center;
color: white;
font-size: 14px;
font-weight: 600;
margin: 8px;
}
.subtitle {
margin: 8px;
font-size: 12px;
font-weight: 600;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>New page</title>
<link href="css/new.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color: rgb(19,23,29);">
<div>
<h1 style="text-align: center;" class="heading">Movie List</h1>
<div class="button-container" data-pg-name="Buttons">
<button class="btn" onclick="filterSelection('all')">All</button>
<button class="btn" onclick="filterSelection('watching')">Watching</button>
<button class="btn" onclick="filterSelection('planned')">Planned</button>
<button class="btn" onclick="filterSelection('completed')">Completed</button>
<button class="btn" onclick="filterSelection('dropped')">Dropped</button>
<br>
<button class="btn" onclick="filterSelection('five')">5</button>
<button class="btn" onclick="filterSelection('four')">4</button>
<button class="btn" onclick="filterSelection('three')">3</button>
<button class="btn" onclick="filterSelection('two')">2</button>
<button class="btn" onclick="filterSelection('one')">1</button>
<br>
<button class="btn" onclick="filterSelection('action')">Action</button>
<button class="btn" onclick="filterSelection('horror')">Horror</button>
<button class="btn" onclick="filterSelection('romance')">Romance</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
</div>
</div>
<div class="flex-container">
<div class="watching five flex-card displayNone">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="planned three flex-card displayNone action">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="completed two flex-card displayNone action">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
</div>
</body>
</html>
I have integrated a sign up modal on a bootstrap website and would like to limit the number of impressions to visitors seeing it twice per session instead of on every page and also hiding it once a visitor has subscribed. The modal appears after 5 seconds of opening a web-page and only closes once a user clicks the close button.
//Modal
$(document).ready(function () {
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(5000).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(6000).fadeIn(400);
//Hide dialogue and background when the user clicks the close button
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
});
//Controls how the modal popup is closed with the close button
function HideDialog() {
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
html {
background-color: #333;
}
h2 {
text-align: center;
}
/****Modal*****/
/*Default Modal Styles*/
/* This is the background overlay */
.backgroundOverlay {
position: fixed;
top: 0;
right: 0,
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .85;
filter: alpha(opacity=85);
-moz-opacity: .85;
z-index: 101;
display: none;
}
/* This is the Popup Window */
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
/* This is the closing button */
#btnClose {
width:100%;
display: block;
text-align: right;
text-decoration: none;
color: #BCBCBC;
}
/* This is the closing button hover state */
#btnClose:hover {
color: #c90c12;
}
/* This is the description headline and paragraph for the form */
#delayedPopup > div.formDescription {
float: left;
display: block;
width: 44%;
padding: 1% 3%;
font-size: 18px;
color: #666;
clear: left;
}
/* This is the styling for the form's headline */
#delayedPopup > div.formDescription h2 {
color: #444444;
font-size: 36px;
line-height: 40px;
}
/*MailChimp Signup Form*/
/* This is the signup form body */
#delayedPopup #mc_embed_signup {
float: left;
width: 47%;
padding: 1%;
display: block;
font-size: 16px;
color: #666;
margin-left: 1%;
}
/* This is the styling for the signup form inputs */
#delayedPopup #mc-embedded-subscribe-form input {
width: 95%;
height: 30px;
font-size: 18px;
padding: 3px;
margin-bottom: 5px;
}
/* This is the styling for the signup form inputs when they are being hovered with the mouse */
#delayedPopup #mc-embedded-subscribe-form input:hover {
border:solid 2px #97c1c0;
box-shadow: 0 1px 3px #AAAAAA;
}
/* This is the styling for the signup form inputs when they are focused */
#delayedPopup #mc-embedded-subscribe-form input:focus {
border:solid 2px #333;
box-shadow: none;
}
/* This is the styling for the signup form submit button */
#delayedPopup #mc-embedded-subscribe {
width: 100%!important;
height: 40px!important;
margin: 10px auto 0 auto;
background: #333;
border: none;
color: #fff;
}
/* This is the styling for the signup form submit button hover state */
#delayedPopup #mc-embedded-subscribe:hover {
background: #97c1c0;
color: #fff;
box-shadow:none!important;
cursor: pointer;
}
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
<html lang="en">
<head>
<title>HOME</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>This a demo page</h2>
<!---Sign Up Modal---->
<div id="bkgOverlay" class="backgroundOverlay" style="display: block;"></div>
<div id="delayedPopup" class="delayedPopupWindow" style="display: block;">
<!-- This is the close button -->
[ X ]
<!-- This is the left side of the popup for the description -->
<div class="formDescription">
<h2>Sign Up and <span style="color: #333; font-weight: bold;">Save!</span></h2>
<p>Sign up today and be the first to know about our SPECIALS!</p>
</div>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div class="mc-field-group">
<label for="mce-FNAME">First Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address
<span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="PLEASE INPUT THE MAILCHIMP CODE" value="">
</div>
<div class="clear">
<input type="submit" value="Save Money!" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
<!-- End MailChimp Signup Form -->
</div> <!---End of Sign Up Modal-->
<!------JS----->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
Use the jquery-cookie plugin by carhartl.
Check for cookie before showing the modal. If it's present, don't display it. If it's not, store a new cookie and display modal.
$(document).ready(function() {
if ($.cookie('modal_shown') == null) {
$.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
$('#bkgOverlay').modal('show');
}
});
I'm creating a website, and when adding a background image to my CSS there appears to be a random white vertical line on the left side of the screen. I've checked this in both Chrome and Safari browsers. Would anyone be able to help fix this and also explain how it originated?
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
The white line is because of the blockquote element, you can disable the white border by adding
blockquote {
border-left: none;
}
If I understand, it's the default border on blockquote from bootstrap. Just set border-left: none on an element you want to disable that. In this case, blockquote.construction
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
You are getting the unwanted border from Blockquote tag.
In your Css for of Blockquote class replace with below:
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
Note : Also I observed the white border is present in the slogan blockquote as well. The reason it is not visible as the background color there is white. But if you will inspect the element, you will see it there.
I will recommend to add a common class to all blockquote with
border-left: none;