Landing page header

[samu-workopen]

to PROJECT 1: RELAUNCH (work packages A and C)

• In general, less text, more media (photos, video, graphics). Scrolling page with different sections (order might change):

Related Tasks:

• Event Section #7 Event section
• News Section  #8 News section
• Project Section  #9 Project section
• Facts & Figures #10 About section(s)
• Social Media  #11 social media
• Link "Presse" page #12 press
• Link to imprint in footer #13 impressum
• Potential participant call to action #14 "Get involved" button
• Create page footer #22 founders logos in footer

[Snater]

The original ticket description is purely structural. Taking over the ticket for the landing page header implementation.

[lohengruen]

I've created this document where I collect all the tiles used throughout the homepage, including the landing page header:

https://www.figma.com/file/GpZokmNZCxSUrcPoyzb3zOEe/Header-Images?node-id=0%3A1

For the header animation, I will create a single file containing all the tiles used in the animation (as it is done in the old version, just with twice the resolution).
Just a quick question: Should I arrange the images in this file already rotated by 45 degrees or do you prefer having them in a normal grid and add the rotation when linking the images to the individual tiles?

[Snater]

Just do it like the old one. There's probably a reason why it's done like that. Probably file size again, because the diagonal edges would increase the size, I assume.

[lohengruen]

Here you can find the image with all the tiles:
https://www.dropbox.com/s/078tmcneyeqbl2q/Tiles_Start.jpg?dl=0

They are arranged in the same rows as they are ordered on the Landing Page, but there are some tiles that are not visible, because they are out of frame or behind the Logo box. I've filled those gaps with additional images and you can decide if you want to use them as part of the animation or not.
The tiles need to be rotated 45° counter-clockwise.

If this works for you, I will export the coding images and the event header in the same style.

[lohengruen]

I just realised that the file size was too big, since I exported it in retina resolution. I reduced it to 1x and now it has a manageable 600KB

https://www.dropbox.com/s/f74p4h5dqe7t8rs/Tiles_Start_small.jpg?dl=0

[Snater]

Thanks. Works great with the code from the current page. I like that you have rounded the tile sizes/gaps. Much better for spotting an error in the applied background positions.
For the frontpage, apart from the back-side tiles, we also need the background: https://github.com/codingdavinci/codingdavinci.de/blob/gh-pages/img/header_background.jpg

[lucyWMDE]

@lohengruen there are still open tasks for you here..... by now very urgent.

[lohengruen]

here are the coding-themed backsides for the tiles:
https://www.dropbox.com/s/jfm9fsxs8f3f4f8/Tiles_Code_small.jpg?dl=0

I've used a different tile size than before (400x400px) because the code images need to be used on the landing page as well as on the event page (where the tiles are bigger). Let me know if this works for you.

[lohengruen]

And this is the color gradient overlay for the header:

background: linear-gradient(180deg, rgba(101, 255, 172, 0.21) 0%, rgba(255, 197, 101, 0.38) 76.61%); mix-blend-mode: multiply; opacity: 0.5;

[Snater]

Proper integration turned out to be more complicated than expected, but seems to work now. Rescaling the code tile image was not a problem, I just applied the background-size property.

@lohengruen We'd just need that static background which appears behind the tilting tiles (https://github.com/codingdavinci/codingdavinci.de/blob/gh-pages/img/header_background.jpg) to get finished here and on the event page. Would be great if you could provide those as well.

[lohengruen]

Here is an image of the arrangement I have in Fimga:
https://www.dropbox.com/s/khqqc534hgpu8q2/Header_BG_small.jpg?dl=0
but since I don't know how you arranged the tiles exactly (on the staging site I don't see the header) it is probably a better fit if you take a screenshot of the header directly and use that as the background image?

[Snater]

OK, thanks. Staging is not up-to-date. But yes, I might just reshuffle the images for using that as a background image. Should work out.

[Snater]

Wait, that's still blocked, but the header is done. That top left section linking to events is not filled yet, because of regional identity. That whole header implementation also caused the language switcher to shift down. So I got still a bit of work to put into here.

[Snater]

No, too late tonight: Event section has its ow ticket: #7.
Just need to reset the language switcher on this ticket here.

[Snater]

I think it's done. Looks quite nice. :)

[lohengruen]

looking forward to seeing it in action!