-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfront-page.php
171 lines (145 loc) · 6.09 KB
/
front-page.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<?php get_header(); ?>
<!-- **********************
Hero banner container
********************** -->
<section class="header bg-secondary flex align-center justify-center py-12">
<div class="flex flex-col">
<h1 class="text-center text-white text-[42px] leading-10 md:text-6xl lg:text-7xl">
Hoe goed<br />ken ik mezelf?
</h1>
<img class="w-4/6 lg:w-2/6 mx-auto my-4" src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/questioning-blue.png" alt="">
</div>
</section>
<!-- Start max width container -->
<section class="mx-auto max-w-4xl px-6 md:px-12">
<!-- **********************
Simple text left container
********************** -->
<section class="my-24">
<div class="lg:pr-48">
<article>
<h1 class="text-4xl text-primary mb-4">Ontdek je kwaliteiten</h1>
<p>
Esotherie is kennis van alles wat er bestaat, zichtbaar en onzichtbaar!
Als je kijkt naar je eigen ontwikkeling, naar je eigen kwaliteiten en naar je gevoel,
dat de esotherie jou kan helpen om jezelf verder te ontwikkelen, andere kwaliteiten in
jezelf te ontdekken die normaal niet naar boven gekomen zouden zijn.
</p>
</article>
</div>
</section>
<!-- **********************
Overlapping container
********************** -->
<!-- relative parent for absolute children -->
<section class="relative pb-14 pr-16">
<!-- aspect ratio container -->
<div class="z-10 aspect-w-16 aspect-h-9 bg-secondary">
<iframe src="https://player.vimeo.com/video/724403765?h=de9f5368bd" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<!-- <div class="flex items-center justify-center">
<div class="cursor-pointer w-20 h-20 inline-flex text-3xl items-center justify-center rounded-full bg-white text-primary">
<i class="fas fa-play pl-1 pt-1"></i>
</div>
</div> -->
</div>
<!-- empty bg-color div absolute -->
<div class="absolute bottom-0 right-0 bg-blue-100 w-4/6 h-5/6 z-0"></div>
<!-- Sphinx logo absolute -->
<div class="absolute bottom-3 left-0">
<img class="w-44 mt-4" src="<?php echo get_template_directory_uri(); ?>/assets/images/logo-blue.png" alt="Stichting de Pyramide - Logo" title="Stichting de Pyramide - Logo">
</div>
</section>
<!-- **********************
Split text with line container
********************** -->
<section class="py-24 lg:flex">
<article>
<h1 class="text-4xl text-primary mb-4">Jezelf verder ontwikkelen</h1>
</article>
<article class="border-l-2 border-primary border-dotted pl-4 lg:ml-12">
<p>
Je denkt, zoals jij jezelf ervaart, dat dat is wie je bent!
Maar besef dat je vanuit je jeugd inperkingen hebt ontwikkeld om jezelf als kind te beschermen.
En dat zijn meestal inperkingen van je kwaliteiten.
</p>
<p class="mt-4">
Is het voor jou tijd om die inperkingen los te gaan laten en jezelf toe te staan te worden wie je werkelijk bent?
</p>
</article>
</section>
<!-- End max width container -->
</section>
<!-- **********************
50 / 50 Split container
********************** -->
<section class="flex flex-col md:flex-row text-white text-center">
<article class="order-2 md:order-1 w-full md:w-1/2 bg-secondary">
<div class="p-12 flex flex-col items-center">
<img class="w-7/12 mx-auto mb-2" src="<?php echo get_template_directory_uri(); ?>/assets/images/logo-elessons.png" alt="">
<p class="w-4/6 mb-6 ">Volg online Esotherische lessen en ervaar dat je leeft, ontwikkelt en groeit!</p>
<a href="/?add-to-cart=5103" class="text-white bg-primary py-2 px-4 focus:outline-none rounded">
Inschrijven en starten!
</a>
</div>
</article>
<article class="order-1 md:order-2 w-full md:w-1/2 bg-primary">
<div class="p-12">
<!-- <h1 class="text-4xl">Weer worden<br />wie je bent?</h1> -->
<img class="w-4/6 lg:w-3/6 mx-auto" src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/surprised-white.png" alt="">
</div>
</article>
</section>
<!-- Start max width container -->
<section class="mx-auto max-w-4xl px-6 md:px-12">
<!-- **********************
Simple text left container
********************** -->
<section class="mb-16 mt-24">
<div class="lg:pr-48">
<article>
<h1 class="text-4xl text-primary mb-4">Ervaringen van anderen</h1>
<p>
Deze studenten gingen je voor en vertellen wat hun ervaringen zijn bij het volgen van de online lessen Esotherie.
</p>
</article>
</div>
</section>
<!-- **********************
Overlapping container
********************** -->
<!-- relative parent for absolute children -->
<section class="relative pb-14 pl-16">
<!-- aspect ratio container -->
<div class="z-10 aspect-w-16 aspect-h-9 bg-secondary">
<!-- <div class="flex items-center justify-center">
<div class="cursor-pointer w-20 h-20 inline-flex text-3xl items-center justify-center rounded-full bg-white text-primary">
<i class="fas fa-play pl-1 pt-1"></i>
</div>
</div> -->
<iframe src="https://player.vimeo.com/video/362561091?h=8daadc7d08" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<!-- empty bg-color div absolute -->
<div class="absolute bottom-0 left-0 bg-blue-100 w-4/6 h-5/6 z-0"></div>
<!-- Sphinx logo absolute -->
<div class="absolute bottom-3 right-0">
<img class="w-44 mt-4" src="<?php echo get_template_directory_uri(); ?>/assets/images/logo-blue.png" alt="Stichting de Pyramide - Logo" title="Stichting de Pyramide - Logo">
</div>
</section>
<!-- **********************
Simple text center container
********************** -->
<section class="my-24 text-center">
<article>
<h1 class="text-4xl text-primary mb-2">Probeer de lessen nu 30 dagen gratis!</h1>
<p class="mb-6">
Start met de online lessen Esotherie en beslis later of dit iets voor je is.
</p>
<a href="/?add-to-cart=5103" class="text-white bg-primary py-3 px-4 rounded">
Inschrijven en starten!
</a>
</article>
</section>
<!-- End max width container -->
</section>
<?php
get_footer();