𝙇𝙚𝙩'𝙨 𝙨𝙝𝙤𝙥 𝙞𝙩

HELLO TO ALL HERE IS WHATSAPP TAMPLET USING HTML AND CSS

follow me at instagram - https://www.instagram.com/_avi_bisht777_/

1- COPY THIS HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
content="IE=edge">
    <meta name="viewport" 
content="width=device-width, 
initial-scale=1.0">
<link rel="stylesheet" 
href=
"https://stackpath.bootstrapcdn.com/
font-awesome
/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet"
 href="whatsapp.css">
    <title>WhatsApp</title>
</head>
<body>
    <container id="main">
        <div class="inner-box">
            <h3>WhatsApp</h3>
            <div class="icon">
                <i class="fa fa-search" 
aria-hidden="true"></i>
                <i class="fa fa-ellipsis-v" 
aria-hidden="true"></i>
            </div><!--icon end-->
            <div class="inner-bottom">
                <ul>
     <li><i class="fa fa-camera"
 aria-hidden="true"></i></li>
                    <li><a href="#">
chats</a></li>
                    <li><a href="#">
status</a></li>
                    <li><a href="#">
calls</a></li>
                </ul>
            </div><!--inner-bottom end-->
        </div><!--inner-box end-->

        <div id="chat-section">
            
            <div class="user-icon">
                <img src="../img2.jfif"
 alt="">   
            </div>
            <p>User-1</p>
            <p2 style="position: relative;
 top:7%;">hello</p2>
            <span>11:05 am</span>
            <div class="unseen">
            3
            </div><br><br><br><br>

              <div class="user-icon">
                <img src="../img1.jfif"
 alt="">   
            </div>
            <p style=
"position: relative;">User-2</p>
            <p2>ok sure</p2>
            <span>05:05 pm</span>
<br><br><br>

              <div class="user-icon">
                <img src="../avi.jpg"
 alt="">   
            </div>
            <p style=
"position: relative;">User-3</p>
            <p2>i'll call you later</p2>
            <span>07:00 pm</span>
<br><br><br>

              <div class="user-icon">
   <img src="../rohit (1).jpg" alt="">   
            </div>
            <p style=
"position: relative;">User-4</p>
    <p2>Ready for meating brother</p2>
            <span>03:05 am</span>
             <div class="unseen"
 style="position: absolute; top: 280px;">
            5
            </div><br><br><br>

   <div class="user-icon">
 <img src="../hema.jpg" alt="">   
            </div>
            <p style=
"position: relative;">User-5</p>
            <p2>how's uh</p2>
            <span>05:25 pm
</span><br><br><br>

  <div class="user-icon">
  <img src="../img6.jfif" alt="">   
            </div>
            <p style=
"position: relative;">User-6</p>
            <p2>no</p2>
            <span>04:15 pm
</span><br><br><br>

              <div class="user-icon">
     <img src="../img7.jfif" alt="">   
            </div>
            <p style=
"position: relative;">User-7</p>
            <p2>on monday</p2>
            <span>12:05 pm
</span><br><br><br><br>
        
        </div><!--chat-section end-->

   <img src="../more-contact.jpg" alt="">
       </div>
        
    </container><!--container-main end-->
    
</body>
</html>

2-COPY THE CSS CODE

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'Trebuchet MS',
 'Lucida Sans Unicode', 
'Lucida Grande', 'Lucida Sans', 
Arial, Helvetica, sans-serif;
}
span,a
{
    color: #FFFFFF;
    text-decoration: none;
}
body{
    height: 100vh;
    width: 100vw;
}

#main
{
    height: 610px;
    width: 400px;
    background-color:#FFFFFF;
    box-shadow: 5px 1px 12px gray;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
}
.inner-box
{
  height: 90px;
  width: 100%;
  background-color:#075E54;
  box-shadow: 0.3px 4px 8px #928787;
  color: whitesmoke;
  position: relative;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items:baseline;
}

.inner-box h3
{
    /* display: inline; */
}
.icon i
{
    margin-left: 20px;
    font-size: 18px;
    cursor: pointer;
    display: inline-block;
}
.inner-bottom
{
    position: absolute;
    top: 60%;
    left: 0;
    padding: 10px;
}
.inner-bottom ul 
{
    display: flex;
}

.inner-bottom ul li 
{
    list-style: none;
    margin-left: 70px;
    text-transform: uppercase;
    position: relative;
}

.inner-bottom ul li a::before {
    content: '';
    position: absolute;
    border-bottom: 3px solid #25D366;
    height: 22px;
    width: 0%;
    transition: .4s;
    z-index: 9000;
}

.inner-bottom ul li a:hover::before {
    width: 100%;
}

.inner-bottom ul li:nth-child(1)
{
    margin-left: 0;
}
.inner-bottom ul li:nth-child(2)
{
    margin-left: 60px;
}
#chat-section
{
    height: 520px;
    width: 100%;
    background-color: #181818;
    padding: 7px;
    position: relative;
    cursor: pointer;
}
.user-icon
{
    height: 12px;
    width: 12px;
    position: absolute;
    padding: 12px;border-width: 3px;
}
.user-icon img
{
    border-radius: 100%;
    width: 50px;
    object-fit: cover;
    background-size: 100%;
    height: 50px;
}
#chat-section p
{
    color: #FFFFFF;
    position: absolute;
    top: 3%;
    left: 22%;
    font-weight: 600;
}
#chat-section p2
{
    color:lightsteelblue;
    position: relative;
    top: 4%;
    left: 22%;
}
#chat-section span
{
    position: relative;
    float: right;
    top: 1%;
    color: #25D366;
    font-size: 12px;
}
.unseen
{
    position: absolute;
    right: 12px;
    top: 40px;
    height: 20px;
    width: 20px;
    background-color: #25D366;
    border-radius: 50%;
    text-align: center;
}
.contact
{
    height: 40px;
    position: absolute;
    bottom: 34px;
    right: 0;
    padding-right: 12px;
}
.contact img
{
    height: 50px;
    width: 43px;
    border-radius: 50%;
    overflow: hidden;
}

3-CUSTOMIZE AS YOUR CHOICES LIKE IMAGE ICONS ETC.

THANK YOU TO VISIT HERE AND ALSO GIVE FEEDBACK

𝙇𝙚𝙩'𝙨 𝙨𝙝𝙤𝙥 𝙞𝙩

HELLO TO ALL HERE IS WHATSAPP TAMPLET USING HTML AND CSS

Comments

Post a Comment

ads

Popular posts from this blog