Recreating a Train Ticket with CSS! SynHax Battle 🔗 **Source:** [Recreating a Train Ticket with CSS! SynHax Battle](https://www.youtube.com/watch?v=rBAAvG68pko) > [!note]+ Document Notes > tags: [CSS, Frontend, WebDevelopment] > author: [MISSING] > source: YouTube > reference: [https://www.youtube.com/watch?v=rBAAvG68pko] > date created: > > # 🏷️ Title: Recreating a Train Ticket with CSS! SynHax Battle > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Draft grid-based ticket scaffold — context/https://www.youtube.com/watch?v=rBAAvG68pko&t=51 #articleseed - [H2] Test inline-styles workflow vs CSS file — context/https://www.youtube.com/watch?v=rBAAvG68pko&t=104 #xref - [H3] Center layout with flex utilities — context/https://www.youtube.com/watch?v=rBAAvG68pko&t=315 #xref - [H4] Prototype `corner-shape: squircle` corners — context/https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape #articleseed - [H5] Build dashed track with repeating gradients — context/https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient #articleseed - [H6] Use pseudo-elements for circular cutouts — context/https://www.youtube.com/watch?v=rBAAvG68pko&t=1781 #xref - [H7] Normalize embedded SVG barcode sizing — context/https://www.youtube.com/watch?v=rBAAvG68pko&t=817 #xref - [H8] Prefer masks for ticket notches — context/https://developer.mozilla.org/en-US/docs/Web/CSS/mask #articleseed - [H9] Extract reusable “content” spacing class — context/https://www.youtube.com/watch?v=rBAAvG68pko&t=1128 #addendum - [H10] Document “Flexbox first, Grid when needed” — context/https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox #share ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - Video: “Recreating a Train Ticket with CSS! SynHax Battle”. https://www.youtube.com/watch?v=rBAAvG68pko - MDN: CSS Grid basics. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout - MDN: Flexbox basics. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox - MDN: `corner-shape`. https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape - MDN: `repeating-linear-gradient()`. https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient - MDN: CSS Masks. https://developer.mozilla.org/en-US/docs/Web/CSS/mask ## 📝 Summary - Developers race to recreate a ticket UI with CSS. - They lean on Grid, Flexbox, and SVG assets. - One competitor uses `corner-shape` for squircle corners. - They form dashed rails using gradients and pseudo-elements. - Inline styles speed iteration but reduce separation. - Bottom line: ship structure first, finesse later. ## 📖 Main Content - The team builds structure with Grid, then aligns with Flexbox. - They use inline styles to reduce context switching during sprints. - A participant demonstrates `corner-shape: squircle` for authentic corners. - Another composes dashed separators via repeating gradients. - Pseudo-elements handle circular cutouts and decorative dots. - An embedded SVG barcode creates sizing friction. - They propose masks for durable notches. - Takeaway: pick primitives that simplify future refinements. - Cite MDN for property support and syntax. https://developer.mozilla.org/en-US/docs/Web/CSS ### 🗒️ Notes #### ⏱️ [00:00:51](https://www.youtube.com/watch?v=rBAAvG68pko&t=51) Grid-first structure ### [H1] Ticket layout uses CSS Grid > [!quote] [Recreating a Train Ticket with CSS! SynHax Battle](https://www.youtube.com/watch?v=rBAAvG68pko) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “The ticket itself is going to be a grid.” [view highlight](https://www.youtube.com/watch?v=rBAAvG68pko&t=51) #xref #articleseed ID:rw_[MISSING] #### ⏱️ [00:01:44](https://www.youtube.com/watch?v=rBAAvG68pko&t=104) Inline workflow ### [H2] Inline styles reduce context switching > [!quote] [Recreating a Train Ticket with CSS! SynHax Battle](https://www.youtube.com/watch?v=rBAAvG68pko) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “If I just throw a style tag here…” [view highlight](https://www.youtube.com/watch?v=rBAAvG68pko&t=104) #xref ID:rw_[MISSING] #### ⏱️ [00:05:15](https://www.youtube.com/watch?v=rBAAvG68pko&t=315) Centering strategy ### [H3] Flexbox centers and aligns card content > [!quote] [Recreating a Train Ticket with CSS! SynHax Battle](https://www.youtube.com/watch?v=rBAAvG68pko) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “Set the ticket…flexbox and then center everything inside it.” [view highlight](https://www.youtube.com/watch?v=rBAAvG68pko&t=315) #xref ID:rw_[MISSING] #### ⏱️ [00:06:01](https://www.youtube.com/watch?v=rBAAvG68pko&t=361) Squircle corners ### [H4] `corner-shape: squircle` produces ticket curves > [!quote] [Recreating a Train Ticket with CSS! SynHax Battle](https://www.youtube.com/watch?v=rBAAvG68pko) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “This is going to be using a new CSS property…corner shape…Squirle.” [view highlight](https://www.youtube.com/watch?v=rBAAvG68pko&t=361) #articleseed ID:rw_[MISSING] #### ⏱️ [00:13:37](https://www.youtube.com/watch?v=rBAAvG68pko&t=817) SVG barcode ### [H5] Embedded SVGs need sizing normalization > [!quote] [Recreating a Train Ticket with CSS! SynHax Battle](https://www.youtube.com/watch?v=rBAAvG68pko) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “I'm going to throw this barcode in here…as the SVG.” [view highlight](https://www.youtube.com/watch?v=rBAAvG68pko&t=817) #xref ID:rw_[MISSING] #### ⏱️ [00:20:17](https://www.youtube.com/watch?v=rBAAvG68pko&t=1217) Flex enthusiasm ### [H6] Flexbox remains the primary layout workhorse > [!quote] [Recreating a Train Ticket with CSS! SynHax Battle](https://www.youtube.com/watch?v=rBAAvG68pko) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “Let me just say that like flexbox is goated.” [view highlight](https://www.youtube.com/watch?v=rBAAvG68pko&t=1217) #xref ID:rw_[MISSING] #### ⏱️ [00:20:30](https://www.youtube.com/watch?v=rBAAvG68pko&t=1230) Timeline ornament ### [H7] Background gradients draw duration rails > [!quote] [Recreating a Train Ticket with CSS! SynHax Battle](https://www.youtube.com/watch?v=rBAAvG68pko) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “I'm gonna put a background gradient on duration.” [view highlight](https://www.youtube.com/watch?v=rBAAvG68pko&t=1230) #articleseed ID:rw_[MISSING] #### ⏱️ [00:29:59](https://www.youtube.com/watch?v=rBAAvG68pko&t=1799) Dashed rails ### [H8] Repeating gradients plus pseudo-elements add dots > [!quote] [Recreating a Train Ticket with CSS! SynHax Battle](https://www.youtube.com/watch?v=rBAAvG68pko) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “Repeating linear gradient…and the circles are before and afters.” [view highlight](https://www.youtube.com/watch?v=rBAAvG68pko&t=1799) #xref #articleseed ID:rw_[MISSING] #### ⏱️ [00:31:36](https://www.youtube.com/watch?v=rBAAvG68pko&t=1896) Corner catalog ### [H9] CSS supports multiple corner-shape variants > [!quote] [Recreating a Train Ticket with CSS! SynHax Battle](https://www.youtube.com/watch?v=rBAAvG68pko) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “Did you know that there's more than just squirle?” [view highlight](https://www.youtube.com/watch?v=rBAAvG68pko&t=1896) #xref ID:rw_[MISSING] #### ⏱️ [00:26:34](https://www.youtube.com/watch?v=rBAAvG68pko&t=1594) Layout shifts ### [H10] Grid replaces floats for alignment fixes > [!quote] [Recreating a Train Ticket with CSS! SynHax Battle](https://www.youtube.com/watch?v=rBAAvG68pko) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “Do I bust out a float?…We're going to display grid…” [view highlight](https://www.youtube.com/watch?v=rBAAvG68pko&t=1594) #xref ID:rw_[MISSING] ## 📚 References - Video: Recreating a Train Ticket with CSS! https://www.youtube.com/watch?v=rBAAvG68pko - MDN: CSS Grid. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout - MDN: Flexbox. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox - MDN: corner-shape. https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape - MDN: repeating-linear-gradient. https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient - MDN: CSS Masks. https://developer.mozilla.org/en-US/docs/Web/CSS/mask ## 🗣️ Paraphrase - The team codes a ticket UI quickly using Grid and Flexbox. - They refine corners, separators, and icons with modern CSS features. ## 📰 Newsletter - CSS sprint time! A live battle shows pragmatic layout habits. Start with Grid. Align with Flexbox. Try `corner-shape` for real ticket curves. Paint dashed rails using repeating gradients and pseudo-elements. Normalize SVG barcodes early. Prefer masks for durable notches. Useful MDN pages are linked above. Watch the session and remix patterns for Gutenberg blocks or WordPress admin UI. ## ✅ Action Items #### DevRel - Record a 10-minute demo on `corner-shape` and masks. - Publish a gist showing dashed rails with gradients. - Host office hours on SVG sizing in WordPress themes. #### OSPO - Add CSS experimental features guidance to engineering playbooks. - Track browser support policies for `corner-shape` adoption. - Define fallback strategies and progressive enhancement rules. #### Community - Run a meetup “Flex-first layouts in practice.” - Share a starter CodePen replicating the ticket UI. - Collect examples for a design-tokens gallery. #### WordPress - Core: evaluate `corner-shape` usage behind feature detection. - **Core Program Team:** coordinate docs for CSS fallbacks. - Playground: ship a lab for ticket UI reproduction. - Themes: add patterns using gradients for separators. - Plugins: lint embedded SVGs for width/height pitfalls. - Documentation: add Flex/Grid recipes for cards. #### The WPOCC - Fund microgrants for accessibility reviews of advanced CSS demos. - Sponsor tutorials on progressive enhancement patterns. ### FAIR - Attach provenance to SVG assets and color tokens. - Publish a scorecard template for CSS feature risk. ## 🧪 Hypotheses - `corner-shape` improves perceived fidelity vs border-radius by 20%. - Masks produce fewer notch defects than overlapped shapes. - Repeating gradients reduce DOM nodes without hurting performance. - Inline styles speed prototypes but hinder maintainability metrics. ### 📊 Methodology - A/B visual ratings on ticket fidelity across variants. - Compare bug counts between mask vs overlap implementations. - Measure DOM size and paint times with and without gradients. - Track diff churn between inline and stylesheet refactors. ### ❓ Questions - Which browsers block `corner-shape` adoption today? - Do gradients degrade on low-end mobile GPUs? - How should Gutenberg blocks expose mask presets? ### 🔮 Future Research - Explore `@property` for animating ticket corners safely. - Test `mask-composite` patterns for complex notches. - Evaluate subgrid for multi-line ticket rows. ### 💡 Implications - Progressive enhancement remains essential for new CSS features. - SVG normalization should be a standard theme checklist. - Gradients and pseudo-elements can replace many decorative DOM nodes. ### 🧠 Learning Styles Assessment - Reading level estimate: Flesch-Kincaid Grade ≈ 9. #### 👀 Visual learners - Present: live UI screenshots and SVG snippets. - Improve: add labeled corner and mask diagrams. #### 🔊 Aural learners - Present: narrated session audio. - Improve: 3-minute audio recap with key steps. #### 🗣️ Verbal learners - Present: defined terms and property names. - Improve: quick analogies for Grid vs Flex roles. #### 🧩 Kinesthetic learners - Present: rebuild the ticket in Playground. - Improve: stepwise labs with checkpoints. #### 🧠 Logical learners - Present: hypotheses and metrics lists. - Improve: decision trees for feature fallbacks. #### 🧑‍🤝‍🧑 Social learners - Present: live pair-coding format. - Improve: facilitated peer critique prompts. #### 🧘‍♀️ Solitary learners - Present: CodePen links for quiet practice. - Improve: self-check rubrics and journaling cues. #### 🌿 Naturalistic learners - Present: none explicit. - Improve: color systems with sustainability notes. ### 📊 Accessibility Assessment #### Screen reader semantics - Present: headings and labeled sections. - Improve: alt text for icons and barcodes. #### Keyboard navigation - Present: focusable interactive examples. - Improve: remove traps in demo iframes. #### Contrast and readability - Present: adequate text contrast target. - Improve: verify 4.5:1 for yellow elements. #### Text resizing and reflow - Present: responsive Grid/Flex layouts. - Improve: honor `prefers-reduced-motion`. #### Media and captions - Present: video captions available on YouTube. - Improve: downloadable transcript; avoid autoplay. #### Forms and interactions - Present: minimal controls. - Improve: accessible toasts and error states in demos. #### Standards reference - Map issues to WCAG 2.2 AA checkpoints. ### 🌍 DEIB Assessment #### Cultural breadth - Present: general audience content. - Improve: examples beyond Western rail brands. #### Inclusive language - Present: mainly neutral terms. - Improve: remove slang that may distract learners. #### Neurodiversity support - Present: chunked steps and structure. - Improve: icon+text labels for controls. #### Representation - Present: voices from multiple devs. - Improve: feature diverse contributors in follow-ups. #### Psychological safety - Present: light-hearted competition tone. - Improve: code of conduct reminders and moderation. ### ✅ Logical Validity #### Strong reasoning - Grid for structure, Flex for alignment shows clear roles. [H1][H3] - Gradients and pseudo-elements reduce DOM complexity. [H7][H8] #### Fallacies - “Flexbox is goated” is rhetorical, not evidence. [H6] - Fix: specify measurable benefits like fewer rules or lines. #### Tone of voice - Playful, candid, and practical under time pressure. ### 🛡️ DARVO Analysis - Deny: none apparent. - Attack: none; mild jokes only. - Reverse victim/offender: none. ## 🎯 Conclusion - Build structure fast with Grid, align with Flexbox. - Use `corner-shape`, gradients, and masks for fidelity. - Normalize SVGs early. Favor progressive enhancement throughout. ## 🧱 Refactor Appendix (append after 🎯 Conclusion) ### 📚 Literature Split Pad - Purpose: Stage Konik CEE units that become per-source Literature notes. - Split level: **H3**. - Include verbatim quotes under 25 words and a [view highlight] link. ### [H1] Ticket layout uses CSS Grid > [!quote] [Recreating a Train Ticket with CSS! SynHax Battle](https://www.youtube.com/watch?v=rBAAvG68pko) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “The ticket itself is going to be a grid.” Two lines: establishes structure quickly; supports complex rows. [view highlight](https://www.youtube.com/watch?v=rBAAvG68pko&t=51) #xref #articleseed ID:rw_[MISSING] ### [H2] `corner-shape: squircle` produces ticket curves > [!quote] [Recreating a Train Ticket with CSS! SynHax Battle](https://www.youtube.com/watch?v=rBAAvG68pko) > “This is going to be using a new CSS property…corner shape…Squirle.” Two lines: matches print aesthetics; needs fallbacks today. [view highlight](https://www.youtube.com/watch?v=rBAAvG68pko&t=361) #xref ID:rw_[MISSING] --- ### 🔖 Atomic Split Pad (Zettel Candidates) - Purpose: Promote reusable claims into Atomic notes. - Split level: **H4**. - Each item: one idea, present tense, specific, testable. #### [Z1] Grid scaffolds ticket components cleanly - Use Grid for top bar, body, rails mapping. - Links: [[Flex-alignment]] [[Ticket-UI-Pattern]] #### [Z2] Flexbox handles alignment and spacing reliably - Apply Flex for centering and gaps across sections. - Links: [[Grid-vs-Flex]] [[Utilities]] #### [Z3] Squircle corners improve visual fidelity - Prefer `corner-shape` with border-radius fallback. - Links: [[CSS-Decorative-Corners]] [[Progressive-Enhancement]] #### [Z4] Gradients replace decorative DOM elements - Implement dashed rails via repeating gradients. - Links: [[Pseudo-Elements]] [[Performance]] #### [Z5] Masks create robust ticket notches - Use CSS masks; avoid overlapping shapes. - Links: [[CSS-Mask]] [[Clip-Path]] #### [Z6] SVG normalization prevents layout surprises - Strip width/height or control via viewBox and CSS. - Links: [[SVG-Best-Practices]] [[Theming]] --- ### ✏️ Fleeting Queue (Extract by Selection) - [F1] Build CodePen: dashed rails with gradients — context/https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient #fleeting #inbox - [F2] Write fallback guide for `corner-shape` — context/https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape #fleeting #inbox - [F3] Create mask-based notch demo — context/https://developer.mozilla.org/en-US/docs/Web/CSS/mask #fleeting #inbox --- <!-- deep-read:sections end --> ## 📺 Video  --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=rBAAvG68pko)* **[00:00]** Guys, the day is upon us. We are trying out the new Sinhacks platform to do [snorts] a realworld UI coding battle. Our target today, a train ticket. This thing has a lot of really interesting challenges, half of which I don't have any clue how I'm going to solve. So, we're going to see how far we can get in [music] 15 minutes. And we're going to see who can do the best job coding up this ticket [music] in real time. Guys, are you ready? >> Let's do it. Let's do it. Stoked. **[00:30]** >> Let's do it. Oh boy. Okay, here we go. So, first thoughts is let's get all of the markup down. I don't feel like writing all of this markup. So, what I'm going to do is I'm going to I don't think this is cheating. I'm going to copy paste everything just from a screenshot. Can I do that? Yes. The ticket itself is going to be a grid. And then what I'm going to do is just span these items. What do we got here? We got a ticket first. Obey [music] your thirst. Let's go ahead and make this thing. We got I'll put this **[01:02]** screw it H1. It's not going to say let's battle. It's going to say Swiss Express. [music] Actually, yeah, it it can have a price of 240 bucks. This could just be a span, folks. I'm going to do span city here. In fact, let me bump down the font size. Uh, let's go. Let's go. Let's go. So, span. And also another span wrap. Um, oh god, autocomplete. >> I think in traditional CSS battle fashion, I am just going to uh make a yellow box. [laughter] **[01:34]** And uh we were testing out the platform earlier. I think it's going to be much easier for me to put all of my styles in line instead of having a separate CSS file cuz this works. If I just throw a style tag here, then I'm not bouncing back and forth between files. Yeah, so this works. Um, okay. Let's grab this yellow color. And I am just using the Max built-in color picker. And then I'm going to create a div. Call this ticket. Let's get rid of all the styling here. Ticket class is going to have a background of that yellow color. It's **[02:05]** going to need a width and a height. Um I'm going to use view width and view height. So yeah, that gives us a nice square. And then uh we'll margin auto it zero auto. So that should put it in the center. Uh and then inside of that span dot code and dot from. Ah, I think the AI autocomplete is killing me. So, [music] we'll just say code that is a code and location from [music] stop AI. Maybe I **[02:36]** should turn this off. Next thing is we have another section which I'm just going to do straight divs. Sorry folks, this is in semantic time. And we're going to have um another let's do divs all the way down for right now. And this will be Zur. And then inside of this div, Zurich. And again, I'm going to fix the markup on this in a minute. Then what we have is another div where we'll have the train >> [music] >> icon section. Train icon. Okay. Then **[03:06]** we're going to have another div where we have LZ and LER. Sorry folks, I don't know these places. Then we also want Zurich location name. Then duration passenger. All right, let's see what you got here. And we need a seat. Dot seat. Seat A2 class business. Oh my gosh, this is a mistake. This is a mistake. We're going to do a width of 100 view width. **[03:37]** So it takes up the full width. But again, there's um there's some margin. Where is this margin coming from? The frame itself has a margin. Can I target the I frame? This actually needs a third div section in here where we're going to have uh the seat which is A2. Again, uh not worrying about markdown or markup specifically for this yet. And then this next section is going to just be like a [music] straight uh grid where we're going to have inside of this grid uh several items where it is. **[04:10]** Man, you could have these all be paragraph tags for all I care. I guess when I add the height, that's what adds those those bars. Oof. Okay, I'm just going to set this to 100% then instead of doing uh view width and then height as 100% as well. Okay, this is going to have to be an exact amount. Okay, then we'll bring it down a little bit. Let's go like 90 view height 85. I realize I'm just wasting time here getting a yellow box on the screen, but that's okay. >> Sorry, just getting stuff on paper here. 10:30 [music] a.m. Looks like I've already wasted a bunch of time uh just simply getting the **[04:41]** mark markup going on here. Yeah, it took me 5 minutes to get a yellow box on the screen. So, I don't think I'm going to do great on this one. Uh, let's pull back up our color picker and let's get this that is just pure white. It doesn't look pure white to me, but looks like it is. No, we these things need to be like reused. So, we'll give this a class of we'll call it a cell and [music] this will be a label and this will be let's call it a value. Did I get lost in the div sauce here? I [music] got lost **[05:12]** in the div sauce. >> Actually, we'll set the ticket itself to be a flexbox and then center everything inside it. So, [music] justify content center. Align items center. Yeah. So, that puts the white box right inside of it. >> Good start. Let's go ahead and and get some of this going. We're going to call this just the class is going to be the the grid. Okay. The grid is going to be an important part. The main div is going to be class of [music] uh card. Okay. Let's do our CSS now. I think we are in **[05:42]** good shape. Uh let's go into the CSS. This is going to be using a new CSS property where it's going to be corner shape squirrel. Uh you're wondering if this works. This should work. I'm not in Chrome Canary or anything. And this should work. Squir. Squirle. Is that how you spell it? There we go. Squirle. What is adding? What is this app frame? The I frame has a that's [music] Scott's thing. Wonder if I can just inject the CSS. I'm pretty **[06:13]** sure I can watch this little trick. I frame with a title of app frame. That didn't work. Don't watch that. Never mind. Never mind. Never mind. Let's work on the ticket now. Okay, cool. And now we need some border radius on this thing. Probably going to have to go pixels. Let's see what a 20 pixel border radius looks like. Yeah, it's like a weird curvy border radius. It's not exactly 20. Yeah, it's got to be something [music] like this. This is **[06:44]** top right. And yeah, we'll keep that at 20. 25. How does that work? I guess it's each individual corner. I don't think you can really like make it a little more oblong. >> Now, interestingly enough, we want it to be one these every kind of other ones. You would typically want to do this with just a class. And I Let's just go ahead and do that. Uh, you could always have these be headings considering these could be considered headings. Uh, but again, we're going for speed here. So, like, are these headings? Sure, they're headings. Let's just call them an H2 **[07:15]** because the H1 is the ticket itself. Oh, man. Copilot, get off get off my case here. Ticket. Um background white border radius one rim margin 20 px auto 20px all around. Okay, it's looking good. Um what's the border color? I'm not even going to worry about making it oblong. I just need to get some stuff on the screen cuz I literally only have 6 minutes left. So uh we've got the white box. Now let's uh make a little yellow **[07:49]** circle. So let's just call this the uh we'll have a div. Give it a class of train circle. It is going to need this background color. So I'm going to make some variables. Variable called yellow. And then we'll use that variable here. And then we'll use this variable here too. All right. Uh let's work on getting each of these things working. Okay. So each of the values is going to be font size 40. No, **[08:21]** 30. And font weight 600. [music] Looking pretty good. Font's not going to be perfect, but oh well. Color is like an odd. It's like a gray. What do you mean? You copied FFF. Man, this pick color thing has been dog. I don't understand what happened to the Raycast color picker. It does not work. So, I'm just going to yolo it on a 222 here. >> This train circle, I think we need we're going to need just like a top bar area. So, let's have another div on the inner. **[08:52]** We'll put that circle inside of it. And this div we'll call top bar. We'll throw the train circle inside of it. And we'll give this a height of 40 vmin. And we'll make it a flexbox. Justify content space between [music] align items center. Each of those cells is going to be display [music] flex. Good. Good. Good. Label font weight 300. **[09:25]** Um Oh, the font itself is it's like San Francisco. I remember looking at that. Let's just call How do you do San Francisco? Apple system. Close enough. All right, we're cruising here. The H2. H2 is going to have a color of something more like more like CCC. That's too light. More like a AAA. That's a little bit better. Font weight is going to be something **[09:55]** [music] like 300. Just off the top of the dome. Let's make that 400. Perfect. Getting a little bit better. The paragraphs, on the other hand, are going to get a font [music] weight of something heavy like 900. And then I'm going to give [music] the top bar a border bottom. Uh how do you do a dash border? [music] So yeah, instead of instead of solid, it would be dashed black. Yeah. [music] And instead of black, we need a gray color. So I'm going to pull **[10:26]** up the color meter. Let's grab that color. Let's work on the layout. Now the ticket itself is going to be display grid grid template columns. There should be let's make it two columns. 1 FR 1 FR No, we want 50% 50%. Since there's no gap, that will be okay. Oh, baby. Okay. Now, what are the things that span 100%. Look at me. Look at me. Look at me. Okay. **[10:59]** Padding. We're going to do some padding on this bad boy. We're going to say zero uh 40 pixels on this bad boy. There we go. Looking pretty dec. We're going to have actually throw a padding bottom on there, too. Let's get some padding all around. Let's spread the padding out, folks. Let's do 60 pixels on this thing. Okay, so the hardest parts about this besides the fact that um squirle yada yada yada, which we were able to solve, it's going to be these weird cutouts. Now, that's the thing I'm not super stoked about is these cutouts. Man, 3 minutes. I am not even close. **[11:34]** This would have been a lot more fun if we had the HTML up front cuz like this is not a good video trying to watch us code HTML. All right, what are we working on next here? Is I only have two and a half minutes. I'm just going to focus on this top area. That's that's all I got in this amount of time. Yeah, so we've got our top bar and then let's just call this uh content. And then that will have the circle inside of it. And then this can have some margin on it. So, uh, we'll do zero auto. Yes. But we'll give it an explicit width of like 90%. And **[12:07]** that lines it up pretty good. Uh, now we did get the train SVG ahead of time. So, I'm just going to throw the train SVG inside the train circle. Okay, let's go ahead and we got our padding. Uh, the padding is still not perfect yet. The font size is still too big here. The weight is pretty dec. It's looking a little bit better and better. That squirrel ain't squirkling enough for me. Let's squirkle it a little bit more. Let's squirkle it to it. >> Inside the train circle, there's an image. Uh, we'll do a height of 20 pixels. Uh, I guess we want to do like percentages. So, 90% and a width of 90%. **[12:38]** And it looks like I can't reference images via URL. So, I'm just actually going to grab the SVG code itself. We've only got a minute left. I didn't do well. Let's h let's get it in order at least. This is this is really confusing. Okay, so passenger details. Okay, seat, train number, class, departure, arrival. Okay, arrival goes up here. >> And 30 seconds less left. Can I get the **[13:09]** word um we'll do as an H1 Swiss Express right there. >> All in all, I'm not quite there. Uh so we'll see where everybody else is at at the time here. >> That's it. >> Yeah, we need more time. All right, we got another what 10 minutes. I definitely wasn't coding while we were talking to each other, so let's keep going. >> Okay, my friends, we're back. Obviously, maybe I should be panicking more, but [laughter] this is taking me a long time. >> And now we got this SVG, which is a nice little enhancement here. Uh, I'm going **[13:41]** to throw this barcode in here just to have it as the SVG. Man, VS Code is like struggling with this. Oh god, cool. Let's collapse this SVG. Oh, why do we have another G translate? And we'll give it a font size of 0.8 rim, 1.1 rim, three rim, two rim, 1.5 rim. So, what we want to do here is let's look. So, we got this thing here. That's a flex. And then the icon itself **[14:13]** needs to flex zero. Beautiful. And sorry HTML folks. I know a lot of people are weeping at my HTML at this very second, but you know, I'll fix it later. I'm just trying to get stuff on the board since we're we're moving pretty quick here. So, barcode here is going to be a width of 100%. And since this is, you know, it doesn't need it doesn't matter if it's squished or whatever. I'm just going to say height of 40 pixels. Oh, that's that's annoying. Padding 10px. **[14:46]** No, not padding. Gap. What am I doing? There we go. Swiss Express. I want the title Swiss Express to That's the only one I actually want to flex Grow. There we go. Flex01 auto. Okay. And then the price. Is there a class on that? Yeah. So, we've got that. And then we need the pricing. So, 240. I am going to put the train circle and the title in its own element. So that way I can just do **[15:16]** justify content space between and it'll push that price all the way to the right. Price is font size 25px. Okay, I'm not going to worry too much about the finessy little bits just yet cuz I want I really need to get this thing um in order. Um let's fix this barcode really quickly. I'll have to actually modify uh CJ's SVG itself. We want it to be able to crop here. The view box is part of the problem of that. **[15:47]** Is it? Or is it just that it has a height on it? There we go. Let's see if I do a height of 40 on this now. No. Okay, whatever. Do I have a class of barcode on here? Yeah. Why is my barcode not working? Oh, cuz my CSS is broken. That's why that was at H2. Okay. Um, and then the background is going to be that beige color. Okay. Oh, hell yeah. That's looking pretty good. >> Okay, let's worry about this H1 stuff. Okay, so we had the card and I'm keeping **[16:18]** my HTML and CSS in order here. So the H1 is going to be a display flex. It is going to be a space between. We are going to do a line item center co-pilot coming in clutch here just like this. And inside of here, the SVG is going to get a BG of the yellow. Now what was the yellow? Um, we could even do yellow is going to be There we go. Let's do Let's do the easy stuff. The download ticket background is not that. Um, we're **[16:50]** missing that border. That border radius on here on the ticket needs to be a bit higher. Let's just do explicit pixels. Oh, it's like a squirle. At least it's a bit weird. We can do that with CSS, but I'll I'll fix that later. At this point, let's just work on the next section down. So the next section down, it's the departing and destination. This is the route element. And inside of there, we're going to have a div. We'll give it a class of uh location. This is going to **[17:21]** have a span that says Zur and then a span below it that says the full name Zurich. Let's get this part the Zurich. What do we What do we call that? What do we call these things? Location from and location name. So, location from location name. I don't need to nest these. What are we doing? It's unnecessary to nest them. Let me just say that like flexbox is goated. You could just apply flex to anything. There's no rules. It just allows you to work. Man, look at how good this looks. **[17:54]** Bro, I am cruising. We'll have dots on the other side. And then in the center, we're going to have the let's call this the length. And that's going to have the train SVG in it and one in a span that says uh 1 hour 23 minutes. Why is this not working? What's wrong with this selector? Come on. What the hell's going on with this? Am I going nuts? I guess we could use dev tools. Hey, Raycast color picker, **[18:27]** you better be correct on this because what are you doing? What are you doing here, Raycast color picker? I am going to convert this S to yellow. What are you doing, co-pilot? You trying to kill me? >> I think I'm going to do the same thing. I'm going to have an inner element that has that margin so it lines up the margin with that other element. So it's called content. We're going to move this content class to be reusable. So that way every little bar has the same styling on it. Let's worry about this next section here now that we got like **[18:57]** no time left. Uh I'm going to call this the uh stations. Perfect. Thank you, co-pilot. You just, you know, you get me sometimes. Sometimes you don't. Sometimes you can f right off and uh, you know, die in a fire or whatever. I don't care. Why that's not centered. Why is that centered? Oh. Oh, cuz location has a cell on it. Boom. Okay. [music] Next. This duration. Oh, baby. This is going to be tricky. The duration **[19:28]** is going to ultimately, you know, maybe what you'd want to do if you were thinking about this in a a situation where you weren't um so constrained on time uh would be to like really think about the uh data hierarchy here. Okay, so we got a P, we have a span and a span um and a P and a span and a span. P and a span and a span. Train icon can actually be the real icon this time. Let's throw that in here. Let's get that moving. Let's crank on that thing. Let's go. Let's go. Let's **[19:58]** go. So, let's go down to 2.5 rim. Cool. And then location should be a flexbox with uh flex direction of column. So, that should put them on top of each other. And then we'll it will do justify content center. Align items center. Uh actually, it doesn't need to align items center. They should be left aligned. And then we'll call this the full class. Um, it'll have a font size of two rim. I want to do it with all background images. I'm gonna do it. I'm gonna do it. I'm **[20:30]** gonna put a background gradient on duration. And then I'll use before and after for the circles. And then the last section here, we're going to call this class and this is going to be a passenger info. Sure. Once again, uh, sure, sure, sure, sure. github.com/boss.png. PNG. There we go. >> So, I'm going to add a margin top of like two rim. Do like one rim. Push it down a little bit. Yep. Only have 30 seconds left. Um, **[21:03]** let's try to get this uh duration into a yellow circle. Height is obviously going to be auto. Something closer to 60 pixels. Uh, something closer to 80 pixels. There we go. Something closer to 100 pixels. Even better. yada yada yada. Border width needs to be closer to two. Uh passenger info is obviously going to be a display flex because that's just how we're riding these days. Align items gap center. Perfect. Perfect. Perfect. And then the last thing here is that we **[21:34]** needed better markup for the rest of it. So, I'm going to move back on to the uh stations. Stations. Stations in the place to be. Okay. Stations inside of the stations. What we had F. There's no more time. >> Oh, maybe the duration >> is still coding. So, I'm going to keep coding. >> Yeah, Wes is still coding. Uh, Randy, give us another 10. >> Another 10. >> Okay, let's just keep going and then we'll we'll figure it out, >> I guess. So, there's 9 minutes on the clock. We'll keep going. >> How are we cruising on this thing? This uh icon also needs to be a display flex **[22:04]** because that's the name of the game today. Align item center and then another gap of something like 5 pixels. Man, what did we do in this world before we had display flex? Who the hell knows? I don't know what I was doing. Where were we? This is the duration. So, the duration time is going to be background yellow. Uh border radius padding is duration. Let's look at duration. Duration has Oh, we **[22:35]** specifically need to set this uh length element here to have that same flex box. Now, I'm doing the same thing over and over again, like a centered flexbox. Um, I am going to I think extract it out into a I'm not going to extract it into a class. We're we're on a time crunch [music] here. >> And now the color of the last child is also going to be the 666. Thank you, uh, Copilot coming in clutch here on some of these things. Now, the font size on the parent is going to be something closer to 36, something closer to 46. **[23:08]** And uh the second one of these is going to be text align right. I don't Is this going to work? Why is that 100% wide? It's because Oh, duration itself needs to be text align center. No. Oh, it's cuz it's display block. I'm so stupid. Thank you. Are you listening to me there? Oh, I Why did I do this stupid display block on there? Now I've messed it up by trying to be fast. Now I got to **[23:38]** use an important. Not even important's doing the job. Oh no. You want to inline inline there. Do we even don't need the important? Yes, we do. Oh no. I'm um the worst. I am the worst. Honestly, the padding on the top is a little bit less. So let's do padding. I forget what order it's in. Okay, so we want to do probably 0.5 on top and bottom. Yeah, that's a little bit better. Now margin zero auto. Now we need to center that in there. So there. Beautiful. This **[24:12]** duration does need [music] display flex. Boom. Look how good that looks. Okay. See Wes celebrating over there. Um, okay. Uh, let's give this a height of uh 2 pixels. Let's do a width of uh 10 Vmin. And we'll do a border bottom of one pixel solid that gray color. >> Okay. Align item center once again. Align item center of the goat. There we **[24:42]** go. Okay. I'm looking pretty decent here. It's not perfect by any means, but looking pretty decent. Okay. Uh, these dots should not be inside or should not be extending the background color. Who has that background color? Duration. Now, this this background needs to be on the length like that. Cool. Okay, we're getting there. Um, and then instead of solid, this should be dashed. Um, we're going to decrease the width probably to like 5 Vmin. Wonderful. The padding is all effed up on these things. Where is **[25:13]** my cell? Okay, that's looking better already. [music] Looking better already. We need to do the this guy here. So, what do we call this? This is the passenger with an image. Passenger with a name and an email. So, let's do the passenger. It's going to be display flex. Like, it's it's coming along. I think I'm going to get I'm going to get roasted in the comments cuz yeah, the border radius isn't perfect. I didn't go off and choose a font. Let me **[25:44]** just get this barcode in here cuz we only have 3 minutes left. I'll add it at the bottom and the download ticket cuz all this other stuff is it's just going to be so much. I mean, ah man, they're all the same, though, so it should be pretty easy at that point. But yeah, let me get the uh barcode on there. Sorry, folks. The uh the uh cutouts are going to have to wait. I think if I had a good strategy for the cutouts, I would have just taken that on, but I didn't have a good strategy out of the gate for those. Uh let's go ahead. We have our passenger info, which has a div within two paragraphs, and then we have some **[26:15]** information. So, this is the uh class of the actual passenger. Do I do I bust out a float? Do I do a float here? You know what? Let's do old school. Let's float this image left just to show you I still got it. Boom. Okay. [music] And then name. Why is it so small? So, we've got the top bar. We've got the route. We'll probably have a div that is a class of passenger. And then another div with a class of train info. **[26:48]** And then another div that has a class of times. Another div that has a class of station info. Oh, baby, baby, baby. We're overlapping here. This is not a good idea, but I'm just doing it to to win. Um, okay. And then we will display flex and center the items on here. Oh, no. We don't want to display flex cuz I I floated it. Why did I float it? No, we're not floating it. You know what we're going to do? We're going to display grid with grid template rows. Uh **[27:23]** we're going to say margin of zero on these bad boys. We're going to say margin of zero on this bad boy as well. And then there we go. That's looking a little bit better here. Uh it's not perfect by any means. And then the next thing we're going to have is the dot seat. The seat is going to have a margin left of auto. I don't know if that's actually going to work. Margin left auto is one of those things I throw on things and just uh cross my fingers and hope it works. Sometimes it does, sometimes it doesn't. Let's set the background of the **[27:53]** barcode to be that beigeish color. And we'll give it a specific height of 20 Vmin. Um, what the heck? >> Justify. So, Judge Judy has justice. >> Wes is waving his finger. He's doing his judge duty doesn't justify bit. He's saying judge duty doesn't justify. It's his favorite bit. I've heard him do it like 10,000 times. He loves that. Yo, I could have saved so much time setting up variables. Um, honestly, this doesn't **[28:24]** look terrible at all. It doesn't look bad. There's definitely uh uh parts of it that I wish were better and nicer. And then uh time is up. I think we're out of time. >> I think we can call it. >> Yes. >> Yeah. I have a complaint for the developer of Sinhack. Uh the I frame has a margin that I could not get rid of. Right here. >> So frustrating. >> You couldn't get rid of it. >> No, it's it's on your end. I tried **[28:54]** injecting some CSS. I should have just used dev tools. Actually, >> you can see how mine is responsive of sorts. [laughter] >> Yeah. >> I'm going to report a bug using Sentry. >> Ah, yes. I did add the report a bug feature and I did not turn it off for production. Oh, add a screenshot. Hello. >> Yes, I would love your bug reports. Thank you. I am using Sentry to develop this. >> Yeah. So, nothing crazy. I uh I thought that maybe I would try to because this isn't a perfect border radius, right? It's like a weird >> I don't even know what to describe this. It's Yeah, it's it's a squirrel. So, I **[29:24]** did not spend any time on that. I was just like, okay, like 25 pixel border radius or something like that. And then from there, it's just a whole lot of divs, flex boxes. I don't think there's anything special here. Like, this is just a dash line. I didn't worry about the cutouts yet. >> Yeah. >> So, yeah, this is mine. Not proud of it. Took me a long time just to get here, but uh I have something to reveal once once both of you have have revealed yours. >> I love it. Oh, Wes. Nice work. >> Yeah. So, what I did is I in I right away I screenshotted the thing and copy pasted all of the text and then I was **[29:57]** able to mark it up relatively quickly. My autocomp completions were getting in the way though and it was it started to frustrate me. But yeah, I got I'm like I feel like I have pretty good like flexbox and grid knowledge in my noggin. So I was able to get all the layout done um pretty quickly. I there's not there's not a lot of finesse here, you know, like I I usually like to just get stuff >> in place and then give it a second pass. Like obviously the fonts aren't perfect and this padding and and spacing isn't perfect, >> but uh getting it in a good space. And **[30:28]** then I'm most proud of this part right here with the >> Yeah, I didn't get that part done. Yeah. >> You want to see what it is? Repeating linear gradient >> and then the circles are before and afters. I feel like we could do >> I use before and afters all the time for that kind of stuff. I love that. >> Yeah. You didn't do the cutout, but did you have a plan for the cutout at the top? >> I was thinking like, oh yeah, like these knuckleheads are just going to do a yellow circle and overlap it. >> That's what I [laughter] was going to do. Um yeah, the real move would be to **[30:59]** use a mask >> and I think it's outline because an outline will follow masked off values. If you were to use a border and and cut those out, then you'd you'd kind of be out of luck. So, I got pretty far. Um I [laughter] I used CJ's barcode. Yeah, I got CJ's barcode and I I uh I I didn't [music] like I should have not used CJ's barcode because >> uh it had like a lot of like weird inherent baked in width and height stuff that I I just was like I don't have time **[31:29]** to deal with this. Um I didn't get to this part. I was working on this little this dash line at the end. Uh but again, nothing too crazy going on mine. A lot of flexbox. Um, I think there's one thing that I nailed that neither of you guys did, and that is dot dot dot corner shapes. >> I knew it. >> Wow. I was like, that's not a regular border radius. >> Look at the squirrel. If you were to bump this up to like Yeah. 200 pixels. Look at that. It's even more squirly. >> Wow. >> How did you remember what the squirle **[32:01]** was? Cuz I did a video and I could not remember. >> I I had just uh thought Well, I've been looking into squirles on another app. So, uh, I I had actually had looked up prior to this like what it was actually supported in this. Uh, did you know that there's more than just squirle? I thought corner shake was just for squirrel, but there's all kinds of tons. >> I built I built like a generator for it. >> Did you? >> Yeah. Watch my video, Scott. You know, watch my videos. >> No, I don't. Uh, these little ones **[32:31]** always seem easy and then you get into it and you realize, oh, there's so many little details here and there. >> Yeah. I will say the S the barcode that you embedded Scott is actually CJ is the winner encoded. So with [laughter] that >> I should have not trusted you. That is what it comes down to. >> All right, that's it. Let us know in the comments who you think the winner was. Um who did the best job? And CJ Bots, save yourself. It's not this one. Sorry for you.