Learn how a little custom CSS can be used to create entirely new layouts for your GitPitch slides. Welcome to this maiden post of the new year. I’d like to take this opportunity to wish everyone in the GitPitch community . health and happiness in 2018 This is also the latest post in the series. This series highlights some of the great work developed within the GitPitch community. You can find a link to earlier posts in this series along with related content on this blog . Presentation of the Day here Drum Roll Please… Without further ado let me introduce the latest : GitPitch Presentation of the Day [ GitPitch Presentation of the Day ] — Click To Focus Once the presentation has focus, press the key to open the presentation for fullscreen viewing. Tip! F This presentation was created by who can be found on GitHub . This presentation was prepared for a recent DevOpsPorto Meetup. What makes this presentation perfect for the start of the new year is the message it delivers. It and concludes with a very simple yet powerful challenge which I share with you here: Miguel Alho here encourages a positive approach to Lifelong Learning In 2018, go learn something new! You can start your learning in 2018 by going directly to the GitHub repo for this GitPitch presentation to look over the presentation markdown and to see exactly how the presentation was created: PITCHME.md PITCHME.yaml _LearningChallenge2018 - Slide deck for the DevOpsPorto December 2017 meetup - challenging attendees to learn something…_github.com MiguelAlho/LearningChallenge2018 Presentation Tips & Tricks! One of my goals for this series is to use each post to highlight some powerful GitPitch features used by today’s featured presentation. Presentation of the Day Today I’m going to highlight the use of to create new and interesting layouts for your slides. custom CSS Side-by-Side Image Slide Layout Here is something you don’t see everyday within most GitPitch presentations: What makes this slide special? It was yet the default top-to-bottom rendering of content on the slide has been replaced with side-by-side content rendering. defined using standard Markdown The Markdown found within the for this slide is shown here: PITCHME.md #### Code Quality/Change Trend Analysis <div class="left"> [codescene.io](https://codescene.io) </div> <div class="right"> [sonarqube.org](https://www.sonarqube.org) </div> As you can see, this is all valid Markdown. The addition of the HTML elements allowed Miguel to activate custom CSS classes and respectively to into side-by-side blocks. div left right partition his slide content This rendering trick was achieved using pretty simple CSS. You can see the full custom CSS file for this presentation . here Side-by-Side Mixed Content Slide Layout Using the same and custom CSS classes Miguel was able to deliver a number of variations of side-by-side slide content, including side-by-side lists: left right And side-by-side mixed image and list content: Slide content presented in this way is commonly used by numerous presentation tools and today’s is a great example showing how GitPitch presentation authors can use this popular slide layout too. Presentation of the Day Simple Custom CSS? Just how simple is the custom CSS need to activate this type of custom slide layout? I’m using a similar layout myself to deliver the following slide within the GitPitch presentation: introductory The entire custom CSS I needed to deliver this side-by-side layout for this slide looks like this: .reveal div.left {float: left; z-index: -10; width: 45%;} .reveal div.right {float: right; z-index: -10; width: 55%;} Simple! You can view the complete custom CSS file for the GitPitch introductory presentation . Feel free to reuse any or all of it as needed :) here Presentations for Everyone on Git. That’s it for today. I hope you were able to take some inspiration or helpful tips from today’s featured presentation. And thank you again Miguel Alho for your inspiring talk. GitPitch lets you effortlessly craft and share beautiful content about the things you care about. Use it to promote, pitch or present absolutely anything ;) If you have your own presentation that you think would be a good candidate for GitPitch Presentation of the Day please get in touch. You can follow me right here on Medium or on Twitter for more news, tips and unique creations from the GitPitch community.
