RN-Examples

Foundation zurb snippet. Google choose an account

This snippet was created to help web designers, front-end and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.

Preview HTML CSS

HTML code

This is the html code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<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="[email protected]">
                        <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">[email protected]</span>
                    </button>
                </li>
                <li>
                    <button type="submit" name="Email" value="[email protected]">
                        <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">[email protected]</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>

CSS code

This is the css code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection


.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;
}