Colors

black
neutral-2
neutral-3
neutral-4
white

mcb
zoo
bot
mor
arl
cin
arc
mon
pal

HTML

									
										<ul class="sg-colors">
	<li>
		<span class="sg-swatch black-bg"></span>
		<span class="sg-label">black</span>
	</li>
	<li>
		<span class="sg-swatch neutral-bg-1"></span>
		<span class="sg-label">neutral-2</span>
	</li>
	<li>
		<span class="sg-swatch neutral-bg-2"></span>
		<span class="sg-label">neutral-3</span>
	</li>
	<li>
		<span class="sg-swatch neutral-bg-3"></span>
		<span class="sg-label">neutral-4</span>
	</li>
	<li>
		<span class="sg-swatch white-bg"></span>
		<span class="sg-label">white</span>
	</li>
</ul>

<ul class="sg-colors">
	<li>
		<span class="sg-swatch mcb-theme-bg"></span>
		<span class="sg-label">mcb</span>
	</li>
	<li>
		<span class="sg-swatch zoo-theme-bg"></span>
		<span class="sg-label">zoo</span>
	</li>
	<li>
		<span class="sg-swatch bot-theme-bg"></span>
		<span class="sg-label">bot</span>
	</li>
	<li>
		<span class="sg-swatch mor-theme-bg"></span>
		<span class="sg-label">mor</span>
	</li>
	<li>
		<span class="sg-swatch arl-theme-bg"></span>
		<span class="sg-label">arl</span>
	</li>
	<li>
		<span class="sg-swatch cin-theme-bg"></span>
		<span class="sg-label">cin</span>
	</li>
	<li>
		<span class="sg-swatch arc-theme-bg"></span>
		<span class="sg-label">arc</span>
	</li>
	<li>
		<span class="sg-swatch mon-theme-bg"></span>
		<span class="sg-label">mon</span>
	</li>
	<li>
		<span class="sg-swatch pal-theme-bg"></span>
		<span class="sg-label">pal</span>
	</li>
</ul>

text-1 or h1 with enough extra text to make it wrap onto a new line

text-2 or h2 with enough extra text to make it wrap onto a new line so we can see how that looks

text-3 or h3 with enough extra text to make it wrap onto a new line so we can see how that looks

text-4 or h4 with enough extra text to make it wrap onto a new line so we can see how that looks

text-5 or h5 with enough extra text to make it wrap onto a new line so we can see how that looks

text-6 or h6 with enough extra text to make it wrap onto a new line so we can see how that looks

text-7 with enough extra text to make it wrap onto a new line so we can see how that looks

text-8 or body text with enough extra text to make it wrap onto a new line so we can see how that looks

text-9 with enough extra text to make it wrap onto a new line so we can see how that looks

text-10 with enough extra text to make it wrap onto a new line so we can see how that looks

text-11 with enough extra text to make it wrap onto a new line so we can see how that looks

text-12 with enough extra text to make it wrap onto a new line so we can see how that looks

text-13 with enough extra text to make it wrap onto a new line so we can see how that looks

.text-1.lined .text-3.lined .text-4.lined

Heading 1 or .text-1

Heading 2 or .text-2

Heading 3 or .text-3

Heading 4 or .text-4

Heading 5 or .text-5

Heading 6 or .text-6

Heading 1

Heading 2

Heading 1

Heading 3

Heading 1

Heading 4

Heading 1

Heading 5

Heading 1

Heading 6

Heading 2

Heading 3

Heading 2

Heading 4

Heading 2

Heading 5

Heading 2

Heading 6

Heading 3

Heading 4

Heading 3

Heading 5

Heading 3

Heading 6

Heading 4

Heading 5

Heading 4

Heading 6

Heading 5

Heading 6

HTML

									
										
<h1>text-1 or h1 with enough extra text to make it wrap onto a new line</h1>
<h2>text-2 or h2 with enough extra text to make it wrap onto a new line so we can see how that looks</h2>
<h3>text-3 or h3 with enough extra text to make it wrap onto a new line so we can see how that looks</h3>
<h4>text-4 or h4 with enough extra text to make it wrap onto a new line so we can see how that looks</h4>
<h5>text-5 or h5 with enough extra text to make it wrap onto a new line so we can see how that looks</h5>
<h6>text-6 or h6 with enough extra text to make it wrap onto a new line so we can see how that looks</h6>
<p class="text-7">text-7 with enough extra text to make it wrap onto a new line so we can see how that looks</p>
<p class="text-8">text-8 or body text with enough extra text to make it wrap onto a new line so we can see how that looks</p>
<p class="text-9">text-9 with enough extra text to make it wrap onto a new line so we can see how that looks</p>
<p class="text-10">text-10 with enough extra text to make it wrap onto a new line so we can see how that looks</p>
<p class="text-11">text-11 with enough extra text to make it wrap onto a new line so we can see how that looks</p>
<p class="text-12">text-12 with enough extra text to make it wrap onto a new line so we can see how that looks</p>
<p class="text-13">text-13 with enough extra text to make it wrap onto a new line so we can see how that looks</p>

<time class="lined">.text-1.lined</time>
<time class="lined">.text-3.lined</time>
<time class="lined">.text-4.lined</time>

<h1>Heading 1 or .text-1</h1>
<h2>Heading 2 or .text-2</h2>
<h3>Heading 3 or .text-3</h3>
<h4>Heading 4 or .text-4</h4>
<h5>Heading 5 or .text-5</h5>
<h6>Heading 6 or .text-6</h6>

<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h1>Heading 1</h1>
<h3>Heading 3</h3>
<h1>Heading 1</h1>
<h4>Heading 4</h4>
<h1>Heading 1</h1>
<h5>Heading 5</h5>
<h1>Heading 1</h1>
<h6>Heading 6</h6>
<h2>Heading 2</h2>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h2>Heading 2</h2>
<h4>Heading 4</h4>
<h2>Heading 2</h2>
<h5>Heading 5</h5>
<h2>Heading 2</h2>
<h6>Heading 6</h6>
<h3>Heading 3</h3>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h3>Heading 3</h3>
<h5>Heading 5</h5>
<h3>Heading 3</h3>
<h6>Heading 6</h6>
<h4>Heading 4</h4>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h4>Heading 4</h4>
<h6>Heading 6</h6>
<h5>Heading 5</h5>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h6>Heading 6</h6>

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus. Hyper text linkus operari avec computatrum ad coniungere hominum. Standards code est pulchra on chromium et foxus sed souvent suckum in internet explorum.

HTML

									
										<p>
Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.
Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum.
Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus.
Hyper text linkus operari avec computatrum ad coniungere hominum.
Standards code est pulchra on chromium et foxus sed souvent suckum in internet explorum.
</p>

Unordered List

This is a list item in an unordered list
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

HTML

									
										<div class="text">
	<ul>
		<li>This is a list item in an unordered list</li>
		<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
		<li>
			Lists can be nested inside of each other
			<ul>
				<li>This is a nested list item</li>
				<li>This is another nested list item in an unordered list</li>
			</ul>
		</li>
		<li>This is the last list item</li>
	</ul>
</div>

Ordered List

This is a list item in an ordered list
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
Lists can be nested inside of each other
1. This is a nested list item
2. This is another nested list item in an ordered list
This is the last list item

HTML

									
										<div class="text">
	<ol>
		<li>This is a list item in an ordered list</li>
		<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
		<li>
			Lists can be nested inside of each other
			<ol>
				<li>This is a nested list item</li>
				<li>This is another nested list item in an ordered list</li>
			</ol>
		</li>
		<li>This is the last list item</li>
	</ol>
</div>

Definition List

Definition List: A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.: This is the definition of that term, which both live in a dl.
Here is another term.: And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.: And it gets a definition too, which is this line.

HTML

									
										<dl>
	<dt>Definition List</dt>
	<dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
    <dt>This is a term.</dt>
    <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
    <dt>Here is another term.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
    <dt>Here is term that shares a definition with the term below.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
</dl>

Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

HTML

									
										<blockquote>
	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
</blockquote>

Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2 with an abundance of text so that it pushes the cell box wide open	Table Cell 3	Table Cell 4 spanning 2
Table Cell 1	Table Cell 2	Table Cell 3 spanning 3
Table Cell 1	Table Cell 3 spanning 4

HTML

									
										<table>
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
			<th>Table Heading 4</th>
			<th>Table Heading 5</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
			<th>Table Footer 4</th>
			<th>Table Footer 5</th>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2 with an abundance of text so that it pushes the cell box wide open</td>
		<td>Table Cell 3</td>
		<td colspan="2">Table Cell 4 spanning 2</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td colspan="3">Table Cell 3 spanning 3</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td colspan="4">Table Cell 3 spanning 4</td>
	</tr>
	</tbody>
</table>

Preformatted Text

  	
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

HTML

									
										<pre>  	
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 
</pre>

Hr

HTML

									
										<hr />

Time

2 weeks ago

HTML

									
										<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>

Html5 Inputs

Color input

Number input

Range input

Date input

Month input

Week input

Datetime input

Datetime-local input

HTML

									
											<fieldset>
    <div class="field-container"><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></div>
    <div class="field-container"><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></div>
    <div class="field-container"><label for="ir">Range input</label> <input type="range" id="ir" value="10"></div>
    <div class="field-container"><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></div>
    <div class="field-container"><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></div>
    <div class="field-container"><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></div>
    <div class="field-container"><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></div>
    <div class="field-container"><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></div>
</fieldset>

Text Fields

Text Input Password Web Address Email Address Search Number Input * Textarea Error Input

HTML

									
										<fieldset>
    <label for="text" class="required" title="Champ obligatoire">Text Input</label>
    <input id="text" type="text" placeholder="Text Input">

    <label for="password">Password</label>
    <input id="password" type="password" placeholder="Type your Password">

    <label for="webaddress">Web Address</label>
    <input id="webaddress" type="url" placeholder="http://yoursite.com">

    <label for="emailaddress">Email Address</label>
    <input id="emailaddress" type="email" placeholder="name@email.com">

    <label for="search">Search</label>
    <input id="search" type="search" placeholder="Enter Search Term">

    <label for="number">Number Input <abbr title="Required">*</abbr></label>
    <input id="number" type="number" placeholder="Enter a Number" pattern="[0-9]*">

    <label for="textarea">Textarea</label>
    <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>

    <label class="error">Error Input</label>
    <input class="error" type="text" placeholder="Text Input">
</fieldset>

Radio Label

Option 2

HTML

									
										<label for="radio2" class="radio-label">
    <input id="radio2" name="radio" type="radio" class="radio" checked="checked">
    Option 2
</label>

Radio

Option 1

HTML

									
										<label for="radio1">
    <input id="radio1" name="radio" type="radio" class="radio" checked="checked">
    Option 1
</label>

Checkbox Label

Choice A

HTML

									
										<label for="checkbox2" class="checkbox-label">
    <input id="checkbox2" name="checkbox" type="checkbox" checked="checked">
    Choice A
</label>

Checkbox

Choice A

HTML

									
										<label for="checkbox1">
    <input id="checkbox1" name="checkbox" type="checkbox" checked="checked">
    Choice A
</label>

Select

HTML

									
										<label for="select">Select</label>
<select id="select">
    <optgroup label="Option Group">
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
    </optgroup>
</select>

Select Button

Pick an option

HTML

									
										<label class="select-button button" for="select-button">
    Pick an option
    <select id="select-button">
        <option value="1">Option One</option>
        <option value="2">Option Two</option>
        <option value="3">Option Three</option>
    </select>
</label>

Buttons

HTML

									
										<p><a href="#" class="btn">Button</a></p>
<p><a href="#" class="btn alt">Alternate Button</a></p>
<p><a href="#" class="btn disabled">Disabled Button</a></p>
<p><a href="#" class="text-btn">Text Button</a></p>

Banner Img

HTML

									
										<img class="full-block block" src="//source.unsplash.com/category/nature/1300x620" width="1300" height="620" alt="" />

Logo Thumb

Palais de Rumine

HTML

									
										<a class="logo-thumb thumb" href="/public&#x2F;patterns&#x2F;04-pages-01-home&#x2F;04-pages-01-home.html" id="museum-logo">Palais de Rumine</a>

Instagram Thumb

Instagram

HTML

									
										<a class="in-thumb thumb" href="http://instagram.com">Instagram</a>

Twitter Thumb

Twitter

HTML

									
										<a class="tw-thumb thumb" href="http://twitter.com">Twitter</a>

Facebook Thumb

Facebook

HTML

									
										<a class="fb-thumb thumb" href="http://facebook.com">Facebook</a>

Nav Thumb

Navigation

HTML

									
										<a href="#nav" class="nav-thumb thumb theme-bg ">Navigation</a>

Visibility

This element is hidden on screens wider than 600px

This element is shown

This element is shown on screens wider than 600px

HTML

									
										<p class="hidden">This element is hidden</p>
<p class="@600-hidden">This element is hidden on screens wider than 600px</p>
<p class="shown">This element is shown</p>
<p class="@600-shown">This element is shown on screens wider than 600px</p>

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

~~This text is deleted~~ and This text is inserted

~~This text has a strikethrough~~

Superscript^®

Subscript for things like H₂O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

HTML

									
										<div class="text">
	<p><a href="#">This is a text link</a></p>

	<p><strong>Strong is used to indicate strong importance</strong></p>

	<p><em>This text has added emphasis</em></p>

	<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>

	<p>The <i>i element</i> is text that is set off from the normal text</p>

	<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>

	<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>

	<p><s>This text has a strikethrough</s></p>

	<p>Superscript<sup>®</sup></p>

	<p>Subscript for things like H<sub>2</sub>O</p>

	<p><small>This small text is small for for fine print, etc.</small></p>

	<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

	<p>Keybord input: <kbd>Cmd</kbd></p>

	<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>

	<p><cite>This is a citation</cite>

	</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>

	<p>The <mark>mark element</mark> indicates a highlight</p>

	<p><code>This is what inline code looks like.</code></p>

	<p><samp>This is sample output from a computer program</samp></p>

	<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>
</div><!--end .text-->

Grid

.grid-1/1

.grid-1/2

.grid-1/3

.grid-1/4

.grid-1/5

.grid-1/6

HTML

									
										<div class="demo">
	<div class="grid-block block">
		 <div class="block grid-1/1 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/1</div
		><div class="block grid-1/2 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/2</div
		><div class="block grid-1/2 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/2</div
		><div class="block grid-1/3 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/3</div
		><div class="block grid-1/3 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/3</div
		><div class="block grid-1/3 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/3</div
		><div class="block grid-1/4 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/4</div
		><div class="block grid-1/4 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/4</div
		><div class="block grid-1/4 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/4</div
		><div class="block grid-1/4 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/4</div
		><div class="block grid-1/5 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/5</div
		><div class="block grid-1/5 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/5</div
		><div class="block grid-1/5 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/5</div
		><div class="block grid-1/5 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/5</div
		><div class="block grid-1/5 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/5</div
		><div class="block grid-1/6 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/6</div
		><div class="block grid-1/6 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/6</div
		><div class="block grid-1/6 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/6</div
		><div class="block grid-1/6 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/6</div
		><div class="block grid-1/6 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/6</div
		><div class="block grid-1/6 neutral-bg-2 text-11" style="white-space: nowrap;">.grid-1/6</div>
	</div>
</div>

Grid 600

.@600-grid-1/1

.@600-grid-1/2

.@600-grid-1/3

.@600-grid-1/4

.@600-grid-1/5

.@600-grid-1/6

.@600-grid-1/7

.@600-grid-1/8

.@600-grid-1/9

.@600-grid-1/10

.@600-grid-1/11

.@600-grid-1/12

HTML

									
										<div class="demo">
	<div class="grid-block block">
		 <div class="block @600-grid-1/1 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/1</div
		><div class="block @600-grid-1/2 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/2</div
		><div class="block @600-grid-1/2 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/2</div
		><div class="block @600-grid-1/3 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/3</div
		><div class="block @600-grid-1/3 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/3</div
		><div class="block @600-grid-1/3 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/3</div
		><div class="block @600-grid-1/4 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/4</div
		><div class="block @600-grid-1/4 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/4</div
		><div class="block @600-grid-1/4 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/4</div
		><div class="block @600-grid-1/4 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/4</div
		><div class="block @600-grid-1/5 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/5</div
		><div class="block @600-grid-1/5 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/5</div
		><div class="block @600-grid-1/5 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/5</div
		><div class="block @600-grid-1/5 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/5</div
		><div class="block @600-grid-1/5 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/5</div
		><div class="block @600-grid-1/6 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/6</div
		><div class="block @600-grid-1/6 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/6</div
		><div class="block @600-grid-1/6 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/6</div
		><div class="block @600-grid-1/6 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/6</div
		><div class="block @600-grid-1/6 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/6</div
		><div class="block @600-grid-1/6 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/6</div
		><div class="block @600-grid-1/7 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/7</div
		><div class="block @600-grid-1/7 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/7</div
		><div class="block @600-grid-1/7 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/7</div
		><div class="block @600-grid-1/7 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/7</div
		><div class="block @600-grid-1/7 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/7</div
		><div class="block @600-grid-1/7 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/7</div
		><div class="block @600-grid-1/7 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/7</div
		><div class="block @600-grid-1/8 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/8</div
		><div class="block @600-grid-1/8 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/8</div
		><div class="block @600-grid-1/8 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/8</div
		><div class="block @600-grid-1/8 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/8</div
		><div class="block @600-grid-1/8 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/8</div
		><div class="block @600-grid-1/8 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/8</div
		><div class="block @600-grid-1/8 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/8</div
		><div class="block @600-grid-1/8 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/8</div
		><div class="block @600-grid-1/9 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/9</div
		><div class="block @600-grid-1/9 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/9</div
		><div class="block @600-grid-1/9 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/9</div
		><div class="block @600-grid-1/9 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/9</div
		><div class="block @600-grid-1/9 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/9</div
		><div class="block @600-grid-1/9 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/9</div
		><div class="block @600-grid-1/9 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/9</div
		><div class="block @600-grid-1/9 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/9</div
		><div class="block @600-grid-1/9 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/9</div
		><div class="block @600-grid-1/10 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/10</div
		><div class="block @600-grid-1/10 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/10</div
		><div class="block @600-grid-1/10 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/10</div
		><div class="block @600-grid-1/10 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/10</div
		><div class="block @600-grid-1/10 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/10</div
		><div class="block @600-grid-1/10 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/10</div
		><div class="block @600-grid-1/10 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/10</div
		><div class="block @600-grid-1/10 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/10</div
		><div class="block @600-grid-1/10 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/10</div
		><div class="block @600-grid-1/10 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/10</div
		><div class="block @600-grid-1/11 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/11</div
		><div class="block @600-grid-1/11 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/11</div
		><div class="block @600-grid-1/11 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/11</div
		><div class="block @600-grid-1/11 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/11</div
		><div class="block @600-grid-1/11 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/11</div
		><div class="block @600-grid-1/11 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/11</div
		><div class="block @600-grid-1/11 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/11</div
		><div class="block @600-grid-1/11 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/11</div
		><div class="block @600-grid-1/11 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/11</div
		><div class="block @600-grid-1/11 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/11</div
		><div class="block @600-grid-1/11 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/11</div
		><div class="block @600-grid-1/12 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/12</div
		><div class="block @600-grid-1/12 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/12</div
		><div class="block @600-grid-1/12 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/12</div
		><div class="block @600-grid-1/12 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/12</div
		><div class="block @600-grid-1/12 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/12</div
		><div class="block @600-grid-1/12 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/12</div
		><div class="block @600-grid-1/12 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/12</div
		><div class="block @600-grid-1/12 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/12</div
		><div class="block @600-grid-1/12 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/12</div
		><div class="block @600-grid-1/12 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/12</div
		><div class="block @600-grid-1/12 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/12</div
		><div class="block @600-grid-1/12 neutral-bg-2 text-11" style="white-space: nowrap; overflow: hidden;">.@600-grid-1/12</div>
	</div>
</div>

Box Block

I am a .box.

HTML

									
										<div class="box-block block">I am a <code>.box</code>.</div>

Summary Block

Les armures

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum.

HTML

									
										<a class="summary-block block" href="/">
	<h2 class="text-4">Les armures</h2>
	<p>
	Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.
	Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum.
	</p>
</a>

Alert Block

Le musée déménage!

Rendez-vous en décembre avec une toute nouvelle exposition permanente!

Dismiss

HTML

									
										<div class="alert-block block toggle active" id="alert-block">
  <h1 class="text-13">Le musée déménage!</h1>
  <p>Rendez-vous en décembre avec une toute nouvelle exposition permanente!</p>
  <a class="dismiss-thumb thumb" href="#alert-block">Dismiss</a>
</div>

Page Select Button

Introduction

HTML

									
										<label class="page-select-button select-button button @600-hidden" for="page-select">
	Introduction
	<select id="page-select">
		<option value="/intro">Introduction</option>
		<option value="/page-2">Page 2</option>
		<option value="/page-3">Page 3</option>
	</select>
</label>

Vimeo

HTML

									
										<div class="video-block block">
	<iframe src="https://player.vimeo.com/video/74100316" width="520" height="292" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Video

HTML

									
										<div class="video-block block">
    <video class="video-block block" controls poster="poster.png">
        <source src="../../media/test-video.webm" type='video/webm;codecs="vp8, vorbis"' />
        <source src="../../media/test-video.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
    </video>
</div>

Youtube

HTML

									
										<div class="video-block block">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/SavsJYXWgm8" frameborder="0" allowfullscreen></iframe>
</div>

Crumb Index

HTML

									
										<ul class="crumb-index index text-8 ">
	<li><a href="">Expositions</a></li
	><li><a class="theme-color-1" href="#">Fleurs d'abeilles</a></li
	><li><a class="theme-color-1" href="#">Sous-page</a></li>
</ul>

Page Index

Previous
Page 1
1
2
3
4
5
…
7
Next

HTML

									
										<ul class="page-index index">
	<li><a class="prev-page-thumb page-thumb thumb disabled" href="&#x2F;">Previous</a></li
	><li class="page-li @400-hidden"><span class="page-button button on">Page 1</span></li
	><li class="@400-shown"><a class="page-button button" href="&#x2F;">1</a></li
	><li class="@400-shown"><a class="page-button button" href="&#x2F;">2</a></li
	><li class="@400-shown"><a class="page-button button on" href="&#x2F;">3</a></li
	><li class="@400-shown"><a class="page-button button" href="&#x2F;">4</a></li
	><li class="@400-shown"><a class="page-button button" href="&#x2F;">5</a></li
	><li class="@400-shown"><span class="page-button button">&hellip;</span></li
	><li class="@400-shown"><a class="page-button button" href="&#x2F;">7</a></li
	><li><a class="next-page-thumb page-thumb thumb" href="&#x2F;">Next</a></li>
</ul>

Letter Index

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z

HTML

									
										<ul class="letter-index index">
	 <li><a class="letter-button button" href="#">A</a></li
	><li><a class="letter-button button" href="#">B</a></li
	><li><a class="letter-button button on" href="#">C</a></li
	><li><a class="letter-button button" href="#">D</a></li
	><li><a class="letter-button button" href="#">E</a></li
	><li><a class="letter-button button" href="#">F</a></li
	><li><a class="letter-button button" href="#">G</a></li
	><li><a class="letter-button button" href="#">H</a></li
	><li><a class="letter-button button" href="#">I</a></li
	><li><a class="letter-button button" href="#">J</a></li
	><li><a class="letter-button button" href="#">K</a></li
	><li><a class="letter-button button" href="#">L</a></li
	><li><a class="letter-button button" href="#">M</a></li
	><li><a class="letter-button button" href="#">N</a></li
	><li><a class="letter-button button" href="#">O</a></li
	><li><a class="letter-button button" href="#">P</a></li
	><li><a class="letter-button button" href="#">Q</a></li
	><li><a class="letter-button button" href="#">R</a></li
	><li><a class="letter-button button" href="#">S</a></li
	><li><a class="letter-button button" href="#">T</a></li
	><li><a class="letter-button button" href="#">U</a></li
	><li><a class="letter-button button" href="#">V</a></li
	><li><a class="letter-button button" href="#">W</a></li
	><li><a class="letter-button button" href="#">X</a></li
	><li><a class="letter-button button" href="#">Y</a></li
	><li><a class="letter-button button" href="#">Z</a></li>
</ul>

Menu Index

HTML

									
										<ul class="menu-index index">
	<li><a class="menu-button button" href="&#x2F;">Button text</a></li>
	<li><a class="menu-button button on" href="&#x2F;">Button text</a></li>
	<li><a class="menu-button button" href="&#x2F;">Button text</a></li>
	<li>
		<a class="toggle-menu-button menu-button button" href="#menu-toggle-1">Button text</a>
		<ul class="submenu-index index toggle" id="menu-toggle-1">
			<li><a href="#">Sous-page 1</a></li>
			<li><a href="#">Sous-page 1</a></li>
			<li><a href="#">Sous-page 1</a></li>
		</ul>
	</li>
	<li>
		<a class="toggle-menu-button menu-button button" href="#menu-toggle-2">Button text</a>
		<ul class="submenu-index index toggle" id="menu-toggle-2">
			<li><a href="#">Sous-page 1</a></li>
			<li><a href="#">Sous-page 1</a></li>
			<li><a href="#">Sous-page 1</a></li>
			<li><a href="#">Sous-page 1</a></li>
		</ul>
	</li>
</ul>

Close Thumb

HTML

									
										<a class="close-thumb thumb" href="#nav">
	<svg>
		<title>Close</title>
		<line class="stroke-line" x1="5" y1="5" x2 ="35" y2="35"></line>
		<line class="stroke-line" x1="5" y1="35" x2 ="35" y2="5"></line>
	</svg>
</a>

Dismiss Thumb

HTML

									
										<button class="dismiss-thumb thumb">Dismiss</button>

Figure With Caption

This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.

HTML

									
										<figure>
	<img src="TODO" />
	<figcaption>This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.</figcaption>
</figure>

Address

Company Name

1234 Main St.

Anywhere, 101010, CA

U.S.A

+1.888.123.4567

HTML

									
										<div class="vcard">
	<div class="org">Company Name</div>
	<div class="adr">
		<div class="street-address">1234 Main St.</div>
		<span class="locality">Anywhere</span>,
		<span class="postal-code">101010</span>,
		<abbr class="region" title="California">CA</abbr>
		<div class="country-name">U.S.A</div>
	</div>
	<div class="tel">+1.888.123.4567</div>
</div>

Blockquote With Citation

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
Quote Source

HTML

									
										<blockquote>
   	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation. </p>
	<cite class="citation">Quote Source</cite>
</blockquote>

Credits

Crédit Photos

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.

Photo 1: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.
Photo 2: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.
Photo 3: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.

HTML

									
										<h3 class="text-10">Crédit Photos</h3>

<p class="text-10">Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</p>
<ol class="index">
	<li class="text-10">Photo 1: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</li>
	<li class="text-10">Photo 2: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</li>
	<li class="text-10">Photo 3: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</li>
</ol>

Search Form

HTML

									
										<form action="&#x2F;" method="post" class="search-uni-form uni-form @600-shown">
	<input type="search" class="search-input" placeholder="Recherche" />
	<input type="submit" class="search-thumb thumb" value="Rechercher" />
</form>

Big Search Form

HTML

									
										<form action="&#x2F;" method="post" class="large-uni-form uni-form">
	<input type="search" class="big-input" placeholder="Recherche" id="search-field" />
	<input type="submit" class="search-action-button big-action-button action-button button" value="Rechercher" />
</form>

Newsletter Form

HTML

									
										<form action="&#x2F;" method="post" class="uni-form">
	<input type="email" class="small-input" placeholder="Email" />
	<input type="submit" class="action-button button" value="S'inscrire" />
</form>

Expo Text

Du 24 avril 2015 au 31 octobre 2015

Kader Attvia. Les blessures sont là

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus. Hyper text linkus operari avec computatrum ad coniungere hominum. Standards code est pulchra on chromium et foxus sed souvent suckum in internet explorum.

HTML

									
										<time class="text-4 lined block" datetime="14-06-2015">Du 24 avril 2015 au 31 octobre 2015</time>
<h1><a href="&#x2F;">Kader Attvia. Les blessures sont là</a></h1>
<p>Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus. Hyper text linkus operari avec computatrum ad coniungere hominum. Standards code est pulchra on chromium et foxus sed souvent suckum in internet explorum.</p>

Header

HTML

									
										<style type="text/css"> @import url("../../css/style.css"); </style>
<style type="text/css"> @import url("../../css/theme.css"); </style>

	<!--pour cosmos et ou Palais de Rumine -->
	<script src="../../js/TweenMax.min.js"></script>
	<script src="../../js/MorphSVGPlugin.js"></script>
	<script src="../../js/timelineWork.js"></script>


<header class="site-header" role="banner">
	<a class="logo-thumb thumb" href="/public&#x2F;patterns&#x2F;04-pages-01-home&#x2F;04-pages-01-home.html" id="museum-logo">Palais de Rumine</a>

	<a href="#nav" class="nav-thumb thumb theme-bg @720-hidden">Navigation</a>

	<ul class="crumb-index index text-8 @960-shown">
	<li><a href="">Expositions</a></li
	><li><a class="theme-color-1" href="#">Fleurs d'abeilles</a></li
	><li><a class="theme-color-1" href="#">Sous-page</a></li>
</ul>

</header>

Home Header

HTML

									
										<style type="text/css"> @import url("../../css/style.css"); </style>
<style type="text/css"> @import url("../../css/theme.css"); </style>

<header class="site-header" role="banner">
	<a class="logo-thumb thumb" href="/public&#x2F;patterns&#x2F;04-pages-01-home&#x2F;04-pages-01-home.html" id="museum-logo">Palais de Rumine</a>

	<a href="#nav" class="nav-thumb thumb theme-bg @720-hidden">Navigation</a>

</header>

Information Comsos

HTML

									
										<aside class="info-block grid-block block" role="contentinfo">

	<div class="grid-1/1 @600-grid-1/2 @896-grid-1/4 block">
		<h4 class="text-4 uppercased">Adresse</h4>
		<p>L’entrée aux expositions permanentes des musées cantonaux est gratuite. Merci de retirer votre billet d’accès le jour même, à la boutique du rez ou à la caisse du 5ème étage.</p>
		<p>
		Palais de Rumine<br/>
		Place de la Riponne 6<br/>
		CH - 1005 Lausanne<br/>
		</p>
		<ul class="index">
			<li><a href="#">Infos pratiques</a></li>
		</ul>
	</div

	><div class="grid-1/1 @600-grid-1/2 @896-grid-1/4 block">
		<h4 class="text-4 uppercased">Accès</h4>
		<p>
		Transports publics:<br/>
		M2 / 7/8 Arrêt Riponne<br/>
		M2 / 7/8 Arrêt Riponne<br/>
		16 Arrêt Pierre Viret<br/>
		1/2 Arrêt Rue Neuve<br/>
		En voiture<br/>
		Parking de la Riponne<br/>
		</p>
	</div

	><div class="grid-1/1 @600-grid-1/2 @896-grid-1/6 block">
		<h4 class="text-4 uppercased">Horaires</h4>

		<p>
		Horaires de l’exposition COSMOS<br/>
		semaine 11-18h<br/>
		week-end 11-17h<br/>
		fermé le lundi
		</p>
		<ul class="index">
			<li><a href="#">Horaires détaillées du Palais</a></li>
		</ul>
	</div

	><div class="grid-1/1 @600-grid-1/2 @896-grid-1/3 block @600-shown">
		<h4 class="text-4 uppercased">Newsletter</h4>
		<p>Abonnez-vous à notre newsletter loremp ispume dolore&hellip;</p>
		<form action="&#x2F;" method="post" class="uni-form">
	<input type="email" class="small-input" placeholder="Email" />
	<input type="submit" class="action-button button" value="S'inscrire" />
</form>

	</div>

	
</aside>

Information

Column title

L’entrée aux expositions permanentes des musées cantonaux est gratuite. Merci de retirer votre billet d’accès le jour même, à la boutique du rez ou à la caisse du 5ème étage.

Title

Tarif normal : 4.-
AVS/AI/étudiant/chômeur : 2.-
Gratuit jusqu'à 16 ans et pour les écoles
Gratuit tous les 1^er samedi du mois

Horaires

Collections

Lundi - Vendredi
sur rendez-vous, 021 316 34 60

Secrétariat

Lundi - Vendredi : 8h - 12h

Expositions

Lundi : fermé
Mardi - Jeudi : 11h - 18h
Vendredi - Dimanche : 11h - 17h
Fermé le 25 décembre, 1 et 2 janvier

Contact

Place de la Riponne 6
CH - 1014 Lausanne

Tél. +41 (0)21 316 34 60

Liens internes

Newsletter

Abonnez-vous à notre newsletter loremp ispume dolore…

HTML

									
										<aside class="info-block grid-block block" role="contentinfo">
	<div class="grid-1/1 @600-grid-1/2 @896-grid-1/4 block">
		<h4 class="text-4 uppercased">Column title</h4>
		<p>L’entrée aux expositions permanentes des musées cantonaux est gratuite. Merci de retirer votre billet d’accès le jour même, à la boutique du rez ou à la caisse du 5ème étage.</p>
		<h5 class="text-5">Title</h5>
		<ul class="dashed-ul">
			<li>Tarif normal : 4.-</li>
			<li>AVS/AI/étudiant/chômeur : 2.-</li>
			<li>Gratuit jusqu'à 16 ans et pour les écoles</li>
			<li>Gratuit tous les 1<sup>er</sup> samedi du mois</li>
		</ul>
	</div

	><div class="grid-1/1 @600-grid-1/2 @896-grid-1/4 block">
		<h4 class="text-4 uppercased">Horaires</h4>
		<h5 class="text-5">Collections</h5>
		<p>
		Lundi - Vendredi<br/>
		sur rendez-vous, <a href="tel:+41213163460">021 316 34 60</a>
		</p>
		<h5 class="text-5">Secrétariat</h5>
		<p>Lundi - Vendredi : 8h - 12h</p>
		<h5 class="text-5">Expositions</h5>
		<p>
		Lundi : fermé<br/>
		Mardi - Jeudi : 11h - 18h<br/>
		Vendredi - Dimanche : 11h - 17h<br/>
		Fermé le 25 décembre, 1 et 2 janvier<br/>
		</p>
	</div

	><div class="grid-1/1 @600-grid-1/2 @896-grid-1/6 block">
		<h4 class="text-4 uppercased">Contact</h4>

		<p>
		Place de la Riponne 6<br/>
		CH - 1014 Lausanne
		</p>

		<p><a href="tel:+41213163460">Tél. +41 (0)21 316 34 60</a></p>

		<h4 class="text-4 uppercased">Liens internes</h4>
		<ul class="index">
			<li><a href="#">Pour les écoles</a></li>
			<li><a href="#">Pour les journalistes</a></li>
		</ul>
	</div

	><div class="grid-1/1 @600-grid-1/2 @896-grid-1/3 block @600-shown">
		<h4 class="text-4 uppercased">Newsletter</h4>
		<p>Abonnez-vous à notre newsletter loremp ispume dolore&hellip;</p>
		<form action="&#x2F;" method="post" class="uni-form">
	<input type="email" class="small-input" placeholder="Email" />
	<input type="submit" class="action-button button" value="S'inscrire" />
</form>

	</div>
</aside>

Navigation Cosmos

HTML

									
										<nav class="nav-block block toggle" id="nav">
	<ul class="nav-index index">
		<li>
			<a class="nav-button button current" href="#expositions-nav">Cosmos</a>
			<ul class="sub-index index toggle" id="expositions-nav">
				<li><a class="sub-button button" href="/public&#x2F;patterns&#x2F;04-pages-03-expositions-1&#x2F;04-pages-03-expositions-1.html">L'exposition</a></li>
				<li><a class="sub-button button" href="/public&#x2F;patterns&#x2F;04-pages-04-expositions-2&#x2F;04-pages-04-expositions-2.html">Cosmos et Humbolt</a></li>
				<li><a class="sub-button button" href="/public&#x2F;patterns&#x2F;04-pages-05-exposition-permanent&#x2F;04-pages-05-exposition-permanent.html">200 ans des musées cantonaux</a></li>
				<li><a class="sub-button button" href="/public">Découverte des réserves</a></li>
				<li><a class="sub-button button" href="/public">Activités et médiations</a></li>
				<li><a class="sub-button button" href="/public">Catalogue</a></li>
			</ul>
		</li
		><li>
			<a class="nav-button button" href="#activites-nav">Le palais</a>
			<ul class="sub-index index toggle" id="activites-nav">
				<li><a class="sub-button button" href="&#x2F;">Un palais des savoirs</a></li>
				<li><a class="sub-button button" href="&#x2F;">Les collections</a></li>
				<li><a class="sub-button button" href="&#x2F;">les réserves</a></li>
				<li><a class="sub-button button" href="&#x2F;">Histoire du Palais</a></li>
				<li><a class="sub-button button" href="&#x2F;">Les coulisses</a></li>
			</ul>
		</li
		><li>
			<a class="nav-button button" href="#publications-nav">Institutions</a>
		</li
		><li>
			<a class="nav-button button" href="#infos-nav">Pratique</a>
			<ul class="sub-index index toggle" id="infos-nav">
				<li><a class="sub-button button" href="&#x2F;">Horaires détaillés et plan d'accès</a></li>
				<li><a class="sub-button button" href="&#x2F;">Contact détaillés</a></li>
			</ul>
		</li>
	</ul>

	<ul class="social-index index">
		 <li><a class="fb-thumb thumb" href="http://facebook.com">Facebook</a>
</li
		><li><a class="tw-thumb thumb" href="http://twitter.com">Twitter</a>
</li
		><li><a class="in-thumb thumb" href="http://instagram.com">Instagram</a>
</li>
	</ul>

	<ul class="link-index index">
		 <li><a class="portal-icon-button icon-button button" href="&#x2F;">Musées cantonaux</a></li
		><li><a class="link-button button" href="&#x2F;">Access</a></li
		><li><a class="link-button button" href="/public&#x2F;patterns&#x2F;04-pages-02-contact&#x2F;04-pages-02-contact.html">Contact</a></li
		><li><a class="link-button button" href="&#x2F;">Newsletter</a></li>
	</ul>

	<ul class="lang-index index">
		 <li><a class="on" href="fr">FR</a></li
		><li><a href="en">EN</a></li>
	</ul>

	<form action="&#x2F;" method="post" class="search-uni-form uni-form @600-shown">
	<input type="search" class="search-input" placeholder="Recherche" />
	<input type="submit" class="search-thumb thumb" value="Rechercher" />
</form>

	<a class="close-thumb thumb" href="#nav">
	<svg>
		<title>Close</title>
		<line class="stroke-line" x1="5" y1="5" x2 ="35" y2="35"></line>
		<line class="stroke-line" x1="5" y1="35" x2 ="35" y2="5"></line>
	</svg>
</a>

</nav>

Navigation

HTML

									
										<nav class="nav-block block toggle" id="nav">
	<ul class="nav-index index">
		<li>
			<a class="nav-button button current" href="#expositions-nav">Expositions</a>
			<ul class="sub-index index toggle" id="expositions-nav">
				<li><a class="sub-button button" href="/public&#x2F;patterns&#x2F;04-pages-03-expositions-1&#x2F;04-pages-03-expositions-1.html">Expositions 1</a></li>
				<li><a class="sub-button button" href="/public&#x2F;patterns&#x2F;04-pages-04-expositions-2&#x2F;04-pages-04-expositions-2.html">Expositions 2</a></li>
				<li><a class="sub-button button" href="/public&#x2F;patterns&#x2F;04-pages-05-exposition-permanent&#x2F;04-pages-05-exposition-permanent.html">Exposition Permanent</a></li>
				<li><a class="sub-button button" href="/public">Expositions Archive</a></li>
			</ul>
		</li
		><li>
			<a class="nav-button button" href="#activites-nav">Activités</a>
			<ul class="sub-index index toggle" id="activites-nav">
				<li><a class="sub-button button" href="&#x2F;">About</a></li>
				<li><a class="sub-button button" href="&#x2F;">Blog</a></li>
				<li><a class="sub-button button" href="&#x2F;">Contact</a></li>
			</ul>
		</li
		><li>
			<a class="nav-button button" href="#publications-nav">Collections et publications</a>
			<ul class="sub-index index toggle" id="publications-nav">
				<li><a class="sub-button button" href="/public&#x2F;patterns&#x2F;04-pages-08-collections&#x2F;04-pages-08-collections.html">Collections</a></li>
				<li><a class="sub-button button" href="&#x2F;">Collections (with alerts)</a></li>
			</ul>
		</li
		><li>
			<a class="nav-button button" href="#infos-nav">Infos pratiques</a>
			<ul class="sub-index index toggle" id="infos-nav">
				<li><a class="sub-button button" href="&#x2F;">About</a></li>
				<li><a class="sub-button button" href="&#x2F;">Blog</a></li>
				<li><a class="sub-button button" href="/public&#x2F;patterns&#x2F;04-pages-02-contact&#x2F;04-pages-02-contact.html">Contact</a></li>
			</ul>
		</li
		><li>
			<a class="nav-button button" href="#le-musee-nav">Le musée</a>
			<ul class="sub-index index toggle" id="le-musee-nav">
				<li><a class="sub-button button" href="&#x2F;">About</a></li>
				<li><a class="sub-button button" href="&#x2F;">Blog</a></li>
				<li><a class="sub-button button" href="&#x2F;">Contact</a></li>
			</ul>
		</li>
	</ul>

	<ul class="social-index index">
		 <li><a class="fb-thumb thumb" href="http://facebook.com">Facebook</a>
</li
		><li><a class="tw-thumb thumb" href="http://twitter.com">Twitter</a>
</li
		><li><a class="in-thumb thumb" href="http://instagram.com">Instagram</a>
</li>
	</ul>

	<ul class="link-index index">
		 <li><a class="portal-icon-button icon-button button" href="&#x2F;">Portail des musées cantonaux</a></li
		><li><a class="link-button button" href="&#x2F;">Access</a></li
		><li><a class="link-button button" href="/public&#x2F;patterns&#x2F;04-pages-02-contact&#x2F;04-pages-02-contact.html">Contact</a></li
		><li><a class="link-button button" href="&#x2F;">Newsletter</a></li>
	</ul>

	<ul class="lang-index index">
		 <li><a class="on" href="fr">FR</a></li
		><li><a href="en">EN</a></li>
	</ul>

	<form action="&#x2F;" method="post" class="search-uni-form uni-form @600-shown">
	<input type="search" class="search-input" placeholder="Recherche" />
	<input type="submit" class="search-thumb thumb" value="Rechercher" />
</form>

	<a class="close-thumb thumb" href="#nav">
	<svg>
		<title>Close</title>
		<line class="stroke-line" x1="5" y1="5" x2 ="35" y2="35"></line>
		<line class="stroke-line" x1="5" y1="35" x2 ="35" y2="5"></line>
	</svg>
</a>

</nav>

Footer

HTML

									
										<footer class="site-footer" role="contentinfo">
	<div class="grid-block block">
		<div class="grid-1/3 @600-grid-1/6 block">
			<a class="vd-thumb thumb">Canton de Vaud</a>
		</div

		><div class="grid-2/3 @600-grid-1/4 block">
			<h2 class="text-7">Le Musée</h2>
			<ul class="footer-index index text-9">
				<li><a href="#">Histoire</a></li>
				<li><a href="#">Equipe</a></li>
				<li><a href="#">Faire un don</a></li>
				<li><a href="#">Société vaudoise d'Entomologie</a></li>
				<li><a href="#">Rapports annuels</a></li>
			</ul>
		</div

		><div class="grid-2/3 grid-left-1/3 @600-grid-1/4 @600-grid-left-0 block">
			<h2 class="text-7">Recherche Scientifique</h2>
			<ul class="footer-index index text-9">
				<li><a href="#">Ephéméroptères</a></li>
				<li><a href="#">Chironomides</a></li>
				<li><a href="#">Fourmis des bois</a></li>
				<li><a href="#">Malaria aviaire</a></li>
			</ul>
		</div

		><div class="grid-2/3 grid-left-1/3 @600-grid-1/3 @600-grid-left-0 block">
			<ul class="index">
				<li><a class="text-7" href="#">Amis du Musée</a></li>
				<li><a class="text-7" href="#">Presse</a></li>
			</ul>
		</div>
	</div>
</footer>

Exposition 1

14 juin 2015

Kader Attvia. Les blessures sont là

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus. Hyper text linkus operari avec computatrum ad coniungere hominum. Standards code est pulchra on chromium et foxus sed souvent suckum in internet explorum.

This is the 1st slide in a series. It depicts an image of something colourful and awesome.

This is the second slide in a series. It depicts an image of something groovy.

This is the penultimate slide in a series. It depicts an image of something, I guess.

This is the last slide in a series. It depicts an image of something.

Previous Next

Visite guidée - famille

Crédit Photos

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.

Photo 1: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.
Photo 2: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.
Photo 3: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.

HTML

									
										
<time class="text-4 lined block" datetime="14-06-2015">14 juin 2015</time>

<h2 class="text-1">Kader Attvia. Les blessures sont là</h2>

<p>Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus. Hyper text linkus operari avec computatrum ad coniungere hominum. Standards code est pulchra on chromium et foxus sed souvent suckum in internet explorum.</p>

<div class="slides-block block">
	<!-- Slides are white-space sensitive. Avoid spaces between them. -->
	<figure class="slide-block block slide" id="slide-1">
		<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;nature&#x2F;520x240" />
		<figcaption>This is the 1st slide in a series. It depicts an image of something colourful and awesome.</figcaption>
	</figure><figure class="slide-block block slide" id="slide-2">
		<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;objects&#x2F;520x320" />
		<figcaption>This is the second slide in a series. It depicts an image of something groovy.</figcaption>
	</figure><figure class="slide-block block slide" id="slide-3">
		<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;food&#x2F;520x292" />
		<figcaption>This is the penultimate slide in a series. It depicts an image of something, I guess.</figcaption>
	</figure><figure class="slide-block block slide" id="slide-4">
		<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;buildings&#x2F;520x320" />
		<figcaption>This is the last slide in a series. It depicts an image of something.</figcaption>
	</figure>

	<a class="prev-ctrl-thumb ctrl-thumb thumb" href="#slide-1">Previous</a>
	<a class="next-ctrl-thumb ctrl-thumb thumb" href="#slide-3">Next</a>
</div>

<div class="video-block block">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/SavsJYXWgm8" frameborder="0" allowfullscreen></iframe>
</div>

<div class="video-block block">
	<iframe src="https://player.vimeo.com/video/74100316" width="520" height="292" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

<img src="//source.unsplash.com/category/nature/600x400" />
<img src="//source.unsplash.com/category/food/600x400" />

<p class="text-10">Visite guidée - famille</p>

<h3 class="text-10">Crédit Photos</h3>

<p class="text-10">Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</p>
<ol class="index">
	<li class="text-10">Photo 1: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</li>
	<li class="text-10">Photo 2: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</li>
	<li class="text-10">Photo 3: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</li>
</ol>

Exposition 2

Exposition

14 juin 2015

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus. Hyper text linkus operari avec computatrum ad coniungere hominum. Standards code est pulchra on chromium et foxus sed souvent suckum in internet explorum.

Visite guidée - famille

Activitiés liées

Samedi 14 novembre

14h - 17h : Atelier de dessin pour adultes

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. En savoir plus

Samedi 14 novembre

16h : Extraction du miel

Société d'apiculture de Lausanne. En savoir plus En savoir plus

Jeudi 24 septembre

17h - 19h : Projection du film "Des abeilles et des hommes"

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python

Crédit Photos

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.

Photo 1: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.
Photo 2: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.
Photo 3: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.

HTML

									
										<div class="grid-1/1 block">
	<p class="text-2">Exposition</p>
	<time class="text-4 lined block" datetime="14-06-2015">14 juin 2015</time>
</div

><div class="grid-1/1 grid-top-3 @600-grid-1/2 block">
		<p>Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus. Hyper text linkus operari avec computatrum ad coniungere hominum. Standards code est pulchra on chromium et foxus sed souvent suckum in internet explorum.</p>
	<p class="text-10">Visite guidée - famille</p>
</div

><div class="grid-1/1 grid-top-3 @600-grid-5/12 @600-grid-left-1/12 block">
	<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;nature&#x2F;400x300" />
	<section class=box-block block>
	<h1 class="text-2">Activitiés liées</h1>

	<!-- Note: This date should only be rendered if it differs from the date
	     of the previous activity in the loop. -->
	<h2 class="lined text-4"><time datetime="2015-11-14">Samedi 14 novembre</time></h2>
	<h3 class="text-3">14h - 17h : Atelier de dessin pour adultes</h3>
	<p>
	Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.
	<a href="&#x2F; class=”cosmos-page-button”">En savoir plus</a>
	</p>
	<!-- Note: This date should only be rendered if it differs from the date
	     of the previous activity in the loop. -->
	<h2 class="lined text-4"><time datetime="2015-11-14">Samedi 14 novembre</time></h2>
	<h3 class="text-3">16h : Extraction du miel</h3>
	<p>
	Société d&#39;apiculture de Lausanne. En savoir plus
	<a href="&#x2F; class=”cosmos-page-button”">En savoir plus</a>
	</p>
	<!-- Note: This date should only be rendered if it differs from the date
	     of the previous activity in the loop. -->
	<h2 class="lined text-4"><time datetime="2015-09-24">Jeudi 24 septembre</time></h2>
	<h3 class="text-3">17h - 19h : Projection du film &quot;Des abeilles et des hommes&quot;</h3>
	<p>
	Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python
	
	</p>
</section>

</div

><div class="grid-1/1 grid-top-3 @600-grid-1/2 block">
	<h3 class="text-10">Crédit Photos</h3>

<p class="text-10">Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</p>
<ol class="index">
	<li class="text-10">Photo 1: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</li>
	<li class="text-10">Photo 2: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</li>
	<li class="text-10">Photo 3: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</li>
</ol>

</div>

Exposition Permanent 2

Exposition permanente

14 juin 2015

Kader Attvia. Les blessures sont là

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus. Hyper text linkus operari avec computatrum ad coniungere hominum. Standards code est pulchra on chromium et foxus sed souvent suckum in internet explorum.

Visite guidée - famille

Crédit Photos

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.

Photo 1: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.
Photo 2: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.
Photo 3: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.

HTML

									
										<div class="grid-1/1 block">
	<p class="text-2">Exposition permanente</p>
	<time class="text-4 lined block" datetime="14-06-2015">14 juin 2015</time>
</div

><div class="grid-1/1 grid-top-3 @600-grid-1/2 block">
	<h1 class="text-1">Kader Attvia. Les blessures sont là</h1>
	<p>Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus. Hyper text linkus operari avec computatrum ad coniungere hominum. Standards code est pulchra on chromium et foxus sed souvent suckum in internet explorum.</p>
	<p class="text-10">Visite guidée - famille</p>
</div

><div class="grid-1/1 grid-top-3 @600-grid-5/12 @600-grid-left-1/12 block">
	<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;nature&#x2F;400x300" />
</div

><div class="grid-1/1 grid-top-3 @600-grid-1/2 block">
	<h3 class="text-10">Crédit Photos</h3>

<p class="text-10">Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</p>
<ol class="index">
	<li class="text-10">Photo 1: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</li>
	<li class="text-10">Photo 2: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</li>
	<li class="text-10">Photo 3: Crunchum ipsum dolor sit coder void, constructor function, sed do while loop. Encre de Chine et crayon sur papier, 50 x 35 cm.</li>
</ol>

</div>

Slides

Previous Next

HTML

									
										<div class="slides-block block">
	<!-- Slides are white-space sensitive. Avoid spaces between them. -->
	<figure class="slide-block block slide" id="slide-1">
		<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;nature&#x2F;520x240" />
		<figcaption>This is the 1st slide in a series. It depicts an image of something colourful and awesome.</figcaption>
	</figure><figure class="slide-block block slide" id="slide-2">
		<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;objects&#x2F;520x320" />
		<figcaption>This is the second slide in a series. It depicts an image of something groovy.</figcaption>
	</figure><figure class="slide-block block slide" id="slide-3">
		<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;food&#x2F;520x292" />
		<figcaption>This is the penultimate slide in a series. It depicts an image of something, I guess.</figcaption>
	</figure><figure class="slide-block block slide" id="slide-4">
		<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;buildings&#x2F;520x320" />
		<figcaption>This is the last slide in a series. It depicts an image of something.</figcaption>
	</figure>

	<a class="prev-ctrl-thumb ctrl-thumb thumb" href="#slide-1">Previous</a>
	<a class="next-ctrl-thumb ctrl-thumb thumb" href="#slide-3">Next</a>
</div>

Video Big

Video title

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus.

HTML

									
										
<div class="video-block block">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/SavsJYXWgm8" frameborder="0" allowfullscreen></iframe>
</div>

<h3 class="text-3">Video title</h3>
<p>
Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.
Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum.
Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus.
</p>

Video Small

Video title

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus.

HTML

									
										
<div class="video-block block">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/SavsJYXWgm8" frameborder="0" allowfullscreen></iframe>
</div>

<h3 class="text-4">Video title</h3>
<p>
Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.
Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum.
Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus.
</p>

Artist Menu

Nom de l'artiste

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z

Tous les artistes

HTML

									
										<h3 class="text-4">Nom de l'artiste</h4>
<ul class="letter-index index">
	 <li><a class="letter-button button" href="#">A</a></li
	><li><a class="letter-button button" href="#">B</a></li
	><li><a class="letter-button button on" href="#">C</a></li
	><li><a class="letter-button button" href="#">D</a></li
	><li><a class="letter-button button" href="#">E</a></li
	><li><a class="letter-button button" href="#">F</a></li
	><li><a class="letter-button button" href="#">G</a></li
	><li><a class="letter-button button" href="#">H</a></li
	><li><a class="letter-button button" href="#">I</a></li
	><li><a class="letter-button button" href="#">J</a></li
	><li><a class="letter-button button" href="#">K</a></li
	><li><a class="letter-button button" href="#">L</a></li
	><li><a class="letter-button button" href="#">M</a></li
	><li><a class="letter-button button" href="#">N</a></li
	><li><a class="letter-button button" href="#">O</a></li
	><li><a class="letter-button button" href="#">P</a></li
	><li><a class="letter-button button" href="#">Q</a></li
	><li><a class="letter-button button" href="#">R</a></li
	><li><a class="letter-button button" href="#">S</a></li
	><li><a class="letter-button button" href="#">T</a></li
	><li><a class="letter-button button" href="#">U</a></li
	><li><a class="letter-button button" href="#">V</a></li
	><li><a class="letter-button button" href="#">W</a></li
	><li><a class="letter-button button" href="#">X</a></li
	><li><a class="letter-button button" href="#">Y</a></li
	><li><a class="letter-button button" href="#">Z</a></li>
</ul>

<p><a href="#">Tous les artistes</a></p>

Full Alert

Le musée déménage!

Rendez-vous en décembre avec une toute nouvelle exposition permanente!

HTML

									
										
<section class="full-block block">
	<div class="alert-block block">
		<div class="wrap-block block">
			<h1 class="text-13">Le musée déménage!</h1>
			<p>Rendez-vous en décembre avec une toute nouvelle exposition permanente!</p>
		</div>
	</div>
</section>

Event

Agenda

14 juin 2015

Kader Attvia. Les blessures sont là

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus. Hyper text linkus operari avec computatrum ad coniungere hominum. Standards code est pulchra on chromium et foxus sed souvent suckum in internet explorum.

Previous Next

Visite guidée - famille

HTML

									
										<div class="agenda-detail">
    <div class="grid-1/1 block">
        <p class="text-2">Agenda</p>
        <time class="text-4 lined block" datetime="14-06-2015">14 juin 2015</time>
    </div

    ><div class="grid-1/1 grid-top-3 @600-grid-1/2 block">
        <h1 class="text-1">Kader Attvia. Les blessures sont là</h1>
        <p><br/></p>
        <p>Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus. Hyper text linkus operari avec computatrum ad coniungere hominum. Standards code est pulchra on chromium et foxus sed souvent suckum in internet explorum.</p>
        <div class="slides-block block">
	<!-- Slides are white-space sensitive. Avoid spaces between them. -->
	<figure class="slide-block block slide" id="slide-1">
		<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;nature&#x2F;520x240" />
		<figcaption>This is the 1st slide in a series. It depicts an image of something colourful and awesome.</figcaption>
	</figure><figure class="slide-block block slide" id="slide-2">
		<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;objects&#x2F;520x320" />
		<figcaption>This is the second slide in a series. It depicts an image of something groovy.</figcaption>
	</figure><figure class="slide-block block slide" id="slide-3">
		<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;food&#x2F;520x292" />
		<figcaption>This is the penultimate slide in a series. It depicts an image of something, I guess.</figcaption>
	</figure><figure class="slide-block block slide" id="slide-4">
		<img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;buildings&#x2F;520x320" />
		<figcaption>This is the last slide in a series. It depicts an image of something.</figcaption>
	</figure>

	<a class="prev-ctrl-thumb ctrl-thumb thumb" href="#slide-1">Previous</a>
	<a class="next-ctrl-thumb ctrl-thumb thumb" href="#slide-3">Next</a>
</div>

        <p class="text-10">Visite guidée - famille</p>
    </div

    ><div class="grid-1/1 grid-top-3 @600-grid-5/12 @600-grid-left-1/12 block">
        <img class="full-block block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;nature&#x2F;400x300" />
        <p class="text-10"></p>
    </div>
</div>

Rgpd Alert

Ce site utilise des cookies afin de vous offrir une expérience optimale de navigation. En continuant de visiter ce site, vous acceptez l'utilisation de ces cookies.
Pour en savoir plus sur comment les désactiver, ainsi que sur notre politique en matière de protection des données

HTML

									
										


<script type="text/javascript">
/*<![CDATA[*/
/*TS_inlineJS*/

          var vdmusees_rgpdCookieAlertNameDismissed = "vdmusees_rgpdCookieAlertNameDismissed-mcba"

/*]]>*/
</script>

<div id="vd_musees_cookie_rgpd" class="alert-block block rgpd" role="alert" style=""><button id="vd_musees_cookie_rgpd-dismiss" type="button" class="close dismiss-thumb thumb on" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button><div class="wrap-block block">Ce site utilise des cookies afin de vous offrir une expérience optimale de navigation. En continuant de visiter ce site, vous acceptez l'utilisation de ces cookies.<br><a href="http://www.musees.vd.ch/index.php?id=6957">Pour en savoir plus sur comment les désactiver, ainsi que sur notre politique en matière de protection des données</a></div></div>

News Box

Actualités

Jeudi 24 septembre

Le rapport annuel 2014 est en ligne

Tout, tout, tout sur le musée en 2014

HTML

									
										<section class=box-block block>
	<h1 class="text-2">Actualités</h1>

	<h2 class="lined text-4"><time datetime="2015-09-24">Jeudi 24 septembre</time></h2>
	<h3 class="text-3"><a href="&#x2F;">Le rapport annuel 2014 est en ligne</a></h3>
	<p>Tout, tout, tout sur le musée en 2014</p>
</section>

Activities Box

Activitiés liées

Samedi 14 novembre

14h - 17h : Atelier de dessin pour adultes

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. En savoir plus

Samedi 14 novembre

16h : Extraction du miel

Société d'apiculture de Lausanne. En savoir plus En savoir plus

Jeudi 24 septembre

17h - 19h : Projection du film "Des abeilles et des hommes"

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python

HTML

									
										<section class=box-block block>
	<h1 class="text-2">Activitiés liées</h1>

	<!-- Note: This date should only be rendered if it differs from the date
	     of the previous activity in the loop. -->
	<h2 class="lined text-4"><time datetime="2015-11-14">Samedi 14 novembre</time></h2>
	<h3 class="text-3">14h - 17h : Atelier de dessin pour adultes</h3>
	<p>
	Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.
	<a href="&#x2F; class=”cosmos-page-button”">En savoir plus</a>
	</p>
	<!-- Note: This date should only be rendered if it differs from the date
	     of the previous activity in the loop. -->
	<h2 class="lined text-4"><time datetime="2015-11-14">Samedi 14 novembre</time></h2>
	<h3 class="text-3">16h : Extraction du miel</h3>
	<p>
	Société d&#39;apiculture de Lausanne. En savoir plus
	<a href="&#x2F; class=”cosmos-page-button”">En savoir plus</a>
	</p>
	<!-- Note: This date should only be rendered if it differs from the date
	     of the previous activity in the loop. -->
	<h2 class="lined text-4"><time datetime="2015-09-24">Jeudi 24 septembre</time></h2>
	<h3 class="text-3">17h - 19h : Projection du film &quot;Des abeilles et des hommes&quot;</h3>
	<p>
	Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python
	
	</p>
</section>

Visit Box

Préparer sa visite

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.

Mini guide pdf

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.

Rallyes des abeilles pdf

HTML

									
										<section class=box-block block>
	<h1 class="text-2">Préparer sa visite</h1>

	<p>Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.</p>
	<p><a href="">Mini guide <small>pdf</small></a></p>

	<p>Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.</p>
	<p><a href="">Rallyes des abeilles <small>pdf</small></a></p>
</section>

Bibliographie Box

Bibliographie

Erica Billeter et al.

Chefs-d'oeuvre du Musée cantonal des Beaux-Arts, Lausanne

Lausanne, 1989

Sandor Kuthy & THerese Bhattacharya-Stettler

Albert Anker, 1831-1910, Catalogue raisonné des peintures et des études a l'huile

Wiese Verlag Basel, 1995

HTML

									
										<section class=box-block block>
	<h1 class="text-2">Bibliographie</h1>

	<h2 class="lined text-4">Erica Billeter et al.</h2>
	<h3 class="text-3">Chefs-d&#39;oeuvre du Musée cantonal des Beaux-Arts, Lausanne</h3>
	<p>Lausanne, 1989</p>
	<h2 class="lined text-4">Sandor Kuthy &amp; THerese Bhattacharya-Stettler</h2>
	<h3 class="text-3">Albert Anker, 1831-1910, Catalogue raisonné des peintures et des études a l&#39;huile</h3>
	<p>Wiese Verlag Basel, 1995</p>
</section>

Collection Card

Collection title

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum.

HTML

									
										<div class="med-card-block card-block grid-block block">
	<figure class="block">
		<img src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;nature&#x2F;400x300" />
		<figcaption class="text-10"><p>Lorem ipsum dolor sit.</p></figcaption>
	</figure>
	<div class="block">
		<h2 class="text-3">Collection title</h2>
		<p>
			Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.
			Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum.
		</p>
		<p><a href="/" class=”cosmos-page-button”>En savoir plus</a></p>
	</div>
</div>

Event Card

14 juin 2015

Kader Attvia. Les blessures sont là

Tous les premièrs mardis du mois à 18h, pas besoin de reserver.

Visite guidée - famille

	Rez-de-chaussée du Palais
	14:45-15:30

Enfants Familles Animations Evénement

HTML

									
										<article class="card-block grid-block block">
	<img class="grid-1/3 @600-grid-1/3 block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;nature&#x2F;400x300"

	/><div class="grid-2/3 @600-grid-2/3 block">
		<time class="text-4 lined block" datetime="14-06-2015">14 juin 2015</time>
		<h2 class="text-3"><a href="&#x2F;">Kader Attvia. Les blessures sont là</a></h2>
		<p>Tous les premièrs mardis du mois à 18h, pas besoin de reserver.</p>
		<p class="text-10">Visite guidée - famille</p>
		<table>
		    <tbody>
		        <tr>
		            <td class="text-muted">
		                <i class="fa fa-map-marker" aria-hidden="true"></i>
		            </td>
		            <td>Rez-de-chaussée du Palais</td>
		        </tr>
		        <tr>
		            <td class="text-muted">
		                <i class="fa fa-clock-o" aria-hidden="true"></i>
		            </td>
		            <td>14:45-15:30</td>
		        </tr>
	        </tbody>
	    </table>
	    <p class="text-10">
            <span span="tag">Enfants</span> 
            <span span="tag">Familles</span> 
            <span span="tag">Animations</span> 
            <span span="tag">Evénement</span>
        </p>
	</div>
</article>

Expo Card

Exhibition title

Du 05 juin 2015 au 14 juin 2015

crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.

MCBA – expositions

HTML

									
										<div class="med-card-block card-block grid-block block">
	<img class="block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;nature&#x2F;400x300"

	/><div class="block">
		<h2 class="text-3"><a href="&#x2F;">Exhibition title</a></h2>
		<time class="text-4 lined block" datetime="">Du 05 juin 2015 au 14 juin 2015</time>
		<p>crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.</p>
		<p class="text-10">MCBA – expositions</h3>
	</div>
</div>

Oeuvre Card

Artist title

Oeuvre title

crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.

HTML

									
										<div class="med-card-block card-block grid-block block">
	<img class="block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;nature&#x2F;400x300"

	/><div class="block">
		<h2 class="text-3"><a href="&#x2F;">Artist title</a></h2>
		<p class="text-4">Oeuvre title</p>
		<p>crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.</p>
	</div>
</div>

Small Card

Artist name

Oeuvre title

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.

HTML

									
										<div class="small-card-block card-block grid-block block">
	<img class="block" src="&#x2F;&#x2F;source.unsplash.com&#x2F;category&#x2F;nature&#x2F;400x300"

	/><div class="block">
		<h2 class="text-4"><a href="&#x2F;">Artist name</a></h2>
		<p class="text-3">Oeuvre title</p>
		<p>Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.</p>
	</div>
</div>