Анонс поста 18 /18

Курсы §14. Мастерская: декоративные элементы
1

Код html

<body>
    <div class="post">
        <div class="post-title">Интенсив: программа</div>
        <div class="post-date">13.09</div>
        <div class="post-type"></div>
        <div class="post-author">
            Автор: <a href="#">HTML Academy</a>
        </div>
        <div class="post-stats">
            <div class="icon icon-tags"></div>
            <a href="#">интенсив</a>,
            <a href="#">программа</a>
        </div>
        <div class="post-stats">
            <div class="icon icon-comments"></div>
            <a href="#">5</a>
        </div>
        <div class="post-text">Работа над интенсивом идёт полным ходом. Мы нашли крутых людей в команду и решили еще кучу задач. Но сегодня я подробнее расскажу о работе над программой интенсива.</div>
    </div>
</body>

css

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{position:relative;
width:210px; min-height:250px; background:#ecf0f1;
padding-left: 75px;
}

.post-date{position:absolute;
left:0px;top:0px; width:55px; height:37px; background:white;
font-weight:bold; font-size:15px;
text-align:center; padding-top:18px;
border-bottom:5px solid #bdc3c7; }
.post-type{position:absolute;
left:0px;top:70px; width:55px; height:55px;
border-bottom:5px solid #bdc3c7;
background:#7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;}
.post-title {color:#2980b9;font-size:20px;margin-bottom:5px;}
.post-author {margin-bottom:5px;}
.post-author a {color:#2980b9; }
.post-stats{display:inline-block;

}

.post-stats .icon { display:inline-block;
width: 15px;height: 15px; vertical-align: top;
padding:0px; margin:0px;padding-right:1px;
background: url("/assets/course14/post-challenge.png") no-repeat;}
.post-stats .icon-tags{background-position: 0px 0px; margin-right:1px;}
.post-stats .icon-comments{background-position: -20px 0px;
margin-left:10px; margin-right:1px;
}

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

.post-text{display:block;
margin-top:19px; margin-right:5px;padding:10px;padding-left:15px; background:white;
border-bottom:5px solid #bdc3c7;
}
Можно ли подправить ? Влево вправо по пикселям пробовал подвигать не помогает. Буквы как то по другому пляшут ни как в оригинале.

2

Вот еще нечто подобное
HTML

<body>
  <form class="login-form" action="/auth" method="post">
      <H1>Вход в кабинет</H1>
      <input type="text" placeholder="Логин">
      <input type="password" placeholder="Пароль">
      <div class="input3">
         <label><input class="left" type="checkbox">Запомните меня</label>
         <a class="right reestablish"href="">Я забыл пароль</a>
      </div>
      <div class="vhod">
          <input type="submit" value="Войти">
      </div>
    </form>
<body>

css

html, body{margin:0;padding:0;}
body{
width:450px; height:300px;padding-top:20px;font-size:16px;
font-family:“Tahoma”, sans-serif;line-height:1.3;background:#34495e;}
.login-form,
.login-form input[type=“text”],
.login-form input[type=“password”],
.login-form input[type=“submit”]{
font-weight:bold;
font-size:12px;
font-family:“Tahoma”, sans-serif;
text-transform:uppercase;}
.login-form{
margin: 0px 35px;
padding:20px 40px;
background:white;}

.login-form H1{font-size: 20px; margin: 0px 0px; }

.login-form input[type=“text”],
.login-form input[type=“password”]{
box-sizing: border-box;
width:100%;
background: #f9f6f3;
border:2px solid black;
padding: 10px 20px 10px 15px;
}
.login-form input[type=“text”]{
border:2px solid black;
margin-top: 15px;
margin-bottom:8px;
background:#f9f6f3 url("/assets/ifmo/icon-user.png") no-repeat;
background-position: right 11px center;}

.login-form input[type=“password”]{
margin-bottom:10px;
background:#f9f6f3 url("/assets/ifmo/icon-lock.png") no-repeat;
background-position: right 11px center;}
.login-form input[type=“checkbox”]{
vertical-align:middle;
width: 5px;
margin-right:12px;}

.reestablish{
text-decoration: underline;
color:black;}
.input3{margin-top:5px; margin-bottom:16px;}
.left{float:left;}
.right{float:right;}
.input3:after{
content:’’;
display:table;
clear:both;}
.vhod{
background:black;
padding: 3px; padding-bottom:2px;
margin-bottom:12px;}
.login-form input[type=“submit”]{
display:block;
color:white;
background:black;
border:none;
margin:10px auto; }
Запомните меня все сходится буква О пошла в пляс. рамки полей влево вправо по пикселям подвигал тоже не помогает.

3

Код из второго задания во вчерашнюю вашу тему отправьте, пожалуйста. Там будем разбирать.

4

Можно. Выравнивая не ссылки, а в целом блоки post-stats и отдельно позиционировать icon. Так, например;
.post-stats {
position: relative;
left: 20px;
display: inline-block;
margin-right: 30px;
}
.post-stats .icon {
position: absolute;
left: -20px;
width: 15px;
height: 15px;
vertical-align: top;
background: url("/assets/course14/post-challenge.png") no-repeat;
}
.post-stats .icon-tags {
background-position: 0px 0px;
}
.post-stats .icon-comments {
background-position: -20px 0px;
}
.post-stats a {
text-decoration:none;
color:#2980b9;
}
Еще пара идей по поводу кратности пяти. Выравнивание post-date с помощью line-height, а выравнивание post-text c помощью position: absolute; и координаты bottom.

1 лайк
5

Спасибо