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;
}
DOWNLOAD SOURCE CODE FILES

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

codingmaster
Latest posts by codingmaster (see all)
```html ```
Categories: HTML & CSS Projects
Tags:

0 Comments

Leave a Reply

Avatar placeholder

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

Related Posts

Neumorphic Card using Bootstrap 5
CSS Cards HTML & CSS Projects

Neumorphic Post Card using Bootstrap 5

Neumorphism is the recent design trend, which uses cool shadow techniques to create a beautiful, subtle, and smooth design. Today, in this post we’ll create a beautiful Responsive Neumorphic Post Card using Bootstrap 5. You Read more…

Best CSS Courses on Youtube
HTML & CSS Projects Tips & Tricks

Best CSS Courses on YouTube for Beginners!

CSS is an essential part of Web Development. If you are aiming to become a Front-end developer having a core understanding of CSS is a must! CSS can be easy and difficult at the same Read more…

Calculator using HTML, CSS & JavaScript
HTML & CSS Projects Tips & Tricks

Simple Calculator Using HTML, CSS & JavaScript

Today, in this post we’ll learn how to create a simple yet beautiful calculator using our plain old HTML, CSS & JavaScript. If you are just beginning your journey in Web Development, especially in JavaScript, Read more…