-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTransparent_boxes.html
98 lines (86 loc) · 4.02 KB
/
Transparent_boxes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!-- Bootstrap -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<!--jQuery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--Bootstrap -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
body {
background: rgba(59,183,120,1);background: -moz-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -webkit-gradient(left top, right top, color-stop(47%, rgba(59,183,120,1)), color-stop(100%, rgba(71,196,218,1)));background: -webkit-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -o-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -ms-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: linear-gradient(to right, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bb778', endColorstr='#47c4da', GradientType=1 );
}
.transparent .tuyin
{
margin-top: 20px;
background-color: rgba(255, 255, 255, 0.37);
border: 1px solid #F7F7F7;
border-radius: 5px;
box-shadow: 0px 0px 2px 0px rgba(181, 181, 181, 0.3);
padding: 4%;
text-align: center;
width: 97%;
min-height: 315px;
position: relative;
margin-bottom: 25px;
}
.transparent .tuyin .title
{
text-align: center;
color: #FFF;
font-size: 49px;
}
.transparent .tuyin .plan-name
{
font-size: 20px;
font-weight: 400;
border-bottom: 1px solid #FFF;
padding-bottom: 15px;
padding: 10px
}
.transparent .tuyin .text
{
margin-top: 20px;
color: #474747;
font-weight: 300;
margin-bottom: 13px;
font-size: 16px;
text-align: justify;
}
</script>
<div class="container">
<div class="row transparent">
<div class="col-md-6">
<div class="tuyin first">
<span class="title">Lorem Ipsum</span>
<div class="plan-name">Neque porro quisquam est qui dolorem</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mi arcu, finibus ac imperdiet a, ullamcorper sed mauris. Donec aliquam ex ultrices nulla bibendum, vel mattis massa ullamcorper. Cras eget elit luctus, rutrum sem nec, placerat libero. Integer eu pharetra orci. Nam eros ex, tempor vitae accumsan sed, hendrerit a nibh. </p>
</div>
<button type="button" class="btn btn-default">View <span class="glyphicon glyphicon-plus"></span> </button>
</div>
</div>
<div class="col-md-6">
<div class="tuyin first">
<span class="title">Lorem Ipsum</span>
<div class="plan-name">Neque porro quisquam est qui dolorem</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mi arcu, finibus ac imperdiet a, ullamcorper sed mauris. Donec aliquam ex ultrices nulla bibendum, vel mattis massa ullamcorper. Cras eget elit luctus, rutrum sem nec, placerat libero. Integer eu pharetra orci. Nam eros ex, tempor vitae accumsan sed, hendrerit a nibh. </p>
</div>
<button type="button" class="btn btn-default">View <span class="glyphicon glyphicon-plus"></span></button>
</div>
</div>
<div class="col-md-12">
<div class="tuyin first">
<span class="title">Lorem Ipsum</span>
<div class="plan-name">Neque porro quisquam est qui dolorem</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mi arcu, finibus ac imperdiet a, ullamcorper sed mauris. Donec aliquam ex ultrices nulla bibendum, vel mattis massa ullamcorper. Cras eget elit luctus, rutrum sem nec, placerat libero. Integer eu pharetra orci. Nam eros ex, tempor vitae accumsan sed, hendrerit a nibh. </p>
</div>
<button type="button" class="btn btn-default">View <span class="glyphicon glyphicon-plus"></span> </button>
</div>
</div>
</div>
</div>