HomeBloggingMx TakaTak clone in HTML and CSS

Mx TakaTak clone in HTML and CSS

Here, Create mx takatak clone ui. All videos in this code have been taken from YouTube. Here I have not used javascript, it has only used html and css.

Html code for mx takatak clone
<!DOCTYPE html>
<html>
    <head>
        <title>TikTok</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    </head>
    <body>
        <header>
            <div class="container">
                <div class="head">
                    <p><strong>Tik Tok</strong></p>
                    <p><strong>Clone</strong></p>
                </div>
            </div>
        </header>
        <section>
            <div class="container">
                <div class="react">
                    <i class="fa fa-user-circle" aria-hidden="true"></i>
                    <i class="fa fa-heart" aria-hidden="true"></i>
                    <i class="fa fa-commenting" aria-hidden="true"></i>
                    <i class="fa fa-share" aria-hidden="true"></i>
                    <i class="fa fa-circle" aria-hidden="true"></i>
                </div>
                <div class="video">
                    <iframe width="412" height="620" src="https://www.youtube.com/embed/o4-0ix7hXZs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen autoplay muted></iframe>
                </div>
                
                <div class="react">
                    <i class="fa fa-user-circle" aria-hidden="true"></i>
                    <i class="fa fa-heart" aria-hidden="true"></i>
                    <i class="fa fa-commenting" aria-hidden="true"></i>
                    <i class="fa fa-share" aria-hidden="true"></i>
                    <i class="fa fa-circle" aria-hidden="true"></i>
                </div>
                <div class="video">
                    <iframe width="412" height="620" src="https://www.youtube.com/embed/5kSPDm_sVMQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>    
                 <div class="react">
                    <i class="fa fa-user-circle" aria-hidden="true"></i>
                    <i class="fa fa-heart" aria-hidden="true"></i>
                    <i class="fa fa-commenting" aria-hidden="true"></i>
                    <i class="fa fa-share" aria-hidden="true"></i>
                    <i class="fa fa-circle" aria-hidden="true"></i>
                </div>
                <div class="video">
                    <iframe width="412" height="620" src="https://www.youtube.com/embed/5kSPDm_sVMQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
                </div>
                <div class="react">
                    <i class="fa fa-user-circle" aria-hidden="true"></i>
                    <i class="fa fa-heart" aria-hidden="true"></i>
                    <i class="fa fa-commenting" aria-hidden="true"></i>
                    <i class="fa fa-share" aria-hidden="true"></i>
                    <i class="fa fa-circle" aria-hidden="true"></i>
                </div>
                <div class="video">
                    <iframe width="412" height="620" src="https://www.youtube.com/embed/o4-0ix7hXZs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>  
                </div>        
            </div>
        </section>
        <footer>
            <div class="container">
                <div class="footer">
                    <i class="fa fa-home" aria-hidden="true"><p>Главная</p></i>
                    <i class="fa fa-search" aria-hidden="true"><p>Интересное</p></i>
                    <i class="fa fa-plus-square" aria-hidden="true"></i>
                    <i class="fa fa-commenting" aria-hidden="true"><p>Выходящие</p></i>
                    <i class="fa fa-user" aria-hidden="true"><p>Я</p></i>
                </div>
            </div>
        </footer>
    </body>
</html>

CSS code for mx takatak clone

* {
    margin:0px;
    padding:0px;
}
.head{
    display:flex;
    margin-left:113px;
    margin-top:20px;
    position:fixed ;
    color:white;
}
.head p{
    padding:10px;
    font-size:15px;
}
.react{
    position:absolute;
    left:325px;
    right:0;
    display: flex; 
    flex-direction: column;
    align-items:center;
    color:black;
    font-size:35px;
    margin:10px;
    margin-top: 90px;
    color:white;
}
.fa-user-circle,.fa-heart,.fa-commenting,.fa-share{
    padding-bottom:30px;
}
.fa-circle{
    padding-top:50px;
}
.footer{    
    display: flex;       
    justify-content: space-between;                        
    color: white;
    margin-top: 10px;                            
    position: fixed;
    z-index: 5;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    font-size: 30px;
}
p{
    font-size:10px;
    text-align:center;
}

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Must Read

spot_img