Mobile App UI

Developer
Jitendra
Size
3,180 Kb
Views
52,624
  1. Mobile App UI Previews
  2. Mobile App UI HTML Codes
  3. Mobile App UI CSS Codes
  4. Mobile App UI JS Codes

How do I make an mobile app ui?

Simple Mobile App UI 1) Hover middle tab area 2) Click On left top Menu. What is a mobile app ui? How do you make a mobile app ui? This script and codes were developed by Jitendra on 04 July 2022, Monday.

Mobile App UI Previews
IQ Test

Mobile App UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile App UI </title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="mobilescreen">
<div id="speaker"></div>
<section id="maincontainer">
<nav id="mainmenu">
<h2>Menu</h2>
<ul>
<li>Main Page</li>
<li>Setting</li>
<li>Logout</li>
</ul>
</nav>
<section id="mainscreen">
<header>
<i class="fa fa-align-justify" id="menu"></i>
<h1>App Title</h1>
<i class="fa fa-shopping-cart"></i>
</header>
<section id="container">
<p class="intro">User, your current status is...</p>
<ul id="listlink">
<li><div></div><span class="titles"><i class="fa fa-plus-square"></i>Latest Points</span><span class="offdata">54</span></li>
<li><div></div><span class="titles"><i class="fa fa-tag"></i>New Offers</span><span class="offdata">12</span></li>
<li><div></div><span class="titles"><i class="fa fa-bar-chart-o"></i>Discount</span><span class="offdata">24</span></li>
<li><div></div><span class="titles"><i class="fa fa-tags"></i>Special Offer</span><span class="offdata">35</span></li>
<li><div></div><span class="titles"><i class="fa fa-bullhorn"></i>Sale</span><span class="offdata">5</span></li>
<li><div></div><span class="titles"><i class="fa fa-bookmark"></i>Wish List</span><span class="offdata">1</span></li>
</ul>
</section>
<footer>
<nav><button id="showcode">Show Code</button><button id="buyproduct">Buy Product</button></nav>
</footer>
</section>
</section>
<div id="controlder"></div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mobile App UI - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Andika);
*
{
margin:0px;
padding:0px;
outline:none;
}
html{height:100%}
body{
background: #f2f2f2;
padding:10px;
font-family:'Andika', sans-serif;
color:#000;
}
#mobilescreen
{
width:340px;
height:480px;
background:#fff;
margin:0 auto;
position:relative;
overflow:hidden;
border:2px solid #ccc;
padding:20px 5px 100px 5px;
border-radius:20px;
box-shadow:0px 5px 5px 0px #ccc;
}
#maincontainer
{
width:320px;
margin:0 auto;
background:#282a36;
position:relative;
overflow: hidden;
height:100%;
}
#mainscreen
{
position:absolute;
height:100%;
left:0px;
top:0px;
width:100%;
-webkit-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
-moz-transition:0.2s;
transition:0.2s;
}
section
{
padding:0px;
margin:0px;
}
header
{
width:100%;
height:50px;
background:#1b2125;
position:relative;
}
.fa-align-justify
{
color:#f36175;
position:absolute;
left:0px;
top:0px;
height:50px;
width:50px;
display:table-cell;
line-height:55px;
text-align:center;
cursor:pointer;
}
.fa-shopping-cart
{
color:#f36175;
position:absolute;
right:0px;
top:0px;
height:50px;
width:50px;
display:table-cell;
line-height:50px;
text-align:center;
cursor:pointer;
}
h1
{
width:100%;
text-align:center;
color:#fff;
font-size:1em;
height:50px;
line-height:50px;
}
button
{
width:50%;
border:none;
height:50px;
font-size:0.8em;
font-weight:bold;
cursor:pointer;
}
footer
{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:50px;
}
#showcode
{
background:#f36175;
}
#buyproduct
{
background:#ffd371;
}
.intro
{
text-align:center;
font-size:0.9em;
color:#58626b;
}
#container
{
padding:10px 30px;
}
#listlink{margin:0px; padding:0px 0px 0px 0px;}
li{
list-style-type:none;
padding:20px 10px;
position:relative;
background:#1b2125;
border-radius:5px;
margin-top:15px;
color:#58626b;
cursor:pointer;
}
#listlink li i
{
margin-right:20px;
z-index:99;
}
#listlink li .titles
{
z-index:5;
position:absolute;
left:1em;
top:0.4em;
}
.offdata
{
position:absolute;
right:1em;
top:0.3em;
color:#fff;
font-size:1.1em;
}
#listlink li div
{
position:absolute;
left:0px;
top:0px;
height:100%;
width:3px;
border-radius:5px 0px 0px 5px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
#listlink li:nth-child(1) div{background:#fe7559;}
#listlink li:nth-child(2) div{background:#1280e3;}
#listlink li:nth-child(3) div{background:#19b9c3;}
#listlink li:nth-child(4) div{background:#76f361;}
#listlink li:nth-child(5) div{background:#e3aa12;}
#listlink li:nth-child(6) div{background:#12e392;}
#listlink li span
{
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
#listlink li:hover div
{
width:100%;
border-radius:5px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
#listlink li:hover span
{
color:#fff;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
#controlder
{
width:50px;
height:50px;
border-radius:50%;
background:#f2f2f2;
margin:15px auto;
box-shadow:inset 0px 0px 10px 0px #bdbdbd;
border:1px solid #c6c6c6;
}
#speaker
{
width:50px;
height:5px;
border-radius:15px;
background:#f2f2f2;
margin:0px auto 15px;
box-shadow:inset 0px 0px 10px 0px #bdbdbd, inset 0px 5px 0px 0px #bdbdbd;
border:1px solid #c6c6c6;
}
#mainmenu
{
width:125px;
height:100%;
background:#1b2125;
position:absolute;
top:0px;
left:-125px;
z-index:99;
-webkit-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
-moz-transition:0.2s;
transition:0.2s;
}
.showmenu
{
left:0px!important;
-webkit-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
-moz-transition:0.2s;
transition:0.2s;
}
.movemaincontainer
{
margin-left:125px!important;
-webkit-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
-moz-transition:0.2s;
transition:0.2s;
}
h2
{
text-align:center;
color:#58626b;
font-size:1.1em;
padding:10px 0px;
}
#mainmenu ul li
{
padding:5px 10px;
}
#mainmenu ul li:hover
{
color:#f36175;
}

Mobile App UI - Script Codes JS Codes

$("#menu").click(function(){ $("#mainmenu").toggleClass("showmenu"); $("#mainscreen").toggleClass("movemaincontainer");
});
Mobile App UI - Script Codes
Mobile App UI - Script Codes
Home Page Home
Developer Jitendra
Username berdejitendra
Uploaded July 04, 2022
Rating 4
Size 3,180 Kb
Views 52,624
Do you need developer help for Mobile App UI?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jitendra (berdejitendra) Script Codes
Name
Simple yet effective Social Links
Soft touch two option menu
Two joint circles - One element
Services table
Responsive Section hover effect to show content
CSS3 Lion
One element - Pixel Dog
Flat Music Player Playlist Mobile UI
IPad Sign Up
Hidden menu on click or touch
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!