Responsive Shopping website UI using Html and Css | | Tamil



Source for Responsive web layout


  /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.empty::before{
content:'';
position:absolute;
right:0px;
top:0px;  
width:100%;
height:100px;
background-color:dodgerblue;    
    z-index:-1; 
 }
.nav li{
display:none; 
}

.navicon {

margin:25px 0 0 30%;
}
.container {   
display:block; 
}
.info{
   margin:25% 0 0 60px; 
}
 .optional{
  margin:50px 0 0 0;  
 }
 .optional h3{
  font-size:15px;  
 }
 .optional h3:nth-child(1){
  margin-left:10px; 
   
}

.info .min{
display:block;
width:300px;
height:300px;  
position:relative;
left:8px;    
}

.info button{
    margin-top:20px;     
}
.product img{
display:none;  
}

.icons{
margin:-37px 0 0 190px;
}
.icons i{
color:#000;  

margin-left:30px;
}
.logo{
   background-image: url('../images/logo2.png');
    background-repeat:  no-repeat;
    background-size:contain;  
}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

.empty::before{
content:'';
position:absolute;
right:0px;
top:0px;  
width:100%;
height:100px;
background-color:dodgerblue;    
    z-index:-1; 
 }
.nav li{
display:none; 
}

.navicon {

margin:25px 0 0 55%;
}
.container {   
display:block;
text-align:center;    
}
.info{
   margin:10% 0 0 60px; 
}
 .optional{
  margin:50px 0 0 0;  
 }
 .optional h3{
  font-size:15px;  
 }
 .optional h3:nth-child(1){
  margin-left:150px; 
   
}

.info .min{
display:block;
width:320px;
height:320px;  
position:relative;
top:20px; 
left:128px;    
}
.price{
margin:15% 0 0 0; 
}

.info button{
    margin-top:20px;     
}
.product img{
display:none;  
}

.icons{
margin:40px 0 0 250px;
}
.icons i{
color:#000;  

margin-left:30px;
}
.logo{
   background-image: url('../images/logo2.png');
    background-repeat:  no-repeat;
    background-size:contain;  
}

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

.empty::before{ 
width:400px;
height:580px;
 }
.nav li{
  display:none;
}


.navicon {
margin:35px 0 0 60%;
}
.container {   
display:inline-flex; 
}
.info{
    margin:5% 0 0 80px; 
}
 .optional{
  margin:50px 0 0 45%; 
 }
 .optional h3{
  display:inline; 
  font-size:10px;  
     margin-left:100px;
 }


.info .min{
display:none; 
}
.info h1{
font-family:sans-serif; 
    font-size:2em;
    color:dodgerblue;  

}


.product img{
display:block;  
}

.icons{
margin:0 0 0 57%;
}
.icons i{
color:#fff;  
margin-left:50px;
}
.logo{
    background-image: url('../images/logo.png');
    background-repeat:  no-repeat;
    background-size:contain;  
}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

.empty::before{ 
width:450px;
height:580px;
 }
.nav li{
  display:inline;
}
.nav li:nth-child(4),li:nth-child(3){
  display:none;  
}

.navicon {
margin:35px 0 0 50%;
}
.container {   
display:inline-flex; 
}
.info{
    margin:5% 0 0 100px; 
}
 .optional{
  margin:50px 0 0 48%;

 }
 .optional h3{
  display:inline; 
  font-size:13px;  
     margin-left:100px;
 }


.info .min{
display:none; 
}


.product img{
display:block;   
}

.icons{
margin:0 0 0 75%;
}
.icons i{
color:#fff;  
margin-left:35px;
}
.logo{
    background-image: url('../images/logo.png');
    background-repeat:  no-repeat;
    background-size:contain;  
}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

.empty::before{ 
width:500px;
height:580px;
 }
.nav li{
  display:inline;
}
.nav li:nth-child(4){
  display:inline;  
}

.navicon {
margin:35px 0 0 41%;
}
.container {   
display:inline-flex; 
}
.info{
    margin:5% 0 0 250px; 
}
 .optional{
  margin:50px 0 0 54%; 
 }
 .optional h3{
  display:inline; 
  font-size:17px;  
     margin-left:100px;
 }


.info .min{
display:none; 
}

.info h1{
font-family:sans-serif; 
    font-size:2.5em;
    color:dodgerblue;  

}

.product img{
display:block;
}

.icons{
margin:-20px 0 0 75%;
}
.icons i{
color:#fff;  
margin-left:50px;
}
.logo{
    background-image: url('../images/logo.png');
    background-repeat:  no-repeat;
    background-size:contain;  
}

} 

Comments

Post a Comment

Popular posts from this blog

FB friend request page using Html & Css

Image
In this design a user can view the friend request in different view i hope you like this design,thanks for your visit. Source code below: HTML <!DOCTYPE html> <html> <head> <title>fb.in</title> <!-- font cdn --> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- css reference link --> <link rel="stylesheet" type="text/css" href="fb.css"> </head> <body> <div id="fb-cover"> <div id="but-con"> <img id="frm" src="cap.png" width="160px" height="160px">           <span id="ic" style="font-size:38px;position:relative;left:180px;top:-50px;color:green;visibility: hidden" class="mater...
Read more

Emoji expression using pure css

Image
I use number of div tags to create these emoji expression if you want more video like this please subscribe our channel and thanks for your visit Source code: Html: <!DOCTYPE html> <html> <head> <title>emoji</title> <!-- css reference --> <link rel="stylesheet" type="text/css" href="emoji.css"> </head> <body> <!-- Emoji container --> <div id="angry"> <!-- Each div contains eack emoji,and the name for the expressions is given in the div id-->         <div id="aface"> <div class="ael"></div> <div class="aer"></div> <h1 class="al"></h1> <h1 class="ar"></h1> <div id="am"></div>         </div> </div> <div id="sad"> <!-- Each div contains eack emoji,and the name for the ex...
Read more