Foundation zurb snippet: Google choose an account

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: select



<div class="row"> <div class="small-12 medium-6 large-5 large-offset-3 columns"> <img alt="Google" class="logo" src="//ssl.gstatic.com/accounts/ui/logo_2x.png"/> <div class="account-wall accountchooser"> <h1 class="title"> Choose an account</h1> <ol class="accounts"> <li> <button type="submit" name="Email" value="example@gmail.com"> <img class="account-image" alt="" src="http://bootdey.com/img/Content/avatar/avatar1.png"/> <span class="account-name">Bhaumik Patel</span> <span class="account-email">example@gmail.com</span> </button> </li> <li> <button type="submit" name="Email" value="example1@gmail.com"> <img class="account-image" alt="" src="http://bootdey.com/img/Content/avatar/avatar1.png"/> <span class="account-name">Bhaumik Patel</span> <span class="account-email">example1@gmail.com</span> </button> </li> </ol> </div> </div> </div> <div class="row"> <div class="small-12 medium-6 large-5 large-offset-3 columns"> <div class="account-wall accountchooser action"> <ul> <li><a href="#">Add account </a></li> <li><a href="#">Remove</a></li> </ul> </div> </div> </div>
.account-wall { margin-top: 20px; padding: 20px 25px 30px; background-color: #f7f7f7; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .logo { margin: 25px auto 20px; float: none; display: block; height: 38px; width: 116px; } .title { font-size: 20px; color: #262626; margin: 0 0 15px; font-weight: normal; } .accountchooser ol { width: 100%; margin: 0; list-style: none; padding: 0; } .accountchooser ol li { height: 76px; border-top: 1px solid #d5d5d5; } .accountchooser ol li button { padding: 15px 0; display: block; width: 100%; height: 100%; outline: none; border: 0; cursor: pointer; text-align: left; background: url(//ssl.gstatic.com/accounts/ui/arrow_right_1x.png) right center no-repeat; background-size: 21px 21px; } .accountchooser ol li button img { float: left; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; height: 46px; width: 46px; } .accountchooser ol li button span.account-name { font-weight: bold; font-size: 16px; padding-top: 3px; color: #427fed; } .accountchooser ol li button span { display: block; margin-left: 58px; padding-right: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .action { padding: 5px; } .action ul { width: 100%; margin: 0; list-style: none; padding: 0; } .action ul li:first-child { border-right: 1px solid #d5d5d5; } .action ul li { width: 49%; display: inline-block; } .action ul li a { color: #427fed; cursor: pointer; text-decoration: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; display: inline-block; background: none; text-align: center; padding: 12px 0; outline: none; text-decoration: none; border: 0; }
Dey-Dey

Google choose an account

Dey-Dey
  May 13th, 22:10
51 Views