Structures

Announcements

Individual announcements can be used without image. Remove image-container div.

Haberler & Genel Duyurular

tüm duyurular>>
Announcement without image
/symposium
Ut fringilla porttitor dignissim. Fusce ac ipsum dictum magna accumsan maximus. Ut sit amet imperdiet augue. Vivamus aliquam nisi sed tortor ornare, sit amet molestie libero bibendum
12/10/2017
Announcement with image
Ut fringilla porttitor dignissim. Fusce ac ipsum dictum magna accumsan maximus. Ut sit amet imperdiet augue. Vivamus aliquam nisi sed tortor ornare, sit amet molestie libero bibendum
12/10/2017 
<div class="module-wrapper announcements">
	<div class="modal-head">
		<h3>Haberler & Genel Duyurular</h3><a href="#">tüm duyurular>></a></div>
	<div class="announcements-wrapper">

		<div class="announcement">
			<!--
			<div class="image-container">
				<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRqvbv-LfPyA1yxllAdRrGuWrvKxZARjaGrs6WggmKQLc5aZeSX">
			</div>
			-->
			<a href="#" class="announcement-link">
				<div class="info-container">

					<div class="announcement-title">
						Announcement without image
						<div class="announcement-category" style="color: rgb(207, 10, 44)">
							/symposium
						</div>

					</div>

					<div class="announcement-text">
						Ut fringilla porttitor dignissim. Fusce ac ipsum dictum magna accumsan maximus. Ut sit amet imperdiet augue. Vivamus aliquam nisi sed tortor ornare, sit amet molestie libero bibendum
					</div>

					<div class="announcement-date">
						12/10/2017
					</div>
					<!--
					<a href="#" class="read-more">Read more...</a>
					-->
				</div>
			</a>
		</div>

		<div class="announcement">

			<div class="image-container">
				<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRqvbv-LfPyA1yxllAdRrGuWrvKxZARjaGrs6WggmKQLc5aZeSX">
			</div>
			<a href="#" class="announcement-link">
				<div class="info-container">
					<div class="announcement-title">
						Announcement with image
					</div>

					<div class="announcement-text">
						Ut fringilla porttitor dignissim. Fusce ac ipsum dictum magna accumsan maximus. Ut sit amet imperdiet augue. Vivamus aliquam nisi sed tortor ornare, sit amet molestie libero bibendum
					</div>

					<div class="announcement-date">
						12/10/2017
					</div>
					<!--
						<a href="#" class="read-more">Read more...</a>
						-->
				</div>
			</a>
		</div>


	</div>


</div>

Footers

Headers

Header With Menu

Header Item

ODTÜ BIDB FAQ
DEPARTMENT NAME 
<header class="header-menu dark-back" id="dark-back">
	<div class="container">
		<div class="header-top">
			<div class="links">
				<a href="#">ODTÜ</a>
				<a href="#">BIDB</a>
				<a href="#">FAQ</a>
			</div>
			<div class="search">
				<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>
			</div>


			<div class="social">
				<div class="lang">
					<a href="#">English</a>
				</div>
				<a href="https://www.facebook.com/MiddleEastTechnicalUniversity" target="_blank">
					<i class="fa fa-facebook" aria-hidden="true"></i>
				</a>

				<a href="https://twitter.com/METU_ODTU" target="_blank">
					<i class="fa fa-twitter" aria-hidden="true"></i>
				</a>

				<a href="http://instagram.com/metu_odtu#" target="_blank">
					<i class="fa fa-instagram" aria-hidden="true"></i>
				</a>

				<a href="http://www.linkedin.com/edu/school?id=20482&trk=edu-cp-title" target="_blank">
					<i class="fa fa-linkedin" aria-hidden="true"></i>
				</a>

				<a href="http://www.youtube.com/user/middleastechuniv" target="_blank">
					<i class="fa fa-youtube-play" aria-hidden="true"></i>
				</a>

				<a href="https://www.snapchat.com/add/ODTU_METU" target="_blank">
					<i class="fa fa-snapchat" aria-hidden="true"></i>
				</a>
			</div>
		</div>
	</div>
</header>
<header class="header-menu" id="logo-header">
	<div class="container">
		<div class="header-middle">
			<img src="http://me2.metu.edu.tr/sites/all/themes/me/images/odtu-logo-en.svg" />
			<span class="department-name">DEPARTMENT NAME</span>
		</div>
	</div>
</header>
<header class="header-menu red-back">
	<div class="container">
		<nav id="menu">
			<label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label>
			<input type="checkbox" id="tm">
			<ul class="main-menu clearfix">
				<li class="menu-active-item"><a href="#">Menu Item</a></li>
				<li><a href="#">2-level DD 
	        
	        <label title="Toggle Drop-down" class="drop-icon" for="sm1">▾</label>
	      </a>
					<input type="checkbox" id="sm1">
					<ul class="sub-menu">
						<li><a href="#">International Joint-Degree Programs</a></li>
						<li><a href="#">Item 2.2
	            
	            <label title="Toggle Drop-down" class="drop-icon" for="sm2">▾</label>
	          </a>
							<input type="checkbox" id="sm2">
							<ul class="sub-menu">
								<li><a href="#">Item 2.2.1</a></li>
								<li><a href="#">Item 2.2.2</a></li>
								<li><a href="#">Item 2.2.3</a></li>
							</ul>
						</li>
						<li><a href="#">Item 3.4</a></li>
					</ul>
				</li>
				<li><a href="#">Menu Item</a></li>

			</ul>
		</nav>

	</div>
</header>

Logo Header Red

DEPARTMENT NAME 
<header class="header-menu no-menu" id="logo-header">
	<div class="container">
		<div class="header-middle">
			<img src="assets/toolkit/images/odtu8.svg" />
			<span class="department-name">DEPARTMENT NAME</span>
		</div>
	</div>
</header>

Logo Header

DEPARTMENT NAME 
<header class="header-menu" id="logo-header">
	<div class="container">
		<div class="header-middle">
			<img src="http://me2.metu.edu.tr/sites/all/themes/me/images/odtu-logo-en.svg" />
			<span class="department-name">DEPARTMENT NAME</span>
		</div>
	</div>
</header>

Nav Header

<header class="header-menu red-back">
	<div class="container">
		<nav id="menu">
			<label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label>
			<input type="checkbox" id="tm">
			<ul class="main-menu clearfix">
				<li class="menu-active-item"><a href="#">Menu Item</a></li>
				<li><a href="#">2-level DD 
	        
	        <label title="Toggle Drop-down" class="drop-icon" for="sm1">▾</label>
	      </a>
					<input type="checkbox" id="sm1">
					<ul class="sub-menu">
						<li><a href="#">International Joint-Degree Programs</a></li>
						<li><a href="#">Item 2.2
	            
	            <label title="Toggle Drop-down" class="drop-icon" for="sm2">▾</label>
	          </a>
							<input type="checkbox" id="sm2">
							<ul class="sub-menu">
								<li><a href="#">Item 2.2.1</a></li>
								<li><a href="#">Item 2.2.2</a></li>
								<li><a href="#">Item 2.2.3</a></li>
							</ul>
						</li>
						<li><a href="#">Item 3.4</a></li>
					</ul>
				</li>
				<li><a href="#">Menu Item</a></li>

			</ul>
		</nav>

	</div>
</header>

Top Header

ODTÜ BIDB FAQ 
<header class="header-menu dark-back" id="dark-back">
	<div class="container">
		<div class="header-top">
			<div class="links">
				<a href="#">ODTÜ</a>
				<a href="#">BIDB</a>
				<a href="#">FAQ</a>
			</div>
			<div class="search">
				<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>
			</div>


			<div class="social">
				<div class="lang">
					<a href="#">English</a>
				</div>
				<a href="https://www.facebook.com/MiddleEastTechnicalUniversity" target="_blank">
					<i class="fa fa-facebook" aria-hidden="true"></i>
				</a>

				<a href="https://twitter.com/METU_ODTU" target="_blank">
					<i class="fa fa-twitter" aria-hidden="true"></i>
				</a>

				<a href="http://instagram.com/metu_odtu#" target="_blank">
					<i class="fa fa-instagram" aria-hidden="true"></i>
				</a>

				<a href="http://www.linkedin.com/edu/school?id=20482&trk=edu-cp-title" target="_blank">
					<i class="fa fa-linkedin" aria-hidden="true"></i>
				</a>

				<a href="http://www.youtube.com/user/middleastechuniv" target="_blank">
					<i class="fa fa-youtube-play" aria-hidden="true"></i>
				</a>

				<a href="https://www.snapchat.com/add/ODTU_METU" target="_blank">
					<i class="fa fa-snapchat" aria-hidden="true"></i>
				</a>
			</div>
		</div>
	</div>
</header>

Left Menu

Width of this section fills width of its container.

Section Title 

<div class="left-list-menu">
	<h3> Section Title </h3>
	<ul class="list-bulletless">
		<li><a href="#" class="active">Öğretim Üyeleri</a></li>
		<li><a href="#">Araştırma Görevlileri</a></li>
		<li><a href="#">Yönetim</a></li>
		<li><a href="#">Destek Personeli</a></li>
	</ul>
</div>

People Card

People cards with container. Duplicate people-container div under people-card-container div for other people.

Metin Akkök
Profesör
Ofis: F-207
Tel: 0312 456 7899
Fax: 0312 456 7899
e-Posta: user@metu.edu.tr
Web: user.metu.edu.tr 
<div class="people-card-container">
	<div class="people-container">
		<div class="image-container">
			<img src="http://www.me.metu.edu.tr/meweb/images/people/36.jpg">
		</div>

		<div class="people-info">
			<div class="people-info-name">
				<a href="#">Metin Akkök</a>
			</div>

			<div class="people-info-title">
				Profesör
			</div>

			<div class="people-info-other">
				<span class="bold">Ofis:</span> F-207
			</div>

			<div class="people-info-other">
				<span class="bold">Tel:</span> 0312 456 7899
			</div>

			<div class="people-info-other">
				<span class="bold">Fax:</span> 0312 456 7899
			</div>

			<div class="people-info-other">
				<span class="bold">e-Posta:</span> <a href="#"> user@metu.edu.tr </a>
			</div>

			<div class="people-info-other">
				<span class="bold">Web:</span> <a href="#"> user.metu.edu.tr </a>
			</div>

		</div>
	</div>
</div>