diff options
| author | Yan Zhu <picturepan2@hotmail.com> | 2017-03-10 19:37:02 +0300 |
|---|---|---|
| committer | Yan Zhu <picturepan2@hotmail.com> | 2017-03-10 19:37:02 +0300 |
| commit | a0f5d38cc5119af31d0cd2d38eb975f14b942fd1 (patch) | |
| tree | e30b113e163555764095b5949b87ff835a6a6a26 /docs/layout.html | |
| parent | 53ae5f7981833296ae14b60153b2f3d7e6ae107e (diff) | |
Update Panels example
Diffstat (limited to 'docs/layout.html')
| -rw-r--r-- | docs/layout.html | 116 |
1 files changed, 88 insertions, 28 deletions
diff --git a/docs/layout.html b/docs/layout.html index 6cd8382..8b04b0a 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -422,26 +422,19 @@ <div class="column col-6 col-xs-12"> <div class="panel"> <div class="panel-header text-center"> - <div class="navbar"> - <div class="navbar-section"> - <button class="btn btn-action btn-link btn-lg"> - <i class="icon icon-keyboard_arrow_left"></i> - </button> - </div> - <div class="navbar-section navbar-primary"> - <div class="panel-title">Tony Stark</div> - </div> - <div class="navbar-section"></div> - </div> + <figure class="avatar avatar-lg"> + <img src="img/avatar-2.png" /> + </figure> + <div class="panel-title mt-10">Bruce Banner</div> </div> <nav class="panel-nav"> <ul class="tab tab-block"> - <li class="tab-item"> + <li class="tab-item active"> <a href="#panels"> Profile </a> </li> - <li class="tab-item active"> + <li class="tab-item"> <a href="#panels"> Files </a> @@ -455,36 +448,103 @@ </nav> <div class="panel-body"> <div class="tile tile-centered"> - <div class="tile-icon"> - <div class="example-tile-icon"> - <i class="icon icon-face centered"></i> - </div> + <div class="tile-content"> + <div class="tile-title">E-mail</div> + <div class="tile-meta">bruce.banner@hulk.com</div> </div> + <div class="tile-action"> + <button class="btn btn-link btn-action btn-lg"><i class="icon icon-mail_outline"></i></button> + </div> + </div> + <div class="tile tile-centered"> <div class="tile-content"> - <div class="tile-title">ironman-mark-1.pdf</div> - <div class="tile-meta">14MB · Private · 1 Jan, 2017</div> + <div class="tile-title">Skype</div> + <div class="tile-meta">bruce.banner</div> </div> <div class="tile-action"> - <button class="btn btn-link btn-action"><i class="icon icon-more_vert"></i></button> + <button class="btn btn-link btn-action btn-lg"><i class="icon icon-phone"></i></button> </div> </div> <div class="tile tile-centered"> + <div class="tile-content"> + <div class="tile-title">Location</div> + <div class="tile-meta">Dayton, Ohio</div> + </div> + <div class="tile-action"> + <button class="btn btn-link btn-action btn-lg"><i class="icon icon-map"></i></button> + </div> + </div> + </div> + <div class="panel-footer"> + <button class="btn btn-primary btn-block">Edit</button> + </div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="panel"> + <div class="panel-header"> + <div class="panel-title">Comments</div> + </div> + <div class="panel-body"> + <div class="tile"> <div class="tile-icon"> - <div class="example-tile-icon"> - <i class="icon icon-face centered"></i> - </div> + <figure class="avatar"> + <img src="img/avatar-1.png" /> + </figure> </div> <div class="tile-content"> - <div class="tile-title">ironman-mark-2.pdf</div> - <div class="tile-meta">24MB · Private · 1 Jan, 2017</div> + <p class="tile-title">Thor Odinson</p> + <p class="tile-meta">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> </div> - <div class="tile-action"> - <button class="btn btn-link btn-action"><i class="icon icon-more_vert"></i></button> + </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"> + <img src="img/avatar-2.png" /> + </figure> + </div> + <div class="tile-content"> + <p class="tile-title">Bruce Banner</p> + <p class="tile-meta">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> + </div> + </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar" data-initial="TS"></figure> + </div> + <div class="tile-content"> + <p class="tile-title">Tony Stark</p> + <p class="tile-meta">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> + </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"> + <img src="img/avatar-4.png" /> + </figure> + </div> + <div class="tile-content"> + <p class="tile-title">Steve Rogers</p> + <p class="tile-meta">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> + </div> + </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"> + <img src="img/avatar-3.png" /> + </figure> + </div> + <div class="tile-content"> + <p class="tile-title">Natasha Romanoff</p> + <p class="tile-meta">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> </div> </div> </div> <div class="panel-footer"> - <button class="btn btn-primary btn-block">Manage</button> + <div class="input-group"> + <input type="text" class="form-input" placeholder="Hello" /> + <button class="btn btn-primary input-group-btn">Send</button> + </div> </div> </div> </div> |