Mx TakaTak clone in HTML and CSS

Advertisement

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