template presentation html

How to Create Beautiful HTML & CSS Presentations with WebSlides

Share this article

Getting Started with WebSlides

Create a web presentation with webslides.

• Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

This article was peer reviewed by Ralph Mason , Giulio Mainardi , and Mikhail Romanov . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.

Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:

WebSlides “is about telling the story, and sharing it in a beautiful way.”

In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.

Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash , Animate.css , Animate On Scroll , and so on.

WebSlides is easy to learn and fun to use. Let’s see it in action now.

To get started, first download WebSlides . Then, in the root folder, create a new folder and call it presentation . Inside the newly created presentation folder, create a new file and call it index.html . Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):

In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics. Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator .

You’ll be working step by step on each slide. Let’s get started with the first one.

The first slide is pretty simple. It contains only one sentence:

Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter , to apply a radial gradient background and to align the slide content to the center respectively.

The second slide explains what SVG is:

The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.

The next slide uses the grid component to create two columns:

The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.

In the fourth slide, use the grid component again to split the content into two columns:

In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:

In this slide, use the background class to embed an image as a background with the Unsplash service . Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap"> :

In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight , which is one of WebSlides’ built-in CSS animations:

Do a similar thing here:

This slide also uses a similar structure:

Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:

Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:

In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:

This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:

For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.

In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn :

Congratulations! You’re done. You can see the final outcome here:

See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint ( @SitePoint ) on CodePen .

Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.

To learn more, explore the WebSlides Components and CSS architecture documentation , or start customizing the demos already available to you in the downloadable folder.

Then, focus on your content and let WebSlides do its job.

Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

How can i customize the design of my webslides presentation.

WebSlides allows you to customize your presentation to suit your style and needs. You can change the color scheme, fonts, and layout by modifying the CSS file. If you’re familiar with CSS, you can easily tweak the styles to create a unique look. If you’re not, there are plenty of online resources and tutorials that can help you learn. Remember, the key to a great presentation is not only the content but also the design. A well-designed presentation can help keep your audience engaged and make your content more memorable.

Can I add multimedia elements to my WebSlides presentation?

How can i share my webslides presentation with others.

Once you’ve created your WebSlides presentation, you can share it with others by hosting it on a web server. You can use a free hosting service like GitHub Pages, or you can use your own web server if you have one. Once your presentation is hosted, you can share the URL with anyone you want to view your presentation. They’ll be able to view your presentation in their web browser without needing to install any special software.

Can I use WebSlides for commercial projects?

Yes, WebSlides is free to use for both personal and commercial projects. You can use it to create presentations for your business, for your clients, or for any other commercial purpose. However, please note that while WebSlides itself is free, some of the images and fonts used in the templates may be subject to copyright and may require a license for commercial use.

How can I add interactive elements to my WebSlides presentation?

You can add interactive elements to your WebSlides presentation by using JavaScript. For example, you can add buttons that the user can click to navigate to different slides, or you can add forms that the user can fill out. This can be done by adding the appropriate HTML and JavaScript code to your slides. If you’re not familiar with JavaScript, there are plenty of online resources and tutorials that can help you learn.

Can I use WebSlides offline?

Yes, you can use WebSlides offline. Once you’ve downloaded the WebSlides files, you can create and view your presentations offline. However, please note that some features may not work offline, such as loading external images or fonts. To ensure that all features work correctly, it’s recommended to host your presentation on a web server.

How can I add transitions and animations to my WebSlides presentation?

You can add transitions and animations to your WebSlides presentation by using CSS. CSS allows you to control the appearance and behavior of elements on your slides, including transitions and animations. For example, you can use the transition property to animate the change of a property from one value to another, or you can use the animation property to create more complex animations.

Can I use WebSlides on mobile devices?

Yes, WebSlides is designed to be responsive and works well on both desktop and mobile devices. However, please note that due to the smaller screen size, some elements may not display as intended on mobile devices. It’s recommended to test your presentation on different devices to ensure that it looks and works well on all platforms.

How can I add navigation controls to my WebSlides presentation?

You can add navigation controls to your WebSlides presentation by using the built-in navigation options. You can add arrows to navigate between slides, or you can add a slide counter to show the current slide number and the total number of slides. This can be done by adding the appropriate HTML and CSS code to your slides.

Can I use WebSlides with other web development tools?

Yes, you can use WebSlides with other web development tools. For example, you can use it with a text editor to write your HTML and CSS code, or you can use it with a version control system like Git to manage your project files. You can also use it with a build tool like Gulp or Grunt to automate tasks like minifying your code or compiling your CSS.

I am a web developer/designer from Bulgaria. My favorite web technologies include SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, and React. When I'm not programming the Web, I love to program my own reality ;)

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

• No order here

Fantastic Ordered List

• One is smaller than...
• Two is smaller than...

Tabular Tables

Clever quotes.

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

• Right-to-left support
• Extensive JavaScript API
• Auto-progression
• Parallax backgrounds
• Custom keyboard bindings

- Try the online editor - Source code & documentation

Create Stunning Presentations on the Web

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an <iframe> or add your own custom behavior using our JavaScript API .

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support and syntax highlighted code .

Ready to Get Started?

It only takes a minute to get set up. Learn how to create your first presentation in the installation instructions !

Online Editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com . It's a fully-featured visual editor and platform for reveal.js, by the same creator.

Supporting reveal.js

This project was started and is maintained by @hakimel with the help of many contributions from the community . The best way to support the project is to become a paying member of Slides.com —the reveal.js presentation platform that Hakim is building.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

DEV Community

Posted on Jan 11, 2019

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Building beautiful presentations is hard. Often you're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

Today, we're going to learn how to create a stunning and animated presentation using HTML, CSS, and JavaScript.

If you're a beginner to web development, don't fret! This tutorial will be easy enough to keep up with. So let's slide right into it!

We're going to be using an awesome framework called Reveal.js . It provides robust functionality for creating interesting and customizable presentations.

• Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

• Change directories into your newly cloned folder and run npm install to download the package dependencies. Then run npm start to run the project.

The index.html file holds all of the markup for the slides. This is one of the downsides of using Reveal.js; all of the content will be placed inside this HTML file.

Built-In Themes

Reveal includes 11 built-in themes for you to choose from:

Changing The Theme

• Open index.html
• Change the CSS import to reflect the theme you want to use

The theme files are:

• solarized.css

Custom Themes

It's quite easy to create a custom theme. Today, I'll be using my custom theme from a presentation I gave called "How To Build Kick-Ass Website: An Introduction To Front-end Development."

Here is what my custom slides look like:

Creating A Custom Theme

• Open css/theme/src inside your IDE. This holds all of the Sass files ( .scss ) for each theme. These files will be transpiled to CSS using Grunt (a JavaScript task runner). If you prefer to write CSS, go ahead and just create the CSS file inside css/theme.
• Create a new  .scss file. I will call mine custom.scss . You may have to stop your localhost and run npm run build to transpile your Sass code to CSS.
• Inside the index.html file, change the CSS theme import in the <head> tag to use the name of the newly created stylesheet. The extension will be  .css , not  .scss .
• Next, I created variables for all of the different styles I wanted to use. You can find custom fonts on Google Fonts. Once the font is downloaded, be sure to add the font URL's into the index.html file.

Here are the variables I chose to use:

• Title Font: Viga
• Content Font: Open Sans
• Code Font: Courier New
• Cursive Font: Great Vibes
• Yellow Color: #F9DC24
• Add a  .reveal class to the custom Sass file. This will wrap all of the styles to ensure our custom theme overrides any defaults. Then, add your custom styling!

Unfortunately, due to time constraints, I'll admit that I used quite a bit of  !important overrides in my CSS. This is horrible practice and I don't recommend it. The reveal.css file has extremely specific CSS styles, so I should have, if I had more time, gone back and ensured my class names were more specific so I could remove the  !importants .

Mixins & Settings

Reveal.js also comes with mixins and settings you can leverage in your custom theme.

To use the mixins and settings, just import the files into your custom theme:

Mixins You can use the vertical-gradient, horizontal-gradient, or radial-gradient mixins to create a neat visual effect.

All you have to do is pass in the required parameters (color value) and voila, you've got a gradient!

Settings In the settings file, you'll find useful variables like heading sizes, default fonts and colors, and more!

The structure for adding new content is:

.reveal > .slides > section

The <section> element represents one slide. Add as many sections as you need for your content.

Vertical Slides

To create vertical slides, simply nest sections.

Transitions

There are several different slide transitions for you to choose from:

To use them, add a data-transition="{name}" to the <section> which contains your slide data.

Fragments are great for highlighting specific pieces of information on your slide. Here is an example.

To use fragments, add a class="fragment {type-of-fragment}" to your element.

The types of fragments can be:

• fade-in-then-out
• fade-in-then-semi-out
• highlight-current-blue
• highlight-red
• highlight-green
• highlight-blue

You can additionally add indices to your elements to indicate in which order they should be highlighted or displayed. You can denote this using the data-fragment-index={index} attribute.

There are way more features to reveal.js which you can leverage to build a beautiful presentation, but these are the main things which got me started.

To learn more about how to format your slides, check out the reveal.js tutorial . All of the code for my presentation can be viewed on GitHub. Feel free to steal my theme!

Top comments (19)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Oct 2, 2018

I really love reveal.js. I haven't spoken in a while so I haven't used it. I've always used their themes and never thought about making my own. This is probably super useful for company presentations, too. I'm SO over google slides. Trying to format code in those is a nightmare LOL

• Location Antibes, France
• Work Senior Software Engineer at Spotify
• Joined Oct 16, 2017

The best thing in this - and now I'm not being ironic - is that while you work on a not so much technical task - creating a presentation - you still have to code. And the result is nice.

On the other hand, I know what my presentation skills teachers would say. Well, because they said it... :) If you really want to deliver a captivating presentation, don't use slides at all. Use the time to prepare what you want to say.

I'm not that good - yet, but taking their advice, if must I use few slides, with little information on them and with minimal graphical distractions. My goal is to impress them by what I say, not is what behind my head.

I'm going to a new training soon, where the first day we have to deliver a presentation supported by slides at a big auditorium and the next day we have to go back and forget about the slides and just get on stage and speak. I can't wait for it.

• Location Stockholm
• Education Siena College
• Work Software Engineer at Spotify
• Joined Dec 21, 2018

Yeah it is time consuming, but the result is much better

• Location Lake Villa, IL
• Education Bachelor in Electronics Engineering
• Work Computer & Technology Enthusiast
• Joined Oct 8, 2017

How about github.com/team-fluxion/slide-gazer ?

It's my fourth attempt at creating a simple presentation tool to help one present ideas quickly without having to spend time within a presentation editor like Microsoft PowerPoint. It directly converts markdown documents into elegant presentations with a few features and is still under development.

• Email [email protected]
• Location New Delhi, India 🇮🇳
• Joined Dec 5, 2018

I think its a coincidence 😅 I was just starting to think to use reveal.js and suddenly you see this post 🤩

• Location Singapore
• Work Web Developer at FirstCom Solutions
• Joined Jan 15, 2019

Yup, RevealJS is awesome !

Previously I either used PPT or Google Slides. One is a paid license and the other requires an internet connection.

The cool thing about it is that since it's just HTML files behind the scenes, the only software you need to view it with is a web browser. Has amazing syntax-highlighting support via PrismJS. And as a web developer, it makes it simple to integrate other npm packages if need be...

I actually just used it to present a talk this week!

• Location Saratoga Springs,NY
• Education BA, University of Michigan
• Work Documentarian
• Joined Sep 7, 2018

Check out slides.com If you want to skip the heavy lifting and/or use a presentation platform based on reveal.js.

Everything is still easy to customize. The platform provides a UI to work from and an easy way to share your stuff.

BTW - I have no affiliation with slides.com, or even a current account. I used the service a few years back when I regularly presented and wanted to get over PowerPoint, Google Slides, Prezi, etc.

• Email [email protected]
• Location Indianapolis, IN
• Education Purdue University
• Pronouns he/him
• Work Senior Frontend Engineer at Whatnot
• Joined Aug 3, 2017

Great article, Emma! I love Reveal and this is a great write up for using it!

• Joined Feb 13, 2024

Thanks for sharing your experience! A business presentation is always done with the aim of conveying key information about your company, products or projects. Regardless of what is being presented or in what format, our goal during the presentation process is to effectively convey ideas about products or solutions. Nowadays, there are really cool advanced solutions for this purpose, such as the Q-NEX control system . This will help you with convenient remote control

• Location Palm Bay, FL
• Education FullSail University
• Work Developer Relations Manager at MetaMask
• Joined Sep 16, 2018

I like Reveal, but I still have not moved past using Google docs slides because every presentation I do has to be done yesterday. Hoping that I can use Reveal more often this year as I get more time to work on each presentation.

• Location Toronto, ON
• Education MFA in Art Video Syracuse University 2013 😂
• Work Cannot confirm or deny atm
• Joined May 31, 2017

Well I guess you get to look ultra pro by skipping the moment where you have to adjust for display detection and make sure your notes don’t show because you plugged your display connector in 😩 But If the conference has no wifi then we’re screwed I guess

• Email [email protected]
• Location Abuja Nigeria
• Work Project Manager Techibytes Media
• Joined Feb 19, 2019

Well this is nice and I haven't tried it maybe because I haven't spoken much in meet ups but I think PowerPoint is still much better than going all these steps and what if I have network connection issues that day then I'm scrolled right?

• Email [email protected]
• Joined Apr 16, 2018

Using Node and Soket.io remote control (meant to be used on phones) for my school's computer science club, it also features some more goodies which are helpful when having multiple presentations. It can be modded to use these styling techniques effortlessly. Feel free to fork!

SBCompSciClub / prez-software

A synchronized role based presentation software using node, prez-software.

TODO: Make system to easily manage multiple presentations Add Hash endocing and decoding for "sudo" key values TODO: Document Code

Run on Dev Server

npm i nodemon app.js Nodemon? - A life saving NPM module that is ran on a system level which automatically runs "node (file.js)" when files are modified. Download nodemon by running npm i -g nodemon

Making a Presentation

• Copy an existing presentation folder
• Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2)

Making a Slide

Making a slide is pretty simple. Just add a HTML section. <section> <!--slide content--> </section> inside the span with the class of "prez-root". Also keep in mind that you will need to copy and pate the markup inside the prez root to the other pages (viewer & controller).

Adding Text

You may add text however you desire, but for titles use the…

• Location Los Angeles
• Education Engineering, Physics, and Math
• Joined Sep 6, 2018

Fantastic post. I just loved it.

Awesome post! I’m glad I’m not the only one who likes libraries. 😎

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

The best testing strategies for frontends

Radu Brehar👨‍💻 - Apr 22

How to use Stable Diffusion 3 to generate a similar image.

Titus Efferian - Apr 22

Building a Better RAG: A Practical Guide to Two-Step Retrieval with LangChain

ahgsql - Apr 22

Understanding CSS Cascade, Selectors and Specificity

Nzeamalu Nkechinyere Tere-joe - Apr 22

We're a place where coders share, stay up-to-date and grow their careers.

jQuery Script - Free jQuery Plugins and Tutorials

10 best html presentation frameworks in javascript (2024 update), what is html presentation framework.

An HTML Presentation Framework helps you create a fullscreen web presentation to showcase your web content just like Apple Keynote and Microsoft PowerPoint.

It separates your HTML content into several fullscreen pages (slides) so that the visitors are able to navigate between these slides with certain operations (mouse wheel, arrow keys, touch events, etc).

The Best HTML Presentation Framework

You have been tasked with building an HTML5 presentation application, but where should you start? As there are many frameworks to choose from, it can be challenging to know where to begin.

In this post, we're going to introduce you the 10 best JavaScript HTML presentation frameworks to help developers generate professional, nice-looking presentations using JavaScript, HTML, and CSS. Have fun.

Originally Published Feb 2020, up date d Feb 27 2024

Table of contents:

• jQuery HTML Presentation Frameworks
• Vanilla JS HTML Presentation Frameworks

Best jQuery HTML Presentation Frameworks

Full page presentations with jquery and css animations.

A vertical full-page presentation app (also called fullscreen page slider) implemented in JavaScript (jQuery) and CSS animations.

[ Demo ] [ Download ]

jQuery Amazing Scrolling Presentation Plugin - scrolldeck

scrolldeck is a cool jQuery plugin that make it easier to create amazing scrolling presentation like Slide Animation s, Image Slides and parallax effects for your project.

Easy Dynamic Presentation Plugin In jQuery - Presentation.js

A jQuery-powered presentation plugin that allows users to create better professional-looking presentations, with awesome jQuery and/or CSS 3 animations.

jQuery Plugin To Create Amazing Presentations - mb.disclose

An awesome jQuery plugin that provides an amazing way to present Html contents in carousel like presentations. You can customize the CSS3 powered animations for each Html element using Html5 data-* attributes.

Responsive Web Presentation Plugin For jQuery - sectionizr

A really simple jQuery web presentation plugin which presents any html contents in a responsive, fullscreen, carousel-style page UI. Supports both horizontal and vertical scrolling.

Best Vanilla JS HTML Presentation Frameworks

Beautiful html presentation library - reveal.js.

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an iframe or add your own custom behavior using our JavaScript API.

Fullscreen Scrolling Presentation In JavaScript – Pageable

A lightweight JavaScript library to generate a fullscreen scrolling presentation where the users are allowed to scroll through sectioned pages with drag, swipe, and mouse wheel events.

Amazing Presentation Framework With CSS3 - impress.js

An amazing Presentation framework for modern bowsers. Based on CSS3 transforms and transitions. It doesn't depend on any external stylesheets. It adds all of the styles it needs for the presentation to work.

Slidev aims to provide the flexibility and interactivity for developers to make their presentations even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with.

When working with WYSIWYG editors, it is easy to get distracted by the styling options. Slidev remedies that by separating the content and visuals. This allows you to focus on one thing at a time, while also being able to reuse the themes from the community. Slidev does not seek to replace other slide deck builders entirely. Rather, it focuses on catering to the developer community.

Shower HTML presentation engine

Shower HTML presentation engine built on HTML, CSS and vanilla JavaScript. Works in all modern browsers. Themes are separated from engine. Fully keyboard accessible. Printable to PDF.

Conclusion:

There is no one right answer. The right presentation framework for you depends on your own project requirements, as well as your personal preferences. However, with the ten HTML presentation frameworks listed above to choose from, you are bound to find one that suits your specific needs.

Looking for more jQuery plugins or JavaScript libraries to create awesome HTML Presentations on the web & mobile? Check out the jQuery Presentation and JavaScript Presentation sections.

• 10 Best Mobile-friendly One Page Scroll Plugins
• Prev: Weekly Web Design & Development News: Collective #330
• Next: Weekly Web Design & Development News: Collective #331

You Might Also Like

10 Best JavaScript Plugins To Paginate Large HTML Table (2024 Update)

10 Best Mega Menu Systems In JavaScript And Pure CSS (2024 Update)

10 Best Rating Systems In JavaScript & Pure CSS (2024 Update)

10 Best Marquee-like Content Scrolling Plugins In JavaScript (2024 Update)

10 Best Tag Cloud Generators In JavaScript (2023 Update)

7 Best Github Style Calendar Heatmap Plugins In JavaScript

Add Your Review

WebSlides Demos

All of these presentations are free and responsive. 40+ components with a solid CSS architecture .

Share your slides using #WebSlides .

Why WebSlides?

General Questions

WebSlides Documentation: Components · Classes · Media .

Why WebSlides? Good karma

There're excellent presentation tools out there. WebSlides is about telling and sharing stories. Hypertext, clean code, and beauty as narrative elements.

Is WebSlides a framework?

We're all tired of heavy CSS frameworks. WebSlides is a starting point that provides basic structural components and a scalable CSS architecture .

What can you do with WebSlides?

WebSlides is a cute solution for making HTML presentations, landings, and portfolios. Put content wherever you want , add background images, videos ...

How easy is WebSlides?

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

Loved by designers and developers.

Some of the most famous brands are using WebSlides.

"WebSlides has pushed the keynotes to a new limit. Fantastic work!" Javi Pérez .

"I was immediately thrilled by the simplicity of WebSlides. This is absolutely great." Henrik Ståhl .

"Please make this a trend. The coolest thing I've seen so far in 2017." Austin Guevara .

Start in seconds

Create your own presentation instantly. 120+ premium slides ready to use.

Free Download Pay what you want.

• Ultimate Combo

• Sign Out Sign Out Sign In

36 Best Html-Themed Templates for PowerPoint & Google Slides

With over 6 million presentation templates available for you to choose from, crystalgraphics is the award-winning provider of the world’s largest collection of templates for powerpoint and google slides. so, take your time and look around. you’ll like what you see whether you want 1 great template or an ongoing subscription, we've got affordable purchasing options and 24/7 download access to fit your needs. thanks to our unbeatable combination of quality, selection and unique customization options, crystalgraphics is the company you can count on for your presentation enhancement needs. just ask any of our thousands of satisfied customers from virtually every leading company around the world. they love our products. we think you will, too" id="category_description">crystalgraphics creates templates designed to make even average presentations look incredible. below you’ll see thumbnail sized previews of the title slides of a few of our 36 best html templates for powerpoint and google slides. the text you’ll see in in those slides is just example text. the html-related image or video you’ll see in the background of each title slide is designed to help you set the stage for your html-related topics and it is included with that template. in addition to the title slides, each of our templates comes with 17 additional slide layouts that you can use to create an unlimited number of presentation slides with your own added text and images. and every template is available in both widescreen and standard formats. with over 6 million presentation templates available for you to choose from, crystalgraphics is the award-winning provider of the world’s largest collection of templates for powerpoint and google slides. so, take your time and look around. you’ll like what you see whether you want 1 great template or an ongoing subscription, we've got affordable purchasing options and 24/7 download access to fit your needs. thanks to our unbeatable combination of quality, selection and unique customization options, crystalgraphics is the company you can count on for your presentation enhancement needs. just ask any of our thousands of satisfied customers from virtually every leading company around the world. they love our products. we think you will, too.

Widescreen (16:9) Presentation Templates. Change size...

PPT theme with html inscription coming out from an open book digital technology concept

Presentation theme enhanced with printed internet html code - computer technology background

Slides consisting of printed internet html code technology background

Theme with html wit wooden letters and a red robot talking head on a wooden floor with reflection backdrop

PPT theme enhanced with printed internet html code - computer technology background backdrop

Slides enhanced with printed internet html code - computer technology background background

Presentation featuring html hypertext markup language word cloud on a digital tablet with a cup of coffee

Presentation design enhanced with printed internet html code - computer technology background backdrop

Slide deck consisting of hand holdig futuristic tablet with html inscription modern technology concept

PPT layouts enhanced with printed internet html code - computer technology background

Presentation design featuring html computer key

Slides consisting of female hands holding the text word for html in white capital letters isolated on a purple studio background background

Slide deck featuring businessman drawing colorful light bulb with html abbreviation new technology idea concept

Presentation theme enhanced with hand touching html inscription new technology concept

Slides with middle age latin man holding html paper message scared and amazed with open mouth for surprise disbelief face

PPT layouts with word html made with letters that are made of computer parts

PPT layouts having hand touching html inscription new technology concept

Slides with hand drawing html abbreviation with white chalk on blackboard background

Slide deck enhanced with hand drawing html abbreviation with white chalk on blackboard

Slide deck featuring hand drawing html abbreviation with white chalk on blackboard

Presentation theme enhanced with close-up of a hand holding tablet with html abbreviation modern technology concept

Slides having close-up of a hand holding tablet with html abbreviation modern technology concept

Theme having middle age latin man holding html paper message celebrating achievement with happy smile and winner expression with raised hand background

PPT layouts enhanced with html computer code used for web site design

Slide deck enhanced with female hand holding smartphone with html abbreviation modern technology concept

Presentation design with hand holdig futuristic tablet with html inscription modern technology concept

Presentation design having html hypertext markup language word cloud on a vintage slate blackboard

Presentation theme featuring close-up of a touchscreen with html abbreviation modern technology concept

PPT theme having html code on screen

PPT theme consisting of close-up of a hand holding tablet with html abbreviation modern technology concept

PPT theme consisting of magician is showing magic trick with html abbreviation modern tech concept

Presentation theme having magician is showing magic trick with html abbreviation modern tech concept

Slides enhanced with business man pointing to transparent board with text html 5

PPT layouts consisting of business man pointing to black board with text html 5

Presentation theme having html5

PPT layouts featuring blue html code on black screen

More html presentation templates.

Company Info

How TO - Slideshow

Learn how to create a responsive slideshow with CSS and JavaScript.

Slideshow / Carousel

A slideshow is used to cycle through elements:

Try it Yourself »

Create A Slideshow

Step 1) add html:, step 2) add css:.

Style the next and previous buttons, the caption text and the dots:

Advertisement

Step 3) Add JavaScript:

Automatic slideshow.

To display an automatic slideshow, use the following code:

Multiple Slideshows

Tip: Also check out How To - Slideshow Gallery and How To - Lightbox .

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Top searches

Trending searches

suicide prevention

8 templates

46 templates

tropical rainforest

29 templates

spring season

34 templates

american football

16 templates

32 templates

Create engaging presentations, faster

Free templates for google slides and powerpoint, or kick off your next project with ai presentation maker, create your presentation, writing tone, number of slides.

119 templates

Slidesclass

285 templates

Editor’s Choice

3089 templates

Interactive

336 templates

221 templates

315 templates

19 templates

388 templates

876 templates

416 templates

Presentation Maker

1208 templates

Teacher Toolkit

121 templates

2944 templates

Latest themes

Spring Equinox

Download the "Spring Equinox" presentation for PowerPoint or Google Slides and start impressing your audience with a creative and original design. Slidesgo templates like this one here offer the possibility to convey a concept, idea or topic in a clear, concise and visual way, by using different graphic resources. You...

Premium template

Unlock this template and gain unlimited access

Education Universe

Download the "Education Universe" presentation for PowerPoint or Google Slides. The education sector constantly demands dynamic and effective ways to present information. This template is created with that very purpose in mind. Offering the best resources, it allows educators or students to efficiently manage their presentations and engage audiences. With...

It's Spring Season

Download the "It's Spring Season" presentation for PowerPoint or Google Slides and start impressing your audience with a creative and original design. Slidesgo templates like this one here offer the possibility to convey a concept, idea or topic in a clear, concise and visual way, by using different graphic resources....

Today's Cartoon and Cozy Planner

Life can be easier with some organization! Now that you are comfortable at home and you have some free time, take the opportunity to organize your calendar. Put on some background music, make yourself a hot drink and dedicate a few hours to organize your daily taks. To make the...

Popular themes

World Environment Day

We know that taking care of the environment is of a paramount importance, and it is the perfect time of the year to encourage awareness and action for the protection of nature. Let’s teach our kids about the necessity of preserving nature with this cool template!

Minimalist Business Slides

Minimalism is an art style that frees the canvas and that lets the content stand out for itself. It’s a way of conveying modernism, simplicity and elegance and can be your best ally in your next presentation. With this new design from Slidesgo, your business presentations will be as professional...

World Mother Earth Day

It’s World Mother Earth Day, and everyone’s invited! If you’re in need of a template for this occasion, we have good news for you. This one right here is as good as it gets: with its design filled with shades of green and illustrations of vegetation, it’s super environmentally-conscious, and...

Elegant Bachelor Thesis

Present your Bachelor Thesis in style with this elegant presentation template. It's simple, minimalist design makes it perfect for any kind of academic presentation. With an array of features such as section dividers, images, infographics and more, you can easily create a professional and creative presentation that stands out from...

Minimal Charm

Are you looking for a monochromatic theme that is interesting at the same time? How about using a simple and clean theme, along with black-and-white pictures, to convey business or corporate content in a professional way?

Notebook Lesson

These are the last days before the Summer break! We know that there are some pending lessons that you need to prepare for your students. As they may be thinking about their friends and their holidays, catch their attention with this cool template!

Infographics

Creating Infographics

Download the "Creating Infographics" template for PowerPoint or Google Slides and discover the power of infographics. An infographic resource gives you the ability to showcase your content in a more visual way, which will make it easier for your audience to understand your topic. Slidesgo infographics like this set here...

Bar Graph Infographics

Download the "Bar Graph Infographics" template for PowerPoint or Google Slides and discover the power of infographics. An infographic resource gives you the ability to showcase your content in a more visual way, which will make it easier for your audience to understand your topic. Slidesgo infographics like this set...

Baseball Infographics

Download the "Baseball Infographics" template for PowerPoint or Google Slides and discover the power of infographics. An infographic resource gives you the ability to showcase your content in a more visual way, which will make it easier for your audience to understand your topic. Slidesgo infographics like this set here...

Education presentation templates

625 templates

486 templates

96 templates

673 templates

798 templates

2523 templates

Thesis Defense

621 templates

322 templates

618 templates

35 templates

Interactive & Animated

Athletics Newsletter

Download the "Athletics Newsletter" presentation for PowerPoint or Google Slides. Attention all marketers! Are you looking for a way to make your newsletters more creative and eye-catching for your target audience? This amazing template is perfect for creating the perfect newsletter that will capture your audience's attention from the get-go....

Creative and Bold Theme for Marketing

Download the "Creative and Bold Theme for Marketing" presentation for PowerPoint or Google Slides and take your marketing projects to the next level. This template is the perfect ally for your advertising strategies, launch campaigns or report presentations. Customize your content with ease, highlight your ideas and captivate your audience...

Mathematical Challenge. Three-digit Numbers. GBL

Download the "Mathematical Challenge. Three-digit Numbers. GBL" presentation for PowerPoint or Google Slides and teach with confidence. Sometimes, teachers need a little bit of help, and there's nothing wrong with that. We're glad to lend you a hand! Since Slidesgo is committed to making education better for everyone, we've joined...

What's new on Slidesgo

See the latest website updates, new features and tools and make the most of your Slidesgo experience.

Make presentations with AI

Start with a mic drop, end with a high five: Make lessons easily cool with AI icebreaker generator and exit ticket

Work faster, teach better: boost your skills with Slidesgo Academy

Browse by tags.

• Kids 1525 templates
• Food 770 templates
• Technology 803 templates
• Travel 333 templates
• Animal 800 templates
• Art 618 templates
• Health 3104 templates
• History 1029 templates
• Environment 381 templates
• Galaxy 151 templates
• Fashion 203 templates
• Biology 348 templates
• Summer 135 templates
• Architecture 120 templates
• Music 321 templates
• Research 1250 templates
• Culture 1706 templates
• Background 7545 templates
• Back to School 164 templates
• Coloring Page 352 templates

What do our users say about us?

I just wanted to thank you! I learned more about slides in one day of quarantine than in my whole life

Gabriela Miranda

Your slides are so unique and gorgeous! They really help me with PowerPoint presentations for school and now even my mom uses them for work

Marie Dupuis

I would like to thank to you for these amazing templates. I have never seen such service, especially free! They are very useful for my presentation.

Ali Serdar Çelikezen

Thank you Slidesgo for creating amazing templates for us. It's made my presentation become much better.

Thiên Trang Nguyễn

Register for free and start editing online

• 400+ Features
• Website Templates
• Website Designs
• WordPress Themes
• Joomla Templates
• HTML Templates
• HTML Website Builder
• WordPress Website Builder
• Joomla Page Builder
• Video Tutorials
• Documentation
• Contact Support

Block Types

• Presentation

Presentation HTML Templates

• Newest & Popular

• Free Website Builder Software Download

• Customize Any Template Download

• Create your own Website Download

• Build Website with no Coding Download

Other Business & Law HTML Templates

• Terms of Use
• Privacy Policy
• License Agreement

Themes & Templates

• CSS Templates
• HTML5 Templates
• One Page Templates
• Website Builder
• WYSIWYG HTML Editor
• Static Site Generator
• HTML Code Generator
• Web Page Designs
• Landing Pages
• Homepage Designs
• Website Mockup

You are going to love Haiku Deck Professional

You’ve reached your account limit.

Download PRO feature Learn More About Downloading Decks

EDITABLE PPTX

Are you sure?

Are you sure you want to delete

(deck title)

Premium Theme Alert

This deck uses a premium theme which is still under construction.

Click CONVERT THEME to open in the Web App in a different theme. Click CANCEL and edit on your iPad to keep your theme intact.

• Featured Decks
• Popular Decks
• Science and Technology
• Travel and Lifestyle
• Art and Design
• Inspiration
• Presentation Templates and Topics

Events Presentation Templates

Presentations created 23 april 2024.

No presentations found. Try browsing other dates below.

Dates are GMT

Browser not supported

Sorry, your browser is not supported. Please update your browser in order to use Haiku Deck.

• Download Chrome
• Download Safari
• Download IE 11+

BROWSER UPDATE REQUIRED

It looks like you're running an older version of Firefox than we support. Please update to version 23 or later to use the Haiku Deck Web App.

Update Firefox

Device not yet supported

We’re working on adding support for your device -- thanks for your patience!

In the meantime, Haiku Deck is available for Chrome or Safari on your Mac or Windows Computer. Or, use Haiku Deck on the iPad.

Are you sure you want to cancel your subscription?

Your account will be downgraded to Basic at the end of your current billing period.

• Translate files and templates
• Adobe Express User Guide
• Adobe Express overview
• What's new in Adobe Express
• Adobe Express system requirements
• Adobe Express keyboard shortcuts
• Adobe Express FAQ
• Known issues in Adobe Express
• Adobe Express free trial FAQ
• Progressive Web App
• Add the Adobe Express browser extension

Frequently asked questions

• System requirements
• Known issues
• Migrate files
• Create images with generative AI
• Create text effects with generative AI
• Insert objects using Generative Fill
• Remove objects using Generative Fill
• Generate editable templates using generative AI
• Create and edit videos
• Explore templates
• Collaborate and comment
• Schedule and publish social media posts
• Work with Adobe Photoshop and Adobe Illustrator assets
• Create and manage brands
• Work with Adobe Photoshop and Adobe Illustrator creative assets
• Import and enhance PDFs in Adobe Express
• Getting started with Adobe Express templates
• Create a new template from scratch
• Create a web page using Adobe Express
• Add multiple pages in Adobe Express
• Create a video using Adobe Express
• Find and submit Adobe Stock Content ID
• Animate texts and photos using Adobe Express
• Import color themes from Adobe Color
• Work with layers
• Use ChatGPT to discover Adobe Express Templates
• Import a PowerPoint file
• Explore presentation templates
• Manage pages
• Present a design
• Add a background image to your design
• Remove backgrounds for videos with ease
• Replace page backgrounds from images            
• Generate an image from text using generative AI
• Generate text effects using generative AI
• Insert or replace objects in an image with Generative fill
• Remove objects from an image using Generative fill
• Generate editable templates using Text to template (Beta)
• Create a brand
• Manage shared brands
• Custom fonts
• Creative Cloud Libraries
• Lock and unlock elements in designs
• Set brand style controls on templates
• Create from a shared template
• Apply brand colors
• Content Scheduler overview
• Connect social media accounts
• Generate social captions with AI
• Best practices for writing social captions in Content Scheduler
• Media specifications for social media posts
• Resize image using Quick Actions
• Remove background from images using Quick Actions
• Convert file format of images using Quick Actions
• Crop an image using Quick Actions
• Animate a character from audio
• Add captions to videos using Quick actions  
• Trim videos using Quick Actions
• Resize a video using Quick Actions
• Convert to GIF from a video using Quick Actions
• Convert videos to MP4 using Quick Actions
• Crop a video using Quick Actions
• Merge videos and images using Quick Actions
• Convert to or from PDF using Quick Actions
• Edit PDF text and images using Quick Actions
• Combine files into a single PDF using Quick Actions
• Organize Pages into a single PDF using Quick Actions
• Generate QR code using Quick Actions
• Quick Actions FAQ
• Collaborate and comment in Adobe Express
• Host a project using Adobe Express
• Copy files between accounts
• Privacy and permissions
• Adobe Express for iOS
• Adobe Express for Android
• Manage Adobe Express subscriptions on iOS
• Manage Adobe Express subscriptions on Android
• Manage Adobe Express subscriptions on Samsung Galaxy Store
• Draw with brushes
• Adobe Express for Education FAQ
• Adobe Express for Education Teachers FAQ
• Adobe Express for Education Students FAQ
• Adobe Express for Education onboarding FAQ
• Missing icons in Adobe Express mobile app FAQ

Translate files in Adobe Express in just a few clicks.

You can eliminate the need for manual translations and the hassles of external translation tools by efficiently translating the text on single and multiple-page files into your choice of 46 languages. Furthermore, you can use the extensive collection of English templates by translating the text into your preferred languages.

Translate is a premium feature and is available for free only for a limited period of time.

Try it in app Translate files and templates in a few simple steps.

Translate content

Open a file or template that you want to translate into other languages in Adobe Express. Inside the editor, select Translate at the top of the page.

The From dropdown within the Translate page panel automatically detects the source language. Open the To dropdown and select one or more target languages.

Select Duplicate & translate .

How does the Translate feature work?

The Translate feature automatically recognizes the language you've written in and provides a translation. This feature is powered by Google Translate, a third-party engine.

The source language detected does not match the language on my file. What should I do?

If the auto-detected language does not match your file/template, manually select the source language in the From dropdown.

What languages can I translate to?

Translate is available in the following languages: Armenian, Bengali, Catalan, Chinese simplified, Chinese traditional, Croatian, Czech, Danish, Dutch, English, Filipino, Finnish, French, German, Greek, Gujarati, Haitian Creole, Hindi, Hungarian, Indonesian, Italian, Japanese, Kannada, Kazakh, Korean, Macedonian, Malay, Malayalam, Norwegian, Polish, Portuguese, Punjabi, Romanian, Russian, Serbian, Slovak, Slovenian, Spanish, Swedish, Tamil, Telugu, Thai, Turkish, Ukrainian, Vietnamese, and Welsh.

Is there a maximum limit to the number of languages I can translate to, per translation?

Yes, the current limit is 20 languages per translation. 

Is there a maximum character limit when translating?

Yes, the current limit is 30K characters per translation action. If you reach the limit, try translating fewer characters. 

Will the font of my text change after translation? 

We automatically set a default font for the target language. You can change the font via font recommendation or from the font picker inside the Text panel. 

More like this

• Get started with Adobe Express templates

Got a question or an idea?

Get help faster and easier

Quick links

Legal Notices    |    Online Privacy Policy

Share this page

Language Navigation

• Using Performance Management

How You Configure Questionnaire Templates

This topic describes how questionnaire template options determine the features of questionnaires. After creating a questionnaire from a template, you can override or change some of these options in the questionnaire.

To create a questionnaire, go to the Setup and Maintenance work area, and select these options:

Setup: Workforce Development

Functional Area: Questionnaires

Task: Questionnaire Templates

Click Create in the Questionnaire Templates page that appears.

Questionnaire Scoring and Calculation Rules

You can select Score Questionnaire to configure the questionnaire to calculate scores based on responses. Questionnaires made from the template can then be scored. However, it's not always necessary that a questionnaire created from a scored template has to be scored. To score a questionnaire, you must also select the overall score calculation rule that specifies the formula used to calculate scores.

If you edit the template and deselect Score Questionnaire , existing questionnaires created from the template aren't affected. Only questionnaires created in the future from the template aren't scored.

Section Presentation and Order

A questionnaire has at least one section. You can use sections to group questions by type or category, for example.

The Section Presentation option controls how the questionnaire uses sections. This table describes the Section Presentation values.

The Section Order option controls section order. This table describes the Section Order values.

You can specify whether questionnaires based on this template can override these values.

Allowed Response Types

The Allowed Response Types controls the types of questions that are included in a questionnaire template. However, this doesn't limit users from adding questions with other response types to a questionnaire created from this template.

The Allow Additional Questions option controls whether authorized users can add questions in the subscriber application. For example, for performance documents, that could be managers or workers.

If you select the Required option, then respondents must answer all questions in the section.

Question and Response Order

The Question Order and Response Order values control the order that questions and possible responses appear to a respondent. Response order only applies to single-choice and multiple-choice questions, which contain a list of responses.

This table describes the Question Order and Response Order values.

You can override the default values of these options for individual sections. You can also specify whether questionnaires based on this template can override these values.

Questions and Responses in Sections

In the Questions section, you manage questions for a selected section. You can:

Add questions from the question library. You can change the response type for these questions after adding them to the template.

Create questions, either those that are scored, or aren't. Questions you create become part of the question library. You must also add the question to the section after creating it from the section.

Edit questions. Your edits are also reflected in the question library.

Remove questions.

Change question order by dragging them in the section. Questions appear in this order in the questionnaire if question order is Vertical for the section

If the section itself isn't required, then you can mark individual questions as required. Otherwise, respondents must answer all questions.

As the final step, you can review the sections, questions, responses, response feedback, and test scoring, before saving the questionnaire template.

• Share full article

The 10 Best Things We Saw at Salone del Mobile

From an exhibition in a 1940s-era Modernist house to a blood-red sofa, the highlights of Milan’s annual design fair.

A Mario Bellini for Tacchini Le Mura sofa remade in Gucci’s new signature shade of red, Ancora Rosso, on view in the fashion brand’s Milan flagship store. Credit... Courtesy of Gucci

Supported by

By Monica Khemsurov

• April 19, 2024

The annual Salone del Mobile furniture fair has always been big — it’s the event of the year for the international design world, drawing hundreds of thousands of makers, curators, editors and buyers to Milan each April for a week’s worth of inspiration, shop talk and aperitivi. Even more so than fashion week, the fair consumes the city. But this year’s edition seemed to buzz with a new level of excitement, with more people from outside the design industry joining the throngs and hourlong lines forming outside events like the launch of the French luxury brand Hermès’s interiors collection, the annual installation by the Milanese architecture firm Dimorestudio and the satellite fair Alcova’s takeover of the Modernist architect Osvaldo Borsani’s former home — this despite the house being a 45-minute drive north of the city center. Luckily, there were so many interesting presentations on view that braving the crowds felt well worth it. Here, 10 standouts.

Formafantasma’s Floral Chairs and Futuristic Lights

One of the most talked-about openings of the week was the Milan-based design duo Formafantasma’s solo show at the Fondazione ICA Milano, for which the pair — Andrea Trimarchi and Simone Farresin — drew on memories of their childhood homes in Italy to create surprising hybrid chairs and lamps that pair steel armatures with colorful wood, frilly fabrics and hand-painted or embroidered floral motifs. The aesthetic was institutional furniture meets Italian grandma’s house. Formafantasma also debuted a new series of utilitarian but delicate lights for Flos made from LED strips enclosed in thick glass panels.

A New Furniture Line From Dimorestudio

Once people began posting photos on social media of the launch of Interni Venosta, a new furniture brand from Britt Moran and Emiliano Salci, the founders of Dimorestudio, the line’s exhibition quickly became a must-see — partly for its pairing of bold minimalist forms with luxe materials like walnut and steel, and partly because it was presented in an extremely photogenic local plaster workshop. The brand’s name pays homage to the cult Italian designer Carla Venosta, who created modernist furniture and interiors in the 1970s and ’80s.

Gucci’s Blood-Red Design Icons

Having recently redone part of Gucci’s Milan flagship store entirely in a deep oxblood red, the brand’s creative director, Sabato De Sarno, partnered with five Italian design companies to reimagine some of their classic pieces in the house’s new signature color, Ancora Rosso. The lineup, installed for the week on the store’s second floor — inside a lime-green carpet maze created by the Spanish designer Guillermo Santomà — included Gae Aulenti and Piero Castiglioni’s Parola lamp, Nanda Vigo’s Storet cabinet, Mario Bellini’s Le Mura sofa, Tobia Scarpa’s Opatchi vase and a new rug created by Nicolò Castellini Baldissera based on motifs by his great-grandfather Piero Portaluppi. Each item will be produced in a limited edition of 100.

A Takeover of a Modernist Architect’s Fomer Home

Since its inception in 2018, the Alcova satellite fair has become the place to discover new talent during Salone. This year, it occupied two historic mansions outside the city: the 19th-century Villa Balgatti Valsecchi and the 1945 Villa Borsani. The latter venue, the former residence of the architect Osvaldo Borsani, was the hotter ticket and featured pieces like a two-tone wood room divider by Anthony Guerrée for Atelier de Troupe, a family of marble tables with columnar legs by Agglomerati and Tino Seubert and a suite of galvanized-steel office furniture by the Russian designer Supaform, which was exhibited in Borsani’s onetime home office.

A Dispatch From the Americas

Hidden down a long, dark hallway directly next door to Hermès’s big Salone presentation was “Origen,” a comparatively understated show of works by four up-and-coming Latin American(-ish) designers for the New York- and Mexico City-based Unno Gallery. Among the pieces on display were brown lacquer desks and shelves with reverse-waterfall legs by Mark Grattan, an American designer who was based in Mexico City for many years, and a series of glittering stools and mirrors, covered in crushed iridescent seashells, by the Colombian designer Andrea Vargas Dieppa (a co-founder of the 2010s-era shoe brand Dieppa Restrepo).

Unusual Lamps Commissioned by Loewe

For its eighth and biggest Salone exhibition, the Spanish luxury house Loewe commissioned 24 artists and designers from around the world to create lamps in materials and styles of their own choosing. The results range from the futuristic (a tangle of neon tubes by the London-based artist Cerith Wyn Evans) to the eccentric (a miniature storefront with metal shutters and a pull cord by the London-based painter Alvaro Barrington) to the rustic (an ancient-looking ceramic vessel punched with holes, and lit from within, by the Japanese artist Kazunori Hamana).

Interesting Beds From a Georgian Design Duo

Eye-catching beds are a true rarity in the design world, which is why there was so much interest this week in an exhibition of six of them, all produced by the Tbilisi, Georgia-based firm Rooms Studio — founded by Nata Janberidze and Keti Toloraia — in materials ranging from chunky wood to thin steel tubes with steer-head finials. The design duo were inspired to focus on the oft-overlooked category by their struggles to source great bed frames for their own interiors projects.

Dolce & Gabbana’s Next Generation of Design Talents

The Italian fashion brand Dolce & Gabbana’s second annual Gen D project reflects the company’s commitment to supporting young talent both within and beyond the fashion world. For the ambitious group exhibition, the house enlisted the Italian curator Federica Sala to pair 10 international designers with sixteen Italian craft workshops. Among the resulting pieces are interesting stylistic and cultural mash-ups like the Chinese designer Jie Wu’s wild, squiggly vessels, which feature Chinese and Sicilian good-luck motifs and are coated in classical Venetian enamel.

Close-up Photographs of Modernist Interiors

In a simple but memorable exhibition mounted in one of the tunnels that flanks Milan’s central train station, the Czech writer, curator and photographer Adam Štěch — along with his colleagues Matěj Činčera and Jan Kloss — displayed over 3,000 photos of details from famed Modernist homes and buildings. In shooting the photos, which he’s shared on his Instagram account, @okolo_architecture , over the years, Štěch focused on interiors and furnishings that were custom-made for each project by their architects. It was easy to get lost in the show, poring over doorknobs, stair rails and lamps from around the world.

A Circular Ping-Pong Table

The exhibition “Design Duo Double Feature,” also curated by Federica Sala, was a thoughtful example of a materials brand commissioning designers to show off the potential of its products: The six pieces in the show were all made from the acrylic-resin surface material Fenix and designed by up-and-coming Italian studios like Cara \ Davide, Mist-O and Zanellato/Bortotto. A standout was the Match table by Martinelli Venezia, a circular two-tone Ping-Pong table whose “net” is formed from a tenting of its top.

Explore T Magazine

A Party In Milan:  To toast the Salone del Mobile and the 20th anniversary of T Magazine , the designer Ramdane Touhami transformed the Villa Necchi Campiglio into an ode to the letter T.

A Beloved Copenhagen Cafe:  The chef Frederik Bille Brahe has transformed the Apollo Bar & Kantine into his version of a fine dining restaurant , and celebrated with a meal for his family and collaborators.

The Beginners Issue:  From debuts to do-overs, what it means to start an artistic life  — at any age

We Saw at Salone del Mobile:  From an exhibition in a 1940s-era Modernist house to a blood-red sofa , these were the highlights of Milan’s annual design fair.

Hawaii’s Favorite Shave Ice Shops:  Cups of flaky ice topped with flavored syrups are easy to find in the state. But the best shops set themselves apart with fresh ingredients  and old-school charm.

Ellen Gallagher’s Futuristic Archives:  In an interview, the artist discussed marine life  and African American myth from her studio in the Netherlands.

Advertisement

• elnasrtrade.com
• Meun 2024-04-24 2024-04-23 2024-04-22 2024-04-21 2019-11-29 2020-10-24 2020-09-26 2019-06-17 2020-04-06
• About Us Terms of Use Privacy & Cookie Policy Contact Us Site Map
• Log In Sign up

100+ Best Business Strategy PowerPoint (PPT) Templates for Presentations for 2024 - SlideSalad

© 2014-2024  elnasrtrade.com. Inc. or its affiliates.

KPMG Personalization

• India - Mauritius tax treaty update

Protocol to amend double taxation avoidance agreement (DTAA) that includes a principal purpose test rule

Protocol to amend double taxation avoidance agreement (DTAA) that includes a PPT

• Home ›
• Insights ›

India and Mauritius have signed a protocol to amend their double taxation avoidance agreement (DTAA) that includes a principal purpose test  (PPT) rule to align with global efforts against treaty abuse, particularly under the BEPS Action 6 framework.

The application of the PPT may also extend to pre-April 2017 investments that were otherwise grandfathered, unless clarified. With the change, the benefits of the tax treaty can be denied by the tax authorities if one of the principal purposes of the transaction/arrangement is to obtain a tax benefit.

Historically, Mauritius was a preferred jurisdiction for engaging in investments in India due to the non-taxability of capital gains until 2016 when the countries signed a revised tax agreement, giving India the right to tax capital gains in India on transactions in shares acquired through the island nation on and after 1 April 2017.

The protocol takes effect upon both countries notifying each the other the completion of the procedures required by law to bring it into force.  

For more information, contact any member of the KPMG Sovereign Wealth and Pension Funds Tax team, including:

Anjani Sharma | [email protected]

The KPMG name and logo are trademarks used under license by the independent member firms of the KPMG global organization. KPMG International Limited is a private English company limited by guarantee and does not provide services to clients. No member firm has any authority to obligate or bind KPMG International or any other member firm vis-à-vis third parties, nor does KPMG International have any such authority to obligate or bind any member firm. The information contained herein is of a general nature and is not intended to address the circumstances of any particular individual or entity. Although we endeavor to provide accurate and timely information, there can be no guarantee that such information is accurate as of the date it is received or that it will continue to be accurate in the future. No one should act on such information without appropriate professional advice after a thorough examination of the particular situation. For more information, contact KPMG's Federal Tax Legislative and Regulatory Services Group at: + 1 202 533 3712, 1801 K Street NW, Washington, DC 20006.