CODEWITHSUNDEEP
htmlcss
Only Bolivian Here
Only Bolivian Here

Reputation: 36773

Help creating this player card using CSS and HTML

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.

Upvotes: 1

Views: 792

Answers (3)

Eric Fortis
Eric Fortis

Reputation: 17360

enter image description here

http://jsfiddle.net/efortis/s9zSN/2

Upvotes: 2

Thomas Shields
Thomas Shields

Reputation: 8943

<!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.

Upvotes: 2

austinbv
austinbv

Reputation: 9491

I would use images lists spans and divs to separate everything. The best way you can think about html and css is html is the steel i-beams of the webpage. The create the structure but attribute nothing more than that. Then css is the walls, speckle, and paint. So when you look at the design you have you should think about what the "building structure" would be.

Probably an image on top, than a name. The user name is probably by it's self. lastly there is a list of further user info.

<div>
    <img>
    <span>
    <ul>
        <li>
            <span>
            <span>

would be an acceptable structure. Now to create your style you need to move and position things like you want.

div {
    height
    width
    position: relative

div img {
    position
    height
    width

div span {
    postion
    color
    text-decoration

div ul {
    position
    color

div ul li
    color

This could get you an the basic structure of the image you provided depending on what you actually provide to each argument.

Upvotes: 2

Related Questions