Задание по вёрстке на GeekWeek 2016
Доброго времени суток!
Меня зовут Сергей и я хотел бы поделиться своим опытом и рассказать, как я выполнял конкурсное задание на конференции GeekWeek 2016. Прежде всего хочу отметить, что мой вариант работы не претендует на идеальность, но надеюсь он будет кому-нибудь полезен. Так же отмечу, что это мой первый опыт написания текста с кодом, поэтому, если что-то не понятно, постараюсь ответить в комментариях.
Итак, начнём!
Я участвовал в конкрусе на мастер-классе "Вёрстка сайтов на примере Landing Page":
Нас попросили сверстать страничку по шаблону PSD. Страничка имеет следующий вид:
Разобьём страничку на 4 блока:
- product - содержит название продукта, список с основными тезисами и картинку.
- about - второй блок, содержащий параграф с информацией о продукте и второй картинкой.
- contact - форма отправки сообщения и контакты.
- footer - хоть он небольшой, но мы не будем пренебрегать им.
Я использовал boostrap для разметки, но можно и без него. Итак с подключенными стилями на старте наш документ имеет следующий вид:
<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>
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;
}
<div class="row">
<div class="col-md-7">
</div>
<div class="col-md-5">
</div>
</div>
</section>
<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>
margin-left: 50px;
margin-top: 50px;
}
.logo_img {
float: right;
margin-right: 50px;
margin-top: 50px;
}
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;
}
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);
}
<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>
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;
}
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;
}
<a href="#">l</a>
<a href="#">f</a>
<a href="#">i</a>
<a href="#">g</a>
<a href="#">x</a>
</div>
margin-top: 30px;
}
.gicons a {
font-family: Socialico;
color: #ffffff;
font-size: 60px;
font-weight: 400;
line-height: 24px;
text-align: left;
}
<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>
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;
}
Коментарии получились не слишком подробные, за что прошу прощение. Надеюсь, кому-нибудь пригодится эта статья. Мою работу можно скачать по этой ссылочке.