Skip to content

Commit

Permalink
update challenge video URLs
Browse files Browse the repository at this point in the history
  • Loading branch information
@dtinth
dtinth committed Jun 3, 2024
1 parent 80a7448 commit 77bb4c5
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 29 deletions.
51 changes: 29 additions & 22 deletions events/code-in-the-wind-1/Challenge.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,39 @@ export default {
rankingUrl: String,
submissionsUrl: String,
referenceUrl: String,
videoUrl: String,
}
}
</script>

<template>
<div class="challenge">
<a class="challenge-reference" :href="url">
<img :src="url + 'reference.png'" />
</a>
<div class="challenge-info">
<slot />
<p>
<a :href="url">&rarr; See objectives</a>
<template v-if="rankingUrl">
<br>
<a :href="rankingUrl">&rarr; See ranking</a>
</template>
<template v-if="referenceUrl">
<br>
<a :href="referenceUrl">&rarr; See source code</a>
</template>
<template v-if="submissionsUrl">
<br>
<a :href="submissionsUrl">&rarr; See all submissions</a>
</template>
</p>
<div class="challenge">
<a class="challenge-reference" :href="url">
<img :src="url + 'reference.png'" />
</a>
<div class="challenge-info">
<slot />
<p>
<a :href="url">&rarr; See objectives</a>
<template v-if="rankingUrl">
<br>
<a :href="rankingUrl">&rarr; See ranking</a>
</template>
<template v-if="referenceUrl">
<br>
<a :href="referenceUrl">&rarr; See source code</a>
</template>
<template v-if="submissionsUrl">
<br>
<a :href="submissionsUrl">&rarr; See all submissions</a>
</template>
<template v-if="videoUrl">
<br>
<a :href="videoUrl">&rarr; See video</a>
</template>
</p>
</div>
</div>
</div>
</template>

<style scoped>
Expand All @@ -42,10 +47,12 @@ export default {
flex-wrap: wrap;
gap: 1rem;
}
.challenge-reference {
width: 270px;
flex: 1 0 270px;
}
.challenge-info {
flex: 999999 0 270px;
}
Expand Down
14 changes: 7 additions & 7 deletions events/code-in-the-wind-2/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,55 +199,55 @@ Completing each objective will earn you 15 points (for a total of 75 points). Th

### Test round: Creatorsgarten logo

<Challenge url='https://citw02.pages.dev/challenges/06cafdce-6e4a-4b0b-a945-5ba3a93330d9/' referenceUrl='https://play.tailwindcss.com/jSymBDsYSu?size=540x720'>
<Challenge url='https://citw02.pages.dev/challenges/06cafdce-6e4a-4b0b-a945-5ba3a93330d9/' referenceUrl='https://play.tailwindcss.com/jSymBDsYSu?size=540x720' videoUrl='https://youtu.be/9ftrgC60pPk'>

This challenge is for a test round. The goal is to recreate the Creatorsgarten logo using Tailwind CSS.

</Challenge>

### Qualifiers #1: Code 128

<Challenge url='https://citw02.pages.dev/challenges/128f918c-e1f2-44a7-a5c3-3c3208e527d1/' referenceUrl='https://play.tailwindcss.com/8G7Zu1X04j?size=540x720'>
<Challenge url='https://citw02.pages.dev/challenges/128f918c-e1f2-44a7-a5c3-3c3208e527d1/' referenceUrl='https://play.tailwindcss.com/8G7Zu1X04j?size=540x720' videoUrl='https://youtu.be/-fAvIByango'>

This challenge focuses on attention to detail. The goal is to create a Code 128 barcode using Tailwind CSS that, when scanned, reveals the message "OK". Code 128 barcodes feature bars of four distinct widths. Participants must pay attention to the width of each bar and the spacing between them, and recreate it accurately.

</Challenge>

### Qualifiers #2: Glassmorphism

<Challenge url='https://citw02.pages.dev/challenges/2d74b0d1-69d2-4477-95ce-eaf72dde28ed/' referenceUrl='https://play.tailwindcss.com/rCrnCT9bUk?size=540x720'>
<Challenge url='https://citw02.pages.dev/challenges/2d74b0d1-69d2-4477-95ce-eaf72dde28ed/' referenceUrl='https://play.tailwindcss.com/rCrnCT9bUk?size=540x720' videoUrl='https://youtu.be/tbTZb-BQFJA'>

This challenge is about techniques for creating a glassmorphism effect, with background blur and a frosted glass appearance.

</Challenge>

### Qualifiers #3: the sun is a deadly lazer

<Challenge url='https://citw02.pages.dev/challenges/77ef7dcb-8274-4b75-8af5-3d11f473509f/' referenceUrl='https://play.tailwindcss.com/TW3nm05WMp?size=540x720'>
<Challenge url='https://citw02.pages.dev/challenges/77ef7dcb-8274-4b75-8af5-3d11f473509f/' referenceUrl='https://play.tailwindcss.com/TW3nm05WMp?size=540x720' videoUrl='https://youtu.be/c7bV1rxXkXw'>

Inspired by [Bill Wurtz](https://www.youtube.com/watch?v=KdbI8BwrA1o), the goal of this challenge is to recreate Bill Wurtz’s text effect style using Tailwind CSS. This challenge focuses on overlapping text (absolute layout), transforms, shadows, and blend modes.

</Challenge>

### Qualifiers #4: Hotel recommendation

<Challenge url='https://citw02.pages.dev/challenges/ce1fc2ec-c83b-45fe-84fa-a3a2cf12256d/' referenceUrl='https://play.tailwindcss.com/dArBqJEGej?size=540x720'>
<Challenge url='https://citw02.pages.dev/challenges/ce1fc2ec-c83b-45fe-84fa-a3a2cf12256d/' referenceUrl='https://play.tailwindcss.com/dArBqJEGej?size=540x720' videoUrl='https://youtu.be/3dA1P7V1w3o'>

Inspired by [Agoda](https://www.agoda.com/), the goal of this challenge is to create a hotel recommendation card using Tailwind CSS. This challenge focuses on creating a layout with densely packed information in a limited time.

</Challenge>

### Finals #1: Bento Grid

<Challenge url='https://citw02.pages.dev/challenges/8b76f0ac-c6a2-4643-b5cd-d7b4773f8427/' referenceUrl='https://play.tailwindcss.com/eDsqwQqFNP?size=540x720'>
<Challenge url='https://citw02.pages.dev/challenges/8b76f0ac-c6a2-4643-b5cd-d7b4773f8427/' referenceUrl='https://play.tailwindcss.com/eDsqwQqFNP?size=540x720' videoUrl='https://youtu.be/kWSnkcSAljQ'>

The goal of this challenge is to create a “bento grid” layout, as popularized by Apple’s presentations. This challenge focuses on creating a grid-like layout where some items are larger than others.

</Challenge>

### Finals #2: Imposter

<Challenge url='https://citw02.pages.dev/challenges/ff8b07ef-d1f3-4da4-b175-ac3ae55d8509/' referenceUrl='https://play.tailwindcss.com/Tmp8pDcaQZ?size=540x720'>
<Challenge url='https://citw02.pages.dev/challenges/ff8b07ef-d1f3-4da4-b175-ac3ae55d8509/' referenceUrl='https://play.tailwindcss.com/Tmp8pDcaQZ?size=540x720' videoUrl='https://youtu.be/tzJcJPNvi9o'>

The goal of this challenge is to draw a character inspired by the game Among Us. This challenge focuses on creating a character without using any images, only HTML elements and Tailwind CSS.

Expand Down

0 comments on commit 77bb4c5

Please sign in to comment.