# Get Started

Slides is a simple-to-use HTML5/CSS3/jQuery template. To get started: Download your copy of Slides from your [Designmodo Account](https://designmodo.com/my-account/downloads/) and unpack an archive. Upload the contents to the root folder of your website or any folder you like.

## File Structure

```
slides/
├─ index.html
├─ css/
│  ├─ slides.min.css
│  └─ slides-customized.min.css // If you have changed the default colors
├─ js/
│  └─ slides.min.js
└─ assets/
   ├─ img/
   └─ svg/
```

## Basic Template <a href="#basic-template" id="basic-template"></a>

{% code title="index.html" %}

```markup
<!doctype html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

   <!-- Page title -->
   <title>Slides Project</title>

   <!-- Fonts and Material Icons -->
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Material+Icons&display=swap" rel="stylesheet" type="text/css">

   <!-- Styles -->
   <link href="css/slides.min.css" rel="stylesheet" type="text/css">

   <!-- Scripts -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" name="jquery"></script>
   <script src="js/slides.min.js" type="text/javascript" name="main-scripts"></script>
   <!-- Your SVG Library -->
   <link rel="preload" href="assets/svg/icon-set.svg" as="image" type="image/svg+xml" crossorigin>
</head>
<body class="slides">

  <!-- Place your Slides below -->

</body>
</html>

```

{% endcode %}

Your [slides](/manual/slides.md), [navigation](/manual/navigation.md), [popups](/manual/components.md#popup) and [panels](/manual/panels.md) should be placed inside the `<body> </body>` tags.

**Notice:** If you want to use a template from the templates folder as the main page located in a root folder, don't forget to remove the `<base>` tag from `<head>`.

## Keep Updated <a href="#keep-updated" id="keep-updated"></a>

Slides is very easy to customize. Just keep your changes separate from the Slides files so your files are protected when Slides is updated in the future.

### Custom Styles and Scripts <a href="#custom-styles" id="custom-styles"></a>

All CSS styles and JS scripts from the Slides App automatically merged into `/css/custom.css, /css/slides-customized.css` and `/js/custom.js files`. These files are also included into your page HTML code.&#x20;

```html
<!doctype html>
<html>
<head>
   ...
   <!-- Styles -->
   <link href="css/slides.min.css" rel="stylesheet" type="text/css">
   <!-- Custom Styles -->
   <link href="css/custom.css" rel="stylesheet" type="text/css">
   ...
<body class="slides">
   <!-- Your slides are here -->
   ...
   <!-- Compressed Scripts -->
   <script src="js/slides.min.js" type="text/javascript"></script>
   <!-- Custom Scripts -->
   <script src="js/custom.js"></script>
</body>
</html>
```

## Minified Version <a href="#minified-version" id="minified-version"></a>

The minified styles and scripts are included into your page by default. You can find a normal version of styles and scripts in the downloaded archive with sources.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://slides.gitbook.io/manual/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
