Skip to content

Commit d1148ac

Browse files
author
Tom Steele
committed
Starting on landing page
1 parent 0302031 commit d1148ac

File tree

5 files changed

+256
-0
lines changed

5 files changed

+256
-0
lines changed

‎css/landing.css

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
html, body {
2+
height: 100%;
3+
width: 100%;
4+
margin: 0;
5+
background-color: #001A25;
6+
}
7+
8+
input{
9+
-webkit-appearance: none;
10+
}
11+
.button{
12+
-webkit-appearance: none;
13+
}
14+
button{
15+
-webkit-appearance: none;
16+
}
17+
18+
.arva-btn {
19+
font-family: 'Montserrat', sans-serif;
20+
font-weight: 300;
21+
letter-spacing: 2px;
22+
height: 40px;
23+
border-radius: 5px;
24+
width: 156px;
25+
font-size: 11px;
26+
background-color: #00FA9A;
27+
color: #001A27;
28+
transition: all 0.2s ease-in-out;
29+
text-transform: uppercase;
30+
box-shadow: 0 2px 4px 0 rgba(0,250,154,0.33);
31+
border: none;
32+
}
33+
34+
.transparent-btn {
35+
background-color: transparent;
36+
border: 1px rgba(0, 250, 154, 0.3) solid;
37+
box-shadow: none;
38+
color: white;
39+
}
40+
41+
.dashed-btn {
42+
background-color: transparent;
43+
border: 1px rgba(0, 250, 154, 0.3) dashed;
44+
box-shadow: none;
45+
color: white;
46+
}
47+
48+
#full-page-body {
49+
padding: 120px 94px;
50+
height: auto;
51+
position: absolute;
52+
top: 0;
53+
left: 0;
54+
right: 0;
55+
bottom: 0;
56+
}
57+
58+
#landing-grid {
59+
height: 100%;
60+
display: grid;
61+
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
62+
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
63+
grid-template-areas:
64+
'rocket rocket rocket private private private'
65+
'rocket rocket rocket private private private'
66+
'rocket rocket rocket total total total'
67+
'ready ready ready total total total'
68+
'ready ready ready goal goal goal'
69+
'ready ready ready goal goal goal'
70+
'subtitle subtitle subtitle cap cap cap'
71+
'subtitle subtitle subtitle cap cap cap'
72+
'buttons buttons buttons x10 x10 showAll'
73+
'buttons buttons buttons x10 x10 showAll';
74+
}
75+
76+
#rocket {
77+
grid-area: rocket;
78+
}
79+
80+
#private {
81+
grid-area: private;
82+
}
83+
84+
#total {
85+
grid-area: total;
86+
}
87+
88+
#ready {
89+
grid-area: ready;
90+
}
91+
#ready-title {
92+
/* Ready for the big ga: */
93+
font-family: Montserrat-Black;
94+
font-size: 70px;
95+
color: #FFFFFF;
96+
letter-spacing: 0;
97+
}
98+
#ready-title span {
99+
color: #00E4C3;
100+
}
101+
#ready-subtitle {
102+
/* Because we are.: */
103+
font-family: Montserrat-Light;
104+
font-size: 48px;
105+
color: #FFFFFF;
106+
letter-spacing: 0;
107+
}
108+
109+
#goal {
110+
grid-area: goal;
111+
}
112+
113+
#subtitle {
114+
grid-area: subtitle;
115+
}
116+
#subtitle-text {
117+
/* Private ICO investme: */
118+
font-family: Roboto-Light;
119+
font-size: 26px;
120+
color: #C4DFDA;
121+
letter-spacing: 0;
122+
line-height: 36px;
123+
}
124+
125+
#cap {
126+
grid-area: cap;
127+
}
128+
129+
#buttons {
130+
grid-area: buttons;
131+
}
132+
133+
#x10 {
134+
grid-area: x10;
135+
display: flex;
136+
flex-direction: row;
137+
}
138+
139+
#showAll {
140+
grid-area: showAll;
141+
}
142+
143+
#logo-arva {
144+
width: 107px;
145+
height: 109px;
146+
background-size: contain;
147+
}
148+
149+
#x10-image {
150+
width: 60px;
151+
height: 60px;
152+
flex: 1 0 80px;
153+
background-repeat: no-repeat;
154+
}
155+
156+
#x10-explain {
157+
color: #C4DFDA;
158+
/* Get a x10 multiplier: */
159+
font-family: Roboto-Light;
160+
flex: 0 1 auto;
161+
font-size: 18px;
162+
letter-spacing: 0;
163+
line-height: 26px;
164+
}
165+
166+
167+
/* Images below */
168+
#x10-image {
169+
background-image: url(/img/x10-icon.png);
170+
}
171+
172+
#logo-arva {
173+
background-image: url(/img/logo-arva.png);
174+
}
175+
176+
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
177+
#x10-image {
178+
background-image: url(/img/x10-icon@2x.png);
179+
}
180+
181+
#logo-arva {
182+
background-image: url(/img/logo-arva@2x.png);
183+
}
184+
}

‎img/logo-arva@2x.png

12 KB
Loading

‎img/x10-icon.png

2.54 KB
Loading

‎img/x10-icon@2x.png

7.21 KB
Loading

‎landing.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport" />
5+
<link href="./img/favicon.png" rel="shortcut icon" />
6+
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300|Montserrat:300,400,600,800" rel="stylesheet">
7+
<!--<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,800" rel="stylesheet">-->
8+
9+
<meta charset="utf-8" />
10+
<meta property="og:title" content="Help us build an Arva-mazing experience" />
11+
<meta property="og:type" content="website" />
12+
<meta property="og:url" content="https://arva.io" />
13+
<meta property="og:description" content="Zero-code visual app builder? Easy-peasy. Become a part of our Arvamazing community and unleash your maximum creativity." />
14+
<meta property="og:image" content="http://localhost:8080/img/screenshot.png" />
15+
<meta property="og:image:height" content="727" />
16+
<meta property="og:image:width" content="1118" />
17+
<meta property="og:image" content="http://localhost:8080/img/arva-sticker@2x.png" />
18+
<meta property="og:image:height" content="484" />
19+
<meta property="og:image:width" content="484" />
20+
<link href="./css/landing.css" rel="stylesheet" type="text/css" />
21+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
22+
23+
<title>Help us build an Arva-mazing experience</title>
24+
</head>
25+
<body>
26+
<div id="full-page-body">
27+
<div id="landing-grid">
28+
<div id="rocket">
29+
<div id="logo-arva"></div>
30+
</div>
31+
<div id="private">
32+
<div class="counter-title">Private investment round</div>
33+
</div>
34+
<div id="total">
35+
<div class="counter-title">Total investment raised</div>
36+
</div>
37+
<div id="ready">
38+
<div id="ready-title">
39+
Ready for the <span>big game?</span>
40+
</div>
41+
<div id="ready-subtitle">
42+
Because we are
43+
</div>
44+
</div>
45+
<div id="goal">
46+
<div class="counter-title">ICO Goal</div>
47+
</div>
48+
<div id="subtitle">
49+
<div id="subtitle-text">
50+
Private ICO investment round is down the corner. Wanna make some profit together? Request more info and join our ARVA investors family.
51+
</div>
52+
</div>
53+
<div id="cap">
54+
<div class="counter-title">Hard ICO cap</div>
55+
</div>
56+
<div id="buttons">
57+
<div id="button-container">
58+
<button class="arva-btn">Get Involved</button>
59+
<button class="arva-btn transparent-btn">Check Arva.io</button>
60+
</div>
61+
</div>
62+
<div id="x10">
63+
<div id="x10-image"></div>
64+
<div id="x10-explain">Get a x10 multiplier when we reach the ICO hard cap.</div>
65+
</div>
66+
<div id="showAll">
67+
<button class="arva-btn dashed-btn">Show all tiers</button>
68+
</div>
69+
</div>
70+
</div>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)