Jump to content

Вёрстка с рисунка


zlodeev
 Share

Recommended Posts

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

Вот что получилось:

wiic.ru - сам сайт. На определённую страницу, можно перейти добавив "?post_id=" и номер "статьи". Получается, что это блог. Я написал пару записей тестовых, чтобы хоть как-то отобразить идею. Увы, я не дизайнер, рисую только на бумаге хорошо, поэтому такое слабое разнообразие коробок. Карандашом же нарисована порядка 30 видов, включая мини-исполина, который держит коробку над собой, который сам, по сути, является коробкой =)

И ещё, занимаюсь благотворительностью - делаю сайт для местного детского дома, так же с листочка

wiic.ru/wn7/ - пока готова главная страничка, знаю, что пустовато, но в тетрадке смотрелось красиво, старался изо всех сил, может кто подскажет как заполнить пространство по бокам?

Ожидаю критики, откровенной, чтобы стыдно стало за ошибки, которые скорее всего найдуться.

  • Like 4
Link to comment
Share on other sites

Критиковать как-то сейчас нет настроения, хотелось бы наоборот выразить большой рэспект!

Посидел на парах, нарисовал на листочке, пришёл домой и начал делать. И в итоге есть результат.

Знаю много людей которые свои проекты(в любой сфере), вынашивают в голове годами, и эти проекты в прочем,

в голове и остаются навсегда... Это печальный момент.

Тебе рэспект за то, что у тебя есть двигатель, это вдохновляет :)

Edited by Alarr
Link to comment
Share on other sites

Ну продолжай в том же духе) а сайт детского дома

-норм, естественно доделать мелочи, а дизайн почти завершен. Не, ну к идеалу можно стремиться бесконечно, но лично мне и так нравится, вот ток кнопочки на листах дорисовать)

Link to comment
Share on other sites

И ещё, занимаюсь благотворительностью - делаю сайт для местного детского дома, так же с листочка

wiic.ru/wn7/ - пока готова главная страничка, знаю, что пустовато, но в тетрадке смотрелось красиво, старался изо всех сил, может кто подскажет как заполнить пространство по бокам?

Может по бокам сделать фотографии детей с детского дома в форме киноленты?

Edited by p1O
Link to comment
Share on other sites

Идея неплохая, но мне сказали, что не должно быть чьих то конкретных лиц. Т.е. не должны быть только общие фото, а вставлять левых детишек из интернета не очень хочется.

Link to comment
Share on other sites

- Сделайте центровку. Этого можно достичь с помощью table-cell и vertical-align

- Мне не понравилась левая часть. Оторвана от контекста. Зачем вам фрэймовый стиль?

- Коробки дергаются: это не круто.

В целом задумка классная.

Гнездышко нравится. Поменяйте направление скроллера на горизонтальное или посмотрите nivo slider ...

Edited by ZenCoder
Link to comment
Share on other sites

А мне вот наоборот понравилось в гнёздышке вертикальное переворачивания,а то у всех горизонтально ...

Что касается коробок,идея с их выдвижение суперская .Но вот,да то что они дёргаются минус (но для меня,как для новичка и не знающего jq),это супер,а так хотелось,что было плавненько .

Link to comment
Share on other sites

Ребята, слушайте, я уже извозякался весь с созданием админки для сайта детского дома, чем дальше, тем больше понимаю, что там столько мелочей надо сделать для слабеньких в редактировании страниц "своими руками". Как думаете, пойдет ли вордпресс для такой верстки?

редактирующим надо дать возможность новости выкладывать, фотки в слайдере поменять, на главной странице в этих трёх блоках информацию менять.

Раньше с вордпрессом не работал, пытался конечно, но дальше чем поменять темку не хватало воли.

Есть шансы?

Edited by zlodeev
Link to comment
Share on other sites

Изображения при создании самого плеера нигде, кроме картинки альбома, не использовались.
<img alt="To Favorite" src="img/favorite.png">

Лукавишь

А что конкретно нужно оценивать? И почему, если выключен яваскрипт, сайт ничего не говорит от том, что он нужен? Выводит пустой фон.

И я так и не понял что там круглое.

Link to comment
Share on other sites

Изображения при создании самого плеера нигде, кроме картинки альбома, не использовались.
<img alt="To Favorite" src="img/favorite.png">

Лукавишь

А что конкретно нужно оценивать? И почему, если выключен яваскрипт, сайт ничего не говорит от том, что он нужен? Выводит пустой фон.

И я так и не понял что там круглое.

Ни доли лукавства, лишь чья-то невнимательность - надпись относится к тому плееру, в котором изображения не используются.

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

Оценивать тут? Наверно всё-таки wiic.ru , сайт детского дома перехал на gnezdishko.seo-smolensk.ru

Link to comment
Share on other sites

оу, спасибо, странный косяк =D

И вы можете получить респект в своем городе) Ведь все учебные заведения, включая и такие, обязали иметь свой сайт, что далеко не всем по карману. Для тех, кому я делаю, уже нашел знакомого, который предоставит бесплатный хостинг, а сам лично потрачу всю свою степушку в размере 1200 рублёв на то, чтобы оплатить им .ru домен по 147 руб, на 8 лет получается)

Если есть желащие помочь с тем, что я сварганил - пишите в скайп zlodeev.ik или на мыло zlodeev.ik@gmail.com, админка тяжко даётся, нужен кто-то, кто поможет с php и работой с базой

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By DrRobotGranata
      Всем привет! Задача стоит следующая. Есть 8 элементов (IMG). Т.е. одна целая картинка разрезана на 8 частей(рамка)
      Нужно сверстать гибкой версткой макет, где эти 8 кусочков будут одним целым( рамкой) а внутри можно будет размещать любой текс, рамка по высоте подстраивается под текс, по ширине на всю ширину окна.
      Кручу верчу, все никак не получается. Подскажите в какую сторону думать. Каждый Img в отдельный div и все дивы в общий контейнер? и дальше как
    • By Young
      Столкнулся с проблемой , когда вставил картинку , весь текст съехал в лево , а сама картинка , должна находиться с низу сайта
      И еще вопрос , как сделать так , чтобы когда я уменьшал размер сайта , облаки оставались на своих местах ?
      HTML
      CSS
       

      решено 
    • By Andy_Code
      Здравствуйте! Проблема заключается в следующем: есть стартовый шаблон от "Фрилансера по жизни" версии 2021 года, открываю в VSCode, ввожу в терминале npm i затем gulp, все срабатывает как и должно, создается папка с результатом, начинаю прописывать стили для header, задаю ограничивающий контейнер и при проверке работоспособности данного контейнера выясняется, что стили, прописанные мной перекрывают стили медиа-запросов, прописанных в шаблоне и по итогу адаптив не работает, получается что итоговый css собирается в не правильном порядке! Подскажите, пожалуйста, как подобную проблему можно исправить?)
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy