Mobile Email Wireframe

Developer
Sindhuja
Size
3,028 Kb
Views
26,312
  1. Mobile Email Wireframe Previews
  2. Mobile Email Wireframe HTML Codes
  3. Mobile Email Wireframe CSS Codes

How do I make an mobile email wireframe?

A mobile email wireframe with a simple layout and minimal buttons.. What is a mobile email wireframe? How do you make a mobile email wireframe? This script and codes were developed by Sindhuja on 14 September 2022, Wednesday.

Mobile Email Wireframe Previews
IQ Test

Mobile Email Wireframe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile Email Wireframe</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="top-bar" id="box"> <div class="signal"><li class="fontawesome-signal"> AT&T</li></div> <div class="battery"><li class="iconicstroke-battery-half"> 78%</li></div> <div class="time">12:56 PM</div> </div> <div class="header" id="box"> <div class="back"><a><li class="fontawesome-chevron-left"> INBOX</li></a></div> <div class="search"><a><li class="fontawesome-search"></li></a></div> </div> <div class="body" id="box"> <div id="star"><a><li class="fontawesome-star-empty"></li></a><div class="star-tag" id="box">Star</div></div> <div id="share"><a><li class="entypo-share"></li></a></div> <div id="trash"><a><li class="fontawesome-trash"></li></a></div> <a><div class="three" id="box"> 12/19/2014 </div> <div class="two" id="box"> 12/20/2014 </div> <div class="one" id="box"> 12/21/2014 </div></a> <div class="current-message" id="box"> <center>12/22/2014</center><p class="main"><br>From: <u><a>[email protected]</u><li class="fontawesome-phone"></li></a> To: <u><a>[email protected]</a></u><br> Subject: Re: Email<br id="br"></p><p id="para">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor si amet .</p> </div> <a><div class="actions"> <div class="reply"> <li class="entypo-reply"></li><div class="reply-tag" id="box">Reply</div> </div> <div class="forward"> <li class="entypo-forward"></li><div class="forward-tag" id="box">Foward</div> </div> <div class="reply-all"> <li class="entypo-reply-all"></li><div class="reply-all-tag" id="box">Reply All</div> </div> <div class="compose"> <li class="iconicstroke-pen"></li><div class="compose-tag" id="box">Compose</div> </div></a> </div>
</div>
</body>
</html>

Mobile Email Wireframe - Script Codes CSS Codes

/*Google handwriting font*/
@import url(https://fonts.googleapis.com/css?family=Permanent+Marker|Walter+Turncoat|Delius);
/*Icon fonts*/
@import url(http://weloveiconfonts.com/api/?family=entypo|fontawesome|iconicstroke);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
/* fontawesome */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
/* iconicstroke */
[class*="iconicstroke-"]:before { font-family: 'IconicStroke', sans-serif;
}
/*Reset to all defaults*/
*{ margin:0; padding:0; box-sizing:border-box;
}
#box{ border:0px solid #aaa; border-image:url(http://thecodeplayer.com/u/m/clouds.png) 2 stretch; border-width:2px;
}
li{ list-style-type:none;
}
body{ background:#333; font-family:Delius; font-size:20px; font-weight:bold; color:white;
}
.wrapper{ width:400px; margin-left:auto; margin-top:10px; margin-right:auto;
}
.signal{ float:left;
}
.battery{ float:right;
}
.time{ text-align:center;
}
.header{ height:40px; font-size:30px;
}
.fontawesome-search{ float:right; margin-right:5px;
}
.fontawesome-chevron-left{ float:left; margin-left:5px;
}
.body{ height:425px;
}
.current-message{ height:275px; width:340px; margin-left:auto; margin-right:auto; margin-top:87px; position:relative; box-shadow:1px -2px 10px 5px #373737;
}
#br{ line-height:3;
}
p{ margin-left:5px; margin-top:-20px;
}
#para{ text-indent:50px; width:300px; margin-left:auto; margin-right:auto;
}
.one{ width:320px; margin-top:60px; position:absolute; margin-left:38px; text-align:center; border-bottom:none; box-shadow:1px -1px 10px 5px #373737;
}
.two{ width:300px; margin-top:33px; position:absolute; margin-left:48px; text-align:center; border-bottom:none; box-shadow:1px -1px 10px 5px #373737;
}
.three{ width:280px; position:absolute; margin-left:58px; margin-top:5px; text-align:center; border-bottom:none; box-shadow:1px -1px 10px 5px #373737;
}
.fontawesome-star-empty{ font-size:25px; margin-left:10px; margin-top:7px;
}
.entypo-share{ font-size:25px; margin-left:45px; margin-top:-32px;
}
.fontawesome-trash{ font-size:25px; margin-left:365px; margin-top:-35px;
}
.reply{ height:35px; width:35px; margin-top:-15px; margin-left:3px; border-width:2px; border:0.99px solid #A6A6A6; border-radius:50px; text-align:center; background-color: #2E2E2E; position:relative; z-index:1; box-shadow:1px 1px 10px 5px #242424;
}
.entypo-reply{ margin-top:3px;
}
.reply-all{ height:30px; width:30px; margin-top:12px; margin-left:45px; border-width:2px; border:0.99px solid #A6A6A6; border-radius:50px; text-align:center; background-color: #2E2E2E; position:relative; z-index:1; box-shadow:1px 1px 10px 5px #242424;
}
.entypo-reply-all{ font-size:15px; margin-top:3px;
}
.forward{ height:30px; width:30px; margin-top:-73px; margin-left:4px; border-width:2px; border:0.99px solid #A6A6A6; border-radius:50px; text-align:center; background-color: #2E2E2E; position:relative; z-index:1; box-shadow:1px 1px 10px 5px #242424;
}
.entypo-forward{ font-size:15px; margin-top:3.5px;
}
.fontawesome-phone{ margin-top:-25px; margin-left:302px;
}
.main{ margin-left:-1px;
}
.wrapper{ box-shadow:1px 1px 10px 5px #242424;
}
.compose{ height:35px; width:35px; margin-top:-35px; float:right; margin-right:5px; border-width:2px; border:0.99px solid #A6A6A6; border-radius:50px; text-align:center; background-color: #2E2E2E; position:relative; z-index:1; box-shadow:1px 1px 10px 5px #242424;
}
.iconicstroke-pen{ margin-top:5px;
}
a{ cursor:pointer;
}
.reply-tag{ width:70px; position:absolute; background-color:black; margin-top:-25px; margin-left:-90px; text-align:center; box-shadow:1px 1px 10px 5px black; visibility:hidden;
}
.reply:hover .reply-tag{ visibility:visible;
}
.forward-tag{ width:80px; position:absolute; background-color:black; margin-top:-25px; margin-left:-90px; text-align:center; box-shadow:1px 1px 10px 5px black; visibility:hidden;
}
.forward:hover .forward-tag{ visibility:visible;
}
.reply-all-tag{ width:80px; position:absolute; background-color:black; margin-top:-35px; margin-left:40px; text-align:center; box-shadow:1px 1px 10px 5px black; visibility:hidden;
}
.reply-all:hover .reply-all-tag{ visibility:visible;
}
.compose-tag{ width:95px; position:absolute; background-color:black; margin-top:-25px; margin-left:-110px; text-align:center; box-shadow:1px 1px 10px 5px black; visibility:hidden;
}
.compose:hover .compose-tag{ visibility:visible;
}
.star-tag{ width:80px; position:absolute; background-color:black; margin-top:-25px; margin-left:-90px; text-align:center; box-shadow:1px 1px 10px 5px black; visibility:hidden;
}
.star:hover .star-tag{ visibility:visible;
}
Mobile Email Wireframe - Script Codes
Mobile Email Wireframe - Script Codes
Home Page Home
Developer Sindhuja
Username SindhujaD
Uploaded September 14, 2022
Rating 3
Size 3,028 Kb
Views 26,312
Do you need developer help for Mobile Email Wireframe?

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!

Sindhuja (SindhujaD) Script Codes
Name
Animated CodePen Logo
Coffee
Google Redisign
Pizza Order Form
SVG Animation
Anais Nin Quote Typography
Rock, Paper, Scissors
Website
SVG Fill Animation
A Pen by Sindhuja
Create amazing Facebook ads 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!