Commit 9c3826b6644a86f870ae6b0e4b863999a618adb7

Authored by Kennth Adams
Committed by GitHub
1 parent f227686f

--no commit message

Showing 1 changed file with 247 additions and 84 deletions   Show diff stats
index.html
1 1 <!doctype html>
2 2 <html>
3   - <head>
4   - <meta charset="utf-8">
5   - <!-- WEBSITE TITLE -->
6   - <title>PRICE LIST - DEMO 3</title>
7   - <!-- SHORTCUT ICON -->
8   - <link href="assets/img/shortcut-icon.png" rel="shortcut icon">
9   - <!-- TELL THE BROWSER TO BE RESPONSIVE TO SCREEN WIDTH -->
10   - <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
11   - <!-- BOOTSTRAP CSS FILE -->
12   - <link href="assets/css/bootstrap.min.css" rel="stylesheet">
13   - <!-- FONT AWESOME CSS FILE -->
14   - <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
15   - <!-- CUSTOM CSS FILE -->
16   - <link href="assets/css/style.css" rel="stylesheet">
17   - <!-- DEMO 03 CSS FILE -->
18   - <link href="assets/css/demo03.css" rel="stylesheet">
19   - </head>
20   - <body>
21   - <section class="pricing-table-container">
22   - <div class="container-fluid">
23   - <div class="row">
24   - <!-- PRICING TABLE 1 -->
25   - <div class="col-sm-4">
26   - <div class="pricing-table-3 basic">
27   - <div class="pricing-table-header">
28   - <h4><strong>BASIC</strong></h4>
29   - <p>Loerm Ipsum Donor Sit Amet</p>
30   - </div>
31   - <div class="price"><strong>$3</strong> / MONTH</div>
32   - <div class="pricing-body">
33   - <ul class="pricing-table-ul">
34   - <li><i class="fa fa-send"></i> Unlimited Email Addresses</li>
35   - <li><i class="fa fa-cloud"></i> 50 GB</strong> Disk Space</li>
36   - <li class="not-avail"><i class="fa fa-envelope"></i> Email Support</li>
37   - </ul>
38   - <a href="#" class="view-more">View More</a>
39   - </div>
40   - </div>
41   - </div>
42   -
43   - <!-- PRICING TABLE 2 -->
44   - <div class="col-sm-4">
45   - <div class="pricing-table-3 premium">
46   - <div class="pricing-table-header">
47   - <h4><strong>PREMIUM</strong></h4>
48   - <p>Loerm Ipsum Donor Sit Amet</p>
49   - </div>
50   - <div class="price"><strong>$8</strong> / MONTH</div>
51   - <div class="pricing-body">
52   - <ul class="pricing-table-ul">
53   - <li><i class="fa fa-send"></i> Unlimited Email Addresses</li>
54   - <li><i class="fa fa-cloud"></i> 80 GB</strong> Disk Space</li>
55   - <li class="not-avail"><i class="fa fa-envelope"></i> Email Support</li>
56   - </ul>
57   - <a href="#" class="view-more">View More</a>
58   - </div>
59   - </div>
60   - </div>
61   -
62   - <!-- PRICING TABLE 3 -->
63   - <div class="col-sm-4">
64   - <div class="pricing-table-3 business">
65   - <div class="pricing-table-header">
66   - <h4><strong>BUSINESS</strong></h4>
67   - <p>Loerm Ipsum Donor Sit Amet</p>
68   - </div>
69   - <div class="price"><strong>$12</strong> / MONTH</div>
70   - <div class="pricing-body">
71   - <ul class="pricing-table-ul">
72   - <li><i class="fa fa-send"></i> Unlimited Email Addresses</li>
73   - <li><i class="fa fa-cloud"></i> 120 GB</strong> Disk Space</li>
74   - <li class="not-avail"><i class="fa fa-envelope"></i> Email Support</li>
75   - </ul>
76   - <a href="#" class="view-more">View More</a>
77   - </div>
78   - </div>
79   - </div>
80   -
81   -
82   -
83   - </div>
84   - </div>
85   - </section>
86   - </body>
  3 +<head>
  4 + <meta charset="utf-8">
  5 + <!-- WEBSITE TITLE -->
  6 + <title>PRICE LIST </title>
  7 + <!-- TELL THE BROWSER TO BE RESPONSIVE TO SCREEN WIDTH -->
  8 + <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  9 + <!-- BOOTSTRAP CSS FILE -->
  10 + <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
  11 + <!-- FONT AWESOME CSS FILE -->
  12 + <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
  13 + <style type="text/css">
  14 + @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,500,400,300,800);
  15 + @import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,700);
  16 + @import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400);
  17 + /* CSS Document */
  18 + @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,500,400,300,800);
  19 + @import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,700);
  20 + @import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400);
  21 + body{
  22 + background-color:#f0f3f6;
  23 + overflow-x: hidden;
  24 +
  25 +}
  26 +h1,h2,h3,h4,h5,h6,div,input,p,a{
  27 + font-family: "Open Sans";
  28 + margin:0px;
  29 +}
  30 +h3{
  31 + font-size:22px;
  32 +}
  33 +.container-fluid,.container {
  34 + margin:auto;
  35 + padding:0px 15px;
  36 + max-width:1200px;
  37 +}
  38 +label{
  39 + font-weight:500;
  40 +}
  41 +
  42 +a{
  43 + color: inherit;
  44 +}
  45 +a:hover,a:focus{
  46 + text-decoration: none !important;
  47 + color: inherit !important;
  48 +}
  49 +ul{
  50 + margin: 0px;
  51 + padding: 0px;
  52 + list-style: none;
  53 +}
  54 +.pricing-table-container{
  55 + padding:50px 0px;
  56 +}
  57 +
  58 +.pricing-table-3{
  59 + background-color:#FFF;
  60 + margin:15px auto;
  61 + box-shadow:0px 0px 25px rgba(0,0,0,0.1);
  62 + max-width:300px;
  63 + border-radius:0px 10px 0px 10px;
  64 + overflow:hidden;
  65 + position:relative;
  66 + min-height:250px;
  67 + transition:all ease-in-out 0.25s;
  68 +}
  69 +.pricing-table-3:hover{
  70 + transform:scale(1.1,1.1);
  71 + cursor:pointer;
  72 +}
  73 +
  74 +.pricing-table-3.basic .price{
  75 + background-color:#6DAB3C;
  76 + color:#FFF;
  77 +}
  78 +.pricing-table-3.premium .price{
  79 + background-color:#246eb9;
  80 + color:#FFF;
  81 +}
  82 +.pricing-table-3.business .price{
  83 + background-color:#e95e1c;
  84 + color:#FFF;
  85 +}
  86 +.pricing-table-3.basic a{
  87 + background-color:#6DAB3C;
  88 + color:#FFF;
  89 +}
  90 +.pricing-table-3.basic a:hover, .pricing-table-3.premium a:hover, .pricing-table-3.business a:hover {
  91 + background: #212121;
  92 + color:#fff !important;
  93 +}
  94 +.pricing-table-3.premium a{
  95 + background-color:#246eb9;
  96 + color:#FFF;
  97 +}
  98 +.pricing-table-3.business a{
  99 + background-color:#e95e1c;
  100 + color:#FFF;
  101 +}
  102 +
  103 +.pricing-table-3 .pricing-table-header{
  104 + background-color:#212121;
  105 + color:#FFF;
  106 + padding:20px 0px 0px 20px;
  107 + position:absolute;
  108 + z-index:5;
  109 +}
  110 +.pricing-table-3 .pricing-table-header p{
  111 + font-size:12px;
  112 + opacity:0.7;
  113 +}
  114 +.pricing-table-3 .pricing-table-header::before{
  115 + content:"";
  116 + position:absolute;
  117 + left:-50px;
  118 + right:-100px;
  119 + height:140px;
  120 + top:-50px;
  121 + background-color:#212121;
  122 + z-index:-1;
  123 + transform:rotate(-20deg)
  124 +}
  125 +
  126 +.pricing-table-3 .price{
  127 + position:absolute;
  128 + top:0px;
  129 + text-align:right;
  130 + padding:110px 20px 0px 0px;
  131 + right:0px;
  132 + left:0px;
  133 + font-size:20px;
  134 + z-index:4;
  135 +}
  136 +.pricing-table-3 .price::before{
  137 + content:"";
  138 + position:absolute;
  139 + left:0px;
  140 + right:0px;
  141 + height:100px;
  142 + bottom:-25px;
  143 + background-color:inherit;
  144 + transform:skewY(10deg);
  145 + z-index:-1;
  146 + box-shadow:0px 5px 0px 5px rgba(0,0,0,0.05);
  147 +}
  148 +
  149 +
  150 +.pricing-table-3 .pricing-body{
  151 + padding:20px;
  152 + padding-top:200px;
  153 +}
  154 +.pricing-table-3 .pricing-table-ul li{
  155 + color:rgba(0,0,0,0.7);
  156 + font-size:13px;
  157 + padding:10px;
  158 + border-bottom:1px solid rgba(0,0,0,0.1);
  159 +}
  160 +.pricing-table-3 .pricing-table-ul .fa{
  161 + margin-right:10px;
  162 +}
  163 +.pricing-table-3.basic .pricing-table-ul .fa{
  164 + color:#6DAB3C;
  165 +}
  166 +.pricing-table-3.premium .pricing-table-ul .fa{
  167 + color:#246eb9;
  168 +}
  169 +.pricing-table-3.business .pricing-table-ul .fa{
  170 + color:#e95e1c;
  171 +}
  172 +.pricing-table-3 .view-more{
  173 + margin:10px 20px;
  174 + display:block;
  175 + text-align:center;
  176 + background-color:#212121;
  177 + padding:10px 0px;
  178 + color:#FFF;
  179 +}
  180 +
  181 +</style>
  182 +</head>
  183 +<body>
  184 + <section class="pricing-table-container">
  185 + <div class="container-fluid">
  186 + <div class="row">
  187 + <!-- PRICING TABLE 1 -->
  188 + <div class="col-sm-4">
  189 + <div class="pricing-table-3 basic">
  190 + <div class="pricing-table-header">
  191 + <h4><strong>BASIC</strong></h4>
  192 + <p>Loerm Ipsum Donor Sit Amet</p>
  193 + </div>
  194 + <div class="price"><strong>$3</strong> / MONTH</div>
  195 + <div class="pricing-body">
  196 + <ul class="pricing-table-ul">
  197 + <li><i class="fa fa-send"></i> Unlimited Email Addresses</li>
  198 + <li><i class="fa fa-cloud"></i> 50 GB</strong> Disk Space</li>
  199 + <li class="not-avail"><i class="fa fa-envelope"></i> Email Support</li>
  200 + </ul>
  201 + <a href="#" class="view-more">View More</a>
  202 + </div>
  203 + </div>
  204 + </div>
  205 +
  206 + <!-- PRICING TABLE 2 -->
  207 + <div class="col-sm-4">
  208 + <div class="pricing-table-3 premium">
  209 + <div class="pricing-table-header">
  210 + <h4><strong>PREMIUM</strong></h4>
  211 + <p>Loerm Ipsum Donor Sit Amet</p>
  212 + </div>
  213 + <div class="price"><strong>$8</strong> / MONTH</div>
  214 + <div class="pricing-body">
  215 + <ul class="pricing-table-ul">
  216 + <li><i class="fa fa-send"></i> Unlimited Email Addresses</li>
  217 + <li><i class="fa fa-cloud"></i> 80 GB</strong> Disk Space</li>
  218 + <li class="not-avail"><i class="fa fa-envelope"></i> Email Support</li>
  219 + </ul>
  220 + <a href="#" class="view-more">View More</a>
  221 + </div>
  222 + </div>
  223 + </div>
  224 +
  225 + <!-- PRICING TABLE 3 -->
  226 + <div class="col-sm-4">
  227 + <div class="pricing-table-3 business">
  228 + <div class="pricing-table-header">
  229 + <h4><strong>BUSINESS</strong></h4>
  230 + <p>Loerm Ipsum Donor Sit Amet</p>
  231 + </div>
  232 + <div class="price"><strong>$12</strong> / MONTH</div>
  233 + <div class="pricing-body">
  234 + <ul class="pricing-table-ul">
  235 + <li><i class="fa fa-send"></i> Unlimited Email Addresses</li>
  236 + <li><i class="fa fa-cloud"></i> 120 GB</strong> Disk Space</li>
  237 + <li class="not-avail"><i class="fa fa-envelope"></i> Email Support</li>
  238 + </ul>
  239 + <a href="#" class="view-more">View More</a>
  240 + </div>
  241 + </div>
  242 + </div>
  243 +
  244 +
  245 +
  246 + </div>
  247 + </div>
  248 +</section>
  249 +</body>
87 250 </html>
88 251 \ No newline at end of file
... ...