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

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

Маяк. Сообщество ролевиков и дизайнеров

Объявление

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

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



Кодомарафон

Сообщений 31 страница 42 из 42

1

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

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

Про задания

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 


Для амс

[hideprofile]

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

анкета / мастерская / обучение

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

+16

31

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

[html]<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XJWQdNo" data-pen-title="Кодомарафон на Маяке: Активисты" data-user="pk-the-selector" 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/pk-the-selector/pen/XJWQdNo">
  Кодомарафон на Маяке: Активисты</a> by Angst (<a href="https://codepen.io/pk-the-selector">@pk-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]

+8

32

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

[html]<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZYEZWjw" data-pen-title="Кодомарафон на Маяке: Кнопка" data-user="pk-the-selector" 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/pk-the-selector/pen/ZYEZWjw">
  Кодомарафон на Маяке: Кнопка</a> by Angst (<a href="https://codepen.io/pk-the-selector">@pk-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]

+7

33

Да, я использовал нейросетку. Да, мы смеялись как два безумца.
Осторожно: может увести вас туда, где мышь ещё не ступала. 🌀
[html]<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="pvoVjLo" data-pen-title="Smiley Spree" data-user="Coffeetableknight" 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/Coffeetableknight/pen/pvoVjLo">
  Smiley Spree</a> by Coffee Table Knight (<a href="https://codepen.io/Coffeetableknight">@Coffeetableknight</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Отредактировано Coffee table knight (2025-04-06 18:42:36)

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

пст...https://forumupload.ru/uploads/001b/ff/2a/46/248573.gif

+10

34

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

[html]<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="result" data-slug-hash="KwKYzQB" data-pen-title="Кодомарафон на Маяке: Кнопка" data-user="Holger-Brandt" 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/Holger-Brandt/pen/KwKYzQB">
  Кодомарафон на Маяке: Кнопка</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]

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

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

+7

35

Кнопка для самых любопытных
[html]<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="mydgrmY" data-pen-title="Votetopovorot" data-user="Coffeetableknight" 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/Coffeetableknight/pen/mydgrmY">
Votetopovorot</a> by Coffee Table Knight (<a href="https://codepen.io/Coffeetableknight">@Coffeetableknight</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

Отредактировано Coffee table knight (2025-04-06 18:41:34)

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

пст...https://forumupload.ru/uploads/001b/ff/2a/46/248573.gif

+8

36

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

[html]<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XJWQpGp" 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/XJWQpGp">
  Кодомарафон на Маяке: Кнопка</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тена между мирами разрушена

+4

37

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

[html]<p class="codepen" data-height="600" data-default-tab="result" data-slug-hash="JojqpmQ" data-pen-title="Кодомарафон на Маяке: HTML-шаблон шапки темы" data-user="pk-the-selector" style="height: 800px; 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/pk-the-selector/pen/JojqpmQ">
  Кодомарафон на Маяке: HTML-шаблон шапки темы</a> by Angst (<a href="https://codepen.io/pk-the-selector">@pk-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]

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

Удваиваю купон-кэшбек)

Отредактировано Angst (2025-04-09 01:56:26)

+2

38

[hideprofile]Первый кодомарафон окончен!
Всем спасибо за участие, все молодцы https://forumupload.ru/uploads/001b/ff/2a/3/253186.png

Вот такие были призы

200 люменов

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

50 кредитов на форум

max, the murderer!, выполнены задания: 1, 2
Награды: 200 люменов, фон профиля

hagen, выполнены задания: 1, 2
Награды: 200 люменов, фон профиля
Важно: второе задание засчитано, потому что это прецедент. В дальнейшем такие задания засчитывать не будем. Подробнее об этом тут

Канарейка, выполнены задания: 1, 2, 3, 4, 5
Награды: 200 люменов, фон профиля, купон, иконка, кредиты
Важно: вы выполнили четыре основных задания. Напишите в репутацию или в личку, какую награду желаете удвоить https://forumupload.ru/uploads/001b/ff/2a/3/278514.png

Lefferoi, выполнены задания: 1, 2, 3, 4
Награды: 200 люменов х2, фон профиля, купон, иконка

хани, выполнены задания: 1
Награды: 200 люменов

alhenas, выполнены задания: 1
Награды: 200 люменов

Angst, выполнены задания: 1, 2, 3, 4, 5
Награды: 200 люменов, фон профиля, купон х2, иконка, кредиты

океан, выполнены задания: 1
Награды: 200 люменов

Химера, выполнены задания: 1
Награды: 200 люменов

шакал, выполнены задания: 1, 2, 3, 4
Награды: 200 люменов х2, фон профиля, купон, иконка

Naya, выполнены задания: 1
Награды: 200 люменов

Консерва, выполнены задания: 2, 3, 4
Награды: фон профиля, купон, иконка

Coffee table knight, выполнены задания: 2, 4
Награды: фон профиля, иконка


Люмены уже начислены. Иконку, фон и купон забираете самостоятельно. Чтобы получить кредиты, пришлите в личку @max, the murderer! ссылку на форум, куда мы переведём приз https://forumupload.ru/uploads/001b/ff/2a/3/582788.png

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

https://forumupload.ru/uploads/001b/ff/2a/3/161012.png Новые задания уже в шапке темы https://forumupload.ru/uploads/001b/ff/2a/3/161012.png
Я не удержался, поэтому тема месяца — легущьки https://forumupload.ru/uploads/001b/ff/2a/3/473701.png

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

анкета / мастерская / обучение

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

+6

39

[hideprofile]

Задание 1
Кнопка повышения репутации

Стилизуйте кнопку повышения репутации под постом. Без дополнительных стилей и скриптов кнопка с плюсиком появляется при нажатии на цифру (текущая сумма плюсов поста), нажатие же на плюсик повышает рейтинг поста на 1 (ставит плюс от имени пользователя). В шаблоне ниже плюсик уже по умолчанию отображён

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

анкета / мастерская / обучение

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

+3

40

Удалить (невнимательно прочитал задание)

Отредактировано FeatherTail (2025-04-09 13:39:24)

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

"То, что писатель хочет сказать, он должен не говорить, а писать."

+1

41

Задание 1
Кнопка повышения репутации

[html]<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="css,result" data-slug-hash="QwWXboO" data-pen-title="Untitled" data-user="Erhart-the-looper" 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/Erhart-the-looper/pen/QwWXboO">
  Untitled</a> by Erhart (<a href="https://codepen.io/Erhart-the-looper">@Erhart-the-looper</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>[/html]

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

где играю анкета игрока личная тема
https://forumstatic.ru/files/001b/ec/ce/14383.png https://forumupload.ru/uploads/001b/6b/7e/2/155644.png

+1

42

Задание 1

[html]<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="MYWMKQy" data-pen-title="1 Like = 1 Fly" data-user="Coffeetableknight" 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/Coffeetableknight/pen/MYWMKQy">
  1 Like = 1 Fly</a> by Coffee Table Knight (<a href="https://codepen.io/Coffeetableknight">@Coffeetableknight</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/001b/ff/2a/46/248573.gif

+3



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