Description

Hello Friends! How Do All In this video, you will learn how to make a How To Add Icons With Hover Effect On Website Using HTML And CSS, In This Website, I am Using Some Easy Steps For Only Png's (images). This Site Have One Logo, One Navbar, Given to Upside You will understand In the Tutorial Video Available In YouTube Channel Of Coding Karunadu. Hope this video will be helpful.

Thank You For Wisting My Website

Source Codes

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">
    <title>Floating Icon - Coding Karunadu</title>
    <link rel="stylesheet" href="styles.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<body>
   <div class="fist-section">
       <nav>
           <img src="logo.png" alt="logo" class="logo">
           <img src="menu.png" alt="menu" class="menu">
       </nav>
       <div class="text-box">
           <h1>GIFT HOUSE</h1>
           <p>Subcribe Coding Karunadu Channel</p>
           <button type="button">Bye More</button>

       </div>

       <div class="slider">
           <div class="icon-box">
               <div class="side-text">
                   New
               </div>
               <div class="icon">
                <i class="fas fa-gifts"></i>
               </div>
           </div>
  
        <div class="icon-box">
            <div class="side-text">
                Favoreite Out
            </div>
            <div class="icon">
             <i class="fas fa-star"></i>
            </div>
        </div>
        <div class="icon-box">
            <div class="side-text">
                online Delevery
            </div>
            <div class="icon">
             <i class="fas fa-truck"></i>
            </div>
        </div>
        <div class="icon-box">
            <div class="side-text">
                Earn Rewards
            </div>
            <div class="icon">
             <i class="fas fa-crown"></i>
            </div>
        </div>
        <div class="icon-box">
            <div class="side-text">
                Secure Payment
            </div>
            <div class="icon">
             <i class="fas fa-donate"></i>
            </div>
        </div>
        <div class="icon-box">
            <div class="side-text">
                Cart
            </div>
            <div class="icon">
             <i class="fas fa-cart-arrow-down"></i>
            </div>
        </div>
       </div>

   </div>
</body>
</html>

CSS Code:

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

.fist-section{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(background.jpg);
    background-position: center;
    background-size: cover;
}
nav{
    width: 85%;
    margin: auto;
    padding-top: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo{
    width: 150px;
    cursor: pointer;
}

.menu{
    width: 30px;
    cursor: pointer;
}

.text-box{
    width: 60%;
    margin: 200px auto 0;
    color: #fff;
    text-align: center;

}

.text-box h1{
    margin-bottom: 20px;
    font-size: 60px;

}

.text-box p{
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
}

.text-box button{
    width: 220px;
    padding: 12PX 0;
    color: #FFF;
    font-size: 20px;
    border: 2px solid #fff;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.slider{
    height: 335px;
    width: 60px;
    background: #fff;
    border-radius: 6px;
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
}

.icon-box{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    margin: 5px auto;
}

.side-text{
    min-width: 0;
    height: 100%;
    line-height: 0;
    background: #000;
    margin-right: 5px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px 0 0 5px;
    overflow: hidden;
    transition: 0.5s;
}

.icon{
    min-width: 50px;
    height: 100%;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

.icon .fas{
    font-size: 20px;
    color: #000;
    line-height: 50px;

}

.icon-box:hover .icon{
    background: #000;
}

.icon-box:hover .icon .fas{
    color: #fff;
}

.icon-box:hover .side-text{
    min-width: 140px;
}

You have to wait 40 seconds.

How To Add Icons With Hover Effect On Website Using HTML And CSS | Coding Karunadu

Description

Coffee Website Using HTML and CSS

Create A website Using HTML and CSS | Shoes Website

Sticky Navigation Bar in HTML CSS and JavaScript

Make a Website Design Your House Using HTML and CSS

Calendar Card UI Design | Glassmorphism - HTML, CSS & Javascrip

Thank You For Wisting My Website

Source Codes

نموذج الاتصال