Skip to content

Commit b4ffcea

Browse files
vojtechsimetkavojtechsimetka
committed
Initial version of the website
1 parent c158225 commit b4ffcea

File tree

9 files changed

+260
-0
lines changed

9 files changed

+260
-0
lines changed

‎assets/1.jpg

3.96 MB
Loading

‎assets/2.jpg

1.84 MB
Loading

‎assets/3.jpg

1.68 MB
Loading

‎assets/4.jpg

2.8 MB
Loading

‎assets/5.jpg

3 MB
Loading

‎assets/giveth.svg

+10
Loading

‎index.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<link rel="stylesheet" href="style.css">
6+
<script src="script.js"></script>
7+
</head>
8+
<body>
9+
10+
<div class="image bgimg-1">
11+
<div class="caption">
12+
</div>
13+
</div>
14+
15+
<div class="image bgimg-2 hidden">
16+
<div class="caption">
17+
</div>
18+
</div>
19+
20+
<div class="image bgimg-3 hidden">
21+
<div class="caption">
22+
</div>
23+
</div>
24+
25+
<div class="image bgimg-4 hidden">
26+
<div class="caption">
27+
</div>
28+
</div>
29+
30+
<div class="image bgimg-5 hidden">
31+
<div class="caption">
32+
</div>
33+
</div>
34+
35+
<div class="givethOverlay">
36+
<div class="capt">
37+
<div class="caption">
38+
<span class="border">THE BLOCKCHAIN DAPP</span><br />
39+
<span class="border small">EMPOWERING COMMUNITIES AROUND CAUSES</span>
40+
</div>
41+
</div>
42+
</div>
43+
44+
45+
<div class="wrapper">
46+
<a class="button" target="_blank" href="https://t.me/joinchat/GwWd_0zZ4ZAukWH8iUpw6Q">JOIN US</a>
47+
</div>
48+
</body>
49+
</html>

‎script.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var images = document.getElementsByClassName("image");
2+
var counter = 1;
3+
4+
function replaceImg() {
5+
for (var i = 0; i< images.length; i++) {
6+
if (i === counter)
7+
images[i].classList.remove("hidden");
8+
else
9+
images[i].classList.add("hidden");
10+
}
11+
counter= (counter+1)%images.length
12+
}
13+
14+
var timeout = setInterval(replaceImg, 5000);

‎style.css

+187
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
body, html {
2+
height: 100%;
3+
width: 100%;
4+
margin: 0;
5+
font: 400 15px/1.8 "Lato", sans-serif;
6+
color: #777;
7+
}
8+
9+
h3 {
10+
letter-spacing: 5px;
11+
text-transform: uppercase;
12+
font: 20px "Lato", sans-serif;
13+
color: #111;
14+
}
15+
16+
div.wrapper {
17+
width: 100%;
18+
height: 100%;
19+
display: flex;
20+
justify-content: center;
21+
align-items: flex-end;
22+
opacity: 1;
23+
}
24+
25+
.button {
26+
background: #6a3093; /* fallback for old browsers */
27+
background: -webkit-linear-gradient(to bottom, #a044ff, #6a3093); /* Chrome 10-25, Safari 5.1-6 */
28+
background: linear-gradient(to bottom, #a044ff, #6a3093); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
29+
border: none;
30+
border-radius: 5em;
31+
color: white;
32+
padding: 10px 32px;
33+
text-align: center;
34+
text-decoration: none;
35+
display: inline-block;
36+
font-size: 16px;
37+
margin: 1em;
38+
bottom: 1em;
39+
display: fixed;
40+
bottom: 0;
41+
opacity: 1;
42+
z-index: 5000;
43+
letter-spacing: .1em;
44+
text-transform: uppercase;
45+
font: 1.5em "Lato", sans-serif;
46+
}
47+
48+
.givethOverlay{
49+
position: fixed;
50+
top: 0;
51+
left: 0;
52+
opacity: .75;
53+
background-position: center;
54+
background-repeat: no-repeat;
55+
background-size: cover;
56+
height: 100%;
57+
width: 100%;
58+
background-image: url("assets/giveth.svg");
59+
z-index: 4000;
60+
}
61+
62+
.capt{
63+
position: fixed;
64+
top: 0;
65+
left: 0;
66+
opacity: 1;
67+
height: 100%;
68+
width: 100%;
69+
}
70+
71+
.image{
72+
position: fixed;
73+
top: 0;
74+
left: 0;
75+
opacity: 1;
76+
background-position: center;
77+
background-repeat: no-repeat;
78+
background-size: cover;
79+
height: 100%;
80+
width: 100%;
81+
-webkit-transition: opacity 1s ease-in-out;
82+
-moz-transition: opacity 1s ease-in-out;
83+
-o-transition: opacity 1s ease-in-out;
84+
transition: opacity 1s ease-in-out;
85+
}
86+
87+
.bgimg-1 {
88+
background-image: url("assets/1.jpg");
89+
}
90+
91+
.bgimg-2 {
92+
background-image: url("assets/2.jpg");
93+
}
94+
95+
.bgimg-3 {
96+
background-image: url("assets/3.jpg");
97+
}
98+
99+
.bgimg-4 {
100+
background-image: url("assets/4.jpg");
101+
}
102+
103+
.bgimg-5 {
104+
background-image: url("assets/5.jpg");
105+
}
106+
107+
.hidden {
108+
opacity: 0;
109+
}
110+
111+
.caption {
112+
position: absolute;
113+
left: 0;
114+
bottom: 15%;
115+
width: 100%;
116+
text-align: center;
117+
color: #000;
118+
}
119+
120+
.caption span.border {
121+
background-color: #111;
122+
color: #fff;
123+
}
124+
125+
/* Extra small devices (phones, 600px and down) */
126+
@media only screen and (max-width: 600px) {
127+
.button {
128+
letter-spacing: .15em;
129+
font-size: 1em;
130+
}
131+
.caption span.border {
132+
padding: .4em;
133+
letter-spacing: .15em;
134+
font-size: 1em;
135+
}
136+
}
137+
138+
/* Small devices (portrait tablets and large phones, 600px and up) */
139+
@media only screen and (min-width: 600px) {
140+
.button {
141+
letter-spacing: .2em;
142+
font-size: 1.25em;
143+
}
144+
.caption span.border {
145+
padding: .5em;
146+
letter-spacing: .2em;
147+
font-size: 1.25em;
148+
}}
149+
150+
/* Medium devices (landscape tablets, 768px and up) */
151+
@media only screen and (min-width: 768px) {
152+
.button {
153+
letter-spacing: .23em;
154+
font-size: 1.5em;
155+
}
156+
.caption span.border {
157+
padding: .6em;
158+
letter-spacing: .23em;
159+
font-size: 1.5em;
160+
}
161+
}
162+
163+
/* Large devices (laptops/desktops, 992px and up) */
164+
@media only screen and (min-width: 992px) {
165+
.button {
166+
letter-spacing: .27em;
167+
font-size: 1.7em;
168+
}
169+
.caption span.border {
170+
padding: .7em;
171+
letter-spacing: .27em;
172+
font-size: 1.7em;
173+
}
174+
}
175+
176+
/* Extra large devices (large laptops and desktops, 1200px and up) */
177+
@media only screen and (min-width: 1200px) {
178+
.button {
179+
letter-spacing: .3em;
180+
font-size: 2em;
181+
}
182+
.caption span.border {
183+
padding: .8em;
184+
letter-spacing: .3em;
185+
font-size: 2em;
186+
}
187+
}

0 commit comments

Comments
 (0)