All geek questions in one place

Best Approach for User Profile Dashboard

I am currently stuck in a little problem. I used the markup as follows:

Excerpt

$(function () { $(".more-options").click(function () { $(this).closest(".user-profile").toggleClass("open"); return false; }); }); 
 /* Reset */ * {margin: 0; padding: 0; list-style: none; font-size: 12pt;} a {text-decoration: none;} /* Main CSS */ .user-profile {border: 1px solid #999; overflow: hidden; position: relative; margin: 25px 0;} .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; float: left;} .user-profile p:first-child {margin: 3px 0 0;} .user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat #ccc; text-indent: -99px; overflow: hidden;} .user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff;} .user-profile .more-options-list li, .user-profile .more-options-list li a {display: block;} .user-profile .more-options-list li a {padding: 5px;} .user-profile.open .more-options-list {display: block;} .user-profile.open .more-options, .user-profile .more-options:hover {background-color: #999;} /* Testing Sizes */ .user-profile.default {width: 250px;} .user-profile.mobile {width: auto;} .user-profile.large {width: 500px;} .user-profile.small {width: 100px;} /* Background Image, Can be ignored. */ .user-profile .more-options {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6+EdigjL7ZHu/k72I796i9zRiSJPwG4VHX0Z+AxRzNRrtksUvwf7+Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi+3YV8DGMiT4VVuG7oiZpGzrZJhcs/hL49xtzH/Dy6bdfTsXYNY+5yluWO4D4neK/ZUvok/17X0HPBLsF+vuUlhfwX4j/rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN+2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD+0rbyoBc3SOjczohbyS1drbq6pQdqumllRC/0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn+tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L+YGHNtd1FJitqPAR+hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY/jx4SMshe9LaJRpTvHr3C/ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY/+hpqwSyv0I0/QMTRb7RMgBxNodTfSPqdraz/sDjzKBrv4zu2+a2t0/HHzjd2Lbcc2sG7GtsL42K+xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT/IPszSueHQqv6i/qluqF+oF9TfO2qEGTumJH0qfSv9KH0nfS/9TIp0Wboi/SRdlb6RLgU5u++9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8/LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0/Ex+IzAreevPhe+CawpgP1/pMTMDo64G0sTCXIM+KdOnFWRfQKdJvQzV1+Bt8OokmrdtY2yhVX2a+qrykJfMq4Ml3VR4cVzTQVz+UoNne4vcKLoyS+gyKO6EHe+75Fdt0Mbe5bRIf/wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN/7HelL4t10t9F4gPdVzydEOx83Gv+uNxo7XyL/+u4tgAAAVNJREFUKBV9kT9Lw1AUxfNeUxDc1N2CQ0kNDhqUbq46K4izg4PgLugHECdF6qBTcdJNxNFFVMQ6lbTQIX4BF5cI0cbfLb1SatILyb33vHPO+3NNmqaO53nVQqFQdRznpdlsPpBHhu/7i91ud85a+wg/NJVKZRtFTVWYXsRxvBNF0ZdimoMgKLJ2TC8aiW9jzIaYvNNMC6KB0Rs7rbXb7Uixcrk8xWmvEC0rJhluw/IrDoJSQ5xH8MoGq9LPEq7rPg8b9LnjluJImoyYALvB6JyNnqhnMjiy4amB4EDcgnACMJZFzMEStLthGNZ6JkJiQguYXPOVpB8ViD+YzDqTuReeXKcXrVarwWJAc9eH8lLIey2pgZD+TqIKTmK53j6GB1IrLhnsNkmSzU6n8zmI/zPRRQaygqiO0WTf4JDT7oH9KEdzrokQeKcSJpeUZzxgXUXD+RcR85AyRBGQ7AAAAABJRU5ErkJggg==");} 
 <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <div class="user-profile default"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile mobile"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile large"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile small"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div>

Problem

I'm trying to create a user profile panel , which, when it lives, should be like this:

This is what I am trying to achieve here when a button is pressed. And also, what happens, the menu is not displayed, because I used overflow: hidden; to clear float s. The menu is hidden inside.

I would like this to be responsive (well, just using the percentages of width in different screen resolutions and instances), I would like them to display as follows:

Is there a better way to achieve this? Also, I'm not sure how I could show an ellipsis if the size is too small, see the mobile class in the snippet.

Preview

For those who cannot view the fragment, it will look like this:

The default view.

The arrow has been pressed.

+5
source share
2 answers

To do this, use position ing. This is an example of a fixed fluid model :

 +-------+-----------+ | FIXED | FLUUUUUID | +-------+-----------+

or

 +-------+-----------+ | FIXED | FLUUUUUID | | | FLUUUUUID | +-------+-----------+

To solve this problem, you need to make the fixed content positioned absolute , and, I think, being fixed content, you probably know the sizes. And give parents the position: relative and padding-left and min-height these dimensions. In this case, you should never use overflow: hidden or float . So remove both from your CSS and make the following changes:

 .user-profile {border: 1px solid #999; position: relative; margin: 25px 0;} /* Remove overflow: hidden; */ .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px;} /* Remove float: left; */

Instead, as stated above, add padding , min-height for the parent and position: absolute for the child:

 .user-profile {border: 1px solid #999; position: relative; margin: 25px 0; padding-left: 68px; min-height: 68px;} .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; position: absolute; top: 0; left: 0;}

Mysterious 68px :

68px calculated as follows:

  • Left margin: 5px
  • Left border: 1px
  • Left 3px : 3px
  • Width: 50px
  • Right 3px : 3px
  • The correct border: 1px
  • Right border: 5px

So 5px + 1px + 3px + 50px + 3px + 1px + 5px = 68px .

Text ellipsis

For ellipsis to work on major browsers, you can use the following code:

 (selector) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

Just add this to the .user-profile p rule:

 .user-profile p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

In addition, it is always better to have a z-index for position: absolute elements to work well with other similar elements. Therefore, please add:

 .user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff; z-index: 1;}

So the final code is:

 $(function () { $(".more-options").click(function () { $(this).closest(".user-profile").toggleClass("open"); return false; }); }); 
 /* Reset */ * {margin: 0; padding: 0; list-style: none; font-size: 12pt;} a {text-decoration: none;} /* Main CSS */ .user-profile {border: 1px solid #999; position: relative; margin: 25px 0; padding-left: 68px; min-height: 68px;} .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; position: absolute; top: 0; left: 0;} .user-profile p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .user-profile p:first-child {margin: 3px 0 0;} .user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat #ccc; text-indent: -99px; overflow: hidden;} .user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff; z-index: 1;} .user-profile .more-options-list li, .user-profile .more-options-list li a {display: block;} .user-profile .more-options-list li a {padding: 5px;} .user-profile.open .more-options-list {display: block;} .user-profile.open .more-options, .user-profile .more-options:hover {background-color: #999;} /* Testing Sizes */ .user-profile.default {width: 250px;} .user-profile.mobile {width: auto;} .user-profile.large {width: 500px;} .user-profile.small {width: 100px;} /* Background Image, Can be ignored. */ .user-profile .more-options {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6+EdigjL7ZHu/k72I796i9zRiSJPwG4VHX0Z+AxRzNRrtksUvwf7+Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi+3YV8DGMiT4VVuG7oiZpGzrZJhcs/hL49xtzH/Dy6bdfTsXYNY+5yluWO4D4neK/ZUvok/17X0HPBLsF+vuUlhfwX4j/rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN+2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD+0rbyoBc3SOjczohbyS1drbq6pQdqumllRC/0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn+tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L+YGHNtd1FJitqPAR+hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY/jx4SMshe9LaJRpTvHr3C/ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY/+hpqwSyv0I0/QMTRb7RMgBxNodTfSPqdraz/sDjzKBrv4zu2+a2t0/HHzjd2Lbcc2sG7GtsL42K+xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT/IPszSueHQqv6i/qluqF+oF9TfO2qEGTumJH0qfSv9KH0nfS/9TIp0Wboi/SRdlb6RLgU5u++9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8/LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0/Ex+IzAreevPhe+CawpgP1/pMTMDo64G0sTCXIM+KdOnFWRfQKdJvQzV1+Bt8OokmrdtY2yhVX2a+qrykJfMq4Ml3VR4cVzTQVz+UoNne4vcKLoyS+gyKO6EHe+75Fdt0Mbe5bRIf/wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN/7HelL4t10t9F4gPdVzydEOx83Gv+uNxo7XyL/+u4tgAAAVNJREFUKBV9kT9Lw1AUxfNeUxDc1N2CQ0kNDhqUbq46K4izg4PgLugHECdF6qBTcdJNxNFFVMQ6lbTQIX4BF5cI0cbfLb1SatILyb33vHPO+3NNmqaO53nVQqFQdRznpdlsPpBHhu/7i91ud85a+wg/NJVKZRtFTVWYXsRxvBNF0ZdimoMgKLJ2TC8aiW9jzIaYvNNMC6KB0Rs7rbXb7Uixcrk8xWmvEC0rJhluw/IrDoJSQ5xH8MoGq9LPEq7rPg8b9LnjluJImoyYALvB6JyNnqhnMjiy4amB4EDcgnACMJZFzMEStLthGNZ6JkJiQguYXPOVpB8ViD+YzDqTuReeXKcXrVarwWJAc9eH8lLIey2pgZD+TqIKTmK53j6GB1IrLhnsNkmSzU6n8zmI/zPRRQaygqiO0WTf4JDT7oH9KEdzrokQeKcSJpeUZzxgXUXD+RcR85AyRBGQ7AAAAABJRU5ErkJggg==");} 
 <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <div class="user-profile default"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile mobile"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile large"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile small"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div>

Preview

Here's what it looks like with and without an open menu.

Hope this helps you achieve what you want.

+4
source

The problem is that you do not want to hide the overflow, you want to set the formatting context of the blocks. And yes, overflow: hidden sets BFC as a side effect, but it's just a hack. There are other ways to create BFC in CSS2.1, but everyone has their own problems, such as removing a stream, becoming inline-level, ...

The L3 display introduces the correct way to establish BFC:

 display: flow-root;

But browsers do not yet support it. In the meantime, I recommend mine clearance:

 .wrapper::after { content: ''; clear: both; display: block; } 

 $(function () { $(".more-options").click(function () { $(this).closest(".user-profile").toggleClass("open"); return false; }); }); 
 .user-profile:after { content: ''; clear: both; display: block; } /* Reset */ * {margin: 0; padding: 0; list-style: none; font-size: 12pt;} a {text-decoration: none;} /* Main CSS */ .user-profile {border: 1px solid #999; position: relative; margin: 25px 0;} .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; float: left;} .user-profile p:first-child {margin: 3px 0 0;} .user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat #ccc; text-indent: -99px; overflow: hidden;} .user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff;} .user-profile .more-options-list li, .user-profile .more-options-list li a {display: block;} .user-profile .more-options-list li a {padding: 5px;} .user-profile.open .more-options-list {display: block;} .user-profile.open .more-options, .user-profile .more-options:hover {background-color: #999;} /* Testing Sizes */ .user-profile.default {width: 250px;} .user-profile.mobile {width: auto;} .user-profile.large {width: 500px;} .user-profile.small {width: 100px;} /* Background Image, Can be ignored. */ .user-profile .more-options {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6+EdigjL7ZHu/k72I796i9zRiSJPwG4VHX0Z+AxRzNRrtksUvwf7+Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi+3YV8DGMiT4VVuG7oiZpGzrZJhcs/hL49xtzH/Dy6bdfTsXYNY+5yluWO4D4neK/ZUvok/17X0HPBLsF+vuUlhfwX4j/rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN+2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD+0rbyoBc3SOjczohbyS1drbq6pQdqumllRC/0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn+tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L+YGHNtd1FJitqPAR+hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY/jx4SMshe9LaJRpTvHr3C/ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY/+hpqwSyv0I0/QMTRb7RMgBxNodTfSPqdraz/sDjzKBrv4zu2+a2t0/HHzjd2Lbcc2sG7GtsL42K+xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT/IPszSueHQqv6i/qluqF+oF9TfO2qEGTumJH0qfSv9KH0nfS/9TIp0Wboi/SRdlb6RLgU5u++9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8/LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0/Ex+IzAreevPhe+CawpgP1/pMTMDo64G0sTCXIM+KdOnFWRfQKdJvQzV1+Bt8OokmrdtY2yhVX2a+qrykJfMq4Ml3VR4cVzTQVz+UoNne4vcKLoyS+gyKO6EHe+75Fdt0Mbe5bRIf/wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN/7HelL4t10t9F4gPdVzydEOx83Gv+uNxo7XyL/+u4tgAAAVNJREFUKBV9kT9Lw1AUxfNeUxDc1N2CQ0kNDhqUbq46K4izg4PgLugHECdF6qBTcdJNxNFFVMQ6lbTQIX4BF5cI0cbfLb1SatILyb33vHPO+3NNmqaO53nVQqFQdRznpdlsPpBHhu/7i91ud85a+wg/NJVKZRtFTVWYXsRxvBNF0ZdimoMgKLJ2TC8aiW9jzIaYvNNMC6KB0Rs7rbXb7Uixcrk8xWmvEC0rJhluw/IrDoJSQ5xH8MoGq9LPEq7rPg8b9LnjluJImoyYALvB6JyNnqhnMjiy4amB4EDcgnACMJZFzMEStLthGNZ6JkJiQguYXPOVpB8ViD+YzDqTuReeXKcXrVarwWJAc9eH8lLIey2pgZD+TqIKTmK53j6GB1IrLhnsNkmSzU6n8zmI/zPRRQaygqiO0WTf4JDT7oH9KEdzrokQeKcSJpeUZzxgXUXD+RcR85AyRBGQ7AAAAABJRU5ErkJggg==");} 
 <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <div class="user-profile default"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile mobile"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile large"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile small"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div>
+1
source

Source: https://habr.com/ru/post/1233261/

More articles:


All Articles