Tiktok Landing Page Script

alikrklc · 21 Şub 2022

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tiktok</title>
</head>
<body>
    
<div id="wrapper">

<div class="header">
    <div class="logo">
        <img src="tt.jpg">
    </div>
    <div class="help">
    <a href="https://support.tiktok.com/en/" translate="no" target="_blank">
        <i class="fa-solid fa-circle-question"></i>
        <p>Geri bildirim ve yardım</p>
    </a>   
      
    </div>
</div>

<!--Container-->

<div class="container">
    <div class="qr1Page">
        <h2>QR CODE OKUT</h2>
    </div>

    <h2>Tiktok'a oturum aç</h2>
    <p>Hesabını yönet, bildirimlere bak,<br>
    videolara yorum ve daha bir çok şeyi yap</p>

<div class="menu">
    <div class="qrCode" id="qr1">
        <h3>QR kodu kullanın</h3>
        <div class="imgQr">
            <i class="fa-solid fa-qrcode"></i>
        </div>
        
    </div>

    <div class="qrCode">
        <h3 id="kul">Kullanıcı telefonu / e-posta<br>
        kullanıcı adı</h3>
        <div class="imgQr">
            <i class="fa-solid fa-user"></i>
        </div>
    </div>

    <div class="qrCode">
        <h3>Facebook ile devam et</h3>
        <div class="imgQr">
            <i class="fa-brands fa-facebook"></i>
        </div>
    </div>

    <div class="qrCode">
        <h3>Google ile devam et</h3>
        <div class="imgQr">
            <i class="fa-brands fa-google"></i>
        </div>
    </div>

    <div class="qrCode">
        <h3>Apple ile devam et</h3>
        <div class="imgQr">
            <i class="fa-brands fa-apple"></i>
        </div>
    </div>

</div>


</div>
<div class="footer">
    <h4>Hesabın yok mu? <span>Kaydol</span> </h4>
    </div>
    <div class="footerBlack">
        <h2>Designed by Ali Karakılıç</h2>
    </div>
</div>






[CODE=css]*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}


body{
    overflow: hidden;
}

.header{
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .logo img{
    width: 165px;
    height: 50px;
    margin-left: 20px;
    margin-top: 25px;
}

.help{
    position: relative;
    cursor: pointer;
}

.help a{
    text-decoration: none;
    color: inherit;
}

.help i{
    position: absolute;
    right: 190px;
    color: black;
    opacity: 0.7;
}

.help p{
    font-weight: bold;
    margin-right: 20px;
    
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin-top: 70px;
    text-align: center;

}

.container h2{
    margin-bottom: 5px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.container p{
    margin-bottom: 15px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.menu .qrCode{
    border: 1px solid rgba(0, 0, 0, 0.247);
    width: 300px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 15px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    
}

.qrCode .imgQr{
    position: absolute;
    left: 0;
    font-size: 30px;
    margin-left: 15px;
    color: rgba(30, 139, 212, 0.822);
    
}
#kul{
    margin-left: 25px;
}

/* FOOTER */


.footer{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    margin-bottom: 15px;
    height: 40px;
    border: 1px solid black;
}
.footer span{
    color: red;
    font-weight: bolder;
    cursor: pointer;
}

.footerBlack{
    background-color: black;
    height: 80px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.qr1Page{

background-color: black;
width: 100%;
height: 150px;
position: absolute;
z-index: 99;
display: none;
animation: qr1Page 1s;
justify-content: center;
align-items: center;
border-radius: 8px;

}

.qr1Page h2{
    color: red;
}

@keyframes qr1Page{

    from{
        left: 900px;
    }
    to{
        left: 0px;
        opacity: 0.5;
    }
}

</div>

<script src="script.js"></script>

</body>
</html>[/CODE]

JavaScript:

let qr1=document.getElementById("qr1");
let qrPage=document.querySelector(".qr1Page");


qr1.addEventListener("click", ()=>{

qrPage.style.display="flex";
qrPage.style.opacity="0.5"

qrPage.addEventListener("click", ()=>{


    qrPage.style.display="none";
})

})

Kodları değiştirebilirsiniz kötü amaçlı yazlılmamıştır fakat isteyen arkadaşlar landing page olarak kullanabilir. Footer kısmında bulunan developer tagi silebilirsiniz...

Tiktok Landing Page Script

alikrklc

Üye

Sosyal medya sayfalarımız