<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr-TR">
<head>
<title>Paketler</title>
<meta name="description" content="<?=$ayar->google;?>" />
<meta name="keywords" content="<?=$ayar->kelime;?>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="robots" content="index, follow" />
<meta name="Revisit-After" content="1 Days" />
<link rel="shortcut icon" type="image/x-icon" href="/resimler/favicon.ico">
<meta name="generator" content="RoxiKonsept 2.0" />
<link rel="canonical" href="<?php echo " http:// ".$_SERVER['HTTP_HOST']." ".$_SERVER['REQUEST_URI']." "; ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<!-- Stil Ayarları -->
<link rel="stylesheet" href="/css/paketler.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/megamenu.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/inc.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/diller.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/lightbox.css">
<!-- JS Ayarları -->
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!-- LIGHT BOX GALERI -->
<link rel="stylesheet" href="/css/lightbox.css">
<script src="/js/lightbox.min.js"></script>
<!-- Bootstrap Ayarları -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!--Font Ayarları -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<body>
<div class="pak-paket-uzun container">
<div class="pak-paket-uzun-ic container">
<div class="row paket-uzun">
<div class="row">
<div class="col-md-3 pad0 text-center bg-white">
<div class="paket-adi paket-1">
<img src="http://www.imgim.com/4768incic1869633.png">
<h3>Free</h3>
<span class="mini-aciklama">Monthly Plan</span>
</div>
<ul class="nav paket-detay">
<li class="first first-success paket-1-baslik">$00<span class="kusur">.00</span></li>
<li>
<h3><i class="fa fa-check text-success"></i> <strong>DISK SPACE 200GB</strong></h3>
<p>Ipsum dolor sit adipiscing elit.</p>
</li>
<li>
<h3><i class="fa fa-check text-success"></i> <strong>Bandwidth 20GB</strong></h3>
<p>Eodem modo typi, qui nunc nobis videntur parum clari.</p>
</li>
<li>
<h3 class="text-muted"><i class="fa fa-check text-muted"></i> <strong>Domains <span class="text-danger">No</span></strong></h3>
<p>Nam liber tempor soluta.</p>
</li>
<li>
<h3 class="text-muted"><i class="fa fa-check text-muted"></i> <strong>Email Accounts <span class="text-danger">No</span></strong></h3>
<p>Nam liber tempor soluta.</p>
</li>
<li>
<h3 class="text-muted"><i class="fa fa-check text-muted"></i> <strong>Advanced Settings <span class="text-danger">No</span></strong></h3>
</li>
</ul>
<div class="buttons">
<a class="btn btn-primary btn-lg" href="#">Choose Plan</a>
</div>
</div>
<div class="col-md-3 pad0 text-center bg-white">
<div class="paket-adi paket-2">
<img src="http://www.imgim.com/business.png">
<h3>Business</h3>
<span class="mini-aciklama">Monthly Plan</span>
</div>
<ul class="nav paket-detay">
<li class="first first-primary paket-2-baslik">$299<span class="kusur">.99</span></li>
<li>
<h3><i class="fa fa-check text-parimary"></i> <strong>DISK SPACE 300GB</strong></h3>
<p>Ipsum dolor sit adipiscing elit.</p>
</li>
<li>
<h3><i class="fa fa-check text-parimary"></i> <strong>Bandwidth 30GB</strong></h3>
<p>Eodem modo typi, qui nunc nobis videntur parum clari.</p>
</li>
<li>
<h3 class="text-muted"><i class="fa fa-check text-muted"></i> <strong>Domains <span class="text-danger">No</span></strong></h3>
<p>Nam liber tempor soluta.</p>
</li>
<li>
<h3><i class="fa fa-check text-parimary"></i> <strong>Email Accounts 3 </strong></h3>
<p>Nam liber tempor soluta.</p>
</li>
<li>
<h3 class="text-muted"><i class="fa fa-check text-muted"></i> <strong>Advanced Settings <span class="text-danger">No</span></strong></h3>
</li>
</ul>
<div class="buttons">
<a class="btn btn-primary btn-lg" href="#">Choose Plan</a>
</div>
</div>
<div class="col-md-3 pad0 text-center bg-white golge">
<div class="paket-adi paket-danger paket-3">
<img src="http://www.imgim.com/unlimited.png">
<h3>Unlimited</h3>
<span class="mini-aciklama">Monthly Plan</span>
</div>
<ul class="nav paket-deta">
<li class="first first-danger paket-3-baslik">$499<span class="kusur">.99</span></li>
<li>
<h3><i class="fa fa-check text-danger"></i> <strong>DISK SPACE 500GB</strong></h3>
<p>Ipsum dolor sit adipiscing elit.</p>
</li>
<li>
<h3><i class="fa fa-check text-danger"></i> <strong>Bandwidth 50GB</strong></h3>
<p>Eodem modo typi, qui nunc nobis videntur parum clari.</p>
</li>
<li>
<h3><i class="fa fa-check text-danger"></i> <strong>Domains 5 </strong></h3>
<p>Nam liber tempor soluta.</p>
</li>
<li>
<h3><i class="fa fa-check text-danger"></i> <strong>Email Accounts 5 </strong></h3>
<p>Nam liber tempor soluta.</p>
</li>
<li>
<h3><i class="fa fa-check text-danger"></i> <strong>Advanced Settings <span class="text-success">Yes</span></strong></h3>
</li>
</ul>
<div class="buttons">
<a class="btn btn-warning btn-lg" href="#">Choose Plan</a>
</div>
</div>
<div class="col-md-3 pad0 text-center bg-white">
<div class="paket-adi paket-4">
<img src="http://www.imgim.com/professional.png">
<h3>Professional</h3>
<span class="mini-aciklama">Monthly Plan</span>
</div>
<ul class="nav paket-detay">
<li class="first first-warning paket-4-baslik">$399<span class="kusur">.99</span></li>
<li>
<h3><i class="fa fa-check text-warning"></i> <strong>DISK SPACE 400GB</strong></h3>
<p>Ipsum dolor sit adipiscing elit.</p>
</li>
<li>
<h3><i class="fa fa-check text-warning"></i> <strong>Bandwidth 50GB</strong></h3>
<p>Eodem modo typi, qui nunc nobis videntur parum clari.</p>
</li>
<li>
<h3><i class="fa fa-check text-warning"></i> <strong>Domains 4 </strong></h3>
<p>Nam liber tempor soluta.</p>
</li>
<li>
<h3><i class="fa fa-check text-warning"></i> <strong>Email Accounts 4 </strong></h3>
<p>Nam liber tempor soluta.</p>
</li>
<li>
<h3 class="text-muted"><i class="fa fa-check text-muted"></i> <strong>Advanced Settings <span class="text-danger">No</span></strong></h3>
</li>
</ul>
<div class="buttons">
<a class="btn btn-primary btn-lg" href="#">Choose Plan</a>
</div>
</div>
</div>
<div class="col-md-8 pad0 ">
</div>
</div>
</div>
</div>
</html>
/* GENEL AYARLAR */
body {
font-family: Segoe UI Regular !important;
background: #2e3d4a !important;
}
.pak-paket-uzun {
padding: 70px 0;
}
/* GLOBAL AYARLAR */
.btn {
text-transform: uppercase !important;
}
.btn-primary {
box-shadow: none !important;
border: none !important;
background: #27343f !important;
}
.btn-primary:hover {
background: #202b34 !important;
}
.btn-primary.btn-lg {
font-size: 14px !important;
font-family: Montserrat !important;
font-weight: 600;
line-height: 25px;
padding-left: 30px;
padding-right: 30px;
border-radius: 5px;
}
.btn-warning {
box-shadow: none !important;
border: none !important;
background: #ea4335 !important;
}
.btn-warning:hover {
background: #ce392c !important;
}
.btn-warning.btn-lg {
font-size: 14px !important;
font-family: Montserrat !important;
font-weight: 600;
line-height: 25px;
padding-left: 30px;
padding-right: 30px;
border-radius: 5px;
}
.bg-white {
background: #fff;
}
.text-muted {
color: #e1e1e1 !important;
}
.text-warning {
color: #ff9700 !important;
}
.text-success {
color: #3bb64c !important;
}
.text-danger {
color: #ff454f !important;
}
.text-parimary {
color: #2d89ef !important;
}
/* PAKET AYARLARI */
.pak-paket-uzun .pak-paket-uzun-ic {}
.pak-paket-uzun .pak-paket-uzun-ic .paket-1-baslik {}
.pak-paket-uzun .pak-paket-uzun-ic .paket-2-baslik {
background: #232f39 !important;
}
.pak-paket-uzun .pak-paket-uzun-ic .paket-3-baslik {}
.pak-paket-uzun .pak-paket-uzun-ic .paket-4-baslik {
background: #232f39 !important;
}
.pak-paket-uzun .pak-paket-uzun-ic .paket-adi.paket-1 {}
.pak-paket-uzun .pak-paket-uzun-ic .paket-adi.paket-2 {
background: #27343f;
}
.pak-paket-uzun .pak-paket-uzun-ic .paket-adi.paket-3 {}
.pak-paket-uzun .pak-paket-uzun-ic .paket-adi.paket-4 {
background: #27343f;
}
.pak-paket-uzun .pak-paket-uzun-ic .paket-adi.gizle {
color: transparent;
background: transparent;
}
.pak-paket-uzun .pak-paket-uzun-ic .paket-adi {
background: #232f39;
padding: 30px 5px 30px 5px;
color: #fff;
font-weight: 700;
font-size: 20px;
margin: 0;
}
.pak-paket-uzun .pak-paket-uzun-ic .paket-adi.paket-danger {
background: #db3224 !important;
position: relative;
}
.pak-paket-uzun .pak-paket-uzun-ic .paket-adi.paket-danger:before {
content: "";
width: 100%;
height: 15px;
background: #db3224;
position: absolute;
left: 0;
right: 0;
top: -15px;
border-radius: 3px 3px 0 0;
}
.pak-paket-uzun .pak-paket-uzun-ic .paket-adi.paket-danger span.mini-aciklama {
color: #fff;
}
.pak-paket-uzun .pak-paket-uzun-ic .paket-adi h3 {
padding: 12px 0 0 0;
margin: 0;
font-size: 32px;
}
.pak-paket-uzun .pak-paket-uzun-ic .paket-adi span.mini-aciklama {
font-size: 14px;
color: #656e75;
}
.pak-paket-uzun .pak-paket-uzun-ic .paket-baslik {
position: relative;
}
.pak-paket-uzun .pak-paket-uzun-ic .paket-detay:after {
content: "";
display: block;
width: 23px;
height: 100%;
position: absolute;
left: 0px;
top: -50px;
bottom: 0;
margin: auto;
background-size: 100% 100%;
}
.pak-paket-uzun .pak-paket-uzun-ic .paket-baslik li {}
.pak-paket-uzun .pak-paket-uzun-ic .first {
padding: 20px 15px;
background: #e2e2e2;
font-size: 36px;
}
.pak-paket-uzun .pak-paket-uzun-ic .buttons {
padding-top: 10px;
padding-bottom: 30px;
}
.pak-paket-uzun .pak-paket-uzun-ic ul {
background: white;
padding-bottom: 30px;
}
.pak-paket-uzun .pak-paket-uzun-ic .golge {
box-shadow: 0 0 35px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 7;
}
.pak-paket-uzun .pak-paket-uzun-ic .golge:after {
content: "";
display: block;
width: 100%;
height: 15px;
border-radius: 0 0 5px 5px;
position: absolute;
bottom: -15px;
left: 0;
right: 0;
margin: auto;
z-index: 7;
background: white;
}
.pak-paket-uzun .pak-paket-uzun-ic ul li:last-child:before {
display: none;
}
.pak-paket-uzun .pak-paket-uzun-ic .first.first-warning {
background: #232f39;
color: #ff9700;
font-weight: 600;
position: relative;
margin-bottom: 30px;
}
.pak-paket-uzun .pak-paket-uzun-ic .first.first-danger {
background: #ea4335;
color: #fff;
font-weight: 600;
position: relative;
margin-bottom: 30px;
}
.pak-paket-uzun .pak-paket-uzun-ic .first.first-success {
background: #202b34;
color: #3bb64c;
font-weight: 600;
position: relative;
margin-bottom: 30px;
}
.pak-paket-uzun .pak-paket-uzun-ic .first.first-primary {
background: #202b34;
color: #2d89ef;
font-weight: 600;
position: relative;
margin-bottom: 30px;
}
.pak-paket-uzun .pak-paket-uzun-ic .first span.kusur {
font-size: 19px;
margin-top: 8px;
padding-left: 5px;
position: absolute;
}
.pak-paket-uzun .pak-paket-uzun-ic .first span.kusur span {
font-size: 15px;
height: 10px;
margin-top: -5px;
}
.pak-paket-uzun .pak-paket-uzun-ic .first li {}
.pak-paket-uzun .pak-paket-uzun-ic li {
padding: 15px 25px 15px 25px;
position: relative !important;
}
.pak-paket-uzun .pak-paket-uzun-ic li:before {
content: "";
display: block;
width: 75%;
height: 1px;
background: #e8e8e8;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.pak-paket-uzun .pak-paket-uzun-ic li:last-child:before {
display: none;
}
.pak-paket-uzun .pak-paket-uzun-ic li:last-child:before {
display: none !important;
}
.pak-paket-uzun .pak-paket-uzun-ic li:first-child:before {
display: none !important;
}
.pak-paket-uzun .pak-paket-uzun-ic li:first-child:after {
content: "\f0d7";
font-family: FontAwesome;
position: absolute;
left: 0;
right: 0;
bottom: -36px;
margin: auto;
font-size: 45px;
z-index: 7;
color: #202b34;
}
.pak-paket-uzun .pak-paket-uzun-ic li.first-danger:first-child:after {
color: #ea4335 !important;
}
.pak-paket-uzun .pak-paket-uzun-ic li h3 {
font-size: 13.5px;
padding: 5px 0;
margin: 0;
text-transform: uppercase;
font-family: Montserrat;
}
.pak-paket-uzun .pak-paket-uzun-ic li p {
color: #a1a1a1;
}
.pak-paket-uzun .pak-paket-uzun-ic li:nth-child(odd) {
background: #ffffff;
}
.pak-paket-uzun .pak-paket-uzun-ic li:nth-child(even) {
background: #ffffff;
}
.pad0 {
padding: 0 !important;
}
.pak-paket-uzun .pak-paket-uzun-ic .panel-default>.panel-heading+.panel-collapse>.panel-body {
border-top-color: #ddd;
padding: 0;
margin-left: -15px;
margin-right: 15px;
}
.pak-paket-uzun .pak-paket-uzun-ic .panel-default>.panel-heading {
background-image: -webkit-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
background-repeat: repeat-x;
background: #1B6394;
color: white;
border: none;
border-radius: 0;
padding: 15px;
}
@media (max-width:767px) {
.pad0 {
padding: 0 !important;
margin: 30px 30px 50px 30px;
}
}
