Skip to content

Commit e653af7

Browse files
midhatstamKátia Nakamura
midhatstam
authored and
Kátia Nakamura
committed
Sponsoring frontend with script for level of sponsorship
1 parent b1ea423 commit e653af7

File tree

7 files changed

+588
-4
lines changed

7 files changed

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

0 commit comments

Comments
 (0)