Сейчас почти у каждого человека, который работает в сферах близких к Интернету использует сайт-визитку для предоставления информации о себе или о своем бизнесе.
Сегодня мы с Вами разберемся, как сделать своими руками (а, также помощью клавиш Ctrl+C и Ctrl+V) хороший и стильный одностраничный сайт-визитку.
Перед тем, как верстать
Сразу же создаем файлы (в любом удобном для вам HTML-редакторе) index.html и styleses.css.А на рабочем столе создаем папку, например, под названием ipvcard (сюда переместите файл index.html) и внутри этого каталога создаем папку css (туда переместите файл styleses.css).
Затем, скачайте библиотеку jQuery (прямая ссылка) и создайте внутри ipvcard папку под названием js, куда и поместите скачанную библиотеку, сохранив файл под именем jquery.min.js.
И напоследок, создайте во всё-том же каталоге ipvcard папку img, в которую поместите изображения portrait.png, 01.jpg и 02.jpg.
Начнем-с
Итак, писать html-код будем сверху-вниз. Пишем такой код "шапки", где мы подключим файлы стиля, библиотеки jQuery и тд.<!doctype html>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Павел Дуров</title>
<link rel="icon" href="http://www.ipetrenko.ru/favicon.ico"> <!--Замените favicon.ico своим-->
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
Теперь верстаем сам сайт. В дальнейшем, весь html-код должен быть размещен внутри этих тегов:
<div id="w">
<div id="content">
</div>
</div>
Теперь разберемся с элементами, которые всегда отображаются сверху. У нас это навигационное меню и заголовок.
<nav id="topnav">
<ul class="clearfix">
<li><a href="#profile" class="sel">Обо мне</a></li>
<li><a href="#resume">Резюме</a></li>
<li><a href="#portfolio">Портфолио</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav><!-- @end #topnav -->
<h1>Павел Дуров</h1>
Теперь заполним сайт информацией. Начнем с той, которая всегда будет показываться первой (по-умолчанию) это раздел "Биографии" (обо мне).
<section id="profile">
<div id="portrait"><img src="img/portrait.png" alt="vcard photo portrait"></div>
<h2>Web-дизайнер & Разработчик</h2>
<h3>Биография:</h3>
<p>Я родился в Ленинграде 10 октября 1984 года в интеллигентной семье.... </p>
<p>В 2001-м с отличием окончил Академическую гимназию...</p>
<p>Годом ранее закончил профессиональную подготовку на ...</p>
</section><!-- @end #profile -->
В результате выйдет, что-то похожее на то, что изображено на скриншоте ниже
<section id="resume" class="hideme">
<h2>Мои способности & умения</h2>
<div class="skillbar clearfix">
<div class="skillbar-title"><span>HTML/CSS (8 лет)</span></div>
<div class="skillbar-bar htmlcss"></div>
</div>
<div class="skillbar clearfix">
<div class="skillbar-title"><span>SEO (6 лет)</span></div>
<div class="skillbar-bar seo"></div>
</div>
<div class="skillbar clearfix">
<div class="skillbar-title"><span>jQuery (2 года)</span></div>
<div class="skillbar-bar jquery"></div>
</div>
<div class="skillbar clearfix">
<div class="skillbar-title"><span>PHP/MySQL (4 года)</span></div>
<div class="skillbar-bar phpmysql"></div>
</div>
<div class="skillbar clearfix">
<div class="skillbar-title"><span>Photoshop (9 лет)</span></div>
<div class="skillbar-bar photoshop"></div>
</div>
<br><br>
<h2>Образование</h2>
<div class="expinfo">
<h3>Академическая гимназия</h3>
<h4>С 1992 - по 2001</h4>
<p>Закончил с отличием.</p>
</div>
<div class="expinfo">
<h3> Филологический факультет Санкт-Петербургского государственного университета</h3>
<h4>С 2001 - по 2006</h4>
<p>Специальность «Английская филология и перевод».Закончил с красным дипломом.</p>
</div>
<br>
<h2>Занятость</h2>
<div class="expinfo">
<h3>ООО «В Контакте»</h3>
<h4>С 2006 - по 2014</h4>
<p>Со-основатель, разработчик, гендиректор.</p>
</div>
<div class="expinfo">
<h3>Telegram</h3>
<h4>С 2013 - в настоящее время</h4>
<p>Основатель</p>
</div>
</section><!-- @end #resume -->
Следующий пункт, это раздел "Портфолио". Ваши работы должны быть отображены на изображениях. Каждая работа (точнее ее изображение) должна быть помещена между тегом <li>.
<section id="portfolio" class="hideme">
<h2>Примеры моей работы</h2>
<p>Ниже Вы можете увидеть самые популярные работы, созданные мною.</p>
<ul id="portfoliolist" class="clearfix">
<li><a href="//telegram.org" target="_blank"><img src="img/01.jpg"></a></li>
<li class="alt"><a href="//vk.com" target="_blank"><img src="img/02.jpg"></a></li>
</ul>
</section><!-- @end #portfolio -->
Ну и напоследок создаем раздел обратной связи (контакты). По своем усмотрению, можно добавить ссылки на ваш профиль в социальных сетях.
<section id="contact" class="hideme">
<h2>Я Вас удивил?</h2>
<p>Лучший способ для связи, это написать на мою электронную почту.</p>
<form id="contactform" method="post" action="#">
<label for="usrname">Ваше имя</label>
<input type="text" name="name" id="usrname" class="basic">
<label for="usremail">Ваш e-mail</label>
<input type="email" name="email" id="usremail" class="basic">
<label for="usrmsg">Ваше сообщение</label>
<textarea name="msg" id="usrmsg"></textarea>
<input type="submit" name="submit" id="submitbtn" value="Отправить письмо">
</form>
</section><!-- @end #contact -->
Не забудьте! Чтобы работала анимация переключение и само переключение между секциями, добавьте перед закрывающем тегом <body> следующий код:
<script type="text/javascript">
$(function(){
$('#topnav ul li a').on('click', function(e){
e.preventDefault();
var current = $('#topnav ul li a.sel');
var newpg = $(this).attr('href');
var oldpg = current.attr('href');
current.removeClass('sel');
я $(oldpg).fadeOut(300, function(){
$(newpg).fadeIn(180);
});
$(this).addClass('sel');
});
$('#contactform').submit(function(e){
e.preventDefault();
});
});
</script>
Автор идеи: Джейк Рочелеу
Перевод и адаптация: Игорь Петренко
Свои вопросы по записи оставляйте в комментариях ниже. Спасибо за внимание ;)
Как на планшетах отображается?
ОтветитьУдалитьНормально. Всё работает.
ОтветитьУдалить