Делаем сайт-визитку с адаптивным дизайном

Здравствуйте вновь, дорогие друзья!
Сейчас почти у каждого человека, который работает в сферах близких к Интернету использует сайт-визитку для предоставления информации о себе или о своем бизнесе.

Сегодня мы с Вами разберемся, как сделать своими руками (а, также помощью клавиш 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="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-дизайнер &amp; Разработчик</h2>
        
        <h3>Биография:</h3>
        <p>Я родился в Ленинграде 10 октября 1984 года в интеллигентной семье.... </p> 
        <p>В 2001-м с отличием окончил Академическую гимназию...</p> 
        <p>Годом ранее закончил профессиональную подготовку на ...</p>
      </section><!-- @end #profile -->

В результате выйдет, что-то похожее на то, что изображено на скриншоте ниже

Теперь секция "Резюме". Каждой вашей способности (HTML/CSS, SEO...) присвоен свой класс, для редактирования цвета  и длины линии скилла.

 <section id="resume" class="hideme">
        <h2>Мои способности &amp; умения</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>

Автор идеи:  Джейк Рочелеу
Перевод и адаптация: Игорь Петренко

Свои вопросы по записи оставляйте в комментариях ниже. Спасибо за внимание ;)


Если вам понравиласть эта статья, то поделитесь ей с друзьями. Вам не сложно, а мне приятно ;)
Присоединяйтесь к 200+ блоггерам и получите полезный в подарок
    Blogger Comment
    Facebook Comment

5 коммент. :