Issue
I'm trying to animate photos with the '.project-img' class under 'first dog' and 'second dog' in the same way as the first photo. However, my code, which uses forEach to assign addEventListener to these elements, doesn't seem to be working. Can someone please help me understand what might be causing the issue or provide insights on how to achieve the
After identifying why this code isn't working, I noticed that the perspective is too much pushed towards the top of the picture. How can this be fixed
//ANIMATING THE MAIN IMAGE ON THE START PAGE
let myPanel = document.getElementById("panel");
let subpanel = document.getElementById("panel-container");
const projectPanel = document.querySelectorAll("#panel-project");
// const projectSubpanel = document.querySelector("#project-img");
let mouseX, mouseY;
let transformAmount = 3;
function transformPanel(panel, subpanel, mouseEvent) {
mouseX = mouseEvent.pageX;
mouseY = mouseEvent.pageY;
const centerX = panel.offsetLeft + panel.clientWidth / 2;
const centerY = panel.offsetTop + panel.clientHeight / 2;
const percentX = (mouseX - centerX) / (panel.clientWidth / 2);
const percentY = -((mouseY - centerY) / (panel.clientHeight / 2));
subpanel.style.transform =
"perspective(400px) rotateY(" +
percentX * transformAmount +
"deg) rotateX(" +
percentY * transformAmount +
"deg)";
}
function handleMouseEnter(panel, subpanel) {
setTimeout(() => {
subpanel.style.transition = "";
}, 100);
subpanel.style.transition = "transform 0.1s";
}
function handleMouseLeave(panel, subpanel) {
subpanel.style.transition = "transform 0.1s";
setTimeout(() => {
subpanel.style.transition = "";
}, 100);
subpanel.style.transform = "perspective(400px) rotateY(0deg) rotateX(0deg)";
}
myPanel.addEventListener("mousemove", (event) =>
transformPanel(myPanel, subpanel, event)
);
myPanel.addEventListener("mouseenter", () =>
handleMouseEnter(myPanel, subpanel)
);
myPanel.addEventListener("mouseleave", () =>
handleMouseLeave(myPanel, subpanel)
);
projectPanel.forEach((el) => {
const projectSubpanel = el.querySelector(".project-img");
el.addEventListener("mousemove", (event) =>
transformPanel(el, projectSubpanel, event)
);
el.addEventListener("mouseenter", () =>
handleMouseEnter(el, projectSubpanel)
);
el.addEventListener("mouseleave", () =>
handleMouseLeave(el, projectSubpanel)
);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* rgba(116, 116, 116) */
--gray-color: #ededed;
}
body {
font-family: 'Raleway', sans-serif;
}
/* //////////////////LOADER///////////////////// */
.loader {
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 99;
}
.loader-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
font-size: 20rem;
color: transparent;
-webkit-text-stroke: 3px #cbcbcb;
}
.loader-box.first {
position: absolute;
top: 0;
left: 0;
background-color: var(--gray-color);
z-index: 2;
}
.loader-box.second {
position: absolute;
top: 0;
left: 0;
background-color: #b8b8b8;
z-index: 1;
}
/* //////////////////NAV///////////////////// */
nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100px;
width: 90%;
display: flex;
align-items: center;
padding-block: 10px;
z-index: 2;
background-color: #fff;
overflow: hidden;
}
nav a {
padding: 5px 20px;
text-decoration: none;
color: rgb(62, 62, 62);
}
.name-logo {
margin-right: auto;
text-transform: uppercase;
font-size: 1.8rem;
color: rgb(116, 116, 116);
font-weight: 500;
}
.menu {
display: flex;
list-style: none;
font-size: 1.1rem;
}
/* //////////////////Start Page///////////////////// */
.start-page {
/* background-color: red; */
overflow: hidden;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
}
.start-image {
width: 50%;
height: 100%;
}
.start-page #panel {
display: flex;
justify-content: center;
align-items: center;
filter: grayscale(60%)
}
.start-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
height: 100%;
}
.start-text p,
.start-title,
.image {
background-color: #fff;
z-index: 3;
}
.start-text p {
font-size: 1.3rem;
margin-right: 100px;
}
.start-title {
text-transform: uppercase;
font-size: 5rem;
color: transparent;
-webkit-text-stroke: 2px black;
}
.start-title span {
color: transparent;
-webkit-text-stroke: 3px black;
}
/* PARALAX */
#panel,
#panel-container {
width: 500px;
height: 650px;
}
#panel-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url("https://picsum.photos/id/237/200/300") center top;
background-size: cover;
background-position: 50% 50%;
transform: perspective(400px) rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
/* box-shadow: 1.5rem 2.5rem 5rem 0.7rem rgba(0, 0, 0, 0.13); */
}
.panel-content {
color: black;
text-align: center;
padding: 20px;
transform: translateZ(80px) scale(0.8);
transform-style: preserve-3d;
overflow-wrap: break-word;
}
/* LINE */
.decoration-line {
position: absolute;
top: 0;
left: 50%;
height: 300vh;
width: 1px;
background-color: black;
z-index: -1;
}
.decoration-line.one {
left: 10%;
}
.decoration-line.three {
left: 90%;
}
/* MY WORK */
.my-work {
width: 100%;
}
.my-work h1 {
font-size: 6rem;
width: 60%;
margin: 0 auto 100px auto;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 3px black;
background-color: #fff;
text-align: center;
z-index: 3;
}
.projects {
position: relative;
width: 78%;
left: 11%;
}
.project {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
margin-bottom: 100px;
}
.panel-project {
min-width: 550px;
height: 300px;
}
.project-img {
display: flex;
justify-content: center;
align-items: center;
position: relative;
transform: perspective(400px) rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
min-width: 550px;
height: 300px;
background-size: cover;
background-position: center;
border: 1px solid black;
border-radius: 10px;
filter: grayscale(60%)
}
.project-desription {
width: 50%;
text-align: center;
background-color: #fff;
padding: 0 50px;
}
.project-desription h2 {
font-size: 2.5rem;
-webkit-text-stroke: 1px black;
color: transparent;
margin-bottom: 30px;
}
.project-desription p {
line-height: 1.5rem;
}
.reverse {
flex-direction: row-reverse;
}
#komornik {
background-image: url("https://picsum.photos/id/237/200/300");
}
#hulk-factory {
background-image: url("https://picsum.photos/id/237/200/300");
}
@media only screen and (max-width:1200px) {
/* LOADER */
.loader-box {
font-size: 15rem;
}
/* START PAGE */
.start-text p {
font-size: 1rem;
}
.start-title {
font-size: 4rem;
}
#panel-container {
width: 380px;
}
/* MY WORK */
.project-img {
min-width: 400px;
height: 200px;
}
.project-desription p {
line-height: 1.2rem;
}
}
@media only screen and (max-width:992px) {
/* MY WORK */
.my-work h1 {
font-size: 4rem;
}
.project {
flex-direction: column;
}
.project-desription {
width: 100%;
text-align: center;
background-color: #fff;
margin-top: 25px;
padding: 0 50px;
}
.project-desription h2 {
font-size: 2.5rem;
-webkit-text-stroke: 1px black;
color: transparent;
margin-bottom: 30px;
}
.project-desription p {
line-height: 1.5rem;
}
}
@media only screen and (max-width:768px) {
/* LOADER */
.loader-box {
font-size: 10rem;
}
/* MENU */
.menu {
display: none;
}
nav {
align-items: flex-start;
width: 100%;
transition: .3s;
}
.name-logo {
padding: 15px 0 0 30px;
}
.menu-active {
height: 300px;
}
.menu-active .menu {
position: absolute;
top: 30%;
display: block;
text-align: center;
width: 100%;
font-size: 1.7rem;
}
.menu-active li {
padding: 15px 0;
}
.hamburger-menu {
position: relative;
width: 50px;
height: 50px;
cursor: pointer;
margin-right: 40px;
}
.hamburger-line,
.hamburger-line::before,
.hamburger-line::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: black;
display: block;
}
.hamburger-line {
top: 50%;
left: 0;
transform: translateY(-50%);
}
.hamburger-line::before {
top: -12px;
}
.hamburger-line::after {
top: 12px;
}
/* START PAGE */
.start-page {
padding-top: 120px;
flex-direction: column;
justify-content: center;
}
.start-image {
width: 100%;
}
.start-text {
width: 80%;
}
.start-title {
font-size: 3rem;
}
#panel {
height: 400px;
}
#panel-container {
height: 50vh;
width: 100%;
top: 50px;
}
.start-text p,
.start-title,
.image {
background-color: transparent;
z-index: 0;
}
.decoration-line {
display: none;
}
}
@media only screen and (max-width:576px) {
/* LOADER */
.loader-box {
font-size: 7rem;
}
.name-logo {
font-size: 1.3rem;
}
.start-title {
font-size: 2.2rem;
}
.start-title {
-webkit-text-stroke: 1px black;
}
.start-title span {
-webkit-text-stroke: 2px black;
}
/* MY WORK */
.my-work {
width: 100%;
}
.my-work h1 {
margin-top: 50px;
font-size: 3.5rem;
width: 100%;
}
.project-desription {
padding: 0 0;
}
}
@media only screen and (max-height:800px) {
#panel,
#panel-container {
width: 350px;
height: 450px;
}
.start-text p {
font-size: 1rem;
}
.start-title {
font-size: 3.5rem;
}
/* LOADER */
}
<nav>
<a class="name-logo" href="#">LOREM IPSUM</a>
<div class="hamburger-menu">
<div class="hamburger-line"></div>
</div>
<ul class="menu ">
<li class="menu-li"><a href="">Start</a></li>
<li class="menu-li"><a href="">Work</a></li>
<li class="menu-li"><a href="">Contact</a></li>
</ul>
</nav>
<main>
<div class="decoration-line one"></div>
<div class="decoration-line two"></div>
<div class="decoration-line three"></div>
<div class="start-page">
<div class="image">
<div id="panel">
<div id="panel-container">
<div id="panel-content"></div>
</div>
</div>
</div>
<div class="start-text">
<h1 class="start-title">Lorem ipsum dolor sit amet consectetur adipisicing elit. </h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quo distinctio adipisci accusamus libero vel quos, cum, autem dolore laborum quibusdam recusandae odio ex odit aperiam aliquam ipsum enim iure
</p>
</div>
</div>
<div class="my-work">
<h1>Lorem ipsum</h1>
<div class="projects">
<div class="project">
<a id="panel-project" href="" target="_blank">
<div id="komornik" class="project-img"></div>
</a>
<div class="project-desription">
<h2>First Dog</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quo distinctio adipisci
accusamus libero vel quos, cum, autem dolore laborum quibusdam recusandae odio ex odit
aperiam aliquam ipsum enim iure. Cupiditate fugiat quia, quo possimus a fugit. Deserunt
nesciunt placeat quam? Dignissimos ipsa aut atque veritatis aspernatur, quaerat iste et?</p>
</div>
</div>
<div class="project reverse">
<a id="panel-project" href="" target="_blank">
<div id="hulk-factory" class="project-img"></div>
</a>
<div class="project-desription">
<h2>Second dog</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quo distinctio adipisci
accusamus libero vel quos, cum, autem dolore laborum quibusdam recusandae odio ex odit
aperiam aliquam ipsum enim iure. Cupiditate fugiat quia, quo possimus a fugit. Deserunt
nesciunt placeat quam? Dignissimos ipsa aut atque veritatis aspernatur, quaerat iste et?</p>
</div>
</div>
</div>
</main>
Solution
Mistakenly you have used a duplicated ID
for both elements, so you cannot use the same id twice, in case of getting this work, you need to replace the id
attribute with class
and set your querySelectorAll
to this class, and it's all,
give a try to this snippet to see how it's going on!
//ANIMATING THE MAIN IMAGE ON THE START PAGE
let myPanel = document.getElementById("panel");
let subpanel = document.getElementById("panel-container");
const projectPanel = document.querySelectorAll(".panel-project");
// const projectSubpanel = document.querySelector("#project-img");
let mouseX, mouseY;
let transformAmount = 3;
function transformPanel(panel, subpanel, mouseEvent) {
mouseX = mouseEvent.pageX;
mouseY = mouseEvent.pageY;
const centerX = panel.offsetLeft + panel.clientWidth / 2;
const centerY = panel.offsetTop + panel.clientHeight / 2;
const percentX = (mouseX - centerX) / (panel.clientWidth / 2);
const percentY = -((mouseY - centerY) / (panel.clientHeight / 2));
subpanel.style.transform =
"perspective(400px) rotateY(" +
percentX * transformAmount +
"deg) rotateX(" +
percentY * transformAmount +
"deg)";
}
function handleMouseEnter(panel, subpanel) {
setTimeout(() => {
subpanel.style.transition = "";
}, 100);
subpanel.style.transition = "transform 0.1s";
}
function handleMouseLeave(panel, subpanel) {
subpanel.style.transition = "transform 0.1s";
setTimeout(() => {
subpanel.style.transition = "";
}, 100);
subpanel.style.transform = "perspective(400px) rotateY(0deg) rotateX(0deg)";
}
myPanel.addEventListener("mousemove", (event) =>
transformPanel(myPanel, subpanel, event)
);
myPanel.addEventListener("mouseenter", () =>
handleMouseEnter(myPanel, subpanel)
);
myPanel.addEventListener("mouseleave", () =>
handleMouseLeave(myPanel, subpanel)
);
projectPanel.forEach((el) => {
const projectSubpanel = el.querySelector(".project-img");
el.addEventListener("mousemove", (event) =>
transformPanel(el, projectSubpanel, event)
);
el.addEventListener("mouseenter", () =>
handleMouseEnter(el, projectSubpanel)
);
el.addEventListener("mouseleave", () =>
handleMouseLeave(el, projectSubpanel)
);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* rgba(116, 116, 116) */
--gray-color: #ededed;
}
body {
font-family: 'Raleway', sans-serif;
}
/* //////////////////LOADER///////////////////// */
.loader {
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 99;
}
.loader-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
font-size: 20rem;
color: transparent;
-webkit-text-stroke: 3px #cbcbcb;
}
.loader-box.first {
position: absolute;
top: 0;
left: 0;
background-color: var(--gray-color);
z-index: 2;
}
.loader-box.second {
position: absolute;
top: 0;
left: 0;
background-color: #b8b8b8;
z-index: 1;
}
/* //////////////////NAV///////////////////// */
nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100px;
width: 90%;
display: flex;
align-items: center;
padding-block: 10px;
z-index: 2;
background-color: #fff;
overflow: hidden;
}
nav a {
padding: 5px 20px;
text-decoration: none;
color: rgb(62, 62, 62);
}
.name-logo {
margin-right: auto;
text-transform: uppercase;
font-size: 1.8rem;
color: rgb(116, 116, 116);
font-weight: 500;
}
.menu {
display: flex;
list-style: none;
font-size: 1.1rem;
}
/* //////////////////Start Page///////////////////// */
.start-page {
/* background-color: red; */
overflow: hidden;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
}
.start-image {
width: 50%;
height: 100%;
}
.start-page #panel {
display: flex;
justify-content: center;
align-items: center;
filter: grayscale(60%)
}
.start-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
height: 100%;
}
.start-text p,
.start-title,
.image {
background-color: #fff;
z-index: 3;
}
.start-text p {
font-size: 1.3rem;
margin-right: 100px;
}
.start-title {
text-transform: uppercase;
font-size: 5rem;
color: transparent;
-webkit-text-stroke: 2px black;
}
.start-title span {
color: transparent;
-webkit-text-stroke: 3px black;
}
/* PARALAX */
#panel,
#panel-container {
width: 500px;
height: 650px;
}
#panel-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url("https://picsum.photos/id/237/200/300") center top;
background-size: cover;
background-position: 50% 50%;
transform: perspective(400px) rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
/* box-shadow: 1.5rem 2.5rem 5rem 0.7rem rgba(0, 0, 0, 0.13); */
}
.panel-content {
color: black;
text-align: center;
padding: 20px;
transform: translateZ(80px) scale(0.8);
transform-style: preserve-3d;
overflow-wrap: break-word;
}
/* LINE */
.decoration-line {
position: absolute;
top: 0;
left: 50%;
height: 300vh;
width: 1px;
background-color: black;
z-index: -1;
}
.decoration-line.one {
left: 10%;
}
.decoration-line.three {
left: 90%;
}
/* MY WORK */
.my-work {
width: 100%;
}
.my-work h1 {
font-size: 6rem;
width: 60%;
margin: 0 auto 100px auto;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 3px black;
background-color: #fff;
text-align: center;
z-index: 3;
}
.projects {
position: relative;
width: 78%;
left: 11%;
}
.project {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
margin-bottom: 100px;
}
.panel-project {
min-width: 550px;
height: 300px;
}
.project-img {
display: flex;
justify-content: center;
align-items: center;
position: relative;
transform: perspective(400px) rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
min-width: 550px;
height: 300px;
background-size: cover;
background-position: center;
border: 1px solid black;
border-radius: 10px;
filter: grayscale(60%)
}
.project-desription {
width: 50%;
text-align: center;
background-color: #fff;
padding: 0 50px;
}
.project-desription h2 {
font-size: 2.5rem;
-webkit-text-stroke: 1px black;
color: transparent;
margin-bottom: 30px;
}
.project-desription p {
line-height: 1.5rem;
}
.reverse {
flex-direction: row-reverse;
}
#komornik {
background-image: url("https://picsum.photos/id/237/200/300");
}
#hulk-factory {
background-image: url("https://picsum.photos/id/237/200/300");
}
@media only screen and (max-width:1200px) {
/* LOADER */
.loader-box {
font-size: 15rem;
}
/* START PAGE */
.start-text p {
font-size: 1rem;
}
.start-title {
font-size: 4rem;
}
#panel-container {
width: 380px;
}
/* MY WORK */
.project-img {
min-width: 400px;
height: 200px;
}
.project-desription p {
line-height: 1.2rem;
}
}
@media only screen and (max-width:992px) {
/* MY WORK */
.my-work h1 {
font-size: 4rem;
}
.project {
flex-direction: column;
}
.project-desription {
width: 100%;
text-align: center;
background-color: #fff;
margin-top: 25px;
padding: 0 50px;
}
.project-desription h2 {
font-size: 2.5rem;
-webkit-text-stroke: 1px black;
color: transparent;
margin-bottom: 30px;
}
.project-desription p {
line-height: 1.5rem;
}
}
@media only screen and (max-width:768px) {
/* LOADER */
.loader-box {
font-size: 10rem;
}
/* MENU */
.menu {
display: none;
}
nav {
align-items: flex-start;
width: 100%;
transition: .3s;
}
.name-logo {
padding: 15px 0 0 30px;
}
.menu-active {
height: 300px;
}
.menu-active .menu {
position: absolute;
top: 30%;
display: block;
text-align: center;
width: 100%;
font-size: 1.7rem;
}
.menu-active li {
padding: 15px 0;
}
.hamburger-menu {
position: relative;
width: 50px;
height: 50px;
cursor: pointer;
margin-right: 40px;
}
.hamburger-line,
.hamburger-line::before,
.hamburger-line::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: black;
display: block;
}
.hamburger-line {
top: 50%;
left: 0;
transform: translateY(-50%);
}
.hamburger-line::before {
top: -12px;
}
.hamburger-line::after {
top: 12px;
}
/* START PAGE */
.start-page {
padding-top: 120px;
flex-direction: column;
justify-content: center;
}
.start-image {
width: 100%;
}
.start-text {
width: 80%;
}
.start-title {
font-size: 3rem;
}
#panel {
height: 400px;
}
#panel-container {
height: 50vh;
width: 100%;
top: 50px;
}
.start-text p,
.start-title,
.image {
background-color: transparent;
z-index: 0;
}
.decoration-line {
display: none;
}
}
@media only screen and (max-width:576px) {
/* LOADER */
.loader-box {
font-size: 7rem;
}
.name-logo {
font-size: 1.3rem;
}
.start-title {
font-size: 2.2rem;
}
.start-title {
-webkit-text-stroke: 1px black;
}
.start-title span {
-webkit-text-stroke: 2px black;
}
/* MY WORK */
.my-work {
width: 100%;
}
.my-work h1 {
margin-top: 50px;
font-size: 3.5rem;
width: 100%;
}
.project-desription {
padding: 0 0;
}
}
@media only screen and (max-height:800px) {
#panel,
#panel-container {
width: 350px;
height: 450px;
}
.start-text p {
font-size: 1rem;
}
.start-title {
font-size: 3.5rem;
}
/* LOADER */
}
<nav>
<a class="name-logo" href="#">LOREM IPSUM</a>
<div class="hamburger-menu">
<div class="hamburger-line"></div>
</div>
<ul class="menu ">
<li class="menu-li"><a href="">Start</a></li>
<li class="menu-li"><a href="">Work</a></li>
<li class="menu-li"><a href="">Contact</a></li>
</ul>
</nav>
<main>
<div class="decoration-line one"></div>
<div class="decoration-line two"></div>
<div class="decoration-line three"></div>
<div class="start-page">
<div class="image">
<div id="panel">
<div id="panel-container">
<div id="panel-content"></div>
</div>
</div>
</div>
<div class="start-text">
<h1 class="start-title">Lorem ipsum dolor sit amet consectetur adipisicing elit. </h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quo distinctio adipisci accusamus libero vel quos, cum, autem dolore laborum quibusdam recusandae odio ex odit aperiam aliquam ipsum enim iure
</p>
</div>
</div>
<div class="my-work">
<h1>Lorem ipsum</h1>
<div class="projects">
<div class="project">
<a class="panel-project" href="" target="_blank">
<div id="komornik" class="project-img"></div>
</a>
<div class="project-desription">
<h2>First Dog</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quo distinctio adipisci
accusamus libero vel quos, cum, autem dolore laborum quibusdam recusandae odio ex odit
aperiam aliquam ipsum enim iure. Cupiditate fugiat quia, quo possimus a fugit. Deserunt
nesciunt placeat quam? Dignissimos ipsa aut atque veritatis aspernatur, quaerat iste et?</p>
</div>
</div>
<div class="project reverse">
<a class="panel-project" href="" target="_blank">
<div id="hulk-factory" class="project-img"></div>
</a>
<div class="project-desription">
<h2>Second dog</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quo distinctio adipisci
accusamus libero vel quos, cum, autem dolore laborum quibusdam recusandae odio ex odit
aperiam aliquam ipsum enim iure. Cupiditate fugiat quia, quo possimus a fugit. Deserunt
nesciunt placeat quam? Dignissimos ipsa aut atque veritatis aspernatur, quaerat iste et?</p>
</div>
</div>
</div>
</main>
Answered By - Burham B. Soliman
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.