Skip to content

Commit 35ba595

Browse files
moacirmodamoacirmoda
committed
creating first draft of tpp masterclass landing page
1 parent baa8a23 commit 35ba595

File tree

5 files changed

+761
-0
lines changed

5 files changed

+761
-0
lines changed

‎pythonpro/pages/templates/pages/tpp_masterclass_landing_page.html‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
{% extends "pages/tpp_webiorico_landing_page_v2.html" %}
2+
{% load bootstrap4 %}
3+
{% load static %}
4+
5+
{% block first_fold %}
6+
<div class='bg-black'>
7+
<div class="container">
8+
<div class="row">
9+
<div class='col-md-7 col-sm-12 text-light main-form'>
10+
<div class="hero">
11+
<h1 class='font-weight-bold'>
12+
<span class="ec ec-rotating-light"></span>
13+
Pode parecer loucura... mas a <b class='text-uppercase danger'><u>Faculdade Não te Prepara para o Mercado de Trabalho!</b></u>
14+
</h1>
15+
16+
<h3 class='mb-4'>
17+
Pensando nisso, eu preparei uma Masterclass para te mostrar o <b><u>caminho
18+
mais rápido para você conquistar sua PRIMEIRA OPORTUNIDADE</b></u> como programador,
19+
mesmo que você nunca tenha escrito uma linha de código.
20+
</h3>
21+
</div>
22+
23+
<span class='' style='font-size: 11pt; text-align: left;'>
24+
Cadastre-se para eu liberar seu acesso:
25+
</span>
26+
<form method="POST" class='mb-3 text-center'>
27+
{% csrf_token %}
28+
{% bootstrap_form form %}
29+
30+
<button type='submit' class='btn btn-warning text-center cta'>
31+
<b>
32+
EU QUERO A MINHA PRIMEIRA VAGA!
33+
<span class="ec ec-rocket"></span>
34+
</b>
35+
</button>
36+
</form>
37+
38+
<h4 class='' id="topo">
39+
Evento Online e 100% Gratuito.
40+
</h4>
41+
</div>
42+
43+
<div class='col-md-5 col-sm-12'>
44+
<img width="400px" class="photo-renzo not-iphone" src="{% static 'img/spp/footer/renzo-nuccitelli-v2.webp' %}">
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
{% endblock %}
50+
51+
{% block styles %}
52+
{{ block.super }}
53+
<link rel="preconnect" href="https://fonts.gstatic.com">
54+
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&display=swap" rel="stylesheet">
55+
<link rel='stylesheet' href='https://unpkg.com/emoji.css/dist/emoji.min.css'>
56+
57+
<style>
58+
* {
59+
font-family: 'Fira Sans', sans-serif !important;
60+
}
61+
.hero .danger {
62+
color: #F42C04;
63+
}
64+
.hero b {
65+
color: #ffc107;
66+
}
67+
.bg-black {
68+
background-color: #0c1b33 !important;
69+
}
70+
.content .ec {
71+
font-size: 100pt;
72+
}
73+
.content .col h3 {
74+
font-size: 17pt;
75+
}
76+
77+
.photo-renzo {
78+
margin-top: 100px;
79+
}
80+
81+
.cta {
82+
font-size: 15pt !important;
83+
}
84+
85+
.hero {
86+
margin: 20px 0;
87+
}
88+
89+
.hero h1 {
90+
text-transform: inherit;
91+
margin-bottom: 30px;
92+
}
93+
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
94+
.hero h1 {
95+
font-size: 21pt;
96+
}
97+
.hero h3 {
98+
font-size: 14pt;
99+
line-height: 20pt;
100+
}
101+
.hero h4 {
102+
font-size: 14pt;
103+
}
104+
.cta {
105+
font-size: 12pt !important;
106+
padding: 10px;
107+
}
108+
h2 {
109+
font-size: 18pt;
110+
}
111+
p {
112+
font-size: 12pt;
113+
}
114+
.photo-renzo {
115+
margin-top: 10px;
116+
width: 300px;
117+
display: block;
118+
margin-left: auto;
119+
margin-right: auto;
120+
}
121+
.main-form {
122+
text-align: center;
123+
}
124+
.content .ec {
125+
font-size: 50pt;
126+
}
127+
.content h3 {
128+
margin-bottom: -10px;
129+
}
130+
.content .block {
131+
margin: 10px;
132+
}
133+
}
134+
</style>
135+
136+
{% endblock %}

0 commit comments

Comments
 (0)