Blogger-man та цифровізатор рідної громади!
Ігор Петренко 
Сейчас почти у каждого человека, который работает в сферах близких к Интернету использует сайт-визитку для предоставления информации о себе или о своем бизнесе.
Сегодня мы с Вами разберемся, как сделать своими руками (а, также помощью клавиш Ctrl+C и Ctrl+V) хороший и стильный одностраничный сайт-визитку.
Перед тем, как верстать
Сразу же создаем файлы (в любом удобном для вам HTML-редакторе) index.html и styles.css.А на рабочем столе создаем папку, например, под названием ipvcard (сюда переместите файл index.html) и внутри этого каталога создаем папку css (туда переместите файл styles.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="https://www.ipetrenko.com/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>
Автор идеи: Джейк Рочелеу
Перевод и адаптация: Игорь Петренко
Свои вопросы по записи оставляйте в комментариях ниже. Спасибо за внимание ;)
Как на планшетах отображается?
ВідповістиВидалитиНормально. Всё работает.
ВідповістиВидалитиСоздаём значит styleses.css а подключаем styles.css ?
ВідповістиВидалитиСпасибо, Сергей. Ошибку исправил ;)
ВидалитиИ Jquery
ВідповістиВидалити