-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (122 loc) · 2.84 KB
/
index.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<title>BitCONTRACT</title>
<meta content="bitcontracts_manager.png" property="og:image">
</head>
<body>
<div class="header double">
<div>
<h1>BitCONTRACT</h1>
<h2>Simple to understand,<br> decentralized and independent <br>electronic contract.</h2>
</div>
<div>
<img class="main_img" src="bitContract.svg" alt="bitContracts documents">
</div>
</div>
<div class="double">
<div>
<h3>Design by third generation chain</h3>
<p>Bootstrap communication is realize by reverse binary network and build on casual contracts signatures logic.</p>
<h3>Representation of a standard document</h3>
<p>bitCONTRACT represents the real world of traditional transactions</p>
</div>
<div class="smoothBg">
<img class="main_img" src="bitcontracts_network.svg" alt="bitContracts network">
</div>
</div>
<div class="dark-section double">
<div class="right">
<img class="app_img" src="bitcontracts_manager.png" alt="bitContracts network">
</div>
<div class="left">
<h2>Free app</h2>
<p>Try to start and manage transactions based on bitcontracts</p>
<button>Chrome store avilable soon</button>
<p>
<a href="https://github.com/dadmor/bitcontract-manager">GtiHub: https://github.com/dadmor/bitcontract-manager</a>
</p>
</div>
</div>
</body>
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,900');
body{
padding:0;
margin:0;
text-align: center;
font-family: 'Lato', sans-serif;
}
.double{
display:flex;
align-items: center;
}
.double div{
text-align: center;
flex:0 0 40%;
padding:5%;
}
.header{
background: radial-gradient(circle farthest-side at right bottom,#fefdfe 5%,#f8cdda 25%,#1d2b64 80%,#0e153a 98%)
}
.header h1{
font-weight: 900;
letter-spacing: 10px;
font-size: 48px;
color: #fff;
text-shadow: 0 0 2px #a7a7a7;
}
.header h2{
font-weight: 300;
color: #fff;
font-size: 18px;
letter-spacing: 1px;
line-height: 26px;
}
.dark-section{
color:#000;
background: radial-gradient(circle farthest-side at right bottom,#fff 8%,#154866 70%,#000);
}
h3{
font-weight: 400;
}
p{
font-weight: 300;
padding-bottom:1em;
}
.smoothBg{
border-left: 1px solid#ebebeb;
background: #fcfcfc;
}
.main_img{
width:80%;
}
.app_img{
margin-bottom: -12%;
width: 100%;
height: auto;
box-shadow: 0 -5px 20px #000;
image-rendering: auto;
/*image-rendering: crisp-edges;
image-rendering: pixelated;*/
}
button{
padding:1em;
border:1px solid #666;
border-radius: 3px;
}
@media only screen and (max-width: 1080px) {
.double{
display:block;
}
.app_img{
margin-top: -7%;
margin-bottom: 0;
box-shadow:initial;
}
.dark-section{
color:#fff;
}
}
</style>
</html>