diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 5ed0c00..cca393e --- a/README.md +++ b/README.md @@ -1,2 +1,3 @@ -# tp-web-statique-pavillon-rouge +# Pavillon Rouge +Exercice du cours web statique dans le cadre de ma formation CDA chez Human Booster \ No newline at end of file diff --git a/annexes/exercice.jpg b/annexes/exercice.jpg new file mode 100755 index 0000000..11742d8 Binary files /dev/null and b/annexes/exercice.jpg differ diff --git a/annexes/notes.txt b/annexes/notes.txt new file mode 100755 index 0000000..95684fd --- /dev/null +++ b/annexes/notes.txt @@ -0,0 +1 @@ +Typos : Roboto, Lora \ No newline at end of file diff --git a/img/cigogne.png b/img/cigogne.png new file mode 100755 index 0000000..c4a92db Binary files /dev/null and b/img/cigogne.png differ diff --git a/img/clients/logo_bouygues.png b/img/clients/logo_bouygues.png new file mode 100755 index 0000000..7f1c0a5 Binary files /dev/null and b/img/clients/logo_bouygues.png differ diff --git a/img/clients/logo_fftb.png b/img/clients/logo_fftb.png new file mode 100755 index 0000000..4ad240c Binary files /dev/null and b/img/clients/logo_fftb.png differ diff --git a/img/clients/logo_haasavocats.png b/img/clients/logo_haasavocats.png new file mode 100755 index 0000000..f0004df Binary files /dev/null and b/img/clients/logo_haasavocats.png differ diff --git a/img/clients/logo_herault.png b/img/clients/logo_herault.png new file mode 100755 index 0000000..9d961f0 Binary files /dev/null and b/img/clients/logo_herault.png differ diff --git a/img/clients/logo_myleasing.png b/img/clients/logo_myleasing.png new file mode 100755 index 0000000..2787f1a Binary files /dev/null and b/img/clients/logo_myleasing.png differ diff --git a/img/clients/logo_pramex.png b/img/clients/logo_pramex.png new file mode 100755 index 0000000..09e38a4 Binary files /dev/null and b/img/clients/logo_pramex.png differ diff --git a/img/clients/logo_texto.png b/img/clients/logo_texto.png new file mode 100755 index 0000000..da0de60 Binary files /dev/null and b/img/clients/logo_texto.png differ diff --git a/img/clients/logo_uniqpeople.png b/img/clients/logo_uniqpeople.png new file mode 100755 index 0000000..d544b56 Binary files /dev/null and b/img/clients/logo_uniqpeople.png differ diff --git a/img/clients/logo_xylem.png b/img/clients/logo_xylem.png new file mode 100755 index 0000000..8b0c269 Binary files /dev/null and b/img/clients/logo_xylem.png differ diff --git a/img/fond-droite.png b/img/fond-droite.png new file mode 100755 index 0000000..996faf8 Binary files /dev/null and b/img/fond-droite.png differ diff --git a/img/fond-section.jpg b/img/fond-section.jpg new file mode 100755 index 0000000..357c20c Binary files /dev/null and b/img/fond-section.jpg differ diff --git a/img/fond-site.jpg b/img/fond-site.jpg new file mode 100755 index 0000000..a796799 Binary files /dev/null and b/img/fond-site.jpg differ diff --git a/img/fond-titre.jpg b/img/fond-titre.jpg new file mode 100755 index 0000000..392a57c Binary files /dev/null and b/img/fond-titre.jpg differ diff --git a/img/label-arrow.png b/img/label-arrow.png new file mode 100755 index 0000000..c63a13a Binary files /dev/null and b/img/label-arrow.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100755 index 0000000..d34da0c Binary files /dev/null and b/img/logo.png differ diff --git a/img/logo/comp_eshop.png b/img/logo/comp_eshop.png new file mode 100755 index 0000000..c307a5b Binary files /dev/null and b/img/logo/comp_eshop.png differ diff --git a/img/logo/comp_facebook.png b/img/logo/comp_facebook.png new file mode 100755 index 0000000..ec4066a Binary files /dev/null and b/img/logo/comp_facebook.png differ diff --git a/img/logo/comp_film.png b/img/logo/comp_film.png new file mode 100755 index 0000000..7db379d Binary files /dev/null and b/img/logo/comp_film.png differ diff --git a/img/logo/comp_html5.png b/img/logo/comp_html5.png new file mode 100755 index 0000000..a5381a1 Binary files /dev/null and b/img/logo/comp_html5.png differ diff --git a/img/logo/comp_instagram.png b/img/logo/comp_instagram.png new file mode 100755 index 0000000..12328d2 Binary files /dev/null and b/img/logo/comp_instagram.png differ diff --git a/img/logo/comp_mobile.png b/img/logo/comp_mobile.png new file mode 100755 index 0000000..ae6f0f9 Binary files /dev/null and b/img/logo/comp_mobile.png differ diff --git a/img/logo/comp_phpmysql.png b/img/logo/comp_phpmysql.png new file mode 100755 index 0000000..dc97004 Binary files /dev/null and b/img/logo/comp_phpmysql.png differ diff --git a/img/logo/comp_seo.png b/img/logo/comp_seo.png new file mode 100755 index 0000000..d3c5e21 Binary files /dev/null and b/img/logo/comp_seo.png differ diff --git a/img/logo/comp_wordpress.png b/img/logo/comp_wordpress.png new file mode 100755 index 0000000..d1de4a9 Binary files /dev/null and b/img/logo/comp_wordpress.png differ diff --git a/img/logo/comp_youtube.png b/img/logo/comp_youtube.png new file mode 100755 index 0000000..cda3ac1 Binary files /dev/null and b/img/logo/comp_youtube.png differ diff --git a/img/portraits/RomaneFaverjon.png b/img/portraits/RomaneFaverjon.png new file mode 100755 index 0000000..528e0a1 Binary files /dev/null and b/img/portraits/RomaneFaverjon.png differ diff --git a/img/portraits/totem_christophe.png b/img/portraits/totem_christophe.png new file mode 100755 index 0000000..84d3408 Binary files /dev/null and b/img/portraits/totem_christophe.png differ diff --git a/img/portraits/totem_francois.png b/img/portraits/totem_francois.png new file mode 100755 index 0000000..087d1fd Binary files /dev/null and b/img/portraits/totem_francois.png differ diff --git a/img/portraits/totem_frank.png b/img/portraits/totem_frank.png new file mode 100755 index 0000000..5719681 Binary files /dev/null and b/img/portraits/totem_frank.png differ diff --git a/img/portraits/totem_jean-marc.png b/img/portraits/totem_jean-marc.png new file mode 100755 index 0000000..7f78470 Binary files /dev/null and b/img/portraits/totem_jean-marc.png differ diff --git a/img/portraits/totem_sylvestre.png b/img/portraits/totem_sylvestre.png new file mode 100755 index 0000000..18871e2 Binary files /dev/null and b/img/portraits/totem_sylvestre.png differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..5f5833a --- /dev/null +++ b/index.html @@ -0,0 +1,279 @@ + + + + + + + + + + + + + + + + + + Le Lapin & Le Panda + +
+ + logo +

Si le contenu m'était conté...

+
+

Le lapin & le panda

+

Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan gravida.
+ Nam nec sapien in neque accumsan
+ eleifend vel et tellus.
+ Fusce non arcu id turpis aliquam vehicula. +

+

Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan gravida.
+ Nam nec sapien in neque accumsan
+ eleifend vel et tellus.
+ Fusce non arcu id turpis aliquam vehicula. +

+

Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan gravida.
+ Nam nec sapien in neque accumsan
+ eleifend vel et tellus.
+ Fusce non arcu id turpis aliquam vehicula. +

+

Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan gravida.
+ Nam nec sapien in neque accumsan
+ eleifend vel et tellus.
+ Fusce non arcu id turpis aliquam vehicula. +

+

Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan gravida.
+ Nam nec sapien in neque accumsan
+ eleifend vel et tellus.
+ Fusce non arcu id turpis aliquam vehicula. +

+
+
+ + +
+
+

Moral N°1

+
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

+
+
+

Lorem ipsum dolor sit amet
+ Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan
+ gravida.
+ Nam nec sapien in neque accumsan
+ eleifend vel et tellus.
+ Fusce non arcu id turpis aliquam
+ vehicula. +

+
+
+

Lorem ipsum dolor sit amet
+ Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan
+ gravida.
+ Nam nec sapien in neque accumsan
+ eleifend vel et tellus.
+ Fusce non arcu id turpis aliquam
+ vehicula. +

+
+
+
+
+
+

Moral N°2

+
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

+
+
+

Lorem ipsum dolor sit amet
+ Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan
+ gravida.
+ Nam nec sapien in neque accumsan
+ eleifend vel et tellus.
+ Fusce non arcu id turpis aliquam
+ vehicula. +

+
+
+

Lorem ipsum dolor sit amet
+ Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan
+ gravida.
+ Nam nec sapien in neque accumsan
+ eleifend vel et tellus.
+ Fusce non arcu id turpis aliquam
+ vehicula. +

+
+
+

Lorem ipsum dolor sit amet
+ Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan
+ gravida.
+ Nam nec sapien in neque accumsan
+ eleifend vel et tellus.
+ Fusce non arcu id turpis aliquam
+ vehicula. +

+
+
+
+ + + + + + + + + + +
+
+
+
+

Moral N°3

+
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

+
+ + + +
+ +

J'accepte de recevoir vos communications

+

Pour toutes informations, consultez en bas de cette page notre politique de confidentialité

+
+ +
+
+
+

Les fabulateurs

+
+
+ chien +

Lorem ipsum
+ Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan
+ gravida.
+ Nam nec sapien in neque accumsan +

+
+
+ panthère +
+

Lorem ipsum
+ Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan
+ gravida.
+ Nam nec sapien in neque accumsan +

+
+
+
+ cheval +
+

Lorem ipsum
+ Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan
+ gravida.
+ Nam nec sapien in neque accumsan +

+
+
+
+
+
+ ours +
+

Lorem ipsum
+ Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan
+ gravida.
+ Nam nec sapien in neque accumsan +

+
+
+
+ insecte +
+

Lorem ipsum
+ Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan
+ gravida.
+ Nam nec sapien in neque accumsan +

+
+
+
+ renard +
+

Lorem ipsum
+ Aenean ultrices tempus urna,
+ in dapibus tortor suscipit ut.
+ Vivamus nec nisi vel leo accumsan
+ gravida.
+ Nam nec sapien in neque accumsan +

+
+
+
+
+
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

+
+ + + + + + + + + +
+
+ + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100755 index 0000000..9ad9988 --- /dev/null +++ b/styles.css @@ -0,0 +1,142 @@ +:root { + --footer-bg: #191a1c; + --title-grey: #424242; + --pavillon-red: #c5141d; +} + +* { + font-family: 'Roboto', sans-serif; + /*margin: 0 !important; + padding: 0 !important;*/ + box-sizing: border-box; + +} + +body { + background-image: url('img/fond-site.jpg'); + background-size: cover; +} + +span { + color: var(--pavillon-red); + font-weight: 600; +} + +.section-label { + background-color: var(--pavillon-red); + color: #FFF; + padding: 5px 10px; + margin: 0 auto; + width: 100px; + transform: translateY(50%); + + p { + margin: 0; + } +} + +#story-label { + width: 225px; + transform: translateY(50%); +} + +header { + + nav { + width: 100%; + background-color: rgba(255, 255, 255, .4); + padding: 5px 0; + font-size: 16px; + font-weight: 300; + + a { + text-decoration: none; + text-transform: uppercase; + background-color: #FFF; + color: #000; + padding: 5px 10px; + } + + :first-child { + margin-right: 15px; + } + } + + img { + width: 200px; + margin: 50px 0; + } + + .story { + background-color: #FFF; + max-width: 650px; + box-shadow: 0 0 25px 25px rgba(0, 0, 0, .1); + padding-bottom: 50px; + margin-bottom: 100px; + + h2 { + font-family: 'Lora', serif; + font-size: 3em; + padding: 25px; + } + } +} + +section { + text-align: center; + + .section-title { + background-image: url('img/fond-titre.jpg'); + background-size: cover; + font-family: 'Lora', serif; + font-weight: 300; + font-size: 1.5em; + text-transform: uppercase; + padding: 30px 0; + width: 100%; + } +} + +.comp-logos { + + padding: 25px; + + img { + width: 50px; + margin: 0 10px; + } +} + +.fabulateur { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + img { + height: 100px; + } +} + +#section-clients { + + img { + width: 75px; + margin: 15px; + } +} + +.content-block { + margin-top: 25px; +} + +footer { + background-color: var(--footer-bg); + color: rgba(255, 255, 255, .2); + font-weight: 200; + + p { + margin: 0; + padding: 10px 0; + } +} \ No newline at end of file