User profile error [closed] - css

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
For some reason the css is not working I'm not sure where the problem is:
This is how it's supposed to look:
http://codepen.io/lukepeters/pen/DtzvE
The JS FIDDLE:
http://jsfiddle.net/Wc3RK/
I don't know what went wrong? The code is the same but it's coming out differen't on the JS Fiddle.
CSS:
html
height: 100%
body
height: 100%
//background: #a7d5cd
+background-image(linear-gradient(#dddddd, #cccccc))
#people
position: relative
margin: 80px auto
padding: 0
width: 480px
font-family: 'Helvetica Neue', Helvetica, sans-serif
font-size: 16px
line-height: 22px
color: #3b3b3b
-webkit-font-smoothing: antialiased
list-style-type: none
li
position: relative
margin: 0 0 40px 0
padding: 10px 8px 8px 54px
height: 42px
border: 1px solid #bbbbbb
border-radius: 4px
box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 #ffffff
background: #f6f6f6
img
position: absolute
top: -16px
left: -16px
z-index: 10
margin: 0
padding: 4px
width: 50px
height: 50px
border: 1px solid #bbbbbb
box-shadow: 0 1px 0 #ffffff
border-radius: 50%
background: #ffffff
h2
margin: 0
font-size: 18px
line-height: 22px
font-weight: 400
color: #4b4b4b
text-shadow: -1px -1px 0 rgba(255,255,255,0.7)
.info
margin: 0
display: block
em
margin: 0 18px 0 0
font-size: 11px
line-height: 20px
font-weight: 400
font-style: normal
letter-spacing: 1px
text-transform: uppercase
color: #5b5b5b
float: left

Answer 1

You are using the sass code, not css. I compiled the sass code and forked your fiddle. Search sass on google. Click on sass in the first page(codepen) to see the compiled css
http://jsfiddle.net/m52vb/
html {
height: 100%;
}
body {
height: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #cccccc));
background-image: -webkit-linear-gradient(#dddddd, #cccccc);
background-image: -moz-linear-gradient(#dddddd, #cccccc);
background-image: -o-linear-gradient(#dddddd, #cccccc);
background-image: linear-gradient(#dddddd, #cccccc);
}
#people {
position: relative;
margin: 80px auto;
padding: 0;
width: 480px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
line-height: 22px;
color: #3b3b3b;
-webkit-font-smoothing: antialiased;
list-style-type: none;
}
#people li {
position: relative;
margin: 0 0 40px 0;
padding: 10px 8px 8px 54px;
height: 42px;
border: 1px solid #bbbbbb;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 white;
background: #f6f6f6;
}
#people li img {
position: absolute;
top: -16px;
left: -16px;
z-index: 10;
margin: 0;
padding: 4px;
width: 50px;
height: 50px;
border: 1px solid #bbbbbb;
box-shadow: 0 1px 0 white;
border-radius: 50%;
background: white;
}
#people li h2 {
margin: 0;
font-size: 18px;
line-height: 22px;
font-weight: 400;
color: #4b4b4b;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.7);
}
#people li .info {
margin: 0;
display: block;
}
#people li .info em {
margin: 0 18px 0 0;
font-size: 11px;
line-height: 20px;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
text-transform: uppercase;
color: #5b5b5b;
float: left;
}

Answer 2

No idea what it is, but it's not CSS.
Correct CSS would be:
html
{
height: 100%;
}
body
{
height: 100%;
//background: #a7d5cd
background-image(linear-gradient(#dddddd, #cccccc))
}
#people
{
position: relative;
margin: 80px auto;
padding: 0;
width: 480px;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 16px;
line-height: 22px;
color: #3b3b3b;
-webkit-font-smoothing: antialiased;
list-style-type: none;
}
li
{
position: relative;
margin: 0 0 40px 0;
padding: 10px 8px 8px 54px;
height: 42px;
border: 1px solid #bbbbbb;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 #ffffff;
background: #f6f6f6;
}
img
{
position: absolute;
top: -16px;
left: -16px;
z-index: 10;
margin: 0;
padding: 4px;
width: 50px;
height: 50px;
border: 1px solid #bbbbbb;
box-shadow: 0 1px 0 #ffffff;
border-radius: 50%;
} background: #ffffff;
h2
{
margin: 0;
font-size: 18px;
line-height: 22px;
font-weight: 400;
color: #4b4b4b;
text-shadow: -1px -1px 0 rgba(255,255,255,0.7);
}
.info
{
margin: 0;
display: block;
}
em
{
margin: 0 18px 0 0;
font-size: 11px;
line-height: 20px;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
text-transform: uppercase;
color: #5b5b5b;
float: left;
}
Updated fiddle.