Android App Layout Using HTML And CSS free Download

Mobile App Layout in html and css
Mobile App Layour Free Download

Hello Friends today in this article we will learn how to create mobile app layout using html and css .

Here i will provide the source code of mobile layout, you can download zip file.

Step-2 Add CSS and Js File in HEAD

<link rel="stylesheet" type="text/css" href="css/style.css" />
<meta name="aurther" content="Designed By www.schauhan.in" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

Step-2 Add HTML

<div class="header">
	 <div class="container top_header">
	   <div class="row">
		  <div class="col-xs-1"><i class="fa fa-bars"></i></div> 
		  <div class="col-xs-8 txtleft">INSURANCE</div> 
		  <div class="col-xs-3 txtright"><i class="fa fa-bell"></i></div> 
	   </div>  
	 </div>
   </div>
	
	
	<div class="image_container">
	  <div class="container">
		<div class="row">
		   <div class="box">
			  <div class="b1"><i class="fa fa-car"></i><br> Four Wheeler</div>
			  <div class="b2"><i class="fa fa-motorcycle"></i><br> Four Wheeler</div>
		   </div>   
		</div>
	  </div>
	</div>
	
	
	<div class="third_container mt">
	  <div class="container">
        <div class="box1">
		   <div class="col-xs-5 member"><i class="fa fa-industry"></i> <br /> PRODUCTS</div>
           <div class="col-xs-5 product col-xs-offset-2"><i class="fa fa-motorcycle"></i> <br /> MEMBER</div>
         </div>
         
         <div class="box2">
		   <div class="col-xs-5 member"><i class="fa fa-hand-o-up"></i> <br /> OFFERS</div>
           <div class="col-xs-5 product col-xs-offset-2"><i class="fa fa-whatsapp"></i> <br /> CHAT</div>
         </div>
         
	  </div>
	</div>
    
    
    <div class="bottom_bt">
      <div class="container">
        <div class="row">
          <div class="box3">CALCULATE EMI</div>
        </div>
      </div>
    </div>
	
	

Step-3 Add CSS Code

body
{
	background: #e8e8e8;
	font-family:Bahnschrift, sans-serif;
}
	
.top_header{ background:#f6a400; padding:10px; font-family:Bahnschrift, sans-serif;}
.txtleft{text-align:left;}
.txtright{text-align:right;}
   
.image_container
{
	background-image: url("../images/bg.jpg");
	background-size: contain;
	width: 100%;
	color:#fff;
	height:165px;
	position: relative;
	text-align: center;
}   

.box
{
	position: absolute;
	padding: 10px;
	border-radius: 5px;
	width: 85%;
	background: #fff;
	display: flex;
	left: 50%;
	top:120px;
	transform: translate(-50%);
	-webkit-box-shadow: 0px 0px 12px 0px rgba(204,204,204,1);
-moz-box-shadow: 0px 0px 12px 0px rgba(204,204,204,1);
box-shadow: 0px 0px 12px 0px rgba(204,204,204,1);
}

.b1
{
	padding: 10px;
	flex: 1;
	color:#000;
	text-align: center;
	border-right:1px solid #d5d5d5;
	font-family:Bahnschrift, sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	font-size:15px;
}

.b2
{
	padding: 10px;
	flex: 1;
	color:#000;
	text-align: center;
	font-family:Bahnschrift, sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	font-size:15px;
}

.b1 i
{
	font-size: 35px;
	color: #fe9166;
}

.b2 i
{
	font-size: 35px;
	color: #fa6465;
}

.mt
{
	margin-top: 80px;
	text-align: center;
	
}

.box1
{
	position: absolute;
	text-align: center;
	width: 85%;
	left: 50%;
	transform: translate(-50%);
}

.box2
{
	position: absolute;
	text-align: center;
	width: 85%;
	top:150px;
	left: 50%;
	transform: translate(-50%);
}

.member
{
	padding: 10px;
	height:100px;
	border-radius: 5px;
	background: #27adb6;
	color:#fff;
	font-size:14px;
	font-family:Bahnschrift, sans-serif;
}

.member i, .product i
{
	padding-top:15px;
	color:#fff;
	font-size:30px;
}

.product
{
	padding: 10px;
	height:100px;
	border-radius: 5px;
	background: #27adb6;
	color:#fff;
	font-size:14px;
	font-family:Bahnschrift, sans-serif;
	
}


.box3
{
	position: absolute;
	text-align: center;
	width: 85%;
	top:280px;
	border-radius:5px;
	height:40px;
	line-height:40px;
	color:#fff;
	cursor:pointer;
	left: 50%;
	background:#f6a400;
	transform: translate(-50%);
}

Leave a Reply

Your email address will not be published. Required fields are marked *