[18/18] Испытание: анонс поста - 100% и пошаговое решение

[Coder80lvl]

Ну и затем следом переделал код под другое решение…Если не сложно, скажите, какое решение все-таки является более верным, или они оба имеют право на существование? код ниже:

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 280px;
    min-height: 250px;
    padding-top: 50px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
    font-family: "Arial", sans-serif;
    line-height: 1.2;
    color: #7f8c8d;
    background: #ecf0f1;
}

.post-stats .icon {
    width: 15px;
    height: 15px;
    background:url("/assets/course14/post-challenge.png") no-repeat;
    position:absolute;
    top:0px;
    left:0px;
}
.post {
 position:relative; 
 padding-left:75px;
}
.post .post-date {
    position:absolute;
    left:0px;
    top:0px;
    width:55px;
    height:55px;
    background:#ffffff;
    font-size:15px;
    font-weight:bolder;
    border-bottom:5px solid #bdc3c7;
    line-height:55px;
    text-align:center;
}
.post .post-type {
 width:55px;
 height:55px;
 background:url("/assets/course14/quotes.png") no-repeat  #7f8c8d center;
 border-bottom:5px solid #bdc3c7;
 position:absolute;
 left:0px;
 top:70px;
}
.post .post-title {
 font-size:20px;
 color:#2980b9;
 margin-bottom:5px;
}
.post  a {
    text-decoration:none;
    color:#2980b9;
}
.post .post-stats {
  display:inline-block; 
  padding-left:20px;
  position:relative;
  margin-right:10px;
  margin-top:5px;
}
.post .icon-comments {
 background-position:-20px 0;   
}
.post .post-text {
 padding:10px 15px;
 background:#ffffff;
 text-align:left;
 width:165px;
 border-bottom:5px solid #bdc3c7;
}

[Ineska]

Второй вариант лучше конечно, код чище гораздо.

[Coder80lvl]

Спасибо) НУ вот бывает у меня беда, как начну городить забор из кода, а решение под носом оказывается правильное)) Вопрос невнимательности наверно

[Tchr]

Вот мои 100%, понятное дело что ошибок много, хотел бы узнать из-за чего конкретно пришлось использовать не кратные 5 и 10 единицы (подгонять по пикселям). Ткните носом в ошибку, пожалуйста.

html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 250px;
font-size: 12px;
font-family: “Arial”, sans-serif;
line-height: 1.2;
color: #7f8c8d;
background: #ffffff;
}
.post {
background: #ecf0f1;
margin:0px;
padding:0px;
width:300px;
height:300px;
}
.post-stats .icon {
width: 15px;
height: 15px;
background-image: url("/assets/course14/post-challenge.png");
background-repeat:no-repeat;
}
.post .post-title {
position:absolute;
top:50px;
left:85px;
font-size:20px;
color:#2980b9;
}
.post-author {
position:absolute;
top:79px;
left:85px;
}
.post-text {
position:absolute;
width:170px;
height:95px;
padding:10px 10px 13px 15px;
background: #ffffff;
top:112px;
left:85px;
border-bottom:5px solid #bdc3c7;
}
.post-stats{
position:absolute;
top:98px;
left:105px;
}
.icon-tags{
position:absolute;
top:0px;
left:-20px;
}
.icon-comments{
position: absolute;
top:0px;
left:132px;
background-position: -20px 0;
}
.tick {
position:absolute;
top:0px;
left:152px;
}
a {
color:#2980b9;
text-decoration:none;
}
.post-date {
display:block;
position:absolute;
top:50px;
left:10px;
background:#ffffff;
height:55px;
width:55px;
border-bottom:5px solid #bdc3c7;
line-height:55px;
text-align:center;
font-weight:bold;
font-size:15px;
}
.post-type {
position:absolute;
height:55px;
width:55px;
background-color:#7f8c8d;
top:120px;
left:10px;
border-bottom:5px solid #bdc3c7;
background-image: url("/assets/course14/quotes.png");
background-repeat:no-repeat;
background-position:50% 50%;
}

[Dasha2]

100% результат

body {
width: 280px;
min-height: 250px;
padding-top: 50px;
padding-left: 10px;
padding-right: 10px;
font-size: 12px;
font-family: “Arial”, sans-serif;
line-height: 1.2;
color: #7f8c8d;
background: #ecf0f1;
}

.post-stats .icon {
width: 15px;
height: 15px;
}

.post {
position: relative;
padding-left: 75px;
}

.post-title {
font-size: 20px;
color: #2980b9;
margin-bottom: 5px;
}

.post-date,
.post-type {
position: absolute;
width: 55px;
height: 55px;
border-bottom: 5px solid #bdc3c7;
}

.post-date {
top: 0;
left: 0;
line-height: 55px;
text-align: center;
font-size: 15px;
font-weight: bold;
background: #ffffff;
}

.post-type {
top: 70px;
left: 0;
background: url("/assets/course14/quotes.png") #7f8c8d no-repeat 50% 50%;
}

.post-author {
padding-bottom: 5px;
}

.post a {
text-decoration: none;
color: #2980b9;
}

.post .post-stats {
position: relative;
display: inline-block;
margin-right: 10px;
padding-left: 20px;
}

.post-stats .icon {
position: absolute;
top: 0;
left: 0;
background: url("/assets/course14/post-challenge.png") no-repeat;
}

.post-stats .icon-tags {
background-position: 0 0;
}

.post-stats .icon-comments {
background-position: -20px 0;
}

.post-text {
margin: 20px;
width: 175px;
padding: 10px 15px;
border-bottom: 5px solid #bdc3c7;
background: #ffffff;
}