reglage
This commit is contained in:
@@ -13,7 +13,7 @@ body {
|
|||||||
|
|
||||||
header {
|
header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-color: #000;
|
background-color: #162938;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: -50;
|
left: -50;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -92,7 +92,7 @@ div {
|
|||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
color: #000;
|
color: #162938;
|
||||||
}
|
}
|
||||||
|
|
||||||
select, input, textarea {
|
select, input, textarea {
|
||||||
@@ -103,7 +103,7 @@ select, input, textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: #000;
|
background-color: #162938;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
border: none;
|
border: none;
|
||||||
|
16
script.js
16
script.js
@@ -16,6 +16,9 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
wrapper.classList.remove('active-popup');
|
wrapper.classList.remove('active-popup');
|
||||||
}
|
}
|
||||||
|
function hideLoginForm() {
|
||||||
|
wrapper.classList.remove('active-popup');
|
||||||
|
}
|
||||||
|
|
||||||
registerLink.addEventListener('click', function (event) {
|
registerLink.addEventListener('click', function (event) {
|
||||||
openLoginForm(event);
|
openLoginForm(event);
|
||||||
@@ -26,20 +29,9 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
openLoginForm(event);
|
openLoginForm(event);
|
||||||
wrapper.classList.remove('active');
|
wrapper.classList.remove('active');
|
||||||
});
|
});
|
||||||
|
closeLoginForm();
|
||||||
|
|
||||||
btnPopup.addEventListener('click', openLoginForm);
|
btnPopup.addEventListener('click', openLoginForm);
|
||||||
|
|
||||||
iconClose.addEventListener('click', closeLoginForm);
|
iconClose.addEventListener('click', closeLoginForm);
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('scroll', function() {
|
|
||||||
var headerPlaceholder = document.querySelector('.header-placeholder');
|
|
||||||
var header = document.querySelector('header');
|
|
||||||
|
|
||||||
if (window.scrollY >= header.offsetTop) {
|
|
||||||
headerPlaceholder.style.display = 'block';
|
|
||||||
} else {
|
|
||||||
headerPlaceholder.style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
23
style.css
23
style.css
@@ -7,7 +7,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
/* display: flex; */ /* Remove this line */
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -89,7 +89,7 @@ header {
|
|||||||
.wrapper {
|
.wrapper {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px; /* Set maximum width */
|
max-width: 400px;
|
||||||
height: 440px;
|
height: 440px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 2px solid rgba(255, 255, 255, .5);
|
border: 2px solid rgba(255, 255, 255, .5);
|
||||||
@@ -109,11 +109,11 @@ header {
|
|||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
@media only screen and (max-width: 768px) {
|
||||||
.wrapper {
|
.wrapper {
|
||||||
max-width: none; /* Remove maximum width for smaller screens */
|
max-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
padding: 20px 20px; /* Adjust padding for smaller screens */
|
padding: 20px 20px;
|
||||||
}
|
}
|
||||||
.navigation {
|
.navigation {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -329,15 +329,21 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.photo-grid {
|
.photo-grid {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
flex-wrap: wrap;
|
||||||
gap: 20px;
|
justify-content: space-around;
|
||||||
text-align: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.photo {
|
.photo {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
width: calc(50% - 10px); /* Adjust the width as needed */
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.photo img {
|
.photo img {
|
||||||
@@ -369,6 +375,7 @@ header {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.header-placeholder {
|
.header-placeholder {
|
||||||
height: 80px;
|
height: 80px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
Reference in New Issue
Block a user