Как сделать резюме в html
Добавил пользователь Владимир З. Обновлено: 04.10.2024
Шаблон для создания нестандартного сайта-портфолио. Любой элемент настраивается по вашему желанию. Якорное меню и галерея проектов на главной странице помогут быстро привлечь внимание и продемонстрировать работы. Каждый проект открывается на отдельной странице с фотографиями, видео и подробной информацией. Необычное меню раскрывается на весь экран и содержит три раздела: проекты, контакты и био. Начните редактировать и добавьте любое число разделов и страниц, чтобы выгодно представить себя клиентам.
иллюстраторов, художников, дизайнеров, фотографов, сайтов-портфолио, креативных профессионалов.
Лаконичный дизайн этого шаблона сайта-портфолио позволяет вашим работам говорить самим за себя. Ничто не будет отвлекать ваших посетителей от самого главного — галереи изображений. Просто загрузите свои фотографии, настройте страницу контактов и добавьте интересную информацию о себе. Ваш стильный современный сайт будет готов в два счета!
студентов, выпускников, специалистов в сфере бизнеса.
Произведите профессиональное впечатление с этим шаблоном одностраничного сайта. Он был создан специально для онлайн-резюме: расскажите здесь об опыте работы, образовании, клиентах, навыках. Мы использовали анимацию элементов, чтобы привлечь внимание посетителей. Добавьте вашу фотографию и замените примерное содержание шаблона своей информацией. Настройте контактную форму, чтобы с вами было удобно связаться.
актеров, моделей, телеведущих.
Расскажите о себе с помощью этого шаблона сайта. Любой элемент меняется по вашему желанию. На главной странице использованы якорные ссылки, которые помогут легко перемещаться по основным блокам: био, резюме, галерея и контакты. Резюме состоит из трех страниц, вы можете добавить больше или удалить любую. Разместите подробную информацию о вашей работе, например, в кино, театре и на телевидении: просто замените тексты, фотографии и видео шаблона на собственные.
дизайнеров, фотографов, сайтов-портфолио, креативных профессионалов.
Интересный и стильный шаблон для сайта-портфолио. Продемонстрируйте все свои проекты в простой, но запоминающейся форме, которая поможет посетителям полностью сосредоточиться на вашем творчестве. Шаблон создан с учетом принципов юзабилити и следует трендам веб-дизайна, так что вам остается просто загрузить свои фотографии, настроить страницу для связи с посетителями и начать вести блог, чтобы продвигать себя в интернете.
уличных художников, фотографов, граффитистов, дизайнеров, креативных профессионалов.
иллюстраторов, художников, дизайнеров.
Иллюстрации, которые вы создаете, отражают ваш характер и индивидуальность. То же самое должен делать ваш сайт. Чистый и простой, этот шаблон идеально подходит, чтобы сфокусировать внимание аудитории на ваших работах, а приложение Wix Art Store поможет продавать цифровые файлы онлайн.
UX-дизайнеров, UI-дизайнеров, веб-дизайнеров.
Шаблон сайта-портфолио для креативного профессионала. Загрузите примеры работ в высоком качестве, покажите, что вы умеете, и помогите посетителям быстро связаться с вами с помощью контактной формы. В шаблоне использована анимация, удобные полоски-блоки с информацией, профессиональная галерея, куда можно загрузить фотографии, видеофайлы и добавить текстовые постеры. Любой элемент редактируется нажатием мышки.
журналистов, писателей, редакторов.
Создайте привлекательное онлайн-резюме с помощью этого шаблона сайта. Он создан специально для профессионалов, чья работа связана с журналистикой или написанием текстов. Замените примерную информацию и фотографию собственным содержанием и добавьте внешнюю ссылку на портфолио, чтобы продемонстрировать работы.
арт-директоров, художников и профессионалов творческой сферы.
Используйте этот минималистичный бесплатный шаблон сайта, чтобы представить свои проекты. Добавьте фотографии, видео и информацию о себе. Измените любые элементы дизайна, настройте контактную форму и иконки соцсетей, чтобы клиенты смогли легко с вами связаться.
художников, дизайнеров, профессионалов творческой сферы, сайтов-портфолио.
Все внимание — на ваши работы. Этот бесплатный шаблон сайта создан специально, чтобы демонстрировать творческие проекты. Просто загрузите свои фотографии, добавьте описания и поделитесь интересной информацией о себе, включая ссылки на статьи о вас в прессе.
Если ты можешь сделать страницу о себе, ты можешь сделать всё.
Работать над страницей будем в таком порядке: сначала определим, что мы хотим сказать людям, а потом обернём всё в код. Любой другой сайт делается по этой же схеме — прежде чем расчехлять HTML, надо подумать над содержимым.
Можно ли без страницы?
Собственную страницу можно сделать и на конструкторе сайтов, не заморачиваясь с вёрсткой и стилями. Но так каждый может. Это всё равно что жить на съёмной квартире — что тебе хозяева разрешили, то и можно. А вот сделать собственный сайт — это как построить собственный дом. Настоящие программисты делают собственные сайты.
О чём будем писать
Допустим, наш герой — преподаватель информатики, который хочет устроиться на работу по специальности в крутой московский вуз. Для этого ему нужно рассказать о себе так, чтобы вуз захотел пригласить его к себе. Какой именно текст будет — неважно, мы написали пробный текст в кате. Ещё где-нибудь добавим фотографию, чтобы было красиво.
Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории вероятности даже тем, кто не хочет ничему учиться.
Мои научные работы
А вот тут поставим ссылки на вымышленные работы этого преподавателя
Вёрстка текста
За основу возьмём стандартный шаблон с Бутстрапом. В этой статье мы спрячем его под стрелочку, чтобы не занимать много места, но если интересно пройти весь путь с нами — скопируйте этот код и повторяйте за нами.
Сначала сверстаем заголовок всей страницы — для этого используем тег
. Если между двумя этими тегами поместить текст, браузер поймёт, что это заголовок, и сделает его побольше. Скажем контейнеру, что содержимое при любом размере пусть занимает всю ширину макета, и вставим в него наш текст:
Добавим новый контейнер и поместим в него описание на два абзаца, за которые отвечает тег
. Посмотрим, что получилось:
Фотография человека
Добавим фото героя, чтобы было интереснее. За это отвечает тег . В нашем случае тег будет выглядеть так:
Фотографию поставим справа от текста так, чтобы экран как бы делился на 2 части: слева текст, справа фото. Заодно настроим так, чтобы на маленьких устройствах каждый из них растягивался на всю ширину экрана. Чтобы так сделать, нужно добавить блок с фото в тот же контейнер с абзацами и настроить колонки в каждом блоке:
По умолчанию браузер показывает картинки в полном размере, и это выглядит некрасиво. Добавим в стили ограничение по размеру для картинки, чтобы она не вылезала за границы блока, и заодно настроим параметры заголовка и текста:
Раздел страницы: научные работы
Подзаголовок сделаем тегом
Мои научные работы
Чтобы подзаголовок не слипался с остальным содержимым, добавим в раздел со стилями отступы для заголовка h2 сверху и снизу:
Теперь сделаем список научных работ так, чтобы на больших экранах он занимал 4 колонки, на средних — 2, а на телефонах занимал весь макет по ширине. Заодно сделаем список в виде ссылок, чтобы можно было по названию перейти к каждой работе. Ссылки оформляются тегом
Оформим таким образом наш список научных работ в отдельном контейнере:
Контакты
Осталось добавить контактную информацию — тоже в своём контейнере. Смотрите: мы положили тег со ссылкой внутри тега абзаца — так можно.
Смотрим на результат и заодно проверяем адаптивность:
Это самый простой способ создать страницу о себе на чистом HTML, которая сразу будет адаптивной. Но есть ещё один способ сделать похожее: использовать конструкторы сайтов. Про них — в следующей статье.
В HTML5 у форм появились новые полезные возможности. Некоторые такие элементы рассматриваются в следующей главе, но даже основной функционал форм был улучшен. Возможность связать элемент с формой, которая не является его непосредственным предком, поддержка автоматической фокусировки на элементе, а также усовершенствования элемента button являются очень приятными дополнениями.
или RSS канал:
С помощью этого шаблона Вы можете создать на своем сайте отдельную страницу с вашим резюме. В правом верхнем углу есть 4 кнопки, с помощью них пользователи смогут:
- Разработана полностью на CSS и HTML
- jQuery анимация
- Fancy Box фото галерея
- легкий и быстрый
В архиве: исходники, документация, PSD, скриншоты.
Размер архива: 1,5 Mb
Версия шаблона: Fancy Resume/CV
Платформа: HTML
Совместимость: —
Разработчик: ThemeForest
Если ссылки битые и не открываются или файл/архив поврежден, сообщите сюда или в комментариях для их восстановления
Читайте также: