如何修复通过 JavaScript 中的 addEventListener 为 3D 元素分配函数？

问题描述 投票：0回答：1

我正在尝试使用“第一只狗”和“第二只狗”下的“.project-img”类对照片进行动画处理，方式与第一张照片相同。但是，我的代码（使用 forEach 将 addEventListener 分配给这些元素）似乎不起作用。有人可以帮助我了解可能导致问题的原因或提供有关如何实现该目标的见解吗

在确定了这段代码不起作用的原因后，我注意到视角被过多地推向了图片的顶部。怎么解决这个问题

//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>

javascript html css
1个回答
0
投票

错误地，您对两个元素使用了重复的 

ID
，因此您不能两次使用相同的 id，如果要完成此工作，您需要将 
id
属性替换为 
class
并将 
querySelectorAll
设置为这堂课，就这样了

尝试一下这个片段，看看它是如何进行的！

//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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.