close

Чтобы завершить регистрацию, подтвердите свою почту!

Для этого откройте email, указанный при регистрации и найдите там письмо подтверждения от GeekBrains. Если не видите его во входящих - проверьте папку «Спам».
close
Хотите продолжить обучение?
Перейти в моё обучение

Задание по вёрстке на GeekWeek 2016

Мой первый опыт написания чего-либо!
2 минуты19167

Доброго времени суток!

Меня зовут Сергей и я хотел бы поделиться своим опытом и рассказать, как я выполнял конкурсное задание на конференции GeekWeek 2016. Прежде всего хочу отметить, что мой вариант работы не претендует на идеальность, но надеюсь он будет кому-нибудь полезен. Так же отмечу, что это мой первый опыт написания текста с кодом, поэтому, если что-то не понятно, постараюсь ответить в комментариях.

Итак, начнём!

Я участвовал в конкрусе на мастер-классе "Вёрстка сайтов на примере Landing Page":

Нас попросили сверстать страничку по шаблону PSD. Страничка имеет следующий вид:

Разобьём страничку на 4 блока:

  • product - содержит  название продукта, список с основными тезисами и картинку.
  • about - второй блок, содержащий параграф с информацией о продукте и второй картинкой. 
  • contact - форма отправки сообщения и контакты.
  • footer - хоть он небольшой, но мы не будем пренебрегать им.

Я использовал boostrap для разметки, но можно и без него. Итак с подключенными стилями на старте наш документ имеет следующий вид:

<html>
<head>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="style.css">
    <title>Hello world</title>
</head>
<body>
    <div class="container">
        <section class="product"></section>
        <section class="about"></section>
        <section class="contact"></section>
        <footer></footer>
    </div>
</body>
</html>
 
Все наши секции обернуты в .container дабы задать общую ширину страницы в 1280px. C помощью extract'а получаем стили для блоков:
 
.container {
    width: 1280px;
    padding: 0 0;
}
.product {
    height: 323px;
    background-color: rgb(68, 81, 97);
}
.about {
    height: 344px;
    background-color: rgb(255, 255, 255);
}
.contact {
    background-color: rgb(68, 81, 98);
}
footer {
    background-color: rgb(245, 245, 245);
    text-align: center;
}
 
Теперь начнём заполнять блоки. Первый блок "product". Было бы неплохо разбить его на две части. Для этого нам и понадобиться Bootstrap. Ширина страницы равна 12 условным столбцам. Я разбил нашу страницу на две части: 7 и 5 столбцов. После разбиения блок "product" имеет следующий вид:
 
<section class="product">
   <div class="row">
       <div class="col-md-7">
       </div>
       <div class="col-md-5">
       </div>
   </div>
</section>
 
Подробнее про сетку в bootstrap можно прочесть здесь.
Теперь заполним левую и правую часть блока информацией. Для удобства задания стилей я обернул их в соответствующие div'ы:
 
<section class="product">
            <div class="row">
                <div class="col-md-7">
                    <div class="logo">
                        <h1>Product name</h1>
                        <ul>
                            <li>Put on this page information about your product</li>
                            <li>A detailed description of your product</li>
                            <li>Tell us about the advantages and merits</li>
                            <li>Associate the page with the payment system </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="logo_img">
                        <img src="http://placehold.it/469x214">
                    </div>
                </div>
            </div>
</section>
 
Разобравшись с этим, перейдём к стилям. Начнём с отступов:
 
 
Extract нам подсказывает, что отступ слева и сверху для логотипа равен 50px. Аналогично получим отступ для изображения: 50px справа и сверху. Для блока с изображением зададим выравнивание по правому краю:
 
.logo {
     margin-left: 50px;
     margin-top: 50px;
}
.logo_img {
     float: right;
     margin-right: 50px;
     margin-top: 50px;
}
 
Перейдём к оформлению текста. С h1 всё просто, стили любезно предоставит нам extract:
 
 .logo h1 {
     font-family: Arial;
     color: #ffffff;
     font-size: 60px;
     font-weight: 400;
     text-align: left;
     text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
     margin-bottom: 36px;
}
 
Со списком уже поинтересней. С текстом сложности не возникнет, а как быть с нестандартными маркерами? Для этого мы воспользуемся свойством list-style-image.
Подробнее про list-style-image прочитать можно здесь.
 
.logo ul {
     font-family: Arial;
     color: #ffffff;
     font-size: 20px;
     font-weight: 400;
     line-height: 36px;
     text-align: left;
     text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
}
.logo ul li {
     list-style-image: url(img/check.png);
}
 
С первым блоком закончили. Блок "about" верстается аналогично, поэтому не вижу смысла останавливаться на нём подробно.
Плавно переходим к самому каверзному - третьему блоку. Опять же разбиваем блок на две части: в левой у нас будет форма отправки сообщения, а в правой список с контактами и ссылки на социальные сети.
Начнём с правой колонки. Контакты представим в виде списка, для каждого элемента создадим отдельный класс, так как изображения уникальные:
 
<ul class="contact">
      <li class="skype">here_your_login_skype</li>
      <li class="icq">279679659</li>
      <li class="email">psdhtmlcss@mail.ru</li>
      <li class="phone">80 00 4568 55 55</li>
</ul>
 
В этот раз мы уберём стандартные маркеры, а изображения мы зададим фоном:
 
.contact ul {
     padding-left: 0px;
}
.contact ul li {
     line-height: 24px;
     margin-bottom: 15px;
     list-style: none; /* убираем стандартные маркеры*/
     padding-left: 30px;
}
.skype {
     background: url(img/skype.png) no-repeat left center;
}
.icq {
     background: url(img/icq.png) no-repeat left center;
}
.email {
     background: url(img/email.png) no-repeat left center;
}
.phone {
     background: url(img/phone.png) no-repeat left center;
}
 
Подробнее про маркеры в списках можно прочитать здесь.
Для ссылок на социальные сети мы будем использовать специальный шрифт: Socialico. Скачаем его и подключим в css:
 
 @font-face {
     font-family: "Socialico";
     src: url("font/Socialico.eot?") format("eot"), url("font/Socialico.woff") format("woff"), url("font/Socialico.ttf") format("truetype"), url("font/Socialico.svg#Socialico") format("svg");
     font-weight: normal;
     font-style: normal;
}
 
Каждой букве будет соответствовать иконка социальной сети. Здесь можно посмотреть, что и чему соответствует.
Так выглядит констукция в html:
 
<div class="gicons">
  <a href="#">l</a>
  <a href="#">f</a>
  <a href="#">i</a>
  <a href="#">g</a>
  <a href="#">x</a>
</div>
 
Css:
 
.gicons {
     margin-top: 30px;
}
.gicons a {
     font-family: Socialico;
     color: #ffffff;
     font-size: 60px;
     font-weight: 400;
     line-height: 24px;
     text-align: left;
} 
 
Здесь закончили, перейдём к форме. Как получить стили для неё подробно объясняется на мастер-классе. Но остались некоторые тонкости, которые пришлось гуглить самому. А именно текст в полях ввода. За отображение текста отвечает атрибут "placeholder". Со стилизацией же возникли некоторые сложности. Подробнее про стилизацию placeholder прочитать можно здесь.
 
Форма имеет следующий вид:
 
                    <div class="contact-form">
                        <form action="">
                            <input type="text" class="name" placeholder="Your name:">
                            <br>
                            <input type="text" class="email" placeholder="Your email:">
                            <br>
                            <textarea name="" id="" cols="30" rows="10" placeholder="Your message:"></textarea>
                            <br>
                            <input type="submit" class="submit" value="SEND">
                        </form>
                    </div>
 
Стили для неё:
 
.contact-form {
     margin-top: 30px;
     width: 500px;
     float: right;
}
.contact-form input {
     width: 100%;
     border-radius: 5px;
     background-color: #ffffff;
     height: 40px;
     font-family: Arial;
     color: #445162;
     font-size: 16px;
     font-weight: 400;
     line-height: 40px;
     text-align: left;
     margin-bottom: 20px;
     text-indent: 10px;
}
.contact-form ::-webkit-input-placeholder {
     color: #445162;
}
.contact-form ::-moz-placeholder {
     color: #445162;
}
/* Firefox 19+ */
.contact-form :-moz-placeholder {
     color: #445162;
}
/* Firefox 18- */
.contact-form :-ms-input-placeholder {
     color: #445162;
}
.contact-form .submit {
     border-radius: 5px;
     background-color: #ffffff;
     width: 140px;
     height: 40px;
     font-family: Arial;
     color: #445162;
     font-size: 16px;
     font-weight: 700;
     line-height: 24px;
     text-align: center;
     text-indent: 0;
     display: block;/* представляем кнопку как блок, чтобы мы моглии ее выравнить по центру */
     margin: auto;
}
.contact-form textarea {
     border-radius: 5px;
     background-color: #ffffff;
     width: 100%;
     height: 170px;
     margin-bottom: 20px;
     font-family: Arial;
     color: #445162;
     font-size: 16px;
     font-weight: 400;
     line-height: 40px;
     text-align: left;
     text-indent: 10px;
}

Коментарии получились не слишком подробные, за что прошу прощение. Надеюсь, кому-нибудь пригодится эта статья. Мою работу можно скачать по этой ссылочке.

Делитесь своим опытом выполнения данного задания!

geekweek, верстка, конкурс, psd, html, frontend_developer
Нашли ошибку в тексте? Напишите нам.
Поделиться
Спасибо,
что читаете наш блог!