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.
<!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.
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.
li in the same ul
