-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.pug
163 lines (163 loc) · 8.31 KB
/
index.pug
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
doctype html
head
meta(charset='UTF-8')
meta(http-equiv='X-UA-Compatible' content='IE=edge')
meta(name='viewport' content='width=device-width, initial-scale=1.0')
link(rel='shortcut icon' href='img/favicon.ico' type='image/x-icon')
title Le Jour J...
// bootstrapStyle
link(href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3' crossorigin='anonymous')
// CSS icons
link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css')
// myStyle
link(rel='stylesheet' href='css/style.css')
header
nav.navbar.navbar-expand-lg.navbar-light.bg-dark-50.fs-5
.container-fluid
a.navbar-brand.text-light.fw-bolder.fs-1(href='#') PIE
button.navbar-toggler(type='button' data-bs-toggle='collapse' data-bs-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation')
span.navbar-toggler-icon
#navbarNav.collapse.navbar-collapse
ul.navbar-nav
li.nav-item
a.nav-link.active(aria-current='page' href='#') Home
li.nav-item
a.nav-link(href='#col') Collaboration
li.nav-item
a.nav-link(href='#init') Initiative
li.nav-item
a.nav-link(href='#avis') Avis
li.nav-item
a.nav-link.disabled le Jour J | 02 avril 2022
main.container
#carouselExampleControls.carousel.slide.carousel-fade(data-bs-ride='carousel')
.carousel-inner
.carousel-item.active(data-bs-interval='2000')
img.d-block.mw-100(src='img/00.png' height='590' alt='...')
.carousel-item(data-bs-interval='2000')
img.d-block(src='img/05.jpg' height='590' alt='...')
.carousel-item(data-bs-interval='2000')
img.d-block(src='img/06.jpeg' height='590' alt='...')
.carousel-item(data-bs-interval='2000')
img.d-block(src='img/07.jpg' height='590' alt='...')
.carousel-item(data-bs-interval='2000')
img.d-block(src='img/08.jpeg' height='590' alt='...')
.carousel-item(data-bs-interval='2000')
img.d-block(src='img/09.jpeg' height='590' alt='...')
.carousel-item(data-bs-interval='2000')
img.d-block(src='img/10.jpeg' height='590' alt='...')
.carousel-item(data-bs-interval='2000')
img.d-block(src='img/11.jpeg' height='590' alt='...')
.carousel-item(data-bs-interval='2000')
img.d-block(src='img/12.jpeg' height='590' alt='...')
.carousel-item(data-bs-interval='2000')
img.d-block(src='img/13.jpeg' height='590' alt='...')
.carousel-item(data-bs-interval='2000')
img.d-block(src='img/14.jpeg' height='590' alt='...')
.carousel-item(data-bs-interval='2000')
img.d-block(src='img/15.jpeg' height='590' alt='...')
.carousel-item(data-bs-interval='2000')
img.d-block(src='img/16.jpeg' height='590' alt='...')
.carousel-item(data-bs-interval='2000')
img.d-block(src='img/17.jpeg' height='590' alt='...')
button.carousel-control-prev(type='button' data-bs-target='#carouselExampleControls' data-bs-slide='prev')
span.carousel-control-prev-icon(aria-hidden='true')
span.visually-hidden Previous
button.carousel-control-next(type='button' data-bs-target='#carouselExampleControls' data-bs-slide='next')
span.carousel-control-next-icon(aria-hidden='true')
span.visually-hidden Next
// Collaboration section
section#col.vh-50.my-5
h2.h1.display-xxl-6.my-2.text-uppercase.fw-bold.text-dark.text-center.w-75.w-xxl-auto.mx-auto
| Initiative intermédiaire
span.text-light stagiaires pie
| &
span.text-light Marafik berkane
.containe
img.mw-100(src='img/principale.png' alt='')
// initiative section
section#init.container.my-5.pt-1.vh-75
h2.display-4.display-xxl-3.mx-auto.my-5.text-uppercase.fw-bold.text-dark.text-center
| initiative
span.text-light stagiaires
| ofppt
span.text-light dev101
.row.py-5
.col-xxl-7
h2.text-uppercase.text-dark.mb-5
span.bg-light.d-inline.block.p-1.rounded-3 Avant notre
span.text-light initiative
p.display-5.text-center.text-xxl-end.text-white.pt-5
| Le bonheur n'est pas un état à atteindre, mais un comportement à suivre. Si vous voulez être heureux et vous faciliter la vie, essayez de profiter de toutes les choses, même les plus difficiles.
.col-xxl-5.order-xxl-1.mx-auto.d-flex.justify-content-center
video(width='500' height='500' onmouseenter='play()' onmouseleave='pause()')
source(src='video/v1.mp4' type='video/mp4')
.row.py-4.mt-5.py-5
.col-xxl-7.order-xxl-2.d-flex.flex-column.justify-content-between
h2.text-uppercase.text-dark.mb-5
span.bg-light.d-inline.block.p-1.rounded-3 apres notre
span.text-light
| initiative
p.display-5.text-center.text-xxl-start.text-white.pt-5
| Le secret du succès dans la vie est d'affronter ses difficultés avec constance comme un oiseau dans la révolution de la tempête.
.col-xxl-5.order-xxl-1.mx-auto.d-flex.justify-content-center
video(width='500' height='400' onmouseenter='play()' onmouseleave='pause()')
source(src='video/v2.mp4' type='video/mp4')
// avis section
section#avis.bg-dark.py-5
.container
h2.display-3.mx-auto.my-5.text-uppercase.fw-bold.text-muted.text-center
| Votre
span.text-light avis
| et
span.text-light ressenti
.row.justify-content-center
.col-12.col-xxl-6.d-flex.justify-content-center
.position-relative
video(width='500' height='500' onmouseenter='play()' onmouseleave='pause()')
source(src='video/avis1.mp4' type='video/mp4')
span.badge.py-2.px-4.fs-6.bg-white.text-dark.position-absolute.top-0.start-0 GE102
.col-12.col-xxl-6.d-flex.justify-content-center
.position-relative
video(width='500' height='500' onmouseenter='play()' onmouseleave='pause()')
source(src='video/avis2.mp4' type='video/mp4')
span.badge.py-2.px-4.fs-6.bg-white.text-dark.position-absolute.top-0.end-0 GE102
footer
.container.py-3.mb-lg-4.mb-0.border-top
.row.felx-coulmn.flex-lg-row.justify-content-center.align-items-center.justify-content-lg-between.align-items-lg-center
.col-12.col-lg-5.d-flex.align-items-center.justify-content-center.justify-content-lg-start
a.mb-3.me-2.mb-lg-0.text-decoration-none.fs-5.fw-bolder(href='https://www.instagram.com/pie_ista_berkane/' style='color:#cdbeff')
| PIE
span.mb-3.me-2.mb-lg-0.text-white.fw-bold
| © 2022 OFPPT
span.badge.rounded-pill.fs-sm-6(style='color:#24212d;background:#a095c7;')
| STAGIAIRES
| DEV101
a.col.btn.btn-sm.fw-bold.d-none.d-lg-block.shadow.shadow-lg(href='https://www.linkedin.com/in/ermich-reda/' style='background:#454152;color:#cdbeff;' target='_blanck')
| Designed |
| Developed by ER.Reda
ul.nav.col-12.col-lg-4.mb-lg-3.mb-lg-0.list-unstyled.d-flex.justify-content-center.justify-content-lg-end.fs-5
li.ms-3
a.text-white(href='https://www.instagram.com/reermix/' target='_blank' title='ERMIX')
i.bi.bi-instagram
li.ms-3
a.text-white(href='https://www.facebook.com/er.reda.7/' target='_blank' title='ERREDA')
i.bi.bi-facebook
//- li.ms-3
//- a.text-white(href='#')
//- i.bi.bi-linkedin
li.ms-3
a.text-white(href='mailto:[email protected]')
i.bi.bi-envelope
li.ms-3
a.text-white(href='https://api.whatsapp.com/send?phone=2126042939100' method="get" target='_blank' title='ERREDA')
i.bi.bi-whatsapp
li.ms-3
a.text-white(href='#')
i.bi.bi-arrow-up
.row.justify-content-center.d-lg-none.align-items-center.py-3
a.col-9.col-sm-6.btn.btn-sm.shadow.shadow-lg.fw-bold(href='https://www.linkedin.com/in/ermich-reda/' style='background:#454152;color:#cdbeff;' target='_blanck')
| Designed
| | Developed by ER.Reda
// script
script(src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js' integrity='sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p' crossorigin='anonymous')