Coffee Luv Bug Design System

Images

All the images are made responsive.Responsive images will automatically adjust to fit the size of the screen.

Example of responsive image used in our app,

responsive_image

Given below the Html code to create responsive images ,

            
            <img src="online3.jpg" alt="alttext" class="responsive" >

Given below the CSS code that set the width property to 100% and height to auto,

            
            .responsive
             {
             width: 100%;
             height: auto; 
             }

Thumbnail Images

Thumbnail images used in our app are recognized with a border around it.

Example of thumbnail image used in our app,

menu

HTML Code,

            
            <a target="_blank" href="images/menu3.jpg">
            <img src="images/menu3.jpg" alt="menu" class="menu-img">
            </a>

Images with box shadow

boxshadow-image

CSS Code,

            
            img 
            {
            width: 35%; 
            height: auto; 
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                
            }