Design a unique div in the style of Google

How to Position User Data in Front of Profile Image

I am currently struggling with positioning the user data in front of the profile image (the round one with the letter).

I have shared my code below:

<div class="conta">
    <p>Logged in as:</p>
        <div class="perfil">{{name}}</div>
        <div class="dadosUser">
            <p>{{user.username}}</p>
            <p>{{user.email}}</p>    
        </div>

.conta{
    border: 1px solid var(--primary-color);
    padding: 15px;
    border-radius: 5px;
    margin-left: 30%;
    margin-right: 30%;
    }

The perfil div is where the user's photo appears, which can be a small ball with the user's initial.

htmlcss

Answer №1

Adding some more HTML and CSS should do the trick:

* {
  font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;
  font-size: 14px;
}

.container {
  width: 75%;
  margin: 0 auto;
}

.card {
  border: 0.1em solid darkgrey;
  border-radius: 0.5em;
  padding: 1em;
}

  .card .card-header {
    margin: 0.5em;
    color: darkgray;
  }

  .card .card-body {
    display: flex;
  }

  .card-body .card-col {
    margin: 0.5em;
    display: flex;
  }

  .card-body .card-col-push {
    margin-left: auto;
  }

    .card-col .user-img {
      width: 2em;
      height: 2em;
      font-size: 20px;
      color: #fff;
      background-color: #00adad;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .card-col .user-info {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }

    .card-col .user-name {
      font-weight: bold;
    }

    .card-col .user-email {
      font-size: 12px;
      color: darkgray;
    }

    .card-col .btn-container {
      display: flex;
      align-items: center;
    }

      .btn-container .btn {
        margin: 0;
        border: 0.1em solid #e7e7e7;
        border-radius: 0.5em;
        background-color: white;
        color: cornflowerblue;
        padding: 0.5em 1.5em;
        font-weight: bold;
        cursor: pointer;
      }

      .btn-container .btn:hover {
        background: #e7e7e7;
      }
<div class="container">
  <div class="card">
    <div class="card-header">
      You have logged in as
    </div>
    <div class="card-body">
      <div class="card-col">
        <div class="user-img">
          U
        </div>
      </div>
      <div class="card-col">
        <div class="user-info">
          <div class="user-name">
            UniqueUser
          </div>
          <div class="user-email">
            <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="573227363a32256f6f6f6717303a363e3b7934383a">[email protected]</a>
          </div>
        </div>
      </div>
      <div class="card-col card-col-push">
        <div class="btn-container">
          <button class="btn">Switch Account</button>
        </div>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Selenium to automate a VBA loop for extracting HTML data directly into an Excel spreadsheet

I recently received help from the Stackoverflow community to scrape data from a webpage. It's an amazing group of people. They provided me with a function that imports data into Excel from a cell containing a URL. However, I'm facing issues becau ...

htmlvbaexcelselenium

How to access a PHP include using data retrieved from a MySQL database?

I am currently in the process of developing a website that will be powered by a MySQL database. To simplify the structure of the URLs, I have decided to rewrite them to point to a single file. The file's layout is as follows: <html> <head&g ...

phpmysqlhtml

Is it feasible to incorporate one iOS app within another iOS app through in-app purchasing or subscription?

Simply put, we are creating interactive content in Flash that we want to distribute through an iOS app either by in-app purchase or subscription. In our testing, we have found that Flash can produce standalone iOS apps that work well for our needs. Instea ...

iphoneflashioshtml

What causes the iframe to protrude beyond the bottom of the page when set to 100% height?

I am facing an issue with an iframe on my website that is contained within a div. I have specified both to have a height of 100%, and I am using the blueprint framework, hence applying the class span-12 last. Despite these settings, a scroll bar still appe ...

cssiframehtml

Opera's compatibility with jQuery's Append method allows developers to

I recently wrote a jQuery script that interacts with a JSON feed and dynamically creates HTML code which is then added to a designated div on my WordPress site. Surprisingly, the functionality works flawlessly in all browsers except for Opera - where not ...

javascriptjqueryhtmljson

The status of the 'slider' may be 'undefined'

I'm really struggling to figure out how to resolve this issue, even though I suspect it's a simple fix that's eluding me... Here is the part of my code in TypeScript that's causing the error: const slideLeft = () => { cons ...

htmlreactjstypescript

guide on launching react with pure javascript

Is it feasible to operate react "straight out of the box" using only JavaScript? In essence, I am seeking a way to utilize react by simply utilizing notepad to create the page (without needing to install and configure node etc.). More specifically - 1) ...

javascripthtmlreactjs

The issue with rendering CSS styles from <style></style> tags in Visual Studio while debugging in VB is causing a problem

<style> #ctrtable{width:600px;margin-left:auto;margin-right:auto;} </style> For the purpose of centering a table on the viewport, the above style block is added to the web page.   While using Visual Studio 2013 Express in debug mode, t ...

cssvb.netdebuggingwebvisual-studio-2013

Tips for creating a function that utilizes a select option value

I'm struggling with a form that includes two select inputs. I want the second input to only be enabled if the first one has been selected. I attempted using an onclick event, but it didn't work out as expected. Can anyone provide assistance? (apo ...

javascripthtml

Issues with functionality of Bootstrap carousel slider

Currently, I'm attempting to put together a Bootstrap carousel slider with indicators by referencing the Bootstrap code. The caption setup is functioning as expected, but I'm encountering issues with the slider itself. The problems I'm faci ...

htmljquerycssbootstrap-5

Clicking the delete button in Firebase to remove an item

I am in the process of developing a simple CRUD application and have opted for Firebase as my backend solution. While I have successfully implemented the create and read functionalities, I've hit a roadblock with the delete operation. When attempti ...

javascripthtmlfirebasegoogle-cloud-firestore

Add the information from the form to a JSON document

I am trying to add form data to a json file using the code below. However, I keep getting an error response whenever I submit the data via post. Can you help me identify where the issue lies? HTML <form class="ajax form-inline"> <div class="form ...

phpjqueryhtml

Menu bar placed atop a carousel

I am currently in the process of developing a website and I have encountered an issue with the navigation bar. I have a slider that I would like to appear below the navbar but the navbar is pushing it down instead. Ideally, I want the navbar to be transpar ...

htmlcssnavbarbootstrap-4

Only initiate the loading of the iframe within the div upon clicking a specific element

Is there a way to delay loading the content of a div until it's clicked, instead of having all data loaded at once when the page loads? I noticed that removing unnecessary divs made the page load much faster. How can I prevent all data from being loa ...

javascripthtml

Guide to creating a responsive layout using CSS and HTML

I am looking to position the main contents (content 1 and content 2) in between two side menus on my exercise page. At the moment, the main contents are overlapping with the two menus. Can someone guide me on how to fix this alignment issue? Thank you. ...

htmlcsscss-float

Adding dynamic content to CSS in Next.JS can be achieved by utilizing CSS-in-JS

Currently diving into the world of Next.JS, I've managed to grasp the concept of using getStaticProps to retrieve dynamic data from a headless CMS and integrate it into my JSX templates. However, I'm unsure about how to utilize this dynamic conte ...

cssnext.js

showing a pair of divs in a split layout on the homepage

I have a partially split homepage with two sections using Twitter Bootstrap v5.1.3 for the layout. The left side consists of two divs, one for text and one for an image. These divs are contained within a flex-parent, giving them an inline-block appearance ...

htmlcssbootstrap-5

Cover the entire section with an image

I'm aiming to achieve a similar layout like this (using tailwind) : https://i.stack.imgur.com/G0oti.png Here's the current setup: <section class="bg-juli-white pt-24"> <div class="max-w-6xl mx-auto flex flex-col" ...

csstailwind-css

Sliding off the canvas - concealed navigation

I have implemented CSS to hide a menu on mobile: #filter-column { position:absolute; left:-400px; } However, I want the menu to slide in from the left when the user clicks a link, and everything else should be hidden. When the layer is closed, th ...

javascriptjqueryhtmlcss

Obtaining the calculated background style on Firefox

Back when my userscript was only functional on Chrome, I had a setup where I could copy the entire background (which could be anything from an image to a color) from one element to another. This is how it looked: $(target).css('background', $(so ...

javascriptjquerycssgoogle-chromefirefox