Responsive Website Design: Mobile Website Layout

Mobile Layout / Mobile Website

create index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>

<div id="menu">
                <div class="logo">
                <div class="right">
                       Ph:<a href="tel:0000000">(00) 8888 8888</a>
                </div>
                    <a href="default.htm">
                        <img alt="" src="images/logo.png"></a>
                </div>
                <ul>
                    <li class="active"><a href="default.htm">Home</a></li> 
                    <li><a href="#">Exam Rules</a></li>

<li><a href="contact.htm">Contact us</a></li>
                </ul>
            </div>

<h2>Exam 10</h2>
 <br>
 <div class="mybanner22">
 
  
  </div>
 <br>
 
 <h3>Start Exam</h3>
 <p><a href="#">your exam test starts now(click here)</a></p>
<div class="footer">
             
<span style="colo:#999;">© Exam 2010  </span><br />
 </div>
 </div>
 </div>
 </body>

</html>

Create style.css

/* CSS Document */
* {
 margin: 0;
 padding: 0;
}
html, body 
{ height:100%;
   }
body 
{ 
  background:#3088B8 url(../images/background.jpg) center no-repeat;    
  color:#000000;  
  font-family:Trebuchet MS;
  font-size:13px;
  margin: 0;
  padding: 0;
  line-height:18px;}
  
html, input, textarea, {font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#6f6e6e; }

.alignMiddle{ vertical-align:middle}
.alignCenter{ text-align: center}
.container1{ width:100%}
.clear { clear:both;}
.fleft{ float:left}
.fright{ float:right}
div.container { overflow:hidden; width: 100%;}
a img{ border:0px}
img{ vertical-align:top;}
ul {line-height:15px; list-style:none;}
a{ text-decoration:none; color:#0883CD;outline:none;} 
a:hover{text-decoration:none;
        width:100%;
        color:#810609;
        text-decoration:underline;}
        
        .warper
        {
            width:100%;
            margin:0 auto;
                       }
#demo2{
    list-style:none;  
    
}

#demo2 img{
  margin-bottom:10px;
  margin-left:8px;
  border:1px solid #fff;
  
}

#demo2 ul li{    
    display:inline-block;    
        
}

#demo2 ul li a{    
    display:block;
    
}
/***********************body**************************/

.header-middle
{
    width:100%;         
    text-align:center;  
background-attachment: scroll;
    background-clip: border-box;    
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    /*border-bottom-color:#3c3a39 ;
    border-bottom-style: solid;
    border-bottom-width: 1px;*/
    padding-top:10px;
   }
   
   .header-middle p
   {
       
       padding-top:5px;
       padding-bottom:5px;}
       
   h2 {
       
    color: #0883CD;
    font-size:20px;   
    line-height:20px; 
    padding:10px;
}
h3{color:#0883CD;
   text-align:left;
   font-size:14px;
   padding:10px;
    }
/***********************menu**************************/
.hand img
{
    float:left;}

table tr td
{
    border:1px solid #93173b; 
    padding:5px;}
    
.red
{
    color:#93173b;
    font-weight:600;}
    
    .line-hor {
    border-bottom-color: #000000;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
    
ul.menuLink 
{
    width:99%;
    margin:px auto;
    
}

/***********************content**************************/
.photo
{
    border:1px solid #b3b3b3;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 21px;
    width:206px;
    margin:0 auto!important;
    display:block;
 
 background:#5f5d51;
    }
    .addr{border:1px solid #b3b3b3;
           padding:10px;
    width:280px;
    margin:0 auto!important;
    display:block;}
 .photo img
{
    border:1px solid #b3b3b3; }
.star
{
    
    float:left;
    clear:both;
    font-size:20px;
   
    }
.content
{
          
    background-attachment: scroll;
    background-clip: border-box;    
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    background:#fff;
    margin:10px;
    color:#000;
 border-radius: 10px;
}
    
 .content img
{
 margin-bottom:10px;
margin:0 auto!important;
text-align:center;
display:block;
 }
    
    
.content p
{
    /*text-align:justify;*/
    
    color:#000;
    font-size:13px;
    text-align:justify;
 padding:10px;
    
    }
    
    
    .content ul li
    {
        background:url('../images/disc.jpg') no-repeat 2px 9px;
        padding-left:20px;
        padding-top:2px;
        margin-top:10px;
        color:#000000;
        margin-left:20px;}
        
        
        .testimonial
        {
            color:#333333;
            text-align:justify;}
        
        .testimonial ul li
    {
        background:url('../images/testi.png') no-repeat 2px 9px;
        padding-left:41px;
        padding-top:2px;
        margin-top:10px;}
    
 .home
 {
    
     float:left;}
     
  .home img
  {
      padding-bottom:10px;
      padding-left:10px;}
      
.food img
{
   margin-bottom:10px;
   margin-left:30px;
   margin-top:10px;}
   
   .box-shadow {
    box-shadow: 0 5px 10px #ccc;
}
.img_border
{
    border:4px solid #ffffff;
    -moz-box-shadow: 0 5px 10px #ccc;
  -webkit-box-shadow: 0 5px 10px #ccc;
  box-shadow: 0 5px 10px #ccc;
  zoom: 1;
  filter:
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=1),
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=45,strength=1),
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=2),
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=135,strength=3),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=10),
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=225,strength=3),
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=2),
      progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=315,strength=1);
}

.img_border:hover
{
    border-color:#333333;
}
.hor_split {
    border-bottom-color: #333333;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    height: 1px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}
.disc_list li
{
    margin:0 0 8px 0!important;
    padding:0 0 0 20px!important;
    background:url(images/marker-2.png) no-repeat left 7px;
    display:block;
    list-style-type:none!important;
    border:0!important;
    float:none;
}

/***********************footer**************************/

.footer{ background:#333333;        
        padding-top:10px;
        padding-bottom:10px;
        color:#fff;       
    font-size:12px;    
    margin:0 auto! important;
    display:block;
    text-align:center;
 border-radius:10px;
    }
 .footer a{
 color:#FFFFFF;
 text-decoration:none;
 }

.footer a:hover
{
  color:#84090C; 
  text-decoration:underline; }

.act {
    color:#84090C!important;
    text-decoration:none;
}
/***********************contact**************************/

input {  
        padding: 5px; 
        float:left;         
        font-size: 13px; 
        font-family: Arial, Helvetica, sans-serif;
        border: 1px solid #7D7D7D; 
        margin-bottom: 5px;
        text-shadow: 0px 1px 0px #fff;  
        outline: none;  
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        
               -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e0e0e0), color-stop(1, #c9c9c9));
        background:-moz-linear-gradient(top, #e0e0e0 5%, #c9c9c9 100%);
        background:-webkit-linear-gradient(top, #e0e0e0 5%, #c9c9c9 100%);
        background:-o-linear-gradient(top, #e0e0e0 5%, #c9c9c9 100%);
        background:-ms-linear-gradient(top, #e0e0e0 5%, #c9c9c9 100%);
        background:linear-gradient(to bottom, #e0e0e0 5%, #c9c9c9 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#c9c9c9',GradientType=0);
        
        background-color:#e0e0e0;
        
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:2px;
        
       
        
        display:block;
        margin:0 auto;
        width:90%; 
        margin-bottom:10px;       
    }  
    
   
    
    textarea
    {  
         padding: 5px; 
       float:left; 
      
        font-size: 13px; 
        border: 1px solid #7D7D7D; 
        font-family:Arial, Helvetica, sans-serif;
        margin-bottom: 5px;
        text-shadow: 0px 1px 0px #fff;  
        outline: none;  
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e0e0e0), color-stop(1, #c9c9c9));
        background:-moz-linear-gradient(top, #e0e0e0 5%, #c9c9c9 100%);
        background:-webkit-linear-gradient(top, #e0e0e0 5%, #c9c9c9 100%);
        background:-o-linear-gradient(top, #e0e0e0 5%, #c9c9c9 100%);
        background:-ms-linear-gradient(top, #e0e0e0 5%, #c9c9c9 100%);
        background:linear-gradient(to bottom, #e0e0e0 5%, #c9c9c9 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#c9c9c9',GradientType=0);        
        background-color:#e0e0e0;        
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:2px;        
             
        display:inline-block;
        width:90%;          
        overflow:auto;     
        resize: none;
        display:block;
         margin-bottom:10px;
    }  
    .cont-box
    {
        float:left;
        width:100%;}
    select
    {  
        
        padding: 5px;  
        font-size: 12px; 
        font-family:Arial, Helvetica, sans-serif;
        border: 1px solid #7D7D7D; 
        text-shadow: 0px 1px 0px #fff;  
          
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;        
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e0e0e0), color-stop(1, #c9c9c9));
        background:-moz-linear-gradient(top, #e0e0e0 5%, #c9c9c9 100%);
        background:-webkit-linear-gradient(top, #e0e0e0 5%, #c9c9c9 100%);
        background:-o-linear-gradient(top, #e0e0e0 5%, #c9c9c9 100%);
        background:-ms-linear-gradient(top, #e0e0e0 5%, #c9c9c9 100%);
        background:linear-gradient(to bottom, #e0e0e0 5%, #c9c9c9 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#c9c9c9',GradientType=0);
        background-color:#e0e0e0;        
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:2px;        
        border:0px solid #ffffff;        
        display:block;        
        width:32%;   
          
        
    }

.taright
    {
        text-algin:center;}
        
    .conbutton {
        
        -moz-box-shadow:inset 0px 1px 0px 0px #eeeae6;
        -webkit-box-shadow:inset 0px 1px 0px 0px #eeeae6;
        box-shadow:inset 0px 1px 0px 0px #eeeae6;
        
      background:#255593; /* Old browsers */

-moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        
        border:1px solid #;
        
        display:inline-block;
        color:#fff;
        font-family:Arial, Helvetica, sans-serif;        
        font-weight:normal;  
       margin-right: 17px;
    margin-top: 5px;
    width: 41%;                                                    
        
    }
    .conbutton:hover {        
    background:#61B72F ; /* Old browsers */
            }
    
    .call
    {
        font-size:25px;
        text-align:center;
        margin-top:20px;
        margin-bottom:20px;
        color:#fee50f;}
        
      .text
      {
          font-size:15px;
          color:#fff;}
          
      .more
      {
          font-size:18px;
          text-align:center;
          color:#F9BF6D;         
          padding:5px;
          }
          
          /*----- slider -----*/
.items {
 display:none;
 font-size:12px;
}

.slider div.pic {
 position:relative !important;
 left:0;
 top:0;
}
.slider {
 width:93% !important;
 height:167px;
 position:relative;
 z-index:1;
 border:7px solid #fff;
 text-align:center;
 
}

.slider-container
{
       /* background: none repeat scroll 0 0 #FFFFFF;*/
    margin-bottom: 25px;
    margin-left: 0px;
    margin-top: 10px;
    text-align: center;
    width:;
    }

.slider .banner {
 position:absolute!important;
 top:100px;
 right: 20px;
 color:#333333;
 width:235px; 
 font-size:10px; 
 display:block;
 z-index:999;
 background:#fff; 
 text-align:center;     
 
}

/*----- cycle -----*/

#slider{width:320px;
position:relative;
}

.txt-1
{
   
}
.txt-2{color:#fff;
}

.cycle{position:relative;}

#slider .box{background:none !important;
width:300px;
overflow:hidden}

.cycle .navigate{ 
    top: -60px !important;
    right:13px;
    overflow: hidden;
    position: absolute;
    width: 56px;
}

.cycle #next_slide {
 float:right;
 cursor:pointer;
 display:inline-block;
 width:27px;
 height:27px;
 background:url(../images/next.gif) no-repeat 0 0;
}
.cycle #next_slide:hover {
 background:url(../images/next.gif) no-repeat 0 -27px;
}

.cycle #prev_slide {
 float:left;
 cursor:pointer;
 display:inline-block;
 width:27px;
 height:27px;
 background:url(../images/prev.gif) no-repeat 0 0;
}
.cycle #prev_slide:hover {
 background:url(../images/prev.gif) no-repeat 0 -27px;
}
.about
{
    background:#fff;
    text-align:center;
    padding-top:20px;
    width:300px;
    margin:0 auto!important;
    display:block;
    font-weight:600;}
    
  .title
  {
      font-size:18px;
      font-weight:600;
      font-style:italic;}
      
   .blue
   {
       color:#085aa6;}
    
  .contact
   {
    
    margin: 0 auto;
    width:960px;
    /*background:#ECECEC;*/
      /*margin-left:200px;           */
      }
       
       .location
   {
       color:#fff;
    margin-right: 10px;
    margin-top: -70px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-top: 10px;
    width: 223px;}
       
   .contact-left
   {
      
      width:250px;
      margin:auto;     
            color:#3B577F;
          
       /*background:#ECECEC;*/
       }
       .contact-left p{
    color:#fff;}
       
       
.contact-left textarea#commentText,textarea#description,textarea#jform_profile_aboutme,textarea#jform_contact_message
{padding:5px 18px; 
  margin-top:5px;
 margin-left:0px;
 font-family:Trebuchet MS;
 font-size:13px;
 resize:none;
 overflow:auto;
 outline:none;
 box-sizing:border-box;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
 width:95%;
 /**border:1px solid #282321;**/
 color:#000000; 
   -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #dfdfdf));
        background:-moz-linear-gradient(top, #ffffff 5%, #dfdfdf 100%);
        background:-webkit-linear-gradient(top, #ffffff 5%, #dfdfdf 100%);
        background:-o-linear-gradient(top, #ffffff 5%, #dfdfdf 100%);
        background:-ms-linear-gradient(top, #ffffff 5%, #dfdfdf 100%);
        background:linear-gradient(to bottom, #ffffff 5%, #dfdfdf 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0);        
        background-color:#ededed;        
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;        
        border:1px solid #dcdcdc;
        
    }
    
    .contact-bottom
    {
        background-color: #1f4d1f;
        width:304px;
        color:#3B577F;
        float:left;
        margin-right:3px;
        margin-top:10px;
        padding:10px;
        display:block;
        }
        
        
        .contact-bottom ul li
   {
       background:url('../images/home-bullet.png') no-repeat 2px 5px;
       padding-left:25px;
       padding-right:20px;
       font-size:14px;
       text-align:justify;
       line-height:25px;
       }   
         fieldset
{
    border:none;
    margin-left:0px;}
    
    input.inputbox,input.required,div.k2AccountPage input[type="text"]
                 {height:30px;
                  margin-bottom:5px;
                  padding:5px 18px;
                  margin-left:0px;
                  width:100%;
                  outline:none;
                  box-sizing:border-box;
                  -moz-box-sizing:border-box;
                  -webkit-box-sizing:
                  border-box;
                  /**border:1px solid #282321;**/                  
                  color:#000000;                  
                   -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
        background:-moz-linear-gradient(top, #ffffff 5%, #dfdfdf 100%);
        background:-webkit-linear-gradient(top, #ffffff 5%, #dfdfdf 100%);
        background:-o-linear-gradient(top, #ffffff5%, #dfdfdf 100%);
        background:-ms-linear-gradient(top, #ffffff 5%, #dfdfdf 100%);
        background:linear-gradient(to bottom, #ffffff 5%, #dfdfdf 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0);
        background-color:#ffffff;        
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;        
        border:1px solid #dcdcdc;
        font-family:Trebuchet MS;
        font-size:13px;              
                  }
    
textarea#commentText,textarea#description,textarea#jform_profile_aboutme,textarea#jform_contact_message
{padding:5px 18px; 
  margin-top:5px;
 margin-left:0px;
 font-family:Trebuchet MS;
 font-size:13px;
 resize:none;
 overflow:auto;
 outline:none;
 box-sizing:border-box;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
 width:100%;
 /**border:1px solid #282321;**/
 color:#000000; 
   -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #dfdfdf));
        background:-moz-linear-gradient(top, #ffffff 5%, #dfdfdf 100%);
        background:-webkit-linear-gradient(top, #ffffff 5%, #dfdfdf 100%);
        background:-o-linear-gradient(top, #ffffff 5%, #dfdfdf 100%);
        background:-ms-linear-gradient(top, #ffffff 5%, #dfdfdf 100%);
        background:linear-gradient(to bottom, #ffffff 5%, #dfdfdf 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0);        
        background-color:#ededed;        
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;        
        border:1px solid #dcdcdc;
        
    }
    .conbutton{
/*border:1px solid #4d0080; */
-webkit-border-radius: 3px; 
-moz-border-radius: 3px;
border-radius: 3px;
font-size:12px;
/*padding: 5px 5px 5px 5px; */
text-decoration:none; 
display:inline-block;
/*text-shadow: -1px -1px 0 rgba(0,0,0,0.3);*/
font-weight:bold; 
color: #fff;
 background-color: #0883CD;  
 margin-left:0PX;
 }
 
 
 .conbutton:hover
{
    border:1px solid #61B72F;
 background-color:#61B72F;
}

/*.conbutton:hover {        
   box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.25),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em hsla(0,0%,0%,.05);
 
            }*/
            
.conbutton:active {
position: relative;
top: 1px;
left: 0px;
}

.call
    {
        font-size:25px;
        text-align:center;
        margin-top:20px;
        margin-bottom:20px;
        color:#fee50f;}
        
      .text
      {
          font-size:15px;
          color:#fff;}
          
      .more
      {
          font-size:18px;
          text-align:center;
          color:#F9BF6D;         
          padding:5px;
          }
          
          
          
       .res img
       {
           margin:15px;
           border:1px solid #d62929;}
           
           
           h6 {
    color: #2c4438;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
}

.space{
height:30px;
}
#menu{ text-align:center; vertical-align:top}
#menu ul {
    background:#F8F7F2;
 /*background-image:linear-gradient(220deg, #FF0000, #c5c5c4);*/
    padding: 4px 5px;
    margin-bottom:10px;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
}
#menu ul li {
    margin:2px 0;
}
#menu ul li a {
    font-family:'Roboto', Arial, Helvetica, sans-serif;
    font-size:15px;
    background-image:linear-gradient(180deg, #0594DB, #90D8E7);
    line-height:40px;
    display:block;
    color:#302b26;
    text-shadow:0 1px 0 #f7f6f4;
    text-decoration:none;
    border-bottom:2px solid #666;
    border-top:1px solid #fff;
    
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
}
#menu ul li a:hover, #menu ul li.active a {
    background-image:linear-gradient(180deg, #000000,#61B72F);
    color:#fff;
    text-shadow:0 1px 0 #004174;
    border-bottom:2px solid #052744 ;
    border-top:1px solid #479cdd;
}
 
.logo {
    background:#FCFEFD;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 2px 0;
    width: 100%;
}
.mybanner {
    background:#F8F7F2;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 20px 0;
    width: 100%;
 text-align:center;
}

.main {
    margin: 0 auto;
    max-width: 767px;
 
}
.mylist{
}
.mylist ul{
padding:10px;

}
.mylist ul li{
list-style-type:disc;

}
.mytable{
margin:auto;
padding:10px;
}
.mybanner22{
margin:auto;
padding:2px;
}
.right{
float: right;
    height: 30px;
 margin-right: 30px;
 width: 119px;

}

Tuesday, 17 February 2015

Mobile Website Layout

create index.html

Create style.css

No comments:

Post a Comment