numbers in correct order display button

numbers in correct order display button - javascript

I'm working on a project where you have to put the above numbers 1/9 in the right order.
For example: 1-6-3
When the numbers are placed in the correct order, a button will appear to continue to the next page. Can someone help me with that?
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
body {
background-color: #cccccc;
}
.content-size {
height: 300px;
width: 300px;
position: fixed;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
background-color: #3e3e3e;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border: 2px solid #3e3e3e;
}
.picure-1-box {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 20%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-2-box {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-3-box {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 20%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-4-box {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-5-box {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-6-box {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-7-box {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 80%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-8-box {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 80%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-9-box {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 80%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
#code-number-1 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-1:hover {
color: #fdfdfda3;
}
#code-number-2 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-2:hover {
color: #fdfdfda3;
}
#code-number-3 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-3:hover {
color: #fdfdfda3;
}
#code-number-4 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-4:hover {
color: #fdfdfda3;
}
#code-number-5 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
border-radius: 35px;
}
#code-number-5:hover {
color: #fdfdfda3;
}
#code-number-6 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-6:hover {
color: #fdfdfda3;
}
#code-number-7 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
border-radius: 35px;
}
#code-number-7:hover {
color: #fdfdfda3;
}
#code-number-8 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
border-radius: 35px;
}
#code-number-8:hover {
color: #fdfdfda3;
}
#code-number-9 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-9:hover {
color: #fdfdfda3;
}
.numbers-3 {
height: 70px;
width: 300px;
position: fixed;
left: 50%;
top: 79%;
transform: translate(-50%, -50%);
background-color: #3a3939;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border: 2px solid #3e3e3e;
}
a {
color: #ffffff61;
text-decoration: none;
font-weight: bold;
font-size: 13px;
font-family: arial;
cursor: pointer;
}
.reset {
height: 50px;
width: 150px;
position: fixed;
left: 50%;
top: 95%;
transform: translate(-50%, -50%);
background-color: #444444f2;
text-align: center;
line-height: 50px;
border-radius: 10px;
border: 1px solid #d6d6d6;
}
.reset:hover {
background-color: #353535f2;
}
#code-1 {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #525252bf;
border-radius: 5px;
}
#code-2 {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #525252bf;
border-radius: 5px;
}
#code-3 {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #525252bf;
border-radius: 5px;
}
<div class="content-size">
<div class="picure-1-box">
<div draggable="true" id="code-number-1" ondragstart="drag(event)">
1
</div>
</div>
<div class="picure-2-box">
<div draggable="true" id="code-number-2" ondragstart="drag(event)">
2
</div>
</div>
<div class="picure-3-box">
<div draggable="true" id="code-number-3" ondragstart="drag(event)">
3
</div>
</div>
<div class="picure-4-box">
<div draggable="true" id="code-number-4" ondragstart="drag(event)">
4
</div>
</div>
<div class="picure-5-box">
<div draggable="true" id="code-number-5" ondragstart="drag(event)">
5
</div>
</div>
<div class="picure-6-box">
<div draggable="true" id="code-number-6" ondragstart="drag(event)">
6
</div>
</div>
<div class="picure-7-box">
<div draggable="true" id="code-number-7" ondragstart="drag(event)">
7
</div>
</div>
<div class="picure-8-box">
<div draggable="true" id="code-number-8" ondragstart="drag(event)">
8
</div>
</div>
<div class="picure-9-box">
<div draggable="true" id="code-number-9" ondragstart="drag(event)">
9
</div>
</div>
</div>
<div class="numbers-3">
<div id="code-1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<div id="code-2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<div id="code-3" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
</div>
<div class="reset">
Reset
</div>

I used an array and parseInt to edit the array. It's kind of sketchy, but it works. I set the code to 1-6-3. It doesn't create a button to continue; it just validates the code.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
var input_code = [-1, -1, -1];
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
input_code[parseInt(ev.target.id.split('-')[1], 10)-1] = parseInt(document.getElementById(data).innerText, 10);
if (input_code.toString() === [1, 6, 3].toString()) {
console.log("correct");
// append your button
}
ev.preventDefault();
}
body {
background-color: #cccccc;
}
.content-size {
height: 300px;
width: 300px;
position: fixed;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
background-color: #3e3e3e;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border: 2px solid #3e3e3e;
}
.picure-1-box {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 20%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-2-box {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-3-box {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 20%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-4-box {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-5-box {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-6-box {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-7-box {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 80%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-8-box {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 80%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-9-box {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 80%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
#code-number-1 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-1:hover {
color: #fdfdfda3;
}
#code-number-2 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-2:hover {
color: #fdfdfda3;
}
#code-number-3 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-3:hover {
color: #fdfdfda3;
}
#code-number-4 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-4:hover {
color: #fdfdfda3;
}
#code-number-5 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
border-radius: 35px;
}
#code-number-5:hover {
color: #fdfdfda3;
}
#code-number-6 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-6:hover {
color: #fdfdfda3;
}
#code-number-7 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
border-radius: 35px;
}
#code-number-7:hover {
color: #fdfdfda3;
}
#code-number-8 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
border-radius: 35px;
}
#code-number-8:hover {
color: #fdfdfda3;
}
#code-number-9 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-9:hover {
color: #fdfdfda3;
}
.numbers-3 {
height: 70px;
width: 300px;
position: fixed;
left: 50%;
top: 79%;
transform: translate(-50%, -50%);
background-color: #3a3939;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border: 2px solid #3e3e3e;
}
a {
color: #ffffff61;
text-decoration: none;
font-weight: bold;
font-size: 13px;
font-family: arial;
cursor: pointer;
}
.reset {
height: 50px;
width: 150px;
position: fixed;
left: 50%;
top: 95%;
transform: translate(-50%, -50%);
background-color: #444444f2;
text-align: center;
line-height: 50px;
border-radius: 10px;
border: 1px solid #d6d6d6;
}
.reset:hover {
background-color: #353535f2;
}
#code-1 {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #525252bf;
border-radius: 5px;
}
#code-2 {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #525252bf;
border-radius: 5px;
}
#code-3 {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #525252bf;
border-radius: 5px;
}
<div class="content-size">
<div class="picure-1-box">
<div draggable="true" id="code-number-1" ondragstart="drag(event)">
1
</div>
</div>
<div class="picure-2-box">
<div draggable="true" id="code-number-2" ondragstart="drag(event)">
2
</div>
</div>
<div class="picure-3-box">
<div draggable="true" id="code-number-3" ondragstart="drag(event)">
3
</div>
</div>
<div class="picure-4-box">
<div draggable="true" id="code-number-4" ondragstart="drag(event)">
4
</div>
</div>
<div class="picure-5-box">
<div draggable="true" id="code-number-5" ondragstart="drag(event)">
5
</div>
</div>
<div class="picure-6-box">
<div draggable="true" id="code-number-6" ondragstart="drag(event)">
6
</div>
</div>
<div class="picure-7-box">
<div draggable="true" id="code-number-7" ondragstart="drag(event)">
7
</div>
</div>
<div class="picure-8-box">
<div draggable="true" id="code-number-8" ondragstart="drag(event)">
8
</div>
</div>
<div class="picure-9-box">
<div draggable="true" id="code-number-9" ondragstart="drag(event)">
9
</div>
</div>
</div>
<div class="numbers-3">
<div id="code-1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<div id="code-2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<div id="code-3" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
</div>
<div class="reset">
Reset
</div>

Related

My search bar backend config is not properly responding to my condition statement

I am currently configuring(backend) my search-bar in my Django project to search the database. I've put an 'if or else' statement for when the user just clicks the search button without putting anything in the search-box. The 'if or else' statement seems not to be working properly because it ignores the 'if' part and goes straight to the else part. I've tried different ways to fix it but I seem to be failing. How do I rectify this.
function openNav() {
document.getElementById("mynavbar").style.display = "block";
}
function closeNav() {
document.getElementById("mynavbar").style.display = "none";
}
.navbar{
position: absolute;
height: 102px;
width: 1136px;
left: 69px;
top: 39px;
border-radius: 0px;
}
.nav-menu{
display: none;
}
.closebtn{
display: none;
}
.logo img{
position: absolute;
height: 57.599998474121094px;
width: 100px;
left: 12px;
top: 31px;
border-radius: 0px;
}
.HOME{
position: absolute;
height: 38.10988998413086px;
width: 97.52754211425781px;
left: 203.26788330078125px;
top: 48.19781494140625px;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
/* background: #FFFFFF; */
}
.ARTIST{
position: absolute;
height: 38.10988998413086px;
width: 105.85134887695312px;
left: 328.64324951171875px;
top: 48.19781494140625px;
border-radius: nullpx;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
/* background: #FFFFFF; */
}
.ABOUTUS{
position: absolute;
height: 38.10988998413086px;
width: 142.14324951171875px;
left: 475.8270263671875px;
top: 48.19781494140625px;
border-radius: nullpx;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
/* background: #FFFFFF; */
}
.search-bar{
position: absolute;
height: 38.109893798828125px;
width: 177.427001953125px;
left: 655.270263671875px;
top: 50.4395751953125px;
border-radius: 45px;
background: #FFFFFF42;
border: 3px solid #FFFFFF;
}
#search-area{
position: absolute;
height: 38.109893798828125px;
width: 177.427001953125px;
left: -3px;
top: -4px;
border-radius: 45px;
background: #FFFFFF42;
border: 3px solid #FFFFFF;
font-family: 'Poppins';
font-size: 19px;
font-weight: 700;
}
.search-icon{
position: absolute;
height: 30px;
width: 24.251404px;
left: 136px;
top: 0px;
border-radius: 0px;
}
.bi-search{
position: absolute;
height: 30px;
width: 24.251404px;
left: 0px;
top: 0px;
border-radius: 0px;
}
.rec{
position: absolute;
height: 45.95604705810547px;
width: 119.96490478515625px;
left: 1013.1486206054688px;
top: 42.593414306640625px;
border-radius: 10px;
background: #7e81d1;
}
.SignIn{
position: absolute;
height: 38.109893798828125px;
width: 98.553955078125px;
left: 10px;
top: 0;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
/* background: #FFFFFF; */
}
.rec2{
position: absolute;
height: 45.95604705810547px;
width: 119.96490478515625px;
left: 862.9404907226562px;
top: 42.593414306640625px;
border-radius: 10px;
background: #7E81D1;
}
.SignUP{
position: absolute;
height: 43.71428680419922px;
width: 106.8594970703125px;
left: 10px;
top: 0;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
/* background: #FFFFFF; */
}
<div id="mynavbar" class="navbar">
×
<div class="logo">
<img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt="">
</div>
<span class="HOME">HOME</span>
<span class="ARTIST">ARTIST</span>
<span class="ABOUTUS">ABOUT US</span>
<div class="search-bar">
<form action="{% url 'results' %}" method="post" name="searched">
{% csrf_token %}
<input type="text" id="search-area" placeholder="Search Artist">
<div class="search-icon">
<a href="results"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg></a>
</div>
</form>
</div>
<div class="rec">
<span class="SignIn">SignIN</span>
</div>
<div class="rec2">
<span class="SignUP">SignUp</span>
</div>
</div>
views.py
def results(request):
if request.method == "POST":
searched = request.POST['searched']
return render(request, 'Results.html', {'searched': searched})
else:
return render(request, 'Results.html', {})
url.py
path('results', views.results, name='results')
this is my results
function openNav() {
document.getElementById("mynavbar").style.display = "block";
}
function closeNav() {
document.getElementById("mynavbar").style.display = "none";
}
.navbar{
position: absolute;
height: 91px;
width: 1094px;
left: 141px;
top: 38px;
border-radius: 0px;
}
.closebtn{
display: none;
}
.nav-menu{
display: none;
}
.HOME{
position: absolute;
height: 34px;
width: 93.95413208007812px;
left: 195.8201904296875px;
top: 43px;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
}
.ARTIST{
position: absolute;
height: 34px;
width: 101.97296142578125px;
left: 316.601806640625px;
top: 43px;
border-radius: nullpx;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
}
.ABOUTUS{
position: absolute;
height: 34px;
width: 136.93508911132812px;
left: 458.3927917480469px;
top: 43px;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
}
.search-bar{
position: absolute;
height: 34px;
width: 170.92608642578125px;
left: 631.2612915039062px;
top: 45px;
border-radius: 45px;
border: 3px solid #FFFFFF;
}
.search-icon{
position: absolute;
height: 19px;
width: 24px;
left: 137px;
top: 4px;
border-radius: 0px;
}
.bi-search{
position: absolute;
height: 19px;
width: 24px;
left: 0px;
top: 0px;
border-radius: 0px;
}
.logo img{
position: absolute;
height: 57.599998474121094px;
width: 100px;
left: 12px;
top: 31px;
border-radius: 0px;
}
.rec{
position: absolute;
height: 41px;
width: 115.56927490234375px;
left: 976.0270385742188px;
top: 38px;
border-radius: 10px;
background: #6484B4;
}
.SignIn{
position: absolute;
height: 34px;
width: 94.94293212890625px;
left: 12px;
top: 0px;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
}
.rec2{
position: absolute;
height: 41px;
width: 115.56939697265625px;
left: 831.322509765625px;
top: 38px;
border-radius: 10px;
background: #7E81D1;
}
.SignUP{
position: absolute;
height: 39px;
width: 102.9442138671875px;
left: 7px;
top: 0px;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
}
#search-area{
position: absolute;
left: 8px;
top: -2px;
background: #ffffff00;
border: #ffffff00;
border-radius: 45px;
font-family: 'Poppins';
font-size: 19px;
font-weight: 700;
}
<div id="mynavbar" class="navbar">
×
<div class="logo">
<img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt="">
</div>
<span class="HOME">HOME</span>
<span class="ARTIST">ARTIST</span>
<span class="ABOUTUS">ABOUT US</span>
<div class="search-bar">
<input type="text" id="search-area" placeholder="Search">
<div class="search-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</div>
</div>
<div class="rec">
<span class="SignIn">SignIN</span>
</div>
<div class="rec2">
<span class="SignUP">SignUp</span>
</div>
</div>
<div class="results">
{% if searched %}
<h2>You have searched for {{searched}}</h2>
{% else %}
<h2>You forget to fill out the form</h2>
{% endif %}
</div>

With the search query you are trying to get data based on your input. so instead of post, use a get request here & give your input field a name to access that in your view.
Template:
<form>
<input type="text" id="search-area" placeholder="Search Artist" name="searched">
</form>
The default method of a form is GET, so you dont have to specify method="get"
View:
def results(request):
if request.method == "GET":
searched = request.GET.get('searched')
return render(request, 'Results.html', {'searched': searched})
else:
return render(request, 'Results.html', {})

How to delay something thats just a possibility

So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>

I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>

Styling is different between pages HTML CSS JS with similar code

I am building a website and I cannot tell a difference between two HTML/CSS/JS files to see what is making my logo, button, and the main text a different style. The first code is the desired look for the website's logo, button, and main text but the second is incorrect. Any help will be appriciated!
My desired HTML style for the logo, buttons, and main text styling is on this page:
<!DOCTYPE html>
<section class="showcase">
<script type="text/javascript">
window.addEventListener('load', () => {
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
});
</script>
<header>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #011721;
transition: 0.5s;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.text
{
z-index: 10;
}
.text h2
{
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #011721;
}
.menu ul li a:hover
{
color: #03a9f4;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 3em;
}
}
</style>
<h2 class="logo">Sample Logo</h2>
<div class="toggle"></div>
</header>
<div class="overlay">
<div class="text">
<p id='text'>You Can Contact Us Here</p>
<button id='back'>Call</button>
<a href="mailto:><button id='email'>Email</button></a>
</div>
</div>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
<style>
#text {
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 3em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back:hover
{
letter-spacing: 6px;
}
#email
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#email:hover
{
letter-spacing: 6px;
}
</style>
<body>
</body>
</html>
The different styling on the second page for the buttons/logo/main text:
<!DOCTYPE html>
<section class="showcase">
<script type="text/javascript">
window.addEventListener('load', () => {
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
});
</script>
<header>
<style>
#form {
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 5em;
margin: 20px 0;
max-width: 700px;
}
#logintext {
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
font-size: 7em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 20%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#formGroupExampleInput {
width: 75%;
height: 3%;
background-color:#fff;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 52.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#formGroupExampleInput2 {
width: 75%;
height: 3%;
background-color:#fff;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 75%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#usernamelabel {
text-align:center;
position: absolute;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#passwordlabel {
text-align:center;
position: absolute;
left: 50%;
top: 65%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#submit
{
display: inline-block;
font-size: 1em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
position: absolute;
border: none;
left: 50%;
top: 87.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#submit:hover
{
letter-spacing: 6px;
}
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo {
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active {
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #011721;
transition: 0.5s;
z-index: 2;
}
.showcase.active {
right: 300px;
}
.showcase video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.text {
z-index: 10;
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul {
position: relative;
}
.menu ul li {
list-style: none;
}
.menu ul li a {
text-decoration: none;
font-size: 24px;
color: #011721;
}
.menu ul li a:hover {
color: #03a9f4;
}
#media (max-width: 991px) {
.showcase,
.showcase header {
padding: 40px;
}
}
</style>
<h2 class="logo">Sample Logo</h2>
<div class="toggle"></div>
</header>
<h2 id='logintext'>Login</h2>
<div class="overlay">
<div class="text">
<form id='form' action="/login" method="POST">
<div class="form-group">
<label id='usernamelabel' for="formGroupExampleInput">Username</label>
<input type="text" class="form-control" id="formGroupExampleInput" name="username">
</div>
<div class="form-group">
<label id='passwordlabel' for="formGroupExampleInput2">Password</label>
<input type="password" class="form-control" id="formGroupExampleInput2" name="password">
</div>
<button id='submit' type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
<html>
<style>
#text {
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 3em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back:hover
{
letter-spacing: 6px;
}
#email
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#email:hover
{
letter-spacing: 6px;
}
</style>
<body>
</body>
</html>

In the first example you are missing a open html tag and also missing a closing quote mailto:
<!DOCTYPE html><html>
<section class="showcase">
<script type="text/javascript">
window.addEventListener('load', () => {
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
});
</script>
<header>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #011721;
transition: 0.5s;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.text
{
z-index: 10;
}
.text h2
{
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #011721;
}
.menu ul li a:hover
{
color: #03a9f4;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 3em;
}
}
</style>
<h2 class="logo">Sample Logo</h2>
<div class="toggle"></div>
</header>
<div class="overlay">
<div class="text">
<p id='text'>You Can Contact Us Here</p>
<button id='back'>Call</button>
<button id='email'>Email</button>
</div>
</div>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
<style>
#text {
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 3em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back:hover
{
letter-spacing: 6px;
}
#email
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#email:hover
{
letter-spacing: 6px;
}
</style>
<body>
</body>
</html>
<!DOCTYPE html>
<section class="showcase">
<script type="text/javascript">
window.addEventListener('load', () => {
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
});
</script>
<header>
<style>
#form {
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 5em;
margin: 20px 0;
max-width: 700px;
}
#logintext {
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
font-size: 7em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 20%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#formGroupExampleInput {
width: 75%;
height: 3%;
background-color:#fff;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 52.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#formGroupExampleInput2 {
width: 75%;
height: 3%;
background-color:#fff;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 75%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#usernamelabel {
text-align:center;
position: absolute;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#passwordlabel {
text-align:center;
position: absolute;
left: 50%;
top: 65%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#submit
{
display: inline-block;
font-size: 1em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
position: absolute;
border: none;
left: 50%;
top: 87.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#submit:hover
{
letter-spacing: 6px;
}
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo {
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active {
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #011721;
transition: 0.5s;
z-index: 2;
}
.showcase.active {
right: 300px;
}
.showcase video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.text {
z-index: 10;
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul {
position: relative;
}
.menu ul li {
list-style: none;
}
.menu ul li a {
text-decoration: none;
font-size: 24px;
color: #011721;
}
.menu ul li a:hover {
color: #03a9f4;
}
#media (max-width: 991px) {
.showcase,
.showcase header {
padding: 40px;
}
}
</style>
<h2 class="logo">Sample Logo</h2>
<div class="toggle"></div>
</header>
<h2 id='logintext'>Login</h2>
<div class="overlay">
<div class="text">
<form id='form' action="/login" method="POST">
<div class="form-group">
<label id='usernamelabel' for="formGroupExampleInput">Username</label>
<input type="text" class="form-control" id="formGroupExampleInput" name="username">
</div>
<div class="form-group">
<label id='passwordlabel' for="formGroupExampleInput2">Password</label>
<input type="password" class="form-control" id="formGroupExampleInput2" name="password">
</div>
<button id='submit' type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
<html>
<style>
#text {
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 3em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back:hover
{
letter-spacing: 6px;
}
#email
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#email:hover
{
letter-spacing: 6px;
}
</style>
<body>
</body>
</html>

Add Card on Click

I'm trying to dynamically add a row on the press of a button. However, due to my status as new to JS, I cannot seem to figure it out. If you notice in the demo below, nothing happens when you press the green button.This is likely a simple fix, but I just do not have the knowledge to do it. If you'd prefer to use it in CodePen, here is the link as well: CodePen Demo
$(document).ready(function(){
$("#ButtonPro").click(function(){
$("#okay").append("<p class=RowPro></p> <p class=GreenStripe></p> <p class=InputPro contenteditable>Input</p>");
});
});
.Rectangle {
align-self: flex-start;
width: 1539px;
height: 1268px;
background: #f2f4f5;
}
.Rectangle2 {
align-self: flex-start;
width: 1000px;
height: 105px;
background: #ffffff;
position: absolute;
width: 1000px;
height: 105px;
left: 270px;
top: 280px;
}
.Rectangle3 {
position: absolute;
width: 95px;
height: 8px;
left: 294px;
top: 305px;
background: #1d67ac;
border-radius: 0px;
}
.Zander{
position: absolute;
width: 218px;
height: 39px;
left: 297px;
top: 331px;
align-self: flex-start;
font-family: Arial;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 24px;
}
.Rectangle4 {
position: absolute;
width: 499px;
height: 65px;
left: 270px;
top: 397px;
background: #ffffff;
border-radius: 0px;
}
.Pros {
position: absolute;
width: 34px;
height: 24px;
left: 294px;
top: 418px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #41cc90;
}
.ButtonPro {
position: absolute;
width: 32px;
height: 32px;
left: 721px;
top: 430px;
background: #41cc90;
border-radius: 4px;
}
.Group {
align-self: flex-start;
width: 17px;
height: 17px;
position: absolute;
width: 17px;
height: 17px;
left: 728.5px;
top: 437px;
.Vector {
position: absolute;
width: 17px;
height: 17px;
left: 728.5px;
top: 422px;
background: #ffffff;
}
}
.Rectangle6 {
position: absolute;
width: 500px;
height: 65px;
left: 769px;
top: 397px;
background: #ffffff;
border-radius: 0px;
}
.Rectangle_1 {
position: absolute;
width: 3px;
height: 65px;
left: 766px;
top: 397px;
background: #f2f4f5;
}
.Cons {
position: absolute;
width: 38px;
height: 24px;
left: 794px;
top: 418px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #ff725c;
}
.ButtonCon {
align-self: flex-start;
width: 32px;
height: 32px;
background: #ff725c;
border-radius: 4px;
position: absolute;
width: 32px;
height: 32px;
left: 1222px;
top: 430px;
background: #ff725c;
border-radius: 4px;
}
.Group2 {
align-self: flex-start;
width: 17px;
height: 17px;
position: absolute;
width: 17px;
height: 17px;
left: 1229px;
top: 437px;
.Vector2 {
position: absolute;
width: 17px;
height: 17px;
left: 1230px;
top: 422px;
background: #ffffff;
}
}
.RowPro {
position: absolute;
width: 496px;
height: 75px;
left: 270px;
top: 479px;
background: #ffffff;
border-radius: 0px;
}
.GreenStripe {
position: absolute;
width: 95px;
height: 8px;
left: 294px;
top: 495px;
background: #41cc90;
border-radius: 0px;
}
.InputPro {
position:absolute;
width: 48px;
height: 24px;
left: 294px;
top: 512px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #2C343D;
}
.RowCon {
position: absolute;
width: 496px;
height: 75px;
left: 769px;
top: 479px;
background: #FFFFFF;
border-radius: 0px;
}
.RedStripe {
position: absolute;
width: 95px;
height: 8px;
left: 793px;
top: 495px;
background: #FF725C;
border-radius: 0px;
}
.InputCon {
position: absolute;
width: 48px;
height: 24px;
left: 793px;
top: 512px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #2C343D;
}
<p class="Rectangle"></p>
<p class="Rectangle2"></p>
<p class="Zander" contenteditable> Pro Con:</p>
<p class="Rectangle3"></p>
<p class="Rectangle4"></p>
<p class="Pros" contenteditable>Pros</p>
<button id="ButtonPro" class="ButtonPro"></button>
<div class="Group">
<div class="Vector">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
</svg>
</div>
</div>
<p class="Rectangle6"></p>
<p class="Rectangle_1"></p>
<p class="Cons" contenteditable>Cons</p>
<button class="ButtonCon"></button>
<div class="Group2">
<div class="Vector2">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
</svg>
</div>
</div>
<p class="RowPro"></p>
<p class="GreenStripe"></p>
<p class="InputPro" id="okay" contenteditable>Input</p>
<p class="Rectangle_2"></p>
<p class="RowCon"></p>
<p class="RedStripe"></p>
<p class="InputCon">Input</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Your code works (I think as intended), the problem is that it is not easy to press the button, because you have a div element on top. You just need to set pointer-events to none in that element. I have added css code for the Group class. Incidentally, you may want to set the other button to the same class (meaning change Group2 to Group:
$(document).ready(function(){
$("#ButtonPro").click(function(){
$("#okay").append("<p class=RowPro></p> <p class=GreenStripe></p> <p class=InputPro contenteditable>Input</p>");
});
});
.Rectangle {
align-self: flex-start;
width: 1539px;
height: 1268px;
background: #f2f4f5;
}
.Rectangle2 {
align-self: flex-start;
width: 1000px;
height: 105px;
background: #ffffff;
position: absolute;
width: 1000px;
height: 105px;
left: 270px;
top: 280px;
}
.Group{
pointer-events: none;
}
.Rectangle3 {
position: absolute;
width: 95px;
height: 8px;
left: 294px;
top: 305px;
background: #1d67ac;
border-radius: 0px;
}
.Zander{
position: absolute;
width: 218px;
height: 39px;
left: 297px;
top: 331px;
align-self: flex-start;
font-family: Arial;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 24px;
}
.Rectangle4 {
position: absolute;
width: 499px;
height: 65px;
left: 270px;
top: 397px;
background: #ffffff;
border-radius: 0px;
}
.Pros {
position: absolute;
width: 34px;
height: 24px;
left: 294px;
top: 418px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #41cc90;
}
.ButtonPro {
position: absolute;
width: 32px;
height: 32px;
left: 721px;
top: 430px;
background: #41cc90;
border-radius: 4px;
}
.Group {
align-self: flex-start;
width: 17px;
height: 17px;
position: absolute;
width: 17px;
height: 17px;
left: 728.5px;
top: 437px;
.Vector {
position: absolute;
width: 17px;
height: 17px;
left: 728.5px;
top: 422px;
background: #ffffff;
}
}
.Rectangle6 {
position: absolute;
width: 500px;
height: 65px;
left: 769px;
top: 397px;
background: #ffffff;
border-radius: 0px;
}
.Rectangle_1 {
position: absolute;
width: 3px;
height: 65px;
left: 766px;
top: 397px;
background: #f2f4f5;
}
.Cons {
position: absolute;
width: 38px;
height: 24px;
left: 794px;
top: 418px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #ff725c;
}
.ButtonCon {
align-self: flex-start;
width: 32px;
height: 32px;
background: #ff725c;
border-radius: 4px;
position: absolute;
width: 32px;
height: 32px;
left: 1222px;
top: 430px;
background: #ff725c;
border-radius: 4px;
}
.Group2 {
align-self: flex-start;
width: 17px;
height: 17px;
position: absolute;
width: 17px;
height: 17px;
left: 1229px;
top: 437px;
.Vector2 {
position: absolute;
width: 17px;
height: 17px;
left: 1230px;
top: 422px;
background: #ffffff;
}
}
.RowPro {
position: absolute;
width: 496px;
height: 75px;
left: 270px;
top: 479px;
background: #ffffff;
border-radius: 0px;
}
.GreenStripe {
position: absolute;
width: 95px;
height: 8px;
left: 294px;
top: 495px;
background: #41cc90;
border-radius: 0px;
}
.InputPro {
position:absolute;
width: 48px;
height: 24px;
left: 294px;
top: 512px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #2C343D;
}
.RowCon {
position: absolute;
width: 496px;
height: 75px;
left: 769px;
top: 479px;
background: #FFFFFF;
border-radius: 0px;
}
.RedStripe {
position: absolute;
width: 95px;
height: 8px;
left: 793px;
top: 495px;
background: #FF725C;
border-radius: 0px;
}
.InputCon {
position: absolute;
width: 48px;
height: 24px;
left: 793px;
top: 512px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #2C343D;
}
<p class="Rectangle"></p>
<p class="Rectangle2"></p>
<p class="Zander" contenteditable> Pro Con:</p>
<p class="Rectangle3"></p>
<p class="Rectangle4"></p>
<p class="Pros" contenteditable>Pros</p>
<button id="ButtonPro" class="ButtonPro"></button>
<div class="Group">
<div class="Vector">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
</svg>
</div>
</div>
<p class="Rectangle6"></p>
<p class="Rectangle_1"></p>
<p class="Cons" contenteditable>Cons</p>
<button class="ButtonCon"></button>
<div class="Group2">
<div class="Vector2">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
</svg>
</div>
</div>
<p class="RowPro"></p>
<p class="GreenStripe"></p>
<p class="InputPro" id="okay" contenteditable>Input</p>
<p class="Rectangle_2"></p>
<p class="RowCon"></p>
<p class="RedStripe"></p>
<p class="InputCon">Input</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
EDIT after comment:
If you do not need absolute positioning, the jQuery code is kept simple. In that setting, each card is relatively positioned in an absolutely positioned div (#okay). Notice that now .GreenStripe and .InputPro are inside .RowPro. I have kept the approximate layout, but you would need to tweak top and left for .GreenStripe and InputPro:
$(document).ready(function(){
$("#ButtonPro").click(function(){
$("#okay").append("<div class='RowPro'><div class='GreenStripe'></div><div class='InputPro' contenteditable>Input</div></div>");
});
});
.Rectangle {
align-self: flex-start;
width: 1539px;
height: 1268px;
background: #f2f4f5;
}
.Rectangle2 {
align-self: flex-start;
width: 1000px;
height: 105px;
background: #ffffff;
position: absolute;
width: 1000px;
height: 105px;
left: 270px;
top: 280px;
}
.Group{
pointer-events: none;
}
.Rectangle3 {
position: absolute;
width: 95px;
height: 8px;
left: 294px;
top: 305px;
background: #1d67ac;
border-radius: 0px;
}
.Zander{
position: absolute;
width: 218px;
height: 39px;
left: 297px;
top: 331px;
align-self: flex-start;
font-family: Arial;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 24px;
}
.Rectangle4 {
position: absolute;
width: 499px;
height: 65px;
left: 270px;
top: 397px;
background: #ffffff;
border-radius: 0px;
}
.Pros {
position: absolute;
width: 34px;
height: 24px;
left: 294px;
top: 418px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #41cc90;
}
.ButtonPro {
position: absolute;
width: 32px;
height: 32px;
left: 721px;
top: 430px;
background: #41cc90;
border-radius: 4px;
}
.Group {
align-self: flex-start;
width: 17px;
height: 17px;
position: absolute;
width: 17px;
height: 17px;
left: 728.5px;
top: 437px;
.Vector {
position: absolute;
width: 17px;
height: 17px;
left: 728.5px;
top: 422px;
background: #ffffff;
}
}
.Rectangle6 {
position: absolute;
width: 500px;
height: 65px;
left: 769px;
top: 397px;
background: #ffffff;
border-radius: 0px;
}
.Rectangle_1 {
position: absolute;
width: 3px;
height: 65px;
left: 766px;
top: 397px;
background: #f2f4f5;
}
.Cons {
position: absolute;
width: 38px;
height: 24px;
left: 794px;
top: 418px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #ff725c;
}
.ButtonCon {
align-self: flex-start;
width: 32px;
height: 32px;
background: #ff725c;
border-radius: 4px;
position: absolute;
width: 32px;
height: 32px;
left: 1222px;
top: 430px;
background: #ff725c;
border-radius: 4px;
}
.Group2 {
align-self: flex-start;
width: 17px;
height: 17px;
position: absolute;
width: 17px;
height: 17px;
left: 1229px;
top: 437px;
.Vector2 {
position: absolute;
width: 17px;
height: 17px;
left: 1230px;
top: 422px;
background: #ffffff;
}
}
.RowPro {
width: 496px;
height: 75px;
margin-top: 16px;
background: #ffffff;
border-radius: 0px;
}
.GreenStripe {
position: relative;
width: 95px;
height: 8px;
top: 16px;
left: 16px;
background: #41cc90;
border-radius: 0px;
}
.InputPro {
width: 500px;
height: 24px;
position: relative;
left: 16px;
top: 33px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #2C343D;
}
.RowCon {
position: absolute;
width: 496px;
height: 75px;
left: 769px;
top: 479px;
background: #FFFFFF;
border-radius: 0px;
}
.RedStripe {
position: absolute;
width: 95px;
height: 8px;
left: 793px;
top: 495px;
background: #FF725C;
border-radius: 0px;
}
.InputCon {
position: absolute;
width: 500px;
height: 24px;
left: 793px;
top: 512px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #2C343D;
}
#okay{
position: absolute;
width: 496px;
height: 123px;
left: 270px;
top: 479px;
}
<p class="Rectangle"></p>
<p class="Rectangle2"></p>
<p class="Zander" contenteditable> Pro Con:</p>
<p class="Rectangle3"></p>
<p class="Rectangle4"></p>
<p class="Pros" contenteditable>Pros</p>
<button id="ButtonPro" class="ButtonPro"></button>
<div class="Group">
<div class="Vector">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
</svg>
</div>
</div>
<p class="Rectangle6"></p>
<p class="Rectangle_1"></p>
<p class="Cons" contenteditable>Cons</p>
<button class="ButtonCon"></button>
<div class="Group2">
<div class="Vector2">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
</svg>
</div>
</div>
<div id="okay">
<div class="RowPro"><div class="GreenStripe"></div><div class="InputPro" contenteditable>Input</div></div>
</div>
<p class="Rectangle_2"></p>
<p class="RowCon"></p>
<p class="RedStripe"></p>
<p class="InputCon">Input</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Here's some guidance: try y = mx + b. That should give you a foundation to work off of.

HTML content layering on top of each other

Ive added some flip animations (javascirpt) to my grid of images. This has required me to add some extra css to style up the "back" div. The grid of images is now sitting behind the div.instagram element and in front of the footer element. When in responds down all of the divs layer on top of each other.
$(document).ready(function() {
$(".success").hide();
$("form").submit(function(e) {
e.preventDefault();
$("#wanttoplay").hide();
$(".success").show();
});
$(".successcollab").hide();
$("form").submit(function(e) {
e.preventDefault();
$("#collaborate").hide();
$(".successcollab").show();
});
$(document).on("click", ".flip-container", function() {
$(this).toggleClass('hover');
});
});
#font-face {
font-family: Geomanist-Regular;
src: url('fonts/Geomanist-Regular.otf');
}
#font-face {
font-family: Geomanist-Bold;
src: url('fonts/Geomanist-Bold.otf');
}
#header {
background-color: #000;
margin-bottom: 70px;
}
#header a {
color: #fff;
transition: color 0.5s;
font-family: 'Geomanist-Bold', helvetica, sans-serif;
}
#header a span {
color: #ffffff;
border-bottom: 2px solid;
padding-bottom: 10px;
border-color: transparent;
transition: border-bottom 0.5s;
}
#header a span:hover {
color: #7ed321;
border-color: #7ed321;
}
#header .selected a span {
color: #7ED321;
}
#header img {
width: 40px;
margin-right: 10px;
display: inline-block;
vertical-align: top;
margin-top: -15px;
}
#header li {
margin-left: 30px;
font-size: 20px;
}
.navbar {
padding-top: 25px;
padding-bottom: 20px;
}
.navbar-header a {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
}
.navbar-brand {
font-size: 30px;
font-family: 'Geomanist-Bold', helvetica, sans-serif;
border-bottom: none;
}
.navbar-inverse {
background-color: #000000;
}
.bottom {
padding-bottom: 20px;
}
.homepage-main {
min-height: 570px;
background-image: url('/images/mainimage.jpg');
background-repeat: no-repeat;
border-radius: 0px;
margin-bottom: 40px;
}
.vertical-text-main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -25%);
}
.wheredoweplay {
padding-top: 30px;
padding-bottom: 20px;
}
.wanttocollaborate {
padding-top: 30px;
}
.wanttoplay {
padding-top: 30px;
padding-bottom: 20px;
}
.instagram {
padding-top: 20px;
padding-bottom: 40px;
}
.instagram h2 {
padding-bottom: 20px;
}
.container2 {
position: relative;
filter: grayscale(0%);
transition: filter 1s;
}
.container2:hover {
filter: grayscale(100%);
}
.center {
position: absolute;
left: 0;
top: 88%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 18px;
transition: color 1s;
}
.center:hover {
cursor: pointer;
color: #7ED321;
}
h3.centersmall {
position: absolute;
left: 0;
top: 76%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 18px;
transition: color 1s;
}
h3.centersmall:hover {
cursor: pointer;
color: #7ED321;
}
img.playerpics {
width: 100%;
height: auto;
margin-bottom: 30px;
}
.alextext {
background-color: #000000;
margin-bottom: 30px;
color: #ffffff;
text-align: center;
padding-top: 30%;
padding-bottom: 23.5%;
padding-left: 30px;
padding-right: 30px;
}
.readmore {
cursor: pointer;
}
img.theclubpics {
margin-top: 20px;
}
div.vertical-container {
height: 570px;
position: relative;
}
div.vertical-text-para {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
}
form.formpadding {
padding-top: 20px;
}
.formmaxwidth input {
max-width: 400px;
display: inline-block;
}
textarea.form-control {
height: auto;
color: #000;
display: inline-block;
max-width: 400px;
border-color: #eee;
border-radius: 0px;
padding-top: 15px;
padding-left: 20px;
padding-bottom: 15px;
}
.form-control:focus {
border-color: #7DC42E;
box-shadow: none;
}
ul.navtheclub li {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 18px;
display: inline-block;
padding-right: 40px;
padding-top: 40px;
}
.breadcrumb .active {
color: #000000;
}
.textcenter {
text-align: center;
}
.signoff p {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
}
.caption p {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 13px;
font-weight: 400;
color: #999;
}
ol.breadcrumb {
background-color: #ffffff;
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 13px;
padding-left: 0px;
}
h1 {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 50px;
}
h2 {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 32px;
padding-top: 20px;
}
body {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
padding-top: 70px;
color: #000;
}
p {
font-family: 'Geomanist-Regular', helvetica, sans-serif;
font-size: 18px;
line-height: 28px;
}
.smalltext {
font-size: 11px;
}
a.link {
color: #CBCBCB;
font-family: 'Geomanist-Bold', helvetica, sans-serif;
transition: color 0.5s;
border-bottom: 2px solid;
border-color: transparent;
transition: border-bottom 0.5s;
}
a.link:hover {
color: #7ED321;
text-decoration: none;
border-color: #7ed321;
}
button.enterDetails {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 16px;
border-radius: 0px;
background-color: #7ED321;
vertical-align: middle;
border: 0px;
min-width: 190px;
height: 48px;
transition: background-color 0.5s;
}
button.enterDetails:hover {
background-color: #7DC42E;
}
button.enterDetails:focus {
outline: 0;
}
button.enterDetails img {
padding-left: 3px;
transform: translate(0px, 0);
transition: all 0.5s;
}
button.enterDetails:hover img {
transform: translate(10px, 0);
}
.form-group input {
font-family: 'Geomanist-Regular', helvetica, sans-serif;
border: 1px solid #eee;
color: #000;
height: 48px;
padding: 0 20px;
min-width: 240px;
border-radius: 0px;
}
textarea {
font-family: 'Geomanist-Regular', helvetica, sans-serif;
border: 1px solid #eee;
color: #000;
height: 48px;
padding: 0 20px;
min-width: 240px;
border-radius: 0px;
}
input.form-control:focus {
border-color: #7DC42E;
box-shadow: none;
}
input#formGroupExampleInput {
padding-bottom: 48px;
}
.btn-secondary {
padding-left: 10px;
}
.btn-secondary img {
padding-left: 5px;
cursor: pointer;
transform: translate(0px, 0);
transition: all 0.5s;
}
.btn-secondary:hover img {
transform: translate(10px, 0);
}
.btn-secondary a {
color: #000000;
border-bottom: none;
font-size: 16px;
transition: color 0.5s;
text-decoration: none;
}
.btn-secondary a:hover {
color: #7DC42E;
}
.success {
padding-top: 60px;
padding-bottom: 60px;
}
.successcollab {
padding-top: 60px;
padding-bottom: 60px;
}
.left-image {
min-height: 570px;
background-image: url('../images/nextmatch_image.jpg');
background-repeat: no-repeat;
padding-bottom: 40px;
}
.right-image {
min-height: 570px;
background-image: url('../images/theplayers_image.jpg');
background-repeat: no-repeat;
margin-bottom: 40px;
}
#homepage-title {
color: #ffffff;
}
p.shaded {
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
top: 400px;
padding-right: 40px;
}
p#second-para {
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
top: 450px;
padding-right: 40px;
}
h2#white-text {
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
top: 410px;
padding-right: 40px;
}
.vertical-text-main.white {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -25%);
color: #ffffff;
text-align: center;
bottom: -350px;
}
.vertical-text-para h2 {
margin-top: 0px;
}
a.homepage-top-link-white {
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
top: 500px;
padding-right: 40px;
}
a.homepage-top-link {
color: #ffffff;
}
.white-margin {
margin-left: 0px;
}
#formGroupExampleInput {
min-height: 100px;
}
#footer {
background-color: #000000;
color: #ffffff;
font-family: 'Geomanist-Regular', helvetica, sans-serif;
margin: 0px;
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
}
#footer p {
font-size: 13px;
}
.dividers {
padding-top: 10px;
}
#footer img {
padding-right: 15px;
padding-left: 15px;
color: #ffffff;
opacity: 1;
transition: opacity 0.5s;
}
#footer img:hover {
opacity: 0.5;
}
.right {
float: right;
}
.flip-container {
perspective: 1000px;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
background-color: #000000;
color: #ffffff;
width: 360px;
height: 371px;
padding: 100px 20px 0px 20px;
text-align: center;
box-sizing: border-box;
}
#media (max-width: 1199px) {
.back {
display: block;
max-width: 100%;
height: 300px;
padding: 50px 20px 0px 20px;
box-sizing: border-box;
}
}
#media (max-width: 991px) {
#header li {
margin-left: 0px;
font-size: 18px;
}
.back {
display: block;
max-width: 100%;
height: 227px;
padding: 50px 20px 0px 20px;
box-sizing: border-box;
font-size: 18px;
}
.center {
top: 84%;
}
h3.centersmall {
position: absolute;
left: 0;
top: 69%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 16px;
transition: color 1s;
padding-top: -10px;
}
p.playerstats {
font-size: 16px;
line-height: 24px;
}
}
#media (max-width: 767px) {
.center {
top: 91%;
font-size: 24px;
}
h3.centersmall {
position: absolute;
left: 0;
top: 82%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 24px;
transition: color 1s;
padding-top: -10px;
}
.form-group input {
margin-bottom: 20px;
}
.flip-container {
perspective: 1000px;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
width: 100%;
margin-bottom: 30px;
}
.back {
transform: rotateY(180deg);
background-color: #000000;
color: #ffffff;
width: 737px;
height: 600px;
margin-bottom: 30px;
padding: 100px 40px 0px 40px;
text-align: center;
box-sizing: border-box;
}
p.playerstats {
font-size: 18px;
line-height: 32px;
padding-right: 40px;
padding-left: 40px;
}
}
#media (max-width: 400px) {
.left-image {
min-height: 570px;
background-image: url(../images/nextmatch_image.jpg);
background-repeat: no-repeat;
padding-bottom: 40px;
margin-right: 15px;
}
.right-image {
min-height: 570px;
background-image: url(../images/theplayers_image.jpg);
background-repeat: no-repeat;
margin-bottom: 40px;
margin-right: 15px;
margin-top: 40px;
}
.homepage-main {
min-height: 400px;
background-image: url(/images/mainimage.jpg);
background-repeat: no-repeat;
border-radius: 0px;
margin-bottom: 40px;
}
.form-club {
margin-bottom: 10px;
}
.form-group {
margin-bottom: 0px;
}
textarea.form-control {
margin-bottom: 10px;
}
button.enterDetails {
width: 100%;
}
.form-group input {
margin-bottom: 20px;
}
.flip-container {
perspective: 1000px;
margin-bottom: 100px;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
transform: rotateY(0deg);
width: 370px;
height: 382px;
margin-bottom: 30px;
}
.back {
transform: rotateY(180deg);
background-color: #000000;
color: #ffffff;
width: 370px;
height: 382px;
margin-bottom: 30px;
padding: 100px 20px 0px 20px;
text-align: center;
box-sizing: border-box;
}
h3.centersmall {
position: absolute;
left: 0;
top: 83%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 18px;
transition: color 1s;
padding-top: -10px;
}
.center {
top: 88%;
font-size: 18px;
}
img.playerpiclast {
margin-bottom: 400px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="/images/favicon.png" sizes="16x16 32x32" type="image/png">
<title>The players</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/website-css.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/picklesfc.js"></script>
</head>
<body>
<header id="header">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/homepage/"><img src="/images/logo.svg" alt="Pickles FC logo">Pickles FC</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><span>The Club</span></li>
<li class="selected"><span>The Players</span></li>
<li><span>The Shop</span></li>
<li><span>Collaborations</span></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<div class="theplayers row">
<div class='container2 col-sm-8'>
<h3 class="center">Alex Stewart</h3>
<image src="/images/mainprofile_image.jpg" alt="mainprofile_image2.jpg" class="playerpics img-responsive">
</div>
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front ">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front ">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
</div>
<div class="row playpicpadding">
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front ">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front ">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
</div>
<div class="instagram">
<h2 class="text-center">#picklesmagazine</h2>
<script src="//apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-276db0d4-25a2-4a5e-8a72-30da22fe3732"></div>
</div>
</div>
</body>
<footer id="footer">
<p>© 2017 Pickles Magazine | Football, Design and Wit</p>
<img src="/images/facebook.svg" height="25">
<img src="/images/twitter.svg" height="25">
<img src="/images/instagram.svg" height="25">
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

Develop Reference

JavaScript is the programming language of the Web.

numbers in correct order display button - javascript

Related

My search bar backend config is not properly responding to my condition statement

How to delay something thats just a possibility

Styling is different between pages HTML CSS JS with similar code

Add Card on Click

HTML content layering on top of each other

Categories

Resources