Здесь делается вжух 🪄

Включите JavaScript в браузере, чтобы просматривать форум

Маяк

Объявление

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Маяк » Mayak Design Awards » Кодомарафон

Кодомарафон

Страница: 1 2  

Сообщений 1 страница 30 из 56

1

  • Последний визит:
    Сегодня 02:50:14
  • Автор: max, the murderer!
  • трёхногая сутулая фея
  • max, the murderer!
  • <a href="/viewtopic.php?id=1099">анкета</a> ∙ <a href="/viewtopic.php?id=716#p49483">дизайны и вёрстка</a> ∙ <a href="/viewtopic.php?id=1453#p129624">мастерская графики</a>
  • Сообщений: 2002
  • Уважение: +4699
  • Люмены: 5441

Кодомарафон
Это беспроигрышный ивент для всех, кто осваивает техническую сторону дизайна или только интересуется ей. В течение месяца будем давать несложные задания на вёрстку, за выполнение каждого вы получите гарантированный приз. Это не соревновательный конкурс, а повод научиться чему-то новому, поэтому можно гуглить, советоваться друг с другом и просить подсказки в теме технической поддержки :)

Ивент запущен в тестовом режиме, со временем правила могут поменяться https://i.imgur.com/K2pBGf6.png

Про задания

  • Каждую неделю открываем новое задание, всего — четыре

  • За выполнение четырёх основных заданий можно удвоить награду за любое из них

  • Одновременно с четвёртым заданием открывается пятое, бонусное

  • Бонус за пятое задание можно забрать, только выполнив все пять заданий

  • Начать выполнение заданий можно в любой момент в течение марафона

  • Задания можно выполнять в любом порядке

Как получить награду

  • В конце марафона опубликуем пост с подсчётом итогов, тогда можно получить призы

  • Вот как их забирать:

    • люмены и ачивки начислим вам сами

    • купоны, иконки, плашки и фоны забираете самостоятельно (их удобно хранить на карточке)

    • для перевода кредитов попросим выигравших написать нам в личку

  • Если выполнили все четыре основных задания, до подведения итогов напишите в посте с последним заданием, какую награду удваиваете

  • За публикацию результатов вашей работы в каталоге также можно получить люмены в банке

Как опубликовать результат

Чтобы засчитать задание, нам нужно его «пощупать». Форумный HTML в постах для этой задачи не подходит (большой риск пересечения классов), но есть удобная альтернатива, которая, к тому же, может стать вашим будущим портфолио.

  • Зарегистрируйтесь на codepen.io

  • Нажмите в левой верхней части интерфейса "Pen"

  • Напишите ваш код

  • Нажмите в правой нижней части интерфейса кнопку "Embed"

  • Скопируйте HTML-код и вставьте его в пост с помощью тегов [html]

  • Добавьте к посту заголовок с названием задания

Задания в этом месяце

Кнопка повышения репутации
Стилизовать кнопку повышения репутации под постом

Ссылка при наведении
Придумать эффект для текстовой ссылки при наведении

https://forumstatic.ru/files/001b/ff/2a/73828.png

Поле для ввода
Стилизовать поле для ввода текста

https://forumupload.ru/uploads/001b/ff/2a/3/894182.gif

Пост недели
Стилизовать блок с постом недели для шапки форума

Анкета персонажа
Придумать и стилизовать простой шаблон анкеты персонажа

https://forumupload.ru/uploads/001b/ff/2a/3/246429.gif

 


Для амс

[hideprofile]

Подпись автора

анкета / мастерская графики / мастерская дизайнов / обучение
av © serotonin

https://i.ibb.co/THYFM7h/image.png

+17

2

  • Последний визит:
    Сегодня 02:50:14
  • Автор: max, the murderer!
  • трёхногая сутулая фея
  • max, the murderer!
  • <a href="/viewtopic.php?id=1099">анкета</a> ∙ <a href="/viewtopic.php?id=716#p49483">дизайны и вёрстка</a> ∙ <a href="/viewtopic.php?id=1453#p129624">мастерская графики</a>
  • Сообщений: 2002
  • Уважение: +4699
  • Люмены: 5441

[hideprofile]

Задание 1
Личное звание для профиля
Чтобы было от чего оттолкнуться, подготовил для вас шаблон на Codepen. Нажмите "Fork" в правом нижнем углу интерфейса, чтобы продублировать шаблон к себе и вносить в него изменения. Не забывайте сохраняться ♥

ПЕРЕЙТИ К ШАБЛОНУ

Подпись автора

анкета / мастерская графики / мастерская дизайнов / обучение
av © serotonin

https://i.ibb.co/THYFM7h/image.png

+6

3

  • Последний визит:
    Сегодня 02:50:14
  • Автор: max, the murderer!
  • трёхногая сутулая фея
  • max, the murderer!
  • <a href="/viewtopic.php?id=1099">анкета</a> ∙ <a href="/viewtopic.php?id=716#p49483">дизайны и вёрстка</a> ∙ <a href="/viewtopic.php?id=1453#p129624">мастерская графики</a>
  • Сообщений: 2002
  • Уважение: +4699
  • Люмены: 5441

Задание 1
Личное звание для профиля

Решил сам выполнить задание и показать примером, как это может выглядеть) Я поигрался и поменял дизайн профиля в целом, вы можете это делать, а можете не делать, главное, чтобы само задание было выполнено https://forumupload.ru/uploads/001b/ff/2a/3/257005.png
[html]<p class="codepen" data-height="580" data-default-tab="result" data-slug-hash="qEBPpLR" data-pen-title="Кодомарафон на Маяке: моё ЛЗ" data-editable="true" data-user="pivozavr" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/pivozavr/pen/qEBPpLR">
  Кодомарафон на Маяке: моё ЛЗ</a> by pivozavr (<a href="https://codepen.io/pivozavr">@pivozavr</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]
Чтобы в демке сразу было видно результат, можно выбрать Result в настройках при экспорте с Codepen или вручную изменить это значение в вставляемом коде:

data-default-tab="result"

А так меняется высота в пикселях:

data-height="580"

Подпись автора

анкета / мастерская графики / мастерская дизайнов / обучение
av © serotonin

https://i.ibb.co/THYFM7h/image.png

+24

4

  • Последний визит:
    Вчера 23:50:36
  • Автор: hagen
  • стираюсь
  • hagen
  • Сообщений: 1748
  • Уважение: +2181
  • Люмены: 4710

Задание 1
Личное звание для профиля

[html]<p class="codepen" data-height="800" data-theme-id="dark" data-default-tab="result" data-slug-hash="MYWELMp" data-pen-title="Кодомарафон на Маяке: ЛЗ" data-user="hi_hagen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/hi_hagen/pen/MYWELMp">
  Кодомарафон на Маяке: ЛЗ</a> by hagen (<a href="https://codepen.io/hi_hagen">@hi_hagen</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Отредактировано hagen (2025-03-13 00:13:47)

+29

5

  • Последний визит:
    Сегодня 00:54:04
  • Автор: Канарейка
  • ролевое чмо
  • Канарейка
  • Сообщений: 363
  • Уважение: +852
  • Люмены: 5839

Задание №1
личное звание для профиля

[html]<p class="codepen" data-height="600" data-theme-id="dark" data-default-tab="result" data-slug-hash="pvodzMN" data-pen-title="Профиль" data-user="Blahaand-Kiri-KiriWind" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Blahaand-Kiri-KiriWind/pen/pvodzMN">
  Профиль</a> by Blaha& Kiri (KiriWind) (<a href="https://codepen.io/Blahaand-Kiri-KiriWind">@Blahaand-Kiri-KiriWind</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Отредактировано Канарейка (2025-03-19 22:24:30)

Подпись автора

https://images2.imgbox.com/e9/c2/656eOmY7_o.gif

+25

6

  • Последний визит:
    Сегодня 01:40:38
  • Автор: Lefferoi
  • ха-ха, окно такое смешное, я выпал
  • Lefferoi
  • Сообщений: 902
  • Уважение: +2218
  • Люмены: 1550

Задание 1
Личное звание для профиля

[html]<p class="codepen" data-height="586" data-theme-id="dark" data-slug-hash="KwKZpjd" data-pen-title="Untitled" data-user="Holger-Brandt" style="height: 586px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Holger-Brandt/pen/KwKZpjd">
  Untitled</a> by Lefferoi (<a href="https://codepen.io/Holger-Brandt">@Holger-Brandt</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Отредактировано Lefferoi (2025-03-14 23:35:13)

Подпись автора

дрейфуем по волнам в дневнике
ищу кота

+25

7

  • Последний визит:
    Сегодня 00:54:58
  • Автор: хани
  • банни бамбони
  • хани
  • <a href="https://mayak.f-rpg.me/viewtopic.php?id=232">дизайны</a> ∙ <a href="https://mayak.f-rpg.me/viewtopic.php?id=1394">графика</a><br><a href="https://mayak.f-rpg.me/viewtopic.php?id=1395">мастерская графики</a>
  • Сообщений: 363
  • Уважение: +785
  • Люмены: 1725

Задание №1
личное звание для профиля

[html]<p class="codepen" data-height="624" data-default-tab="html,result" data-slug-hash="KwKyyGX" data-pen-title="кодик профиля. хани" data-user="hibgtnsi-the-encoder" style="height: 624px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/hibgtnsi-the-encoder/pen/KwKyyGX">
  кодик профиля. хани</a> by Елена Свешникова (<a href="https://codepen.io/hibgtnsi-the-encoder">@hibgtnsi-the-encoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Подпись автора

мои дракончики
https://dragcave.net/image/7QjXP.gif https://dragcave.net/image/2lV3N.gif https://dragcave.net/image/IbwMN.gif https://dragcave.net/image/4uNHB.gif https://dragcave.net/image/E3mRy.gif

+25

8

  • Последний визит:
    2025-03-30 22:51:51
  • Автор: alhenas
  • и вечно жить нам
  • alhenas
  • Сообщений: 56
  • Уважение: +113
  • Люмены: 200

задание 1
личное звание для профиля
пожалуйста не бейте это моя первая верстка за 8 лет....

[html]<p class="codepen" data-height="600" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="yyLpEMW" data-pen-title="Кодомарафон на Маяке: ЛЗ" data-user="AlhenaS" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/AlhenaS/pen/yyLpEMW">
  Кодомарафон на Маяке: ЛЗ</a> by Ali (<a href="https://codepen.io/AlhenaS">@AlhenaS</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

+23

9

  • Последний визит:
    Сегодня 02:50:14
  • Автор: max, the murderer!
  • трёхногая сутулая фея
  • max, the murderer!
  • <a href="/viewtopic.php?id=1099">анкета</a> ∙ <a href="/viewtopic.php?id=716#p49483">дизайны и вёрстка</a> ∙ <a href="/viewtopic.php?id=1453#p129624">мастерская графики</a>
  • Сообщений: 2002
  • Уважение: +4699
  • Люмены: 5441

[hideprofile]

Задание 2
Кастомный курсор
Чтобы было от чего оттолкнуться, подготовил для вас шаблон на Codepen. Нажмите "Fork" в правом нижнем углу интерфейса, чтобы продублировать шаблон к себе и вносить в него изменения. Не забывайте сохраняться ♥
В этом шаблоне не обязательно добавлять на страницу элементы, так как кастомный курсор сработает, даже если просто провести мышкой над пустотой.

ПЕРЕЙТИ К ШАБЛОНУ

Подпись автора

анкета / мастерская графики / мастерская дизайнов / обучение
av © serotonin

https://i.ibb.co/THYFM7h/image.png

+4

10

  • Последний визит:
    Сегодня 02:50:14
  • Автор: max, the murderer!
  • трёхногая сутулая фея
  • max, the murderer!
  • <a href="/viewtopic.php?id=1099">анкета</a> ∙ <a href="/viewtopic.php?id=716#p49483">дизайны и вёрстка</a> ∙ <a href="/viewtopic.php?id=1453#p129624">мастерская графики</a>
  • Сообщений: 2002
  • Уважение: +4699
  • Люмены: 5441

Пояснили поподробнее правила участия:

#p108134,max, the murderer! написал(а):

  • Начать выполнение заданий можно в любой момент в течение марафона

  • Задания можно выполнять в любом порядке

Подпись автора

анкета / мастерская графики / мастерская дизайнов / обучение
av © serotonin

https://i.ibb.co/THYFM7h/image.png

+4

11

  • Последний визит:
    Вчера 19:23:57
  • Автор: Angst
  • твой рот не для того, чтобы говорить
  • Angst
  • Сообщений: 2193
  • Уважение: +3804
  • Люмены: 55783

Задание №1
личное звание для профиля

[html]<p class="codepen" data-height="500" data-default-tab="html,result" data-slug-hash="JojLoYB" data-pen-title="Untitled" data-user="p-k-the-selector" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/p-k-the-selector/pen/JojLoYB">
  Untitled</a> by p k (<a href="https://codepen.io/p-k-the-selector">@p-k-the-selector</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Подпись автора

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

+24

12

  • Последний визит:
    2025-04-28 19:55:58
  • Автор: океан
  • все эти раны затянутся и сделают меня сильней
  • океан
  • Сообщений: 2934
  • Уважение: +4922
  • Люмены: 815

Задание 1
Личное звание для профиля

[html]
<p class="codepen" data-height="600" data-default-tab="result" data-slug-hash="xbxWKdb" data-pen-title="Кодомарафон на Маяке: ЛЗ" data-user="valdoesmath" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/valdoesmath/pen/xbxWKdb">
  Кодомарафон на Маяке: ЛЗ</a> by Val (<a href="https://codepen.io/valdoesmath">@valdoesmath</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
[/html]

+18

13

  • Последний визит:
    Сегодня 01:40:38
  • Автор: Lefferoi
  • ха-ха, окно такое смешное, я выпал
  • Lefferoi
  • Сообщений: 902
  • Уважение: +2218
  • Люмены: 1550

Задание 2
Кастомный курсор

[html]<p class="codepen" data-height="595" data-theme-id="dark" data-default-tab="result" data-slug-hash="zxYRyZa" data-pen-title="Кодомарафон на Маяке: кастомный курсор" data-user="Holger-Brandt" style="height: 595px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Holger-Brandt/pen/zxYRyZa">
  Кодомарафон на Маяке: кастомный курсор</a> by Lefferoi (<a href="https://codepen.io/Holger-Brandt">@Holger-Brandt</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

источник изображения для курсора
скрипт — такая-то матерь и немного жпт
по ходу дела нашёл диснеевский (почти) глиттер
И Allerdale спасибо за вдохновение с:

Подпись автора

дрейфуем по волнам в дневнике
ищу кота

+17

14

  • Последний визит:
    Вчера 23:50:36
  • Автор: hagen
  • стираюсь
  • hagen
  • Сообщений: 1748
  • Уважение: +2181
  • Люмены: 4710

Задание 2
Кастомный курсор

[html]<p class="codepen" data-height="550" data-theme-id="dark" data-default-tab="result" data-slug-hash="mydxrae" data-pen-title="Кодомарафон на Маяке: кастомный курсор" data-user="hi_hagen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/hi_hagen/pen/mydxrae">
  Кодомарафон на Маяке: кастомный курсор</a> by hagen (<a href="https://codepen.io/hi_hagen">@hi_hagen</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Источник: Flash mouse pointer

Отредактировано hagen (2025-03-19 12:16:04)

+24

15

  • Последний визит:
    Сегодня 02:50:14
  • Автор: max, the murderer!
  • трёхногая сутулая фея
  • max, the murderer!
  • <a href="/viewtopic.php?id=1099">анкета</a> ∙ <a href="/viewtopic.php?id=716#p49483">дизайны и вёрстка</a> ∙ <a href="/viewtopic.php?id=1453#p129624">мастерская графики</a>
  • Сообщений: 2002
  • Уважение: +4699
  • Люмены: 5441

Задание 2
Кастомный курсор

[html]<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="XJWEpGg" data-pen-title="Кодомарафон на Маяке: кастомный курсор" data-editable="true" data-user="pivozavr" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/pivozavr/pen/XJWEpGg">
  Кодомарафон на Маяке: кастомный курсор</a> by pivozavr (<a href="https://codepen.io/pivozavr">@pivozavr</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Подпись автора

анкета / мастерская графики / мастерская дизайнов / обучение
av © serotonin

https://i.ibb.co/THYFM7h/image.png

+14

16

  • Последний визит:
    Сегодня 06:44:58
  • Автор: Химера
  • en attendant Godot
  • Химера
  • Сообщений: 1799
  • Уважение: +3635
  • Люмены: 1500

Задание 1
Личное звание для профиля

Разметка не майббовская, потому что форум не майббовский https://i.imgur.com/gD7wd.gif
[html]<p class="codepen" data-height="560" data-default-tab="result" data-slug-hash="WbNzbpo" data-pen-title="profile" data-user="errorbird" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/errorbird/pen/WbNzbpo">
  profile</a> by Error (<a href="https://codepen.io/errorbird">@errorbird</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Отредактировано Химера (2025-03-19 16:30:54)

Подпись автора

доделываю горфэн

https://i.imgur.com/lSjkn75.png

+24

17

  • Последний визит:
    Вчера 19:23:57
  • Автор: Angst
  • твой рот не для того, чтобы говорить
  • Angst
  • Сообщений: 2193
  • Уважение: +3804
  • Люмены: 55783

Задание 2
Кастомный курсор

[html]<p class="codepen" data-height="500" data-default-tab="html,result" data-slug-hash="NPWYPdR" data-pen-title="Кодомарафон на Маяке: кастомный курсор" data-user="p-k-the-selector" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/p-k-the-selector/pen/NPWYPdR">
  Кодомарафон на Маяке: кастомный курсор</a> by p k (<a href="https://codepen.io/p-k-the-selector">@p-k-the-selector</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Подпись автора

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

+13

18

  • Последний визит:
    Сегодня 00:54:04
  • Автор: Канарейка
  • ролевое чмо
  • Канарейка
  • Сообщений: 363
  • Уважение: +852
  • Люмены: 5839

Задание 2
Кастомный курсор

[html]<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="css,result" data-slug-hash="dPymdVM" data-pen-title="Кодомарафон на Маяке: кастомный курсор" data-user="Blahaand-Kiri-KiriWind" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Blahaand-Kiri-KiriWind/pen/dPymdVM">
  Кодомарафон на Маяке: кастомный курсор</a> by Blaha& Kiri (KiriWind) (<a href="https://codepen.io/Blahaand-Kiri-KiriWind">@Blahaand-Kiri-KiriWind</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

«Я не должен лгать»

Отредактировано Канарейка (2025-03-20 10:45:03)

Подпись автора

https://images2.imgbox.com/e9/c2/656eOmY7_o.gif

+20

19

  • Последний визит:
    Сегодня 02:50:14
  • Автор: max, the murderer!
  • трёхногая сутулая фея
  • max, the murderer!
  • <a href="/viewtopic.php?id=1099">анкета</a> ∙ <a href="/viewtopic.php?id=716#p49483">дизайны и вёрстка</a> ∙ <a href="/viewtopic.php?id=1453#p129624">мастерская графики</a>
  • Сообщений: 2002
  • Уважение: +4699
  • Люмены: 5441

[hideprofile]

Важно: задания гораздо проще, чем кажутся. Задача ивента — подтолкнуть участников сделать что-нибудь своими руками. Это не обязательно должен быть рокетсаенс, трёхэтажные скрипты и божественная вёрстка, можно сделать самый минимум, главное — что-нибудь изучить, попробовать, поэкспериментировать, а не просто скопировать готовый код из интернета и поменять в нём одну строчку. Такие задания засчитывать не будем https://forumupload.ru/uploads/001b/ff/2a/3/514608.png

Задание 3
Аватарки активистов
Стилизовать картинки активистов или постописцев для таблицы (которая обычно наверху форума)

ИСПОЛЬЗОВАТЬ ШАБЛОН

Подпись автора

анкета / мастерская графики / мастерская дизайнов / обучение
av © serotonin

https://i.ibb.co/THYFM7h/image.png

+6

20

  • Последний визит:
    Вчера 23:49:49
  • Автор: шакал
  • по жизни
  • шакал
  • Сообщений: 427
  • Уважение: +666
  • Люмены: 2000

Задание 1
Личное звание для профиля

[html]<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KwKBJyW" data-pen-title="Untitled" data-user="crtznxnm-the-solid" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/crtznxnm-the-solid/pen/KwKBJyW">
  Untitled</a> by Маргарита Петрова (<a href="https://codepen.io/crtznxnm-the-solid">@crtznxnm-the-solid</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Подпись автора

ищу:
авторшу бестселлера | монашку

https://forumupload.ru/uploads/001c/6a/ec/5/154854.png

гп, 2030
cтена между мирами разрушена

+11

21

  • Последний визит:
    Вчера 23:49:49
  • Автор: шакал
  • по жизни
  • шакал
  • Сообщений: 427
  • Уважение: +666
  • Люмены: 2000

Задание 2
Кастомный курсор

[html]<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mydQRQe" data-pen-title="Кодомарафон на Маяке: Кастомный курсор" data-user="crtznxnm-the-solid" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/crtznxnm-the-solid/pen/mydQRQe">
  Кодомарафон на Маяке: Кастомный курсор</a> by Маргарита Петрова (<a href="https://codepen.io/crtznxnm-the-solid">@crtznxnm-the-solid</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
[/html]

Отредактировано шакал (2025-03-31 18:04:10)

Подпись автора

ищу:
авторшу бестселлера | монашку

https://forumupload.ru/uploads/001c/6a/ec/5/154854.png

гп, 2030
cтена между мирами разрушена

+7

22

  • Последний визит:
    Сегодня 02:05:20
  • Автор: Naya
  • Активный участник
  • Naya
  • <a href="https://mayak.f-rpg.me/viewtopic.php?id=1152">заказать диз</a> ♥ <a href="https://mayak.f-rpg.me/viewtopic.php?id=1429#p127919">заказать аву</a> ♥<a href="https://mayak.f-rpg.me/viewtopic.php?id=1635#p135199"> го ролку</a> ♥
  • Сообщений: 374
  • Уважение: +470
  • Люмены: 1900

Задание 1
Личное звание профиля

только учусь, не судите строго :з
[html]<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GgROobQ" data-pen-title="Кодомарафон на Маяке: ЛЗ" data-user="Naya-Moon" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Naya-Moon/pen/GgROobQ">
  Кодомарафон на Маяке: ЛЗ</a> by Naya Moon (<a href="https://codepen.io/Naya-Moon">@Naya-Moon</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Подпись автора


тебя здесь не хватает :з

https://dragcave.net/image/G6OEa.gifhttps://dragcave.net/image/S8yoS.gif
https://dragcave.net/image/bNQoe.gif https://dragcave.net/image/a3KpR.gif

+9

23

  • Последний визит:
    Вчера 23:49:49
  • Автор: шакал
  • по жизни
  • шакал
  • Сообщений: 427
  • Уважение: +666
  • Люмены: 2000

Задание 3
Аватарки активистов

[html]<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="xbxQvgo" data-pen-title="Кодомарафон на Маяке: Аватарки активистов" data-user="crtznxnm-the-solid" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/crtznxnm-the-solid/pen/xbxQvgo">
  Кодомарафон на Маяке: Аватарки активистов</a> by Peter Urban (<a href="https://codepen.io/crtznxnm-the-solid">@crtznxnm-the-solid</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Подпись автора

ищу:
авторшу бестселлера | монашку

https://forumupload.ru/uploads/001c/6a/ec/5/154854.png

гп, 2030
cтена между мирами разрушена

+9

24

  • Последний визит:
    Сегодня 03:14:46
  • Автор: Консерва
  • корован
  • Консерва
  • Сообщений: 418
  • Уважение: +583
  • Люмены: 450

задание 3

[html]
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="bNGQXBr" data-pen-title="Кодомарафон на Маяке: Аватарки активистов" data-user="ojoydwsc-the-bold" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ojoydwsc-the-bold/pen/bNGQXBr">
  Кодомарафон на Маяке: Аватарки активистов</a> by Варя Кузнецова (<a href="https://codepen.io/ojoydwsc-the-bold">@ojoydwsc-the-bold</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Отредактировано Консерва (2025-04-01 14:55:20)

Подпись автора


https://i.imgur.com/lSjkn75.png

+11

25

  • Последний визит:
    Сегодня 01:40:38
  • Автор: Lefferoi
  • ха-ха, окно такое смешное, я выпал
  • Lefferoi
  • Сообщений: 902
  • Уважение: +2218
  • Люмены: 1550

Задание 3
Аватарки активистов

[html]<p class="codepen" data-height="373" data-theme-id="dark" data-default-tab="result" data-slug-hash="KwKrYVQ" data-pen-title="Кодомарафон на Маяке: Аватарки активистов" data-user="Holger-Brandt" style="height: 373px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Holger-Brandt/pen/KwKrYVQ">
  Кодомарафон на Маяке: Аватарки активистов</a> by Lefferoi (<a href="https://codepen.io/Holger-Brandt">@Holger-Brandt</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Подпись автора

дрейфуем по волнам в дневнике
ищу кота

+10

26

  • Последний визит:
    Сегодня 02:50:14
  • Автор: max, the murderer!
  • трёхногая сутулая фея
  • max, the murderer!
  • <a href="/viewtopic.php?id=1099">анкета</a> ∙ <a href="/viewtopic.php?id=716#p49483">дизайны и вёрстка</a> ∙ <a href="/viewtopic.php?id=1453#p129624">мастерская графики</a>
  • Сообщений: 2002
  • Уважение: +4699
  • Люмены: 5441

[hideprofile]

Задание 4
Кнопка
Стилизовать любую кнопку, например, «Отправить»

ИСПОЛЬЗОВАТЬ ШАБЛОН


https://forumupload.ru/uploads/001b/ff/2a/3/818980.png
Открыто бонусное задание
 

Задание 5
Шаблон шапки темы
Придумать и стилизовать HTML-шаблон с заголовком и текстом

ИСПОЛЬЗОВАТЬ ШАБЛОН

Подпись автора

анкета / мастерская графики / мастерская дизайнов / обучение
av © serotonin

https://i.ibb.co/THYFM7h/image.png

+5

27

  • Последний визит:
    Сегодня 00:54:04
  • Автор: Канарейка
  • ролевое чмо
  • Канарейка
  • Сообщений: 363
  • Уважение: +852
  • Люмены: 5839

Задание 5
Шаблон шапки темы

[html]<p class="codepen" data-height="618" data-theme-id="dark" data-default-tab="result" data-slug-hash="LEYMjvG" data-pen-title="Кодомарафон на Маяке: HTML-шаблон шапки темы" data-user="Blahaand-Kiri-KiriWind" style="height: 618px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Blahaand-Kiri-KiriWind/pen/LEYMjvG">
  Кодомарафон на Маяке: HTML-шаблон шапки темы</a> by Blaha&amp; Kiri (KiriWind) (<a href="https://codepen.io/Blahaand-Kiri-KiriWind">@Blahaand-Kiri-KiriWind</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Отредактировано Канарейка (2025-04-02 17:05:53)

Подпись автора

https://images2.imgbox.com/e9/c2/656eOmY7_o.gif

+12

28

  • Последний визит:
    Сегодня 00:54:04
  • Автор: Канарейка
  • ролевое чмо
  • Канарейка
  • Сообщений: 363
  • Уважение: +852
  • Люмены: 5839

Задание 3
Аватарки активистов

[html]<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="result" data-slug-hash="WbNKMzR" data-pen-title="Кодомарафон на Маяке: Аватарки активистов" data-user="Blahaand-Kiri-KiriWind" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Blahaand-Kiri-KiriWind/pen/WbNKMzR">
  Кодомарафон на Маяке: Аватарки активистов</a> by Blaha&amp; Kiri (KiriWind) (<a href="https://codepen.io/Blahaand-Kiri-KiriWind">@Blahaand-Kiri-KiriWind</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Подпись автора

https://images2.imgbox.com/e9/c2/656eOmY7_o.gif

+9

29

  • Последний визит:
    Сегодня 03:14:46
  • Автор: Консерва
  • корован
  • Консерва
  • Сообщений: 418
  • Уважение: +583
  • Люмены: 450

задание 2 и 4
не знаю можно ли 2 задания но мне хотелось взорвать кнопку
пришлось юзать канвас чтобы не лагало.....
[html]<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="PwoVPmg" data-pen-title="Кодомарафон на Маяке: Кнопка" data-user="ojoydwsc-the-bold" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ojoydwsc-the-bold/pen/PwoVPmg">
  Кодомарафон на Маяке: Кнопка</a> by Варя Кузнецова (<a href="https://codepen.io/ojoydwsc-the-bold">@ojoydwsc-the-bold</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Отредактировано Консерва (2025-04-02 23:28:29)

Подпись автора


https://i.imgur.com/lSjkn75.png

+11

30

  • Последний визит:
    Сегодня 00:54:04
  • Автор: Канарейка
  • ролевое чмо
  • Канарейка
  • Сообщений: 363
  • Уважение: +852
  • Люмены: 5839

Задание 4
Кнопка

[html]<p class="codepen" data-height="309" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="QwWYOWX" data-pen-title="Кодомарафон на Маяке: Кнопка" data-user="Blahaand-Kiri-KiriWind" style="height: 309px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Blahaand-Kiri-KiriWind/pen/QwWYOWX">
  Кодомарафон на Маяке: Кнопка</a> by Blaha& Kiri (KiriWind) (<a href="https://codepen.io/Blahaand-Kiri-KiriWind">@Blahaand-Kiri-KiriWind</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Отредактировано Канарейка (2025-04-03 14:27:36)

Подпись автора

https://images2.imgbox.com/e9/c2/656eOmY7_o.gif

+9

Страница: 1 2  

Вы здесь » Маяк » Mayak Design Awards » Кодомарафон

Рейтинг форумов | Создать форум бесплатно