Home/ Questions/Q 6223675
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T08:31:52+00:00

So far, I only have a div that would contain this information. As for

  • 0

enter image description here

So far, I only have a div that would contain this information. As for the content inside, I’d love some help or guidance on how I could elegantly use HTML with CSS to format the information here.

What HTML elements would you use? What I have trouble with is setting that blue gradient there. Do I set it as a background image? Any suggestions?

This is just a simple example for myself, I’m trying to get more familiar with CSS. Thank you for your time.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  .card {
    min-width:250px;
    border-radius:10px;
    background-color:#09f;
    padding:10px;
    border:3px solid #03f;
    font-family:Sans-Serif;
    display:inline-block;
  }
  .avatar {
    border:1px solid #000; 
  }
  .card h1 {
    display:inline;
    vertical-align:top;
    font-size:1.2em;
    font-weight:bold;
  }
  .info {
    clear:both;
  }
  .title {
    font-weight:bold;
    float:left;
  }
  .value {
    float:left; 
    margin-left:20px;
  }
</style>
</head>
<body>
  <div class="card">
    <img src="http://en.gravatar.com/userimage/16359447/fc9081765352a27b17cdbf4c24fe3544.jpeg" class="avatar">
    <h1>Thomas Shields</h1>
     <div class="info">
       <span class="title">Info #1:</span>
       <span class="value">Value #1</span>
    </div>
    <div class="info">
       <span class="title">Info #2:</span>
       <span class="value">Value #2</span>
    </div>
    <div class="info">
       <span class="title">Info #3:</span>
       <span class="value">Value #3</span>
    </div>

  </div>
</body>
</html>

    http://jsbin.com/ajevap/2/edit

    If you need me to explain any of it, comment and i’ll udpate the answer.

    • 0