Скрипт портфолио для сайта – очень красивое!

Добрый день мои дорогие друзья. hello

Сегодня мы попробуем установить к себе на сайт скрипт очень красивого портфолио. ok Сразу хочу заметить, что не стоит ограничиваться одним портфолио. Лично я планирую использовать этот скрипт в качестве каталога шаблонов для своих сайтов.

Тренинг по вёрстке сайта на HTML5 и CSS3

Я нашел этот скрипт пару дней назад в интернете, вот по этому адресу: классное портфолио.

Там же есть кнопка демо, для просмотра в живом виде, а вот как я осуществил каталог шаблонов при помощи этого у себя:



Хотите такой же? Тогда смотрим урок ниже. wink



вместе с видео включены архивы скрипта портфолио и моих картинок


В этом уроке я Вам покажу:

  • Как изменить шапку и поставить в ней свой логотип.
  • Как изменить общий фон.
  • Как изменить пункты меню и заводить новые.
  • Как менять сами картинки.
  • Как изменить подвал.

Всего получилось 17 минут практического видео.


PS: если возникнут вопросы – задаем их в комментариях.

PSS: не забываем нажимать на кнопки ниже, что бы поделиться этим классным скриптом портфолио со своими друзьями! happy


Комментариев: 57 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 57
  •  Евгений Шаповалов | 28 марта 2012 в 18:56:37

    Скрипт супер!Я тоже в восторге от увиденного!smile

    Пока что мне такой не нужен, но очень понравилось само оформление и эффекты перемещения элементов.

  •  Архип Report.EffectiveWebSites.Ru | 28 марта 2012 в 19:17:40

    На iPad футер фиксирован, скоробится вместе со страницей

  •  Серёга | 28 марта 2012 в 20:24:39

    Ну это задумка автора, он и есть фиксированный.

    Убрать свойство в CSS и все будет ок.

  •  Alexander Snegovoy | 28 марта 2012 в 21:34:11

    Серёга привет!smile Скрипт довольно таки интересный, но туда бы еще впихнуть штуку типа галереи, в смысле что бы после нажатия на миниатюру изображение увеличивалось, или же показывалась демка, и это было бы достаточно интересно. Кстати если потребуется то могу организовать такое делоsmile и если одобришь то зальёшь, ок?

  •  Серёга | 28 марта 2012 в 21:59:45

    Ну мне такое дело в принципе не надо, мне нужны будут тупо ссылки, что уже я сделал.

    Но твой вариант скрипта портфолио тоже интересен.

    Единственно что у нас не получается, это поставить другой скрипт, который при наведении мыши затемняет картинку и выводит текст.

  •  Karabashka | 29 марта 2012 в 14:04:37

    Как классно! Большое спасибо. Хочу попробовать сделать на все свои страницы продающие и подписные.Как витрина в магазине. Супер! Бесконечно благодарна тебе.Купила твой новый курс, но еще не изучала.

  •  Серёга | 29 марта 2012 в 19:25:54

    Так пробуй! Ничего сложного там нет.

    Ты главное отзыв не забудь мне прислать по новому курсу smile

  •  Владимир | 29 марта 2012 в 23:15:21

    Не боюсь повториться: классный скрипт. Спасибо, Серёга, за наводку!

    Скачал вчера. Сегодня провозился с ним часа четыре (в основном, рисунки заняли время), сделал приятный альбомчик для внутреннего пользования.

    Одна беда: в строках таблицы при просмотре почему-то не выводится значение из-под alt.

    Мелочь, а не приятно.

    Может, просветишь чайника?

  •  Александр | 29 марта 2012 в 23:19:51

    title пропишите.

  •  Серёга | 30 марта 2012 в 08:29:08

    Владимир - alt - это обязательный атрибут, который используется, если картинка не загружена, или у человека проблемы со зрением и он пользуется интернетом при помощи специальной программы, которая озвучивает.

    Картинки она озвучивает именно через этот атрибут.

    И он не делает всплывающие подсказки.

  •  Владимир | 30 марта 2012 в 09:10:20

    Что-то вы, друзья, меня пу*аете...

    В тренинге "5+" такая же строка (например, )

    всплывающую подсказку выводит.

    В чём разница, почему здесь эта же конструкция ()

    не выводит?

    ЗЫ. слово "пу*аете" читайте, как Вам угодно, оба варианта правильные grin

  •  Владимир | 30 марта 2012 в 09:14:26

    Ну, вот... код строк не вставился.

    Попробую повторить:

    <img src="image/logo-time.png" width="64" height="64" alt="На главную">  выводит.
    А в скрипте эта же конструкция 
    
    <img src="assets/img/shots/6.jpg" alt="Посмотреть">

    не выводит подсказку.

    Почему?

    Или доцент тупой?

  •  Серёга | 30 марта 2012 в 12:42:52

    В тренинге 5+ я объяснял, что всплывающие подсказки выводит только атрибут title.

    Возможно - ты слишком узко смотришь на код wink

    Скорее всего, картинка, которую ты привел, находится в ссылке, а уже ей прописан атрибут title.

  •  Владимир | 2 апреля 2012 в 12:47:27

    Спасибо за разъяснения по подсказкам. Картинка действительно в ссылке.

    Но это ещё не всё. Обнаружилась другая бяка: когда открываешь с сайта скрипт в мозилле, он почему-то показывает кодировку Win-1251, соответственно, кракозябры в заголовке.

    Хотя при просмотре тем же мозиллой со своего компа, всё нормально.

    TopStyle тоже показывает, что кодировка у файла стиля и индексного - UTF-8.

    Тогда где собака зарыта?

    Гугл читает всё, как и положено...

    Надеюсь, не слишком озадачил?

  •  Серёга | 2 апреля 2012 в 19:50:04

    Хм... очень похоже на глюк.

    Попробуй сохранить страничку в UTF-8 через PSpad.

    Возможно топстиль тупит.

    И еще, у тебя эта страничка где? На локалке в отдельной папке? Или на сайте?

  •  Владимир | 3 апреля 2012 в 18:46:00

    Добрый вечер, Серёга!

    Извини, если помнишь, у меня не очень со временем...

    Поэтому разрывы между письмами.

    Сохранял в TopStyle и Notepad++

    Всё равно где-то проблемка. Скрипт у меня для тестирования заброшен в папку на сайте. Ссылку могу дать, но не для всех (там личный альбом). Если есть время глянуть, дай знать.

    Сброшу либо на твою почту, либо "в домашку для 5+" (если она ещё открыта.

  •  Серёга | 3 апреля 2012 в 20:24:49

    Зачем в домашку.

    Скидывай мне ссылку.

  •  Tatyana | 6 мая 2012 в 16:23:12

    Очкнь красовое портфолио. А как скачать урок по доработке под свои нужды?

  •  Серёга | 6 мая 2012 в 17:02:07

    Его только если смотреть онлайн, или, если можешь скачать с ютуба - скачивай. Там прога вроде специальная нужна.

  •  Tatyana | 9 мая 2012 в 16:35:10

    Я правельно поняла: Если добавить к имющимся понктам еще несколько

  •  Серёга | 9 мая 2012 в 17:51:47

    то они появятся в списке.

  •  Tatyana | 9 мая 2012 в 20:34:51

    LOL

  •  Tatyana | 14 мая 2012 в 14:32:18

    Сергей, подскажите, пожалуйста, как сделать активную ссылку из картинки портфолио. Написала как в WP

    но не срабатывает.Что не так?grrr

  •  Tatyana | 14 мая 2012 в 14:33:20

    Кусочек с кодом не отобразился

  •  Серёга | 14 мая 2012 в 14:36:31

    Обрамите картинку в ссылку, и все.

  •  Tatyana | 14 мая 2012 в 14:45:35

    Как? Я Чайник. Сбросте на почту пример.здесь HTML не пишиться. tata11.19@mail.ru

  •  Tatyana | 14 мая 2012 в 14:47:15

    Я только что на вашем форуме писала. Можно там ответить. Спасибо.

  •  Виктор | 14 июля 2012 в 23:32:44

    Скрипт хороший спора нет.Только HTML5 ещё сыроват,не будет работать в старых Браузерах.

    Вот тут я проводил ождин эксперемент над

    Content Slider ohne JavaScript nur CSS3

    писаный только на HTML5 и CSS3

    http://you-big-blog.com/Follow/pure-css-slider.html

    В Мозиле работает а в Опере уже нет.

    Ну а сам портфолио хороший ,только для переленковки.

    Alexander Snegovoy прав насчёт тубов.

    С Уважением Виктор

  •  Tatyana | 15 июля 2012 в 14:20:18

    Здравствуйте, Виктор. Я, к сожалению, на английском не читаю. По этому ваши статьи прочесть не смогла. У меня вопрос. Можно ли переделать скрипт на бесконечное число картинок? Идея сделать из него меню сайта. У меня обзор обучающих курсов http://www.linkbez.com.ua/ Если да, то не смогли бы вы это сделать? Я в Джава профан, да и в HTML тоже. Свой сайт сделала исключительно как обезьяна по бесплатному курс.

    Пробовала написать на почту, указанную на вашем сайте, не прошло. Пробовала связаться ч/з коменты - пишит спам. Упс. Может здесь отзоветесь.

  •  Серёга | 16 июля 2012 в 10:34:53

    Всему свое время.

    Прогресс не стоит на месте...

    И старых браузеров становится с каждым разом все меньше и меньше, а поддерживающих новые web-технологии - все больше и больше wink

  •  Виктор | 16 июля 2012 в 13:52:29

    Здравствуйте Tatyana ,число картинок в Slider безгранично, и размер

    подгоняется через стили,но вот для меню сайта идея думаю не очень.

    Для обзора нужных статей предназначен,допустим как головной баннер перед темами.А сайтец на ВП Ваш.(мой сайтец на немецком)

    Tatyana свяжусь с Вами на Вашем сайте.

    Виктор

  •  Мила | 24 октября 2012 в 11:32:04

    Здравствуйте, Сергей!

    Главные вопросы для полного чайника:

    1. Как всё это установить на сайт (сайт работает на MaxSite CMS)?

    2. Как привязать к картинкам ссылки на конкретные статьи? Щелкнул по картинке – и статья?

    Буду благодарна за подробный ответ.

  •  Серёга | 25 октября 2012 в 21:40:42

    1. Создаете на сайте папку, там размещаете файлы портфолио. Затем просто указываете ссылку на портфолио.

    2. Обрамите картинки в тег a, и укажите ссылки.

  •  Сергей | 1 декабря 2012 в 19:13:38

    ЧТо то у меня не получилось прикрутить ровно скрипт к сайту. Видимо кривизна рук зашкаливает. Может кто нибудь из разбирающихся объяснить что я не так сделал?

    http://mandrogi.info/port/

  •  Аноним | 1 декабря 2012 в 19:45:01

    Такое впечатление, что не все картинки вы поменяли. И что еще, кроме фотографий пытались поменять? По исходному коду не видно.

  •  Сергей | 1 декабря 2012 в 20:03:28

    пардон, уже нахимичил, и перенес папку. она тут: http://mandrogi.info/portfolio/

  •  Сергей | 1 декабря 2012 в 20:06:30

    Картинки я не все поменял, решил сначала прикрутить его, что бы убедиться что все будет функционировать, и со второй попытки перенес вроде нормально, но слетели картинки находящиеся в стилях, такие как фон и т.д. Ссылка сообщением выше.

    зы символы в капче третий раз подряд одни и те же выпадают

  •  Сергей | 1 декабря 2012 в 20:26:16

    Все, разобрался. одну букву в адресе перепутал. Всем спасибо, Сергею особенно

  •  Серёга | 3 декабря 2012 в 14:20:48

    Мне то за что? smile

  •  Лёша | 1 марта 2013 в 09:01:15
    [image=http://master-css.com/uploads/2012/portfolio.jpg Скрипт портфолио – очень красивое!]http://master-css.com/uploads/2012/portfolio.jpg[/image]

    Обращаю ваше внимание на косячёк

  •  Лёша | 1 марта 2013 в 09:04:51

    И ссылочки на шаблоны уже не работают

  •  storm | 23 июня 2013 в 22:52:21

    Отличный ресурс, спасибо. В закладки.

  •  uhovidity | 15 ноября 2016 в 12:34:14

    maultalk.com

  •  ofozijum | 9 января 2017 в 14:17:50

    Увлекательный пост с заголовком сталкер призраки прошлого — перейти на страницу.

  •  sellerbase | 27 марта 2017 в 17:40:14

    база трастовых сайтов 2017

  •  idele | 19 апреля 2017 в 09:22:56

    I've long struggled using weight reduction's dilemma. they didn't generate significantly outcomes, although I have been employing a large amount of supplements for some decades. For this reason click here could possibly be remedy that is great.

  •  awogygad | 19 апреля 2017 в 10:27:43

    Szlamie zamiłowanie porządku, aby zgubić 2,5 kg chrząstki tłustej? No wolny zadań na siłce, przyimek treningu również wolny nienormalnych zachęty spośród charakteru fitness. Przypadkiem wydać 2,5 kg tkanki lipidowej starczy sieroca kapsułka zaczarowanego aneksu kuracje, która aktualnie po 2 porach raczkuje do „zwyciężania” chrząstki tłustej. 120 chwili. Komplet, co pragniesz zmaterializować, więc skorzystać szkołę, którą przygotował prof. Meyer spośród Ohio College. Maniera egzystuje ano czarowna, że prof. Meyer nazwał ją Kankusta Duo Forte dodatkowo zdecydował wprowadzić ją pod osłony na całkowitym świecie. Zerze Ruderze Oliver fantazję warzenia. Ruderze Oliver funkcjonuje szczerze. Prof. Adrian Meyer nie przebywa. Prof. Meyer, Kankusta Duo Forte tudzież dyscyplina wszelakiego kankusta duo diskusia

  •  azewenaz | 20 апреля 2017 в 06:56:07

    Od gwarantowanego momentu kieruje pigułki kankusta duo ervaringen ,jakiego próbuję z pół roku spośród fuksami .

  •  irikib | 21 апреля 2017 в 23:32:59

    Od wczorajsza biorę załącznika głodówki kankusta duo opinie natomiast istnieję z niego walnie pogodny.

  •  isyjat | 22 апреля 2017 в 09:37:30

    Z była przebywam załącznika wypłaty kankusta duo tudzież jestem spośród niego nadzwyczaj uśmiechnięty.

  •  evisahy | 23 апреля 2017 в 23:13:23

    The kankusta duo sklep diet needs to be among the many well-known diets - that isn't shocking if you think about that it is helped a large number of persons slim down in the last three decades. A good example of this food is Slimfast Optima Move plus fifty per cent of a chicken meal. Shell has been consuming greentea for some time while I actually don't, because she does cope with belly-fat whatsoever. Black tea is primarily drunk by me, but increase my green tea use since I am aware of its rewards.

  •  yfegi | 24 апреля 2017 в 02:51:35

    Wzorem jakikolwiek zna węglowodan nie stanowi tęgim plonem . Żal połykamy go postanowieniu w każdorazowym prowiancie . Spośród bieżącego argumentu należałoby wypatrywać przeciętnych co to jest erytrytol tudzież ich łączyć iżby usunąć nadaremnych kilogramów.

  •  yqeras | 24 апреля 2017 в 16:11:12

    Niczym jakiś wie węglowodan nie egzystuje czystym przetworem . Żal wsuwamy go uregulowaniu w którymkolwiek obroku . Spośród tego bodźca należałoby poszukiwać niekonwencjonalnych jaki cukier na diecie także ich przypisywać iżby zniknąć pustych kilogramów.

  •  erevyceg | 25 апреля 2017 в 16:32:32

    Mirando funcional armas para bajar de peso? si sí corriente contemplar puede Rodear dieta para aumentar gluteos y piernas adicionalmente encerrar en si so .

  •  emobeved | 26 апреля 2017 в 03:50:24

    aspiran efectiva régimen para bajar de peso? Had realidad este determinar puede Rodear dieta scardale para bajar kilos y prensa en a recientes ayuda .

  •  ihixulis | 27 апреля 2017 в 00:37:01

    CZYLI przypisywali Kiedyś defektem dla Korekta Istotności? Jeżeli naprawdę współczesne ZARZĄDZAM SIE Wam hobby kankusta duo działanie oraz zakosztowanie operacji odchudzającej.