Good evening,
Great thank you, it works, I would never have known how to do it myself.
There is just one problem the popup is behind the cards I think it’s the css?
Great it works thank you 
I also have a question I would like to add a Scrollbars to popup 1 window because I have a lot of text in this popup 1 window.
Add overflow:auto to the popup-container to enable scroll bars if needed.
I tested and I don’t have the bar.
.popup-container {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
overflow: auto;
z-index: 99;
}
It scrolls for me:
The whole page scrolls not the smaller box.
If you wanted the smaller box to scroll itself then that would require a height and overflow to be added.
oh yes it works now.
I wanted to ask you how to integrate and where to find an Accept/Refuse cookie usage system script?
I am also trying to do the popup 2 myself but I have a problem with my css.
index.html
<div id="popup2" class="popup-container">
<div class="popup-box">
<h1>Popup 2</h1>
<form>
<label for="username">Nom d'utilisateur:</label>
<input type="text" name="username" placeholder="Entrer votre nom d'utilisateur">
<label for="password">Votre mot de Passe:</label>
<input type="text" name="password" placeholder="Entrer votre mot de passe ">
<div class="check">
<input type="checkbox" name="remember">
<label for="remember">Se souvenir</label>
</div>
<input type="submit" value="Login">
</form>
</div>
</div>
style.css
/* Form Login */
form {
display: flex;
flex-direction: column;
}
label {
font-size: 18px;
margin-bottom: 5px;
}
input[type="texte"],
input[type="password"] {
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
font-size: 16px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.check {
margin-bottom: 10px;
}
.check label {
margin-top: 5px;
}
input[type="submit"] {
padding: 10px;
border: none;
border-radius: 5px;
color: #fff;
font-size: 18px;
background-color: #ef6e12;
cursor: pointer;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
input[type="submit"]:hover {
background-color: #f07a26;
}
What problem do you have? That seems to be almost correct apart that you spelled text as “texte”.
It should be this:
input[type="text"],
input[type="password"] {
That would be best asked as a new question in the JS forum for more informed answers than mine.
Good morning, The problem is that it doesn’t take into account my css input, label… For example, I can’t change the input zone, it doesn’t take it into account in my css
[image]
I just gave you the answer to that and you have spelled text incorrectly (not’ texte’).
If you use the code I just gave it will look like this:
input[type="text"],
input[type="password"] { etc...
Note that the codepen you posted is not a working codepen as it doesn’t have the js for that popup box in place. Also you are still using multiple universal selectors despite me giving you the full alternative code.
For example you have this at the start.
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
box-sizing: border-box;
border: none;
outline: none;
color: #fff;
}
You import a heavy font file called ‘poppins’ and then set every element to use it.
However you never ever use that font-file because you over-ride it here.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Space Grotesk', sans-serif;
text-decoration: none;
}
The whole page will use Space Grotesk and not poppins.
If you look at my above posts I gave you a much more mature set of resets for you to use that don’t kill inheritance.
I won’t mention it again but I will not look at any future code that hasn’t addressed that issue properly.. In that way I can be sure that you are understanding what has been said
Thank you, everything works now, I just need to add a small closing cross in my Login popup.
Many thanks for your help now my website works thanks to you.
I wanted to ask you, I don’t see where to click to close this post?
No need.
We don’t close posts unless they are attracting spam.
I just still have a small problem with the Contact section where it doesn’t take the message.php file and the contact.js file.
And in the textarea I also have a problem with the texts.
Do you have an idea ?
here is my code
If you mean that you have the word ‘message’ written on top of the placeholder then that’s because of this:
<i class="material-icons">message</i>
I don’t know why you are trying to use material icons as well because you are already using the font-awesome icons. You don;t want to keep loading new stuff all the time?
I’d change it to font-awesome like this:
<i class="fa-solid fa-message"></i>
I think you should post that in the PHP forum or JS forum as that’s not within my scope. You won’t be able to get a working script on codepen if you are posting to your server anyway so you may need more specific help.
Good morning,
ok thank you for your response.
What I don’t understand is that in the text areas and texarea I cannot write text.
I’m not following your meaning?
I can type into the inputs and texareas ok in that codepen and it looks like you have changed the placeholder text ok also. Where is it that you can’t type?
that’s it in the text area when I write nothing is displayed I don’t understand why
It’s working for me ok. Are you having trouble in that codepen itself or is this ion the real page?
The codepen seems fine to me unless its a browser issue but Chrome seems fine and it seems fine on my mobile also.
You may want to add pointer-events:none to the i tag just in case.
.wrapper form i{
pointer-events:none;
}
In fact I did not put the correct version and I cannot write in the areas
You can write in those areas but you are writing white text on a white background so its invisible. You can add the following code to add some color back into the inputs.
textarea,input{
color:#000;
}
The above would have been unnecessary if you had followed my previous advice and changed your reset to the codes I gave you,
This rule is the bad rule that just keeps on giving.
* {
margin: 0;
padding: 0;
font-family: 'Space Grotesk', sans-serif;
box-sizing: border-box;
border: none;
outline: none;
color: #fff;
}
The color:#fff via the universal selector kills inheritance and just makes life difficult.
Indeed it works.
The css is not easy or I don’t have it easy, it’s when there are several rules the same, I mix everything.
I also tried to display a logo.png in the background on a text but I don’t know if my line is correct like this because I have no rendering : background-image: url(‘logo.png’);
index.html
<header class="header">
<a href="#" class="Logo" style="font-size: 2.5em" ;>B.S.A <span style="color: #ef6e12;">system</span></a>
<nav class="navbar">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#services">Tarifs</a>
<a href="#team">Team</a>
<a href="#contact">Contact</a>
</nav>
</header>
my css
.Logo {
font-size: 2.1rem;
color: #fff;
text-decoration: none;
font-weight: 700;
cursor: pointer;
background-image: url('logo.png');
}