Atılım Mail Template

atilim-mail-template.markdown

Atılım Mail Template

A Pen by Ali GOREN on CodePen.

License.

index.html

<div class="container"><br>
	<div class="row">
		<div class="col-md-6">
			<img class="img-responsive img" src="https://i.hizliresim.com/vJpRYr.jpg" />
		</div>
	</div><br>
	<div class="row">
		<div class="col-md-12 info-col">
			<span class="info-head">Sayın <strong>Serkan Yılmaz</strong></span>
			<h4 class="info pull-right">Bilgilendirme</h4>
		</div>
	</div><br />
	<div class="row">
		<div class="col-md-12">
			<table class="table table-responsive tbl-general">
			<thead>
				<tr>
					<th>Ürün</th>
					<th>Süre / Miktar</th>
					<th>Liste Fiyatı</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>ixirlife Web Yıllık</td>
					<td>1 Yıl</td>
					<td>₺ 1920.00</td>
				</tr>
			</tbody>
			</table>
		</div>
		<div class="col-md-4 pull-right tbl-summ">
			<table class="table table-responsive table-dark">
				<tbody>
					<tr>
						<td>Liste Fiyatı:</td>
						<td>1920.00 ₺</td>
					</tr>
					<tr>
						<td>KDV(18%)</td>
						<td>100</td>
					</tr>
					<tr>
						<td><span class="total">Son Sipariş Toplamı</span></td>
						<td><span class="total">1920.00 ₺</span></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div><br>
	<div class="row">
		<div class="col-md-12">
			<p>Ödemeniz başarıyla gerçekleşmiştir. Hizmetleriniz en kısa süre içerisinde aktif edilecektir.</p>
		</div>
		<div class="col-md-12">
			<p class="contact">
				Her türlü sorunuzda bize <a href="mailto:destek@atilimyazilim.com">destek@atilimyazilim.com</a> adresinden ulaşabilir veya <strong>444 9 023</strong> nolu telefondan müşteri hizmetleri ile görüşebilirsiniz.
			</p>
		</div>
	</div><br>
	<div class="row">
		<div class="col-md-12 slogan text-center">
			ʽʽŞimdi Atılım zamanıʼʼ
		</div>
	</div><br>
	<div class="row rw-help">
		<div class="col-md-4 text-center">
			<a href="https://www.atilimyazilim.com/iletisim" target="_blank">
				<img src="https://cdn4.iconfinder.com/data/icons/universal-7/614/13_-_Question-128.png" alt="" class="responsive">
			<h4>CANLI DESTEK</h4>
			<span>www.atilimyazilim.com</span>
			</a>
		</div>
		<div class="col-md-4 text-center">
			<img src="https://cdn0.iconfinder.com/data/icons/simpline-mix/64/simpline_49-128.png" alt="" class="responsive">
			<h4>TELEFON DESTEK</h4>
			<span>444 9 023</span>
		</div>
		<div class="col-md-4 text-center">
			<img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698561-icon-5-mail-envelope-open-128.png" alt="" class="responsive">
			<h4>E-POSTA</h4>
			<span><a href="mailto:destek@atilimyazilim.com">destek@atilimyazilim.com</a></span>
		</div>
	</div><br>
	<div class="row hidden">
		<div class="col-md-6">
			<img src="http://www.natro.com/ResourceFiles/v1/images/global/mailing-images/footer-banner-hosting-1.png" alt="" class="img-responsive">
		</div>
		<div class="col-md-6">
			<img src="http://www.natro.com/ResourceFiles/v1/images/global/mailing-images/footer-banner-hosting-1.png" alt="" class="img-responsive">
		</div>
	</div><br>
	<div class="row table-dark">
		<div class="col-md-12 foot">
			<a class="brand" href="https://www.atilimyazilim.com" target="_blank">Copyright © 2017 Atılım Yazılım</a>
		</div>
	</div><br>
	<div class="row">
		<div class="col-md-12">
			<p class="foot-note">Bu mesaj ve ekleri, mesajda gönderildiği belirtilen kişi/kişilere özeldir ve gizlidir. Şirketimiz mesajın ve bilgilerinin size değişiklige ugrayarak veya geç ulaşmasından, bütünlüğünün ve gizliliğinin korunamamasından, virus içermesinden ve bilgisayar sisteminize verebileceği her hangi bir zarardan sorumlu tutulamaz.</p>
		</div>
	</div>
</div>

style.css

body {
	background-color: #e6e9ed !important;
}

.container {
	background-color: #fff !important;
}

.info {
	
}

.info-head {
	font-size: 18px !important;
	margin-top: 0px !important;
}

.info-col {
	border-bottom: 1px solid #000;
	line-height: 2
}

.table > thead > tr {
	color: #f1f1f1;
	background-color: #006eb7 !important;
}

.tbl-general {
	margin-bottom: 0px !important;
}

.tbl-general > tbody > tr > td {
	border-bottom: 1px solid #e5e5e5 !important;
	
}

.table-dark {
	color: #fff;
	background-color: #21252a !important;
}

.table-dark > tbody > tr > td {
	font-weight: 600 !important;
	border-top: 0px solid #21252a !important;
}

.total {
	color: #81bc00 !important;
	font-size: 16px !important;
}

.tbl-summ {
	margin-top: 0px !important;
}

.contact {
	font-size: 13px !important;
}

.slogan {
	color: #fff !important;
	background-color: #0092e4 !important;
	font-size: 20px;
	padding: 15px !important;
}

.rw-help {
	margin-bottom: 15px !important;
}

.foot {
	padding: 10px !important;
}

.brand, .brand:hover {
	color: #fff;
}

.foot-note {
	font-size: 12px !important;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />