Skip to content

Commit e3d2b73

Browse files
midhatstammidhatstam
committed
Sponsoring frontend with script for level of sponsorship
1 parent 64be8c2 commit e3d2b73

File tree

8 files changed

+592
-4
lines changed

8 files changed

+592
-4
lines changed

‎pyconbalkan/cfp/templates/cfp.html

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
{% load static %}
2+
<!DOCTYPE html>
3+
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
4+
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
5+
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
6+
<head>
7+
<title>PyCon Balkan 2018</title>
8+
<!-- Meta -->
9+
<meta charset="utf-8">
10+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
12+
<meta name="description" content="PyCon Balkan description">
13+
<meta name="author" content="Python Balkan community">
14+
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'img/favicon-32x32.png' %}">
15+
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/favicon-16x16.png' %}">
16+
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
17+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
18+
<!-- Bootstrap 4 -->
19+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
20+
<link rel="stylesheet" href="{% static 'css/style.css' %}">
21+
22+
<!-- Timer JS -->
23+
<script src="{% static 'js/timer.js' %}" type="text/javascript"></script>
24+
<script src="{% static 'js/index.js' %}" type="text/javascript"></script>
25+
26+
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
27+
<!--[if lt IE 9]>
28+
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
29+
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
30+
<![endif]-->
31+
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900"
32+
rel="stylesheet">
33+
<style>
34+
body {
35+
font-family: Montserrat, sans-serif;
36+
}
37+
.blue {
38+
font-weight: 900;
39+
color: #53A8DC;
40+
}
41+
.yellow {
42+
font-weight: 900;
43+
color: #F9D768;
44+
}
45+
.black {
46+
font-size: 48px;
47+
font-weight: bold;
48+
}
49+
.white {
50+
color: #FFFFFF;
51+
font-size: 36px;
52+
font-weight: bold;
53+
}
54+
</style>
55+
</head>
56+
57+
<body>
58+
59+
<!-- Navigation Bar -->
60+
61+
<div class="row">
62+
<div class="col-md-11 offset-0">
63+
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
64+
<div class="navbar navbar-header mr-auto">
65+
<a class="navbar-brand" href="#"><img src="{% static 'img/logo.jpg' %}"></a>
66+
</div>
67+
<ul class="nav navbar-nav ml-auto w-100 justify-content-end mb-5 pb-3">
68+
{# <li><a class="btn btn-light btn-sm round" href="#" role="button">News</a></li>#}
69+
{# <li><a class="btn btn-light btn-sm round" href="#" role="button">CFP</a></li>#}
70+
{# <li><a class="btn btn-light btn-sm round" href="#" role="button">Sponsoring</a></li>#}
71+
{# <li><a class="btn btn-light btn-sm round" href="#" role="button">Timetable</a></li>#}
72+
{# <li><a class="btn btn-light btn-sm round" href="#" role="button">Travel</a></li>#}
73+
{# <li><a class="btn btn-light btn-sm round" href="#" role="button">Tickets</a></li>#}
74+
{# <li><a class="btn btn-light btn-sm round" href="#" role="button">Events</a></li>#}
75+
{# <li><a class="btn btn-light btn-sm round" href="#" role="button">FAQ</a></li>#}
76+
{# <li><a class="btn btn-light btn-sm round" href="#" role="button">About</a></li>#}
77+
{# <li><a class="btn btn-light btn-sm round" href="#" role="button">Contact</a></li>#}
78+
<li><a class="btn btn-light btn-sm round" href="/coc" role="button">CoC</a></li>
79+
</ul>
80+
</nav>
81+
</div>
82+
</div>
83+
84+
<!-- END of Navigation Bar -->
85+
86+
<div class="row">
87+
88+
<!-- Left Side -->
89+
90+
91+
<div class="col-xl-3 offset-1">
92+
<div>
93+
{% if conference %}
94+
<h1 class="font900 one">{{ conference.event }}</h1>
95+
<h2 class="one">{{ conference.name }}</h2>
96+
<h3>{{ conference.city }} {{ conference.year }}</h3>
97+
{% endif %}
98+
</div>
99+
<hr>
100+
{% if conference %}
101+
<div class="details">
102+
<h1 class="font900 font-yellow">#{{ conference.number }}</h1>
103+
<p>{{ conference.address }}</p>
104+
<div>
105+
<p><i class="far fa-calendar-alt"></i> {{ conference.from_date }} - {{ conference.to_date }}</p>
106+
<p><i class="fas fa-users"></i> {{ conference.max_attendees }} attendees</p>
107+
<p><i class="fas fa-globe"></i> {{ conference.get_type_display }}</p>
108+
</div>
109+
{# <div>#}
110+
{# <a class="btn btn-primary btn-md round" href="#" role="button"><b>JOIN US</b></a>#}
111+
{# </div>#}
112+
{# <div>#}
113+
{# <i class="fa-lg fab fa-facebook-f sn-icons"></i>#}
114+
{# <i class="fa-lg fab fa-twitter sn-icons"></i>#}
115+
{# <i class="fa-lg fab fa-linkedin-in sn-icons"></i>#}
116+
{# </div>#}
117+
</div>
118+
{% endif %}
119+
</div>
120+
121+
<!-- END of Left Side -->
122+
123+
124+
<!-- Main Content -->
125+
126+
127+
128+
<!-- END of Main Content -->
129+
130+
</div>
131+
132+
<!-- Bootstrap 4 scripts -->
133+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
134+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
135+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
136+
137+
</body>
138+
</html>

‎pyconbalkan/core/static/css/style.css

Lines changed: 214 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@ body {
6262
font-weight: 900;
6363
}
6464

65+
.font400 {
66+
font-family: 'Montserrat', sans-serif;
67+
font-weight: 400;
68+
}
69+
6570
.one {
6671
margin-bottom: -12px;
6772
font-size: 4.5rem;
@@ -99,13 +104,25 @@ hr {
99104
}
100105

101106
.font-yellow {
102-
color: #F3D66C;
107+
color: #FFD54F;
103108
}
104109

105110
.font-blue {
106111
color: #22A4D9;
107112
}
108113

114+
.font-white {
115+
color: white;
116+
}
117+
118+
.font-grey {
119+
color: darkgrey;
120+
}
121+
122+
.font-small {
123+
font-size: 0.8em;
124+
}
125+
109126
.fa-calendar-alt, .fa-users, .fa-globe{
110127
color: #22A4D9;
111128
display: inline-block;
@@ -185,7 +202,7 @@ ul.countdown li div {
185202
}
186203

187204
.moveDown {
188-
margin-top: 50px;
205+
margin-top: 30px;
189206
}
190207

191208
#btnBuyNow {
@@ -243,4 +260,199 @@ ul.countdown li div {
243260

244261
#attend {
245262
width: auto;
263+
}
264+
265+
table.ticket {
266+
border-collapse: separate;
267+
}
268+
269+
270+
.input_border {
271+
width: 100%;
272+
box-sizing:border-box;
273+
border: none;
274+
border-radius: 30px;
275+
-moz-border-radius: 30px;
276+
-webkit-border-radius: 30px;
277+
-moz-box-shadow: 0px 0px 0px #FFF;
278+
-webkit-box-shadow: 0px 0px 0px #FFF;
279+
box-shadow: 0px 0px 0px #FFF;
280+
outline: 0;
281+
padding: 4px 20px;
282+
-webkit-appearance: none;
283+
line-height: 2.2;
284+
background-color: #FFF;
285+
}
286+
287+
288+
select, option {
289+
margin: 0;
290+
display: inline-block;
291+
cursor: pointer;
292+
}
293+
294+
.b-select-wrap {
295+
width: 100%;
296+
overflow: hidden;
297+
position: relative;
298+
}
299+
300+
.b-select-wrap:after {
301+
content: "⌄";
302+
padding: 0%;
303+
position: absolute;
304+
top: 25%;
305+
right: 15px;
306+
z-index: 1;
307+
text-align: center;
308+
width: 20px;
309+
height: 50%;
310+
pointer-events: none;
311+
color: #FFF;
312+
font-size: 12px;
313+
border-radius: 30px;
314+
background-color: #0080C6;
315+
font-weight: bolder;
316+
}
317+
318+
.b-input-date-wrap {
319+
width: 100%;
320+
overflow: hidden;
321+
position: relative;
322+
}
323+
324+
.b-input-date-wrap:after {
325+
content: "📅";
326+
padding: 1% 0% 0% 0%;
327+
position: absolute;
328+
top: 25%;
329+
right: 15px;
330+
z-index: 1;
331+
text-align: center;
332+
width: 20px;
333+
height: 50%;
334+
pointer-events: none;
335+
color: #FFF;
336+
font-size: 12px;
337+
border-radius: 30px;
338+
background-color: #0080C6;
339+
font-weight: bolder;
340+
}
341+
342+
.b-input-time-wrap {
343+
width: 100%;
344+
overflow: hidden;
345+
position: relative;
346+
}
347+
348+
.b-input-time-wrap:after {
349+
content: "🕒";
350+
padding: 1% 0% 0% 0%;
351+
position: absolute;
352+
top: 25%;
353+
right: 15px;
354+
z-index: 1;
355+
text-align: center;
356+
width: 20px;
357+
height: 50%;
358+
pointer-events: none;
359+
color: #FFF;
360+
font-size: 12px;
361+
border-radius: 30px;
362+
background-color: #0080C6;
363+
font-weight: bolder;
364+
}
365+
366+
input[type="date"]::-webkit-inner-spin-button,
367+
input[type="date"]::-webkit-outer-spin-button,
368+
input[type="time"]::-webkit-inner-spin-button,
369+
input[type="time"]::-webkit-outer-spin-button,
370+
input[type="time"]::-webkit-clear-button {
371+
display: none;
372+
-webkit-appearance: none;
373+
-moz-appearance: none;
374+
appearance: none;
375+
margin: 0;
376+
}
377+
378+
input[type="date"]::-webkit-datetime-edit{
379+
color: transparent;
380+
}
381+
382+
input[type="date"]:focus::-webkit-datetime-edit{
383+
color: #000;
384+
}
385+
386+
.button-style {
387+
width: 100%;
388+
border: 3px solid #FFD54F;
389+
border-radius: 30px;
390+
-moz-border-radius: 30px;
391+
-webkit-border-radius: 30px;
392+
-moz-box-shadow: 0px 0px 0px #FFF;
393+
-webkit-box-shadow: 0px 0px 0px #FFF;
394+
box-shadow: 0px 0px 0px #FFF;
395+
outline: 0;
396+
padding: 4px 20px;
397+
-webkit-appearance: none;
398+
}
399+
button {
400+
background-color: #333B3D;
401+
}
402+
403+
input[type="button"]{
404+
background-color: #FFD54F;
405+
}
406+
407+
input[type="checkbox"]
408+
{
409+
border: 5px #FFF;
410+
border-radius: 10px;
411+
-moz-border-radius: 10px;
412+
-webkit-border-radius: 10px;
413+
-moz-box-shadow: 0px 0px 0px #FFF;
414+
-webkit-box-shadow: 0px 0px 0px #FFF;
415+
box-shadow: 0px 0px 0px #FFF;
416+
outline: 0;
417+
padding: 10px 10px;
418+
-webkit-appearance: none;
419+
line-height: 1.5;
420+
background-color: #FFF;
421+
width: 15px;
422+
height: 10px;
423+
margin-bottom: 0px;
424+
}
425+
426+
input[type="checkbox"]:checked {
427+
background-color: #0080C6;
428+
}
429+
430+
431+
.left {
432+
float: left;
433+
color: #FFD54F;
434+
}
435+
436+
.right {
437+
float: right;
438+
color: #FFF;
439+
}
440+
441+
.yellow-table {
442+
border-collapse: separate;
443+
width: 100%;
444+
height: 100%;
445+
box-sizing: border-box;
446+
box-shadow: #FFF 0px 0px 0px;
447+
-webkit-appearance: none;
448+
line-height: 2.2;
449+
background: #FFD54F;
450+
-moz-border-radius: 20px;
451+
-webkit-border-radius: 20px;
452+
-moz-box-shadow: 0px 0px 0px #FFF;
453+
-webkit-box-shadow: 0px 0px 0px #FFF;
454+
border-image: initial;
455+
border-radius: 20px;
456+
outline: 0px;
457+
padding: 4px 20px;
246458
}

0 commit comments

Comments
 (0)