WhatsApp UI Clone Using CSS3 & JS

Published by codingmaster on

Hello Friends, today in this blog you’ll learn how to make Whatsapp UI Clone Using only HTML, CSS & JavaScript.

It’s a great practice to create clones of some big applications like whatsapp, facebook, google, youtube and more….for creating clones of these paltforms you need advanced CSS skills. So if you’re good in CSS then start building clone projectsto level up your CSS skills. You can also add these projects in your portfolio or resume to show your skills.

Video Tutorial of Whatsapp UI Clone Using CSS & JavaScript

In the video you’ve seen that we create Whatsapp UI clone using only CSS & JavaScript. In HTML we’ve create the complete structure like asearch box, whatsapp title, a list & icons….using CSS we’ve easily design the whole strcture and give it a look similar to whatsapp interface using css properties.

So, enjoy the tutorial & learn something new today 🙂

Whatsapp UI Clone Using HTML & CSS [ SOURCE CODE ]

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html>
    <head>
        <title>WhatsApp UI Clone</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
        <script src="whatsappclon.js"></script>
    </head>
    <body>
        <noscript>
            <div class="jsOff">
                Please enable javascript to run this.
            </div>
            </noscript>
            
            
            <div id="main">
                
                <nav class="n1">
                <div class="searchbox">
                <span>
                <i class="fa fa-arrow-left close" aria-hidden="true"></i>
                </span>
                    <input placeholder="Search..." type="text">
                </div>
                    <span class="title">WhatsApp</span>
                    <span class="tab">
                    <span><i class="fa fa-search" aria-hidden="true"></i></span>
                    <span><i class="fa fa-ellipsis-v" aria-hidden="true"></i></span>
                    </span>
                    
                    <div class="list">
                        <span>New group</span>
                        <span>New broadcast</span>
                        <span>WhatsApp web</span>
                        <span>Starred messages</span>
                        <span>Setting</span>
                    </div>
                </nav>
                
                <nav class="n2">
                    <i class="fa fa-camera" aria-hidden="true"></i>
                    <span class="tab">
                        <span class="ripple t1">Chats
                        <span class="dash"></span>
                        </span>
                        <span class="ripple t2">Status</span>
                        <span class="ripple t3">Calls</span>
                    </span>
                </nav>
                <section>

                </section>
                <i class="fa fa-commenting-o" aria-hidden="true"></i>
                
</div>            

            </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

*{
    margin:0;
    padding:0;
    user-select:none;
    font-family:sans-serif;
    
}

:root{
    --green:#218c74;
    --green2:#0be881;
    --grey:#b2bec3;
}

.jsOff{
    position:absolute;
    top:0;
    left:0;
    height:100vh;
    width:100vw;
    z-index:10;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
}
#loader{
   height:100vh;
   width:100vw;
   background:#fff;
   display:flex;
   justify-content:center;
   align-items:center;
}
#loader div{
   position:absolute;
   display:flex;
   justify-content:center;
   align-items:center;
   flex-direction:column;
   font-size:1.6em;
   letter-spacing:3px;
   color:var(--green2);
}
#loader div img{
    width:100px;
}
#loader .by{
    align-self:flex-end;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
#loader .by span:nth-child(1){
    color:var(--grey);
}
#loader .by span:nth-child(2){
    color:var(--green2);
    font-size:1.6em;
    letter-spacing:4px;
}

#main{
    display:none;
    background:#fff;
}

.n1{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:1.3em;
    background:var(--green);
    color:#fff;
}
.n1 .tab{
    display:flex;
    justify-content:stretch;
}
.n1 .tab *, .n1 .title{
    padding:10px;
}
.n1 .title{
    font-weight:bold;
}
.n1 .list{
    position:fixed;
    color:#000;
    top:2px;
    right:2px;
    font-size:18px;
    z-index:12;
    background:#fff;
    border-radius:2px;
    box-shadow:0 0 2px #000;
    clip-path:circle(30% at 100% 0%);
    opacity:0;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-direction:column;
    transition:clip-path 0.3s linear, opacity 0.2s linear;
}

.n1 .list span{
    padding:15px;
}
.n1 .searchbox{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#fff;
    color:var(--green);
    clip-path:circle(0% at 50% 50%);
    transition:clip-path 0.5s ease-out;
    display:flex;
    z-index:11;
    justify-content:space-evenly;
    align-items:center;
}
.n1 .searchbox .close{
    display:flex;
    justify-content:center;
    align-items:center;
}
.n1 .searchbox input{
    border:none;
    outline:none;
    height:100%;
    width:80%;
    display:flex;
    justify-content:center;
    align-items:flex-start;
}


.n2{
    position:sticky;
    top:0;
    color:#fff;
    background:var(--green);
    transition:transform 0.7s linear;
    display:flex;
    justify-content:space-evenly;
}
.n2 .tab{
    width:90%;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
}
.n2 .tab .ripple{
    position:relative;
    padding:3%;
    width:90%;
    text-align:center; 
}
.n2 .tab .t1 .dash{
    position:absolute;
    bottom:0px;
    left:0px;
    height:5px;
    width:100%;
    background:#fff;
    z-index:10;
    transition:transform 0.2s linear;
}
.n2 .fa{
    color:rgba(255,255,255,0.7);   
    padding:3%;
    text-align:center;
}

.ripple{
    transition:background 0.5s;
}
.ripple:hover{
    background:var(--green) radial-gradient(circle, transparent 1%, var(--green) 1%) center/15000%;
}
.ripple:active{
    background-color:#fff;
    background-size: 100%;
    transition: background 0s;
}

section .chat{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
section .chat .container{
    padding:6px;
    width:100%;
    border-bottom:1px solid rgba(0,0,0,0.08);
}
section .chat .container *{
    padding:4px;
}
section .chat .container .info{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
section .chat .container .info span:nth-child(1){
    font-weight:bolder;
    font-size:1.2em;
}
section .chat .container .info span:nth-child(2){
    font-weight:thin;
    font-size:0.8em;
    color:rgba(20,20,20,0.6);
}
section .chat .message{
    font-weight:thin;
    font-size:0.98em;
    color:rgba(20,20,20,0.6);
}

section .chat .avatar img{
    height:60px;
    width:60px;
    border-radius:50%;
    padding:10px;
}

.fa-commenting-o{
    position:fixed;
    bottom:25px;
    right:25px;
    font-size:1.7em;
    padding:15px;
    background:var(--green2);
    color:#fff;
    border-radius:50%;
}

section .chat .Coffin .message{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
section .chat .Coffin .message span:nth-child(2){
    height:15px;    
    width:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    background:var(--green2);
    border-radius:50%;
}
section .chat .Coffin .info span:nth-child(2){
    color:var(--green2);
    font-weight:bold;
}

SUBSCRIBE TO OUR YOUTUBE CHANNEL FOR MORE SUCH AMAZING TUTORIALS !!!

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *