Buttons

Icon Button

<a class="button-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i>Icon Button</a>

Image Button

Responsive image button width and height of this button change according to it's container.

Aday Öğrenciler

<div class="image-button-container">
	<a hre="#">
		<div class="button-title">Aday Öğrenciler</div>
	</a>
</div>

Regular

General button component.

Text Button

<button class="button-main">Button</button>
<a class="button-main">Text Button</a>

Small

General small button component.

Text Button

<button class="button-main-small">Button</button>
<a class="button-main-small">Text Button</a>

Form Elements

Checkbox

Check Box 1

Check Box 2

<div class="checkbox-container">
	<input type="checkbox" id="checkbox-1">
	<label for="checkbox-1"><span class="checkbox">Check Box 1</span></label>
</div>

<div class="checkbox-container">
	<input type="checkbox" id="checkbox-2">
	<label for="checkbox-2"><span class="checkbox">Check Box 2</span></label>
</div>

Radio

Radio 1

Radio 2

Radio 3

<div class="checkbox-container">
	<input type="radio" name="groupName" id="radio-1">
	<label for="radio-1"><span class="radio">Radio 1</span></label>
</div>

<div class="checkbox-container">
	<input type="radio" name="groupName" id="radio-2">
	<label for="radio-2"><span class="radio">Radio 2</span></label>
</div>

<div class="checkbox-container">
	<input type="radio" name="groupName" id="radio-3">
	<label for="radio-3"><span class="radio">Radio 3</span></label>
</div>

Lists

Bullet List

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<ul>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>

Link List

<ul class="list-bulletless">
	<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
	<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
</ul>

Ordered

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

<ol>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
</ol>

Unordered

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Item1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Item2 - Aliquam tincidunt mauris eu risus.
Item3 - Vestibulum auctor dapibus neque.

<p> Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p>
<ul>
	<li><span class="bold">Item1 - </span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li><span class="bold">Item2 - </span> Aliquam tincidunt mauris eu risus.</li>
	<li><span class="bold">Item3 - </span> Vestibulum auctor dapibus neque.</li>
</ul>

Logos

Visual identity standarts are under http://www.metu.edu.tr/tr/gkk/logo-kullanim-kilavuzu page.

<div class="row">
	<div class="col-md-3"><img src="assets/toolkit/images/odtu1.svg" /></div>
	<div class="col-md-3"><img src="assets/toolkit/images/odtu2.svg" /></div>
	<div class="col-md-3"><img src="assets/toolkit/images/odtu3.svg" /></div>
	<div class="col-md-3"><img src="assets/toolkit/images/odtu7.svg" /></div>

</div>
<div class="row">
	<div class="col-md-4"><img src="assets/toolkit/images/odtu4.svg" /></div>
	<div class="col-md-4"><img src="assets/toolkit/images/odtu5.svg" /></div>
	<div class="col-md-4"><img src="assets/toolkit/images/odtu6.svg" /></div>
</div>

Media

Odtu Maps

ODTÜ Harita Servisi üzerinden görüntüle

<div class="odtu-maps-container">
	<iframe class="odtu-maps" src="http://maptest.metu.edu.tr/yer/325/%20odtu-gelistirme-vakfi-ozel-ilkogretim-okulu"></iframe>
	<a href="map.metu.edu.tr">ODTÜ Harita Servisi üzerinden görüntüle</a>
</div>

Responsive Image

<img class="reponsive-image" src="https://instagram.fsaw1-3.fna.fbcdn.net/t51.2885-15/e35/18382371_444311679248592_6742278036793589760_n.jpg">

Video

Responsive video compotent.

<video width="100%" height="auto" controls>
  <source src="assets/toolkit/images/odtu.mp4" type="video/mp4">
  <!-- <source src="movie.ogg" type="video/ogg"> -->
Your browser does not support the video tag.
</video>

Youtube Video

Responsive Youtube video.

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

Modal Head

<div class="modal-head">
	<h3>Haberler & Genel Duyurular</h3><a href="#">tüm duyurular>></a></div>

Paragraph

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.

<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
	nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.</p>

Select

<select name="" id="" class="select">
	<option value="">Option 1 asd fasd fasf</option>
	<option value="">Option 2</option>
	<option value="">Option 3</option>
	<option value="">Option 4</option>
	<option value="">Option 5</option>
</select>

Table

BÖLÜM / PROGRAM
İktisadi ve İdari Bilimler Fakültesi	Puan Türü	Kontenjan
İktisat	TM-1	110
İşletme	TM-1	110
Siyaset Bilimi ve Kamu Yönetimi	TM-2	105
Uluslararası Iliskiler	TM-2	75
İşletme (SUNY)*	TM-1	24
İşletme (SUNY)* 1/2 Burslu	TM-1	1
Küresel Siyaset ve Uluslararası Iliskiler (SUNY)*	TM-2	19
Küresel Siyaset ve Uluslararası Iliskiler (SUNY)* 1/2 Burslu	TM-2	1

<table class="table-metu">
	<thead>
		<tr>
			<th colspan="3">BÖLÜM / PROGRAM</th>
		</tr>

	</thead>
	<tbody>
		<tr class="table-metu-header">
			<th> İktisadi ve İdari Bilimler Fakültesi</th>
			<th>Puan Türü</th>
			<th>Kontenjan</th>


		</tr>



		<tr>
			<td>İktisat</td>
			<td>TM-1</td>
			<td>110</td>


		</tr>

		<tr>
			<td>İşletme</td>
			<td>TM-1</td>
			<td>110</td>


		</tr>

		<tr>
			<td>Siyaset Bilimi ve Kamu Yönetimi</td>
			<td>TM-2</td>
			<td>105</td>


		</tr>

		<tr>
			<td>Uluslararası Iliskiler</td>
			<td>TM-2</td>
			<td>75</td>


		</tr>
		<tr>
			<td>İşletme (SUNY)*</td>
			<td>TM-1</td>
			<td>24</td>


		</tr>
		<tr>
			<td>İşletme (SUNY)* 1/2 Burslu</td>
			<td>TM-1</td>
			<td>1</td>


		</tr>
		<tr>
			<td>Küresel Siyaset ve Uluslararası Iliskiler (SUNY)*</td>
			<td>TM-2</td>
			<td>19</td>

		</tr>
		<tr>
			<td>Küresel Siyaset ve Uluslararası Iliskiler (SUNY)* 1/2 Burslu</td>
			<td>TM-2</td>
			<td>1</td>


		</tr>




	</tbody>
</table>

Text Input

Search Input

<div class="search-box">
	<form>
		<input type="text" class="text-input" placeholder="Search..." />
		<button class="search-button"><i class="fa fa-search" aria-hidden="true"></i></button>
	</form>
</div>

Text Input

Label

<label for="textInput" class="text-input-label">Label</label>
<input type="text" id="textInput" class="text-input" placeholder="text input" />

Textarea

<textarea class="textarea" name="" id="" cols="30" rows="10"></textarea>

Components

Buttons

Icon Button

Image Button

Regular

Small

Form Elements

Checkbox

Radio

Lists

Bullet List

Link List

Ordered

Unordered

Logos

Media

Odtu Maps

Responsive Image

Video

Youtube Video

Modal Head

Haberler & Genel Duyurular

Paragraph

Select

Table

Text Input

Search Input

Text Input

Textarea