<link rel="stylesheet" href="https://keshoindia.netlify.app/assets/css/style.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round|Material+Icons+Outlined|Material+Icons+Two+Tone" rel="stylesheet">
    

    

    <!-- Avatar Extra-Small -->
    <img
        src="./assets/images/avatar.png"
        class="avatar avatar-xs m-0-5"
        alt="avatar"
    />

    <!-- Avatar Small -->
    <img
        src="./assets/images/avatar.png"
        class="avatar avatar-s m-0-5"
        alt="avatar"
    />

    <!-- Avatar Medium -->
    <img
        src="./assets/images/avatar.png"
        class="avatar avatar-md m-0-5"
        alt="avatar"
    />

    <!-- Avatar Large -->
    <img
        src="./assets/images/avatar.png"
        class="avatar avatar-l m-0-5"
        alt="avatar"
    />   

    

    
    <div class="avatar-group"/>
        <img
            src="./assets/images/avatar.png"
            alt="avatar"
            class="avatar avatar-group__image"
        />
        <img
            src="./assets/images/avatar.png"
            alt="avatar"
            class="avatar avatar-group__image"
        />
        <img
            src="./assets/images/avatar.png"
            alt="avatar"
            class="avatar avatar-group__image"
        />
    </div>
    

    
    <!-- Success Alert -->
    <div class="alert alert--success">
        <span class="material-icons-round alert--success--icon">
            check_circle
        </span>
        <p class="alert__text">This is a Success Message</p>
        <span class="material-icons-round
                     alert__icon__close 
                     alert--success--icon--close">
            close
        </span>
    </div>
    
    <!-- Warning Alert -->
    <div class="alert alert--warning">
        <span class="material-icons-round alert--warning--icon">
            warning
        </span>
        <p class="alert__text">This is a Warning Message</p>
        <span class="material-icons-round 
                     alert__icon__close 
                     alert--warning--icon--close">
            close
        </span>
    </div>
    
    <!-- Error Alert -->
    <div class="alert alert--error">
        <span class="material-icons-round alert--error--icon">
            error
        </span>
        <p class="alert__text">This is an Error Message</p>
        <span class="material-icons-round
                     alert__icon__close 
                     alert--error--icon--close">
            close
        </span>
    </div>
    
    <!-- Informational Alert -->
    <div class="alert alert--info">
        <span class="material-icons-round alert--info--icon">
            info
        </span>
        <p class="alert__text">This is an Information Message</p>
        <span class="material-icons-round
                     alert__icon__close 
                     alert--info--icon--close">
            close
        </span>
    </div>
    

    
    <div class="icon-with-badge">
        <span class="material-icons-outlined icon-with-badge__icon">
            shopping_bag
        </span>
        <span class="icon-with-badge__text">5</span>
    </div>
    
    <div class="icon-with-badge">
        <span class="material-icons-outlined icon-with-badge__icon">
            notifications
        </span>
        <span class="icon-with-badge__text">5</span>
    </div>
    
    <div class="icon-with-badge">
        <span class="material-icons-outlined icon-with-badge__icon">
            bookmark_border
        </span>
        <span class=" icon-with-badge__text">50</span>
    </div>
    

    
    <div class="avatar-with-badge">
    <img
        class="avatar avatar-s"
        src="./assets/images/avatar.png"
        alt="avatar"
    />
    <span class="avatar-with-badge__badge"></span>
    </div>
    

    
    <!-- Small Button -->
    <button class="btn btn--sm">BUTTON</button>
    <!-- Medium Button -->
    <button class="btn btn--md">BUTTON</button>
    <!-- Large Button -->
    <button class="btn btn--lg">BUTTON</button>
    

    
    <!-- Small Button -->
    <button class="btn btn--icon btn--sm ">
        <span class="material-icons-outlined btn--icon__icon">
            shopping_bag
        </span>
        ADD TO BAG
    </button>
    
    <!-- Medium Button -->
    <button class="btn btn--icon btn--md ">
        <span class="material-icons-outlined btn--icon__icon">
            shopping_bag
        </span>
        ADD TO BAG
    </button>
    
    <!-- Large Button -->
    <button class="btn btn--icon btn--lg ">
        <span class="material-icons-outlined btn--icon__icon">
            shopping_bag
        </span>
        ADD TO BAG
    </button>
    

    
    <button class="btn btn--link">return policy</button>
    

    
    <button class="btn btn--floating">
        <span class="material-icons-outlined"> north </span>
    </button>
    

    
    <div class="outlined-button-wrapper">
    <button class="btn btn--outlined">BUTTON</button>
    <button class="btn btn--icon btn--outlined">
        <span class="material-icons-outlined btn--icon__icon">
            shopping_bag
        </span>
        ADD TO BAG
    </button>
    <button class="btn btn--floating btn--outlined">
        <span class="material-icons-outlined"> north </span>
    </button>
    </div>
    

    
    <div class="content-right__sub-title">Product Card</div>
    <div class="card-product">
        <div class="card-product__image__wrapper">
            <img src="./assets/images/coffee_beans.jpg" alt="product" class="card-product__image">
            <button class="card-product__icon">
                <span class="material-icons-outlined md-36">
                    favorite_border
                </span>
            </button>
        </div>
    
        <div class="card-product__name">Coffee Beans</div>
    
        <div class="card-product__description">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Laborum accusamus, quo veniam at ipsum
        </div>
    
        <div class="card-product__rating__wrapper">
            <div class="card-product__rating__icon__wrapper">
                <span class="card-product__rating__icon__text">4.0</span>
                <span class="material-icons-outlined card-product__rating__icon">
                    star
                </span>
            </div>
            <span class="card-product__rating__reviews">342 Ratings & 29 Reviews</span>
        </div>
    
        <div class="card-product__price__wrapper">
            <div class="card-product__price">&#8377 900</div>
            <strike class="card-product__price__crossed ml-2">&#8377 1000</strike>
            <div class="card-product__price__discount ml-2">10% off</div>
        </div>
    
        <button class="btn mt-1">SHOP NOW</button>
    
    </div>
    

    
    <div class="card-video">
    <div class="card-video__thumbnail__wrapper">
        <img src="./images/placeholder16-9.png" alt="" class="card-video__thumbnail">
        <div class="card-video__icon">
            <span class="material-icons-round md-36">
                watch_later
            </span>
        </div>
    </div>
    <div class="video-card__text__wrapper">
        <div class="card-video__title">
            The Ultimate Brewing Guide
        </div>
        <div class="card-video__details">
            James Hoffmann &#x2022 3.5M Views
        </div>
    </div>
    </div>
    

    
    <div class="card-blog">
    <div class="card-blog__image__wrapper">
        <img src="./images/placeholder16-9.png" alt="blog" class="card-blog__image">
    </div>

    <div class="card-blog__title">Blog Title</div>

    <div class="card-blog__description">
        Lorem ipsum dolor sit amet consectetur adipisicing elit
        . Laborum accusamus, quo veniam at ipsum
    </div>

    <button class="btn btn--sm mt-1">Read More</button>

    </div>
    

    
    <div class="card-blog">

    <div class="card-blog__title">Blog Title</div>

    <div class="card-blog__description">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
         Laborum veniam at ipsum Lorem ipsum dolor sit amet consectetur adipis.
    </div>

    <button class="btn btn--sm mt-1">Read More</button>
    
    </div>
    

    
    <div class="card-cart">
    <div class="card-cart__image__wrapper">
        <img 
            src="./assets/images/coffee_beans.jpg" 
            class="card-cart__image" 
            alt="Product Image"
        />
    </div>
    <div class="card-cart__description">
        <div class="card-cart__description__title">Coffee Beans</div>

        <div class="card-cart__price__wrapper">
            <div class="card-cart__price">&#8377 900</div>
            <strike class="card-cart__price__crossed ml-2">&#8377 1000 </strike>
            <div class="card-cart__price__discount ml-2">10% off</div>
        </div>

        <div class="card-cart__control__wrapper">
            <button class="btn card-cart__control__button">
                <span class="material-icons-round">
                    remove
                </span>
            </button>

            <div class="card-cart__control__quantity">5</div>

            <button class="btn card-cart__control__button">
                <span class="material-icons-round">
                    add
                </span>
            </button>
            <button class="btn card-cart__control__button">
                <span class="material-icons-round">
                    delete
                </span>
            </button>
        </div>
    </div>
    </div>

    

    
    <div class="card-wishlist">
    <div class="card-wishlist__image__wrapper">
        <img 
            src="./assets/images/coffee_beans.jpg" 
            class="card-wishlist__image" 
            alt="Product Image"
        />
    </div>
    <div class="card-wishlist__description">
        <div class="card-wishlist__description__title">Coffee Beans</div>

        <div class="card-wishlist__price__wrapper">
            <div class="card-wishlist__price">&#8377 900</div>
            <strike class="card-wishlist__price__crossed ml-2">&#8377 1000 </strike>
            <div class="card-wishlist__price__discount ml-2">10% off</div>
        </div>

        <div class="card-wishlist__control__wrapper">

            <button class="btn btn--icon btn--sm card-wishlist__control__button">
                <span class="material-icons-outlined btn--icon__icon">
                    delete
                </span>
                DELETE
            </button>

            <button class="btn btn--icon btn--sm card-wishlist__control__button">
                <span class="material-icons-outlined btn--icon__icon">
                    shopping_bag
                </span>
                MOVE TO BAG
            </button>
        </div>
    </div>
    </div>
    

    
    <div class="input-text-wrapper">
        <input class="input-text  input-text-full-name" type="text" placeholder="Full Name">
    </div>
    
    <div class="input-text-wrapper">
        <input class="input-text input-text-email" type="text" placeholder="Email">
    </div>
    
    <div class="input-text-wrapper">
        <input class="input-text input-text-password" type="password" placeholder="Password">
    </div>
    

    
    <div class="input-checkbox-wrapper">
        <input type="checkbox" id="terms" />
        <label for="terms">I accept all terms and condition.</label>
    </div>
    

    
    <div class="input-range-wrapper">
        <label>Price Range:</label>
        <input type="range" class="input-range" min="0" max="10">
    </div>
    

    
    <div class="input-dropdown-wrapper">
    <label> Sort By:
        <select class="input-dropdown">
            <option value="price-low-to-high">Price: Low to High</option>
            <option value="price-high-to-low">Price: High to Low</option>
            <option value="popularity">Popularity</option>
            <option value="newest-first">Newest First</option>
        </select>
    </label>
    </div>
    

    
    <div class="input-text-wrapper input-text-outlined">
        <input class="input-text  input-text-full-name" type="text" placeholder="Full Name">
    </div>
    
    <div class="input-text-wrapper input-text-outlined">
        <input class="input-text input-text-email" type="text" placeholder="Email">
    </div>
    
    <div class="input-text-wrapper input-text-outlined">
        <input class="input-text input-text-password" type="password" placeholder="Password">
    </div>
    

    
    <div class="input-checkbox-wrapper input-checkbox-outlined">
        <input type="checkbox" id="outlined" />
        <label for="outlined">I accept all terms and condition.</label>
    </div>
    

    
    <div class="input-range-wrapper">
        <label>Price Range:</label>
        <input type="range" class="input-range input-range-outlined" min="0" max="10">
    </div>
    

    
    <div class="input-dropdown-wrapper">
    <label> Sort By:
        <select class="input-dropdown input-dropdown-outlined">
            <option value="price-low-to-high">Price: Low to High</option>
            <option value="price-high-to-low">Price: High to Low</option>
            <option value="popularity">Popularity</option>
            <option value="newest-first">Newest First</option>
        </select>
    </label>
    </div>
    

    
    <div class="list">
    <img 
        src="./assets/images/avatar.png" 
        class=".list__content-container__image" 
        alt="avatar"
    />
    <div class="list__content-container">
        <div class="list__content-container__name">
            Deadpool
        </div>
        <div class="list__content-container__content">
            Started Following You
        </div>
    </div>
    </div>

    <div class="list">
    <img 
        src="./assets/images/avatar.png" 
        class=".list__content-container__image" 
        alt="avatar"
    />
    <div class="list__content-container">
        <div class="list__content-container__name">
            Deadpool
        </div>
        <div class="list__content-container__content">
            Commented on Your Post
        </div>
    </div>
    </div>

    <div class="list">
    <img 
        src="./assets/images/avatar.png" 
        class=".list__content-container__image" 
        alt="avatar"
    />
    <div class="list__content-container">
        <div class="list__content-container__name">
            Deadpool
        </div>
        <div class="list__content-container__content">
            Liked Your Post
        </div>
    </div>
    </div>
    

    
    <header class="header">
    <nav class="nav">
        <a class="nav__logo">
            Brand
        </a>
        <ul class="nav__menu">
            <li class="nav__item"><a class="nav__link" href="#">About</a></li>
            <li class="nav__item"><a class="nav__link" href="#">Services</a></li>
            <li class="nav__item"><a class="nav__link" href="#">Pricing</a></li>
            <li class="nav__item"><a class="nav__link" href="#">Contact</a></li>
        </ul>
        <div class="nav__hamburger">
            <span class="nav__hamburger__bar"></span>
            <span class="nav__hamburger__bar"></span>
            <span class="nav__hamburger__bar"></span>
        </div>
    </nav>
    </header>
    

    
    <div class="modal">
    <div class="modal__heading">HURRY UP!</div>
    <span class="material-icons-round modal__icon__close">
        close
    </span>
    <div class="modal__text">
        ⚡ Sale Start @ 12PM Today ⚡
        <br>
        Start Wishlisting Now!
    </div>
    <button class="btn btn--outlined">Wishlist Now</button>
    </div>

    

    
    <div class="heading heading--h1">Awesome Heading</div>
    <div class="heading heading--h2">Awesome Heading</div>
    <div class="heading heading--h3">Awesome Heading</div>
    <div class="heading heading--h4">Awesome Heading</div>
    <div class="heading heading--h5">Awesome Heading</div>
    <div class="heading heading--h6">Awesome Heading</div>