"Price Table"
Bootstrap 3.0.0 Snippet by Dikz

<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; } }

Related: See More


Questions / Comments: