'Need help making a smooth transition between pages (CSS JS HTML)

Hey so I'm making a website and I want to add multiple "pages" so that when i click on the next button, I'm taken to the next page (same with the previous button). I have an example of the transition I am trying to make (under).

https://dribbble.com/shots/17403459-Porsche-showroom-concept-landing-page

Additionally, if someone could take a look at my code and change anything that needs fixing, that would be appreciated.

/* -------------------------- Gray 911 Turbo-S (PAGE1) -------------------------- */

/* --- General Settings --- */

* {
    font-family: Oxygen;
}

hr {
    width: 295px;
    margin-left:0;
    position: relative;
    left: 100px;
    top: 100px;
    height: 2px;
    background-color: rgba(224, 224, 224, 0.801);
    border-radius: 50px;
    border-style: none;
}

body {
    overflow: hidden;
}




/* --- Anchor Link Icons --- */

.menuBtn {
    color: rgb(143, 143, 143);
    position: relative;
    left: 60px;
    top: 15px;
}

.porscheLogo {
    position: relative;
    left: 690px;
    bottom: 30px;
}

.shopBtn {
    color: rgb(143, 143, 143);
    position: relative;
    left: 1410px;
    bottom: 70px;
}

.loginBtn {
    color: rgb(143, 143, 143);
    position: relative;
    left: 1450px;
    bottom: 70px;
}

/* --- End of Anchor Link Icons --- */


/* --- Landing Page --- */

.mainTitle {
    position: relative;
    left: 100px;
    top: 100px;
    font-size: 45px;
    letter-spacing: 3px;
    word-spacing: 7px;
}

.titleCarName {
    color: rgb(47, 121, 231);
}

/* --- End of Landing Page --- */



/* --- Turbo S Description --- */

.price h4 {
    position: relative;
    left: 100px;
    top: 125px;
}

.price h3 {
    position: relative;
    left: 100px;
    top: 110px;
    font-size: 25px;
    letter-spacing: 1px;
}

.power h4 {
    position: relative;
    left: 100px;
    top: 150px;
}

.power h2 {
    position: relative;
    left: 95px;
    top: 125px;
    font-size: 40px;
}

.power p {
    position: relative;
    left: 162px;
    top: 65px;
    color: gray;
}


.torque h4 {
    position: relative;
    left: 250px;
    top: -27px;
}

.torque h2 {
    position: relative;
    left: 247px;
    top: -52px;
    font-size: 40px;
}

.torque p {
    position: relative;
    left: 350px;
    top: -112px;
    color: gray;
}


.engine h4 {
    position: relative;
    left: 425px;
    bottom: 205px;
}

.engine h2 {
    position: relative;
    left: 422px;
    bottom: 230px;
    font-size: 40px;
}

.engine p {
    position: relative;
    left: 480px;
    bottom: 290px;
    color: gray;
}

.discover a {
    text-decoration: none;
    color: gray;
}

.discover {
    position: relative;
    left: 100px;
    bottom: 285px;
    font-size: 13px;
}



.arrowBtn {
    transform: rotate(45deg);
    position: relative;
    top: 9px;
    left: -5px;
    color: rgb(47, 121, 231);
}

/* --- End of Turbo S Description --- */


/* --- Photo Grid --- */

.photo1 {
    transform: rotate(90deg);
    position: relative;
    left: 450px;
    bottom: 725px;
}


.photo2 {
    position: relative;
    bottom: 940px;
    left: 340px;
}

.photo3 {
    position: relative;
    bottom: 650px;
    right: 113px;
}

/* --- End of Photo Grid --- */

/* --- Previous / Next Buttons --- */

button {
    position: relative;
    bottom: 550px;
    left: 1300px;
    width: 100px;
    border: 2px solid rgb(0, 0, 0);
    background-color: transparent;
    color: rgb(0, 0, 0);
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s ease-out;
}

button:hover { 
    transform: scale(1.05);
}

.previous {
    position: relative;
    left: 850px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href=".//ressources/css/style.css">
    <!--Fonts & Icons-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen&display=swap" rel="stylesheet">
</head>
<body>

<div class="container">
    <div class="pages">
    <!---------- Landing Page (PAGE1) ------------->
    <div class="page one">
    <div class="landingPage">
        
        <!-------- Navbar -------->
        <a class="menuBtn" href="#" ><ion-icon name="menu" size="large"></ion-icon></a>
        <div><img class="porscheLogo" src=".//ressources/images/porscheLogoResized1.png"></div>
        <a class="shopBtn" href="#" ><ion-icon name="bag-outline" size="large"></ion-icon></a>
        <a class="loginBtn" href="#" ><ion-icon name="person-outline" size="large"></ion-icon></a>
        <!-------- End of Navbar -------->

        <hr>
        <h1 class="mainTitle"><span class="titleCarName">911 Turbo-s</span> the <br> King of speed!</h1>
        <hr>

        <!--- Details --->
        <div class="price">
            <h4 class="type">From</h4>
            <h3 class="value">$120.650</h3>
        </div>

        <div class="power">
            <h4 class="type">Power</h4>
            <h2 class="value">572</h2>
            <p class="unit">hp</p>
        </div>

        <div class="torque">
            <h4 class="type">Max torque</h4>
            <h2 class="value">3,450</h2>
            <p class="unit">lb-ft</p>
        </div>

        <div class="engine">
            <h4 class="type">Engine size</h4>
            <h2 class="value">512</h2>
            <p class="unit">cm</p>
        </div>

        <div class="discover">
            <a href="#"><h2>Discover <a href="#"><ion-icon class="arrowBtn"  name="arrow-up-outline" size="large"></ion-icon></a></h2></a>
        </div>
        <!--- End of Details --->

        <!--- Photo Grid --->
        <div class="photoGrid">
            <img src=".//ressources/images/topViewPorscheResized2.jpeg" class="photo1">
            <img src=".//ressources/images/frontViewPorscheResized5.jpeg" class="photo2">
            <img src=".//ressources/images/sideViewPorscheResized1.jpeg" class="photo3">
        </div>
        <!--- End of Photo Grid --->

        <!--- Previous/Next --->
        <button class="next" onClick="slide('next')">next</button>
        <button class="previous" onClick="slide('next')">prev</button>
        <!--- End of Previous/Next --->
        </div>
    </div>

    <!---------- TEST PAGE (PAGE2) ------------->

</div>













<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
javascripthtmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions