ALES.FR

HTML et Foundation Elements

Le maire, ses adjoints et l'ensemble des conseillers municipaux

Heading 1

This is a test paragraph.

This is a test paragraph.

Heading 2

This is a test paragraph.

This is a test paragraph.

Heading 3

This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph.This is a test paragraph. This is a test paragraph. This is a test paragraph.

Heading 4

This is a test paragraph.

This is a test paragraph.

Heading 5

This is a test paragraph.

This is a test paragraph.

Heading 6

This is a test paragraph.

This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph.This is a test paragraph. This is a test paragraph. This is a test paragraph.


Paragraph

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. H20 Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero 1er nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. H20 Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero 1er nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

  • This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph.
  • This is a test paragraph. This is a test paragraph. This is a test paragraph.
    This is a test paragraph.
  • This is a test paragraph. This is a test paragraph. This is a test paragraph.
  • This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph.

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. H20 Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero 1er nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

This is a div element. Authors may use such elements instead of paragraph markup for various reasons. (End of div.)

Les encadrés de la Rédac’

Un titre en H6 ou H5
Texte alt 2

Légende 2 Légende 2 Légende 2 Légende 2 Légende 2 Légende 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas maximus lacinia ex, nec imperdiet sem molestie at. Phasellus fermentum, nunc in posuere volutpat, felis enim viverra lorem, at feugiat sem velit quis dui. Fusce lacus augue, faucibus non ligula sed, tristique consectetur leo. Nullam volutpat et nulla in fermentum. Nulla ac enim vestibulum, placerat ipsum et, consectetur elit. Vestibulum sit amet molestie nibh. In et egestas quam. Sed ut mollis mauris. Maecenas sed tempus diam, nec eleifend quam. Suspendisse nec accumsan neque. Praesent non dolor nisi. Duis euismod mollis maximus. Integer vitae odio in purus mattis malesuada eget dignissim tellus.

Sed varius sem lorem, quis porta ligula maximus sit amet. Duis nunc dolor, sollicitudin vitae nisl et, euismod tempor sem. Quisque et dictum libero. Mauris consectetur lorem in augue feugiat congue. Nulla facilisi. Duis semper nisl mi. Nulla vel neque a lacus viverra rutrum id et orci. Ut egestas justo et maximus hendrerit. Nunc sed lacinia risus. Sed malesuada eleifend sem, vel dictum odio ultrices eget. Sed pharetra rutrum lectus, at interdum elit cursus eget. Nullam scelerisque et nulla vitae pellentesque.


Misc Stuff – abbr, pre, sub, sup, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Balise pre

L’élément abbr représente une abréviation et permet, de façon optionnelle, d’en fournir une description complète. J’écris du HTML.

L’élément del représente une portion de texte ayant été supprimée d’un document. Ce texte a été supprimé. mais pas celui-ci.

L’élément ins représente un fragment de texte qui a été ajouté dans un document. Le texte Ce texte a été ajouté original.

dfn est une balise qui représente la définition d’un terme.

L’élément em (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister.

L’élément strong est utilisé afin de donner de l’importance à un texte, cela se traduit généralement par un affichage en gras.

L’élément mark est utilisé pour mettre en avant du texte pertinent dans le contexte.

L’élément small permet de représenter des commentaires ou des textes à écrire en petits caractères (des termes d’un contrat, des mentions relatives au droit d’auteur, etc.) quelle que soit la présentation. © tous droits réservés

L’élément sub est utilisé, pour des raisons typographiques, afin d’afficher du texte en indice (plus bas et généralement plus petit) par rapport au bloc de texte environnant. La molécule d’eau est symbolisée par H2O.

L’élément sup est utilisé, pour des raisons typographiques, afin d’afficher du texte en exposant (plus haut et généralement plus petit) par rapport au bloc de texte environnant. Voici la fonction exponentielle : ex.

L’élément u permet d’afficher un texte souligné. Le plat du jour : Saumon

L’élément code représente un fragment de code machine. Par défaut, le navigateur utilise une police à chasse fixe (monospace) afin d’afficher le texte contenu dans cet élément. Texte normal. Voici comment déclarer une variable en JavaScript : var i = 0; Texte normal.

L’élément var représente une variable dans une expression mathématique ou un texte lié à la programmation. Une équation simple : x = y + 2

L’élément kbd représente la saisie d’un utilisateur et produit un élément en ligne affiché avec la police à chasse fixe du navigateur. Enregistrez le document en appuyant sur Ctrl + S

Ceci est une citation issue du Mozilla Developer Network… L’élément blockquote (qui signifie bloc de citation) indique que le texte contenu dans l’élément est une citation longue. Le texte est généralement affiché avec une indentation. Une URL indiquant la source de la citation peut-être grâce à l’attribut cite tandis qu’un texte représentant la source peut-être donnée via l’élément cite.


Text-level markup

  • large size (font size=6 markup used)
  • Courier font (font face=Courier markup used)
  • red text (font color=red markup used)
  • Hello! (q markup used for quotation)
  • Chaque fois que Kenny est tué, Stan dira Oh mon Dieu, ils ont tué Kenny !. q indique que le texte qu’il contient est une citation en incise. Cet élément est destiné aux citations courtes qui ne nécessitent pas de sauts de paragraphe. Pour les plus grandes citations, on utilisera l’élément blockquote.
  • 1st, and then some mathematical notations: ex, sin2 x, and some nested superscripts (exponents) too: ex2 and f(x)g(x)a+b+c (where 2 and a+b+c should appear as exponents of exponents).

Links


Adresse

L’élément HTML address, pour l’adresse, devrait être utilisé par les auteurs pour fournir une information de contact

Jukka Korpela, jkorpela@cs.tut.fi
Päivänsäteenkuja 4 A, Espoo, Finland

Character test

The following table has some sample characters with annotations. If the browser’s default font does not contain all of them, they may get displayed using backup fonts.

This may cause stylistic differences, but it should not prevent the characters from being displayed at all.

Char. Explanation Notes
ê e with circumflex Latin 1 character, should be ok
em dash Windows Latin 1 character, should be ok, too
Ā A with macron (line above) Latin Extended-A character, not present in all fonts
Ω capital omega A Greek letter
minus sign Unicode minus
diameter sign relatively rare in fonts

This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph.This is a test paragraph. This is a test paragraph. This is a test paragraph.


Unordered list

  • List item with a much longer description or more content. List item with a much longer description or more content.
    List item with a much longer description or more content. List item with a much longer description or more content. List item with a much longer description or more content. List item with a much longer description or more content
  • List item
  • List item
    • List item with a much longer description or more content. List item with a much longer description or more content.
      List item with a much longer description or more content. List item with a much longer description or more content. List item with a much longer description or more content. List item with a much longer description or more content
    • List item with a much longer description or more content. List item with a much longer description or more content.
      List item with a much longer description or more content. List item with a much longer description or more content. List item with a much longer description or more content. List item with a much longer description or more content
    • Nested list item
  • List item
  • List item
  • List item

Ordered list

  1. List item with a much longer description or more content.
  2. List item
  3. List item
    1. Nested List Item
    2. Nested List Item
    3. Nested List Item
  4. List item
  5. List item
  6. List item

Mixed

  • List item with a much longer description or more content.
  • List item
  • List item
    1. Nested list item
    2. Nested list item
    3. Nested list item
  • List item
  • List item
  • List item
  1. List item with a much longer description or more content.
  2. List item
  3. List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
      1. Nested List Item
      2. Nested List Item
      3. Nested List Item
        1. Nested List Item
        2. Nested List Item
        3. Nested List Item
          • Nested list item
          • Nested list item
          • Nested list item
    • Nested List Item
    • Nested List Item
  4. List item
  5. List item
  6. List item

Definition list

L’élément HTML dl représente une liste de descriptions sous la forme d’une liste de paires associant des termes et leurs descriptions ou définitions. On utilisera par exemple cet élément pour implémenter un glossaire.

Firefox
Un navigateur Web libre, open-source, multi-plateforme dévelopé par la Mozilla Corporation et des centaines de volontaires.


Details & Summary

 

 

 

 

Question 1

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Related documents
Question 2

Duis consequat metus et eros rutrum, interdum facilisis urna interdum. Etiam facilisis diam in libero varius ultricies id id est. Sed lacinia pellentesque sem vel sagittis.

 

 

 

 


Blockquote

La règle d’or de la conduite est la tolérance mutuelle, car nous ne penserons jamais tous de la même façon, nous ne verrons qu’une partie de la vérité et sous des angles différents.Gandhi


Code

This is inline code <div>div element</div>. This is sample output sample And below is block code.

<div>
div element
<p>paragraph</p>
</div>

The input keyboard Ctrl+S. This is variable: y = mx + b


Table

Table avec cellpadding (espace entre le contenu d’une cellule et sa bordure) et cellspacing espace entre deux cellules
Table heading Table heading
Table footer Table footer
Table data Table data
Table data Table data
Table data Table data
Table data Table data
Table sans cellpadding et cellspacing
Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Form elements

Input types
Input Text
Input Text read only
Input Time
Input Tel
Input Date

Input Datetime-local

Input Number

Input Url

Input Email

Input Password

Input Search

Input Text (required & autofocus)

Input Text with Datalist

Radio
Checkbox
Select


Textarea



Button

Normal button (primary / gris)

Normal button (secondary / blanc)

Normal button (success / vert)

Normal button (warning / orange)

Normal button (alert / rouge)

Normal button (rose)

Normal button (bleu)

Normal button (transparent)

Input & Link class button (primary/secondary/couleurs)
Link button Link disabled button

Button size
So Tiny So Small So Normal So Large Such Expand

Button group

OneTwoThree

OneTwoThree

OneTwoThree

Input normal button

Callouts

This is a callout.

It has an easy to override visual style, and is appropriately subdued.

It’s dangerous to go alone, take this.

This is a secondary panel

It has an easy to override visual style, and is appropriately subdued.

It’s dangerous to go alone, take this.

This is a success panel

It has an easy to override visual style, and is appropriately subdued.

It’s dangerous to go alone, take this.

This is a warning panel

It has an easy to override visual style, and is appropriately subdued.

It’s dangerous to go alone, take this.

This is an alert panel

It has an easy to override visual style, and is appropriately subdued.

It’s dangerous to go alone, take this.


HTML5 Figure

Watching the Sky by Nathaniel Reinhart
Watching the Sky by Nathaniel Reinhart

HTML5 Audio and video

Audio

Video


Image, Galerie WordPress, Video Youtube

Image responsive

Galerie WordPress (9 colonnes maxi)

 

 

 

 

Video Youtube




Foundation Features


Accordion – All closed


Accordion – Multi Expand


Horizontal Tabs (couleurs idem buttons)

One

Check me out! I’m a super cool Tab panel with text content!

Two

Three

Check me out! I’m a super cool Tab panel with text content!

Four

Five

Check me out! I’m a super cool Tab panel with text content!

Six

One

Check me out! I’m a super cool Tab panel with text content!

Two

Three

Check me out! I’m a super cool Tab panel with text content!

Four

Five

Check me out! I’m a super cool Tab panel with text content!

Six

One

Check me out! I’m a super cool Tab panel with text content!

Two

Three

Check me out! I’m a super cool Tab panel with text content!

Four

Five

Check me out! I’m a super cool Tab panel with text content!

Six

One

Check me out! I’m a super cool Tab panel with text content!

Two

Three

Check me out! I’m a super cool Tab panel with text content!

Four

Five

Check me out! I’m a super cool Tab panel with text content!

Six

One

Check me out! I’m a super cool Tab panel with text content!

Two

Three

Check me out! I’m a super cool Tab panel with text content!

Four

Five

Check me out! I’m a super cool Tab panel with text content!

Six

One

Check me out! I’m a super cool Tab panel with text content!

Two

Three

Check me out! I’m a super cool Tab panel with text content!

Four

Five

Check me out! I’m a super cool Tab panel with text content!

Six

One

Check me out! I’m a super cool Tab panel with text content!

Two

Three

Check me out! I’m a super cool Tab panel with text content!

Four

Five

Check me out! I’m a super cool Tab panel with text content!

Six


Vertical Tabs (couleurs idem buttons)

One

Check me out! I’m a super cool Tab panel with text content!

Two

Three

Check me out! I’m a super cool Tab panel with text content!

Four

Five

Check me out! I’m a super cool Tab panel with text content!

Six


Reveal (Modal)

Click me for a tiny modal

OH I’M SO TIIINY

Click me for a small modal

I may be small, but I’ve got a big heart!

Click me for a large modal

I’m big, like bear!

Click me for a full-screen modal

OH I’M SO FUUUUL

Introspective Cage


Media Object Basics

Je commente

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at, tenetur cum beatae excepturi id ipsa? Esse dolor laboriosam itaque ea nesciunt, earum, ipsum commodi beatae velit id enim repellat.

Je réponds

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas magni, quam mollitia voluptatum in, animi suscipit tempora ea consequuntur non nulla vitae doloremque. Eius rerum, cum earum quae eveniet odio.

Je commente

I’m going to improvise. Listen, there’s something you should know about me… about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.


Card

This is a row of cards.

This row of cards is embedded in an Flex Block Grid.

This is a card.

It has an easy to override visual style, and is appropriately subdued.

This is a card.

It has an easy to override visual style, and is appropriately subdued.

This is a row of cards.

This row of cards is embedded in an Flex Block Grid.

This is a card.

It has an easy to override visual style, and is appropriately subdued.

This is a card.

It has an easy to override visual style, and is appropriately subdued.


Motion UI

This panel fades.

This panel slides.



Orbit – Basic

  • Space
    Space, the final frontier.
  • Space
    Lets Rocket!
  • Space
    Encapsulating
  • Space
    Outta This World

Orbit – Text Slider

A carousel slide can contain images or HTML—you can even mix between slides in one carousel!

  • This is dodgerblue. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • This is rebeccapurple. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • This is darkgoldenrod. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • This is lightseagreen. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Orbit – Using Animation

Orbit uses Motion UI CSS classes to animate slides around.

Without the inclusion of the motion-ui Motion UI CSS file in your template, Orbit slider fails to work properly.

There are four plugin options you can set to change the default effects:

  • data-anim-in-from-left: transition to play when a slide comes in from the left.
  • data-anim-in-from-right: transition to play when a slide comes in from the right.
  • data-anim-out-from-left: transition to play when a slide comes out from the left.
  • data-anim-out-from-right: transition to play when a slide comes out from the right.

  • SpaceSpace, the final frontier.
  • SpaceLets Rocket!
  • SpaceEncapsulating
  • SpaceOutta This World

Slider


Slider Vertical


Slider Disabled


Slider Two Handles



Data Binding


Switch (couleurs idem buttons)


Thumbnail

Photo of Uranus.

Leave a Reply

Your email address will not be published. Required fields are marked *