Skip to content

Commit 2242078

Browse files
committed
finished homepage
1 parent 9bffe39 commit 2242078

File tree

5 files changed

+276
-0
lines changed

5 files changed

+276
-0
lines changed
Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
@font-face {
2+
font-family: 'Montserrat';
3+
font-style: normal;
4+
font-weight: 400;
5+
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
6+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
7+
}
8+
9+
@font-face {
10+
font-family: 'Montserrat';
11+
font-style: normal;
12+
font-weight: 900;
13+
src: local('Montserrat Black'), local('Montserrat-Black'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_epG3gnD_g.woff2) format('woff2');
14+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
15+
}
16+
17+
18+
body {
19+
font-family: 'Montserrat', sans-serif;
20+
font-weight: 400;
21+
max-width: 100%;
22+
margin: 0;
23+
/* The image used */
24+
/* Full height */
25+
height: 100%;
26+
/* Center and scale the image nicely */
27+
background: url("{% static img/background.jpg %}") no-repeat no-repeat center center fixed;
28+
-webkit-background-size: cover;
29+
-moz-background-size: cover;
30+
-o-background-size: cover;
31+
background-size: cover;
32+
}
33+
34+
.navbar-brand img {
35+
height: auto;
36+
}
37+
38+
.round {
39+
border-radius: 24px;
40+
}
41+
42+
43+
.btn-light {
44+
background: transparent;
45+
color: white;
46+
border-color: transparent;
47+
}
48+
49+
.btn-light:hover,
50+
.btn-light:focus,
51+
.btn-light:active
52+
{
53+
color: black;
54+
border-color: #F3D66C;
55+
outline: none !important;
56+
box-shadow: none !important;
57+
background: #F3D66C;
58+
}
59+
60+
.font900 {
61+
font-family: 'Montserrat', sans-serif;
62+
font-weight: 900;
63+
}
64+
65+
.one {
66+
margin-bottom: -12px;
67+
font-size: 4.5rem;
68+
}
69+
70+
h2 {
71+
max-height: inherit;
72+
letter-spacing: 0.01em;
73+
}
74+
75+
h3 {
76+
font-size: 2rem;
77+
margin-top: 5px;
78+
margin-left: 2px;
79+
max-height: inherit;
80+
letter-spacing: 0.05em;
81+
}
82+
83+
84+
.row {
85+
margin-left: 20px;
86+
margin-right: 0px;
87+
}
88+
89+
hr {
90+
width: 12%;
91+
position: absolute;
92+
border-width: 2px;
93+
background: #22A4D9;
94+
}
95+
96+
.details {
97+
margin-top: 50px;
98+
margin-right: 10px;
99+
}
100+
101+
.font-yellow {
102+
color: #F3D66C;
103+
}
104+
105+
.font-blue {
106+
color: #22A4D9;
107+
}
108+
109+
.fa-calendar-alt, .fa-users, .fa-globe{
110+
color: #22A4D9;
111+
display: inline-block;
112+
width: 20px;
113+
}
114+
115+
.btn-primary {
116+
background: #22A4D9;
117+
border-color: #22A4D9;
118+
color: white;
119+
width: 200px;
120+
}
121+
122+
.sn-icons {
123+
margin-top: 30px;
124+
margin-right: 30px;
125+
126+
}
127+
128+
#days {
129+
font-size: 3rem;
130+
border: 10px solid white;
131+
border-radius: 20px;
132+
background-color: white;
133+
}
134+
135+
#days-text {
136+
padding-left: 10px;
137+
font-size: 3rem;
138+
}
139+
140+
.hms {
141+
font-size: 1.8rem;
142+
}
143+
144+
.hms-text {
145+
font-size: 0.6rem;
146+
color: white;
147+
}
148+
149+
.countdown-timer{
150+
margin-top: 30px;
151+
}
152+
153+
ul.countdown {
154+
list-style: none;
155+
display: inline;
156+
text-align: center;
157+
padding-left: 15px;
158+
}
159+
160+
ul.countdown li {
161+
display: inline-block;
162+
vertical-align: -12px;
163+
margin-right: 5px;
164+
}
165+
166+
ul.countdown li div {
167+
margin-top: -5px;
168+
}
169+
170+
.btn-secondary {
171+
background: #F3D66C;
172+
border-color: #F3D66C;
173+
color: black;
174+
}
175+
176+
.btn-secondary:hover,
177+
.btn-secondary:focus,
178+
.btn-secondary:active
179+
{
180+
color: black;
181+
border-color: #F3D66C;
182+
outline: none !important;
183+
box-shadow: none !important;
184+
background: #F3D66C;
185+
}
186+
187+
.moveDown {
188+
margin-top: 30px;
189+
}
190+
191+
#btnBuyNow {
192+
width: 120px;
193+
}
194+
195+
.card {
196+
background: transparent;
197+
border: none;
198+
margin-right: 0 !important;
199+
}
200+
201+
.card .row {
202+
margin-left: 0 !important;
203+
}
204+
205+
206+
.card img {
207+
width: 80px;
208+
float: left;
209+
}
210+
211+
.card ul {
212+
list-style: none;
213+
vertical-align: middle;
214+
color: white;
215+
padding: 0;
216+
}
217+
218+
.card li:first-child {
219+
font-size: 1rem;
220+
display: grid;
221+
padding-left: 10px;
222+
}
223+
224+
.card li {
225+
font-size: 0.8rem;
226+
display: grid;
227+
padding-left: 10px;
228+
margin-top: 5px;
229+
}
230+
231+
.card hr {
232+
display: inline;
233+
margin: 0 0 0 10px;
234+
}
235+
236+
.col-sm {
237+
padding: 0;
238+
}
239+
240+
#seeMore {
241+
width: 150px;
242+
}
243+
244+
#attend {
245+
width: auto;
246+
}
54.9 KB
Loading
10.3 KB
Loading
195 KB
Loading
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Set the date we're counting down to
2+
var countDownDate = new Date("Sep 8, 2018 10:00:00").getTime();
3+
4+
// Update the count down every 1 second
5+
var x = setInterval(function() {
6+
7+
// Get todays date and time
8+
var now = new Date().getTime();
9+
10+
// Find the distance between now an the count down date
11+
var distance = countDownDate - now;
12+
13+
// Time calculations for days, hours, minutes and seconds
14+
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
15+
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
16+
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
17+
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
18+
19+
// Output the result in an element with id="demo"
20+
document.getElementById("days").innerHTML = days;
21+
document.getElementById("hours").innerHTML = hours + ":";
22+
document.getElementById("minutes").innerHTML = minutes + ":";
23+
document.getElementById("seconds").innerHTML = seconds;
24+
25+
// If the count down is over, write some text
26+
if (distance < 0) {
27+
clearInterval(x);
28+
document.getElementById("demo").innerHTML = "EXPIRED";
29+
}
30+
}, 1000);

0 commit comments

Comments
 (0)