Saved!

Responsive Email Inbox Template css3 - 2TBphyad

Responsive Email Inbox Template css3

Responsive Email Inbox Template

  
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>




<div class="nav t">
  <button>
    <img src="http://lockmail.de/img/lockmail.png" class="profile"/><br/>
    Mr. Lockmail
  </button>
	<div class="nav-container">

	  <button onclick="getlist('Inbox');"><i class="fa fa-inbox"></i>  Inbox <div class="unread">3</div></button>
	  <button onclick="getlist('Sent');"><i class="fa fa-paper-plane"></i> Sent</button>
	  <button onclick="getlist('Spam');"><i class="fa fa-fire"></i> Spam</button>
		<button onclick="getlist('<i class=&quot;fa fa-trash&quot;></i> Trash');"><i class="fa fa-trash"></i> Trash</button>
	  <hr>
      <button><u> Folder</u></button>
	  <button onclick="getlist('Important');"><i class="fa fa-circle"></i> Important</button>
	  <button onclick="getlist('Privat');"><i class="fa fa-circle"></i> Private</button>
	  <button><i class="fa fa-plus"></i> Add Folder</button>

	
	
	</div>

	
</div>




  <div class="second-nav t">

	  <div class="header">
		  <i class="fa fa-bars fa-1x fa-menu"></i> <span class="listname"><i class="fa fa-inbox"></i> Inbox</span>
    </div>
    <div class="controls">
      <div class="control">
        <i class="fa fa-trash-o fa-1x"></i>
        <div class="comment bottom">Delete</div>
      </div>
      <div class="control">
        <i class="fa fa-mail-reply fa-1x"></i>
        <div class="comment bottom">Reply</div>
      </div>
      <div class="control">
        <i class="fa fa-arrow-right fa-1x"></i>
        <div class="comment bottom">Forward</div>
      </div>
      <div class="control">
        <i class="fa fa-search fa-1x"></i>
        <div class="comment bottom">Search</div>
      </div>
      <div class="control">
        <i class="fa fa-folder-o fa-1x"></i>
        <div class="comment bottom">Move</div>
      </div>
    </div>
    
  
    <div class="messages">
      <div class="message">
        <div class="cell">
          <div class="checkbox">
            <input type="checkbox" name="1" id="1" />
            <label for="1"></label>
          </div>
          <div class="profileImage" onclick="getmail('1');">
            <img src="http://lockmail.de/img/lockmail.png"/>
          </div>
          <div class="metadata" onclick="getmail('1');">
            <p class="from">Wellcome</p><br/>
            <p class="subject">Lockmail Support Team<p>
          </div>
        </div>
      </div>
    </div>
  
    <div class="messages">
      <div class="message">
        <div class="cell">
          <div class="checkbox">
            <input type="checkbox" name="2" id="2" />
            <label for="2"></label>
          </div>
          <div class="profileImage" onclick="getmail('2');">
            <img src="http://lockmail.de/img/lockmail.png"/>
          </div>
          <div class="metadata" onclick="getmail('2');">
            <p class="from">Wellcome</p><br/>
            <p class="subject">Lockmail Support Team<p>
          </div>
        </div>
      </div>
    </div>

    
  </div>
  
  
  
  
  
  
  <div class="viewer t">
    <div class="controls stick">
      <div class="control mobon" onclick="getmail('2');">
		  <i class="fa fa-arrow-left fa-1x red"></i>
		  <div class="comment bottom">Back</div>
      </div>
      <div class="control">
        <i class="fa fa-mail-reply fa-1x"></i>
        <div class="comment bottom">Reply</div>
      </div>
      <div class="control">
        <i class="fa fa-arrow-right fa-1x"></i>
        <div class="comment bottom">Forward</div>
      </div>
      <div class="control">
        <i class="fa fa-download fa-1x"></i>
        <div class="comment bottom">Download</div>
      </div>
      <div class="control">
        <i class="fa fa-fire fa-1x"></i>
        <div class="comment bottom">Spam</div>
      </div>
      <div class="control">
        <i class="fa fa-trash-o fa-1x red"></i>
        <div class="comment bottom">Delete</div>
      </div>
    </div>
    <div class="scroll">
	<h2 class="mailnum"></h2>
      <div class="email-header">
		<div class="img"><img src="http://lockmail.de/img/lockmail.png"/></div>
		<div class="from">  
        <p class="subject">Wellcome</p>
        <p class="from">Lockmail Support Team</p>
		 </div>
      </div>
      <div class="body">
        <h1>Wellcome</h1>
        <p>
          Wellcome to Lockmail.de<br/>
          From now your Emails are safe. Only you can see your emails nobody else.<br/><br/><br/><br/>
        </p>
      </div>
    </div>
  </div>


  
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js