Initial commit with existing project files
3
README.md
Normal file → Executable file
@@ -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
|
||||
BIN
annexes/exercice.jpg
Executable file
|
After Width: | Height: | Size: 1.9 MiB |
1
annexes/notes.txt
Executable file
@@ -0,0 +1 @@
|
||||
Typos : Roboto, Lora
|
||||
BIN
img/cigogne.png
Executable file
|
After Width: | Height: | Size: 137 KiB |
BIN
img/clients/logo_bouygues.png
Executable file
|
After Width: | Height: | Size: 8.9 KiB |
BIN
img/clients/logo_fftb.png
Executable file
|
After Width: | Height: | Size: 8.0 KiB |
BIN
img/clients/logo_haasavocats.png
Executable file
|
After Width: | Height: | Size: 15 KiB |
BIN
img/clients/logo_herault.png
Executable file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
img/clients/logo_myleasing.png
Executable file
|
After Width: | Height: | Size: 9.4 KiB |
BIN
img/clients/logo_pramex.png
Executable file
|
After Width: | Height: | Size: 6.3 KiB |
BIN
img/clients/logo_texto.png
Executable file
|
After Width: | Height: | Size: 7.6 KiB |
BIN
img/clients/logo_uniqpeople.png
Executable file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
img/clients/logo_xylem.png
Executable file
|
After Width: | Height: | Size: 6.9 KiB |
BIN
img/fond-droite.png
Executable file
|
After Width: | Height: | Size: 451 KiB |
BIN
img/fond-section.jpg
Executable file
|
After Width: | Height: | Size: 163 KiB |
BIN
img/fond-site.jpg
Executable file
|
After Width: | Height: | Size: 560 KiB |
BIN
img/fond-titre.jpg
Executable file
|
After Width: | Height: | Size: 40 KiB |
BIN
img/label-arrow.png
Executable file
|
After Width: | Height: | Size: 371 B |
BIN
img/logo.png
Executable file
|
After Width: | Height: | Size: 11 KiB |
BIN
img/logo/comp_eshop.png
Executable file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
img/logo/comp_facebook.png
Executable file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
img/logo/comp_film.png
Executable file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
img/logo/comp_html5.png
Executable file
|
After Width: | Height: | Size: 4.8 KiB |
BIN
img/logo/comp_instagram.png
Executable file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
img/logo/comp_mobile.png
Executable file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
img/logo/comp_phpmysql.png
Executable file
|
After Width: | Height: | Size: 8.5 KiB |
BIN
img/logo/comp_seo.png
Executable file
|
After Width: | Height: | Size: 12 KiB |
BIN
img/logo/comp_wordpress.png
Executable file
|
After Width: | Height: | Size: 6.9 KiB |
BIN
img/logo/comp_youtube.png
Executable file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
img/portraits/RomaneFaverjon.png
Executable file
|
After Width: | Height: | Size: 45 KiB |
BIN
img/portraits/totem_christophe.png
Executable file
|
After Width: | Height: | Size: 45 KiB |
BIN
img/portraits/totem_francois.png
Executable file
|
After Width: | Height: | Size: 38 KiB |
BIN
img/portraits/totem_frank.png
Executable file
|
After Width: | Height: | Size: 51 KiB |
BIN
img/portraits/totem_jean-marc.png
Executable file
|
After Width: | Height: | Size: 50 KiB |
BIN
img/portraits/totem_sylvestre.png
Executable file
|
After Width: | Height: | Size: 36 KiB |
279
index.html
Executable file
@@ -0,0 +1,279 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>Le Lapin & Le Panda</title>
|
||||
</head>
|
||||
<header class="d-flex flex-column justify-content-center align-items-center">
|
||||
<nav class="d-flex justify-content-center">
|
||||
<a href="#">Accueil</a>
|
||||
<a href="#">Nous Contacter</a>
|
||||
</nav>
|
||||
<img src="img/logo.png" alt="logo">
|
||||
<p id="story-label" class="section-label">Si le contenu m'était conté...</p>
|
||||
<div class="story container d-flex flex-column justify-content-center align-items-center text-center">
|
||||
<h2>Le lapin & le panda</h2>
|
||||
<p>Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan gravida. <br>
|
||||
Nam nec sapien in neque accumsan <br>
|
||||
eleifend vel et tellus. <br>
|
||||
Fusce non arcu id turpis aliquam vehicula.
|
||||
</p>
|
||||
<p>Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan gravida. <br>
|
||||
Nam nec sapien in neque accumsan <br>
|
||||
eleifend vel et tellus. <br>
|
||||
Fusce non arcu id turpis aliquam vehicula.
|
||||
</p>
|
||||
<p>Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan gravida. <br>
|
||||
Nam nec sapien in neque accumsan <br>
|
||||
eleifend vel et tellus. <br>
|
||||
Fusce non arcu id turpis aliquam vehicula.
|
||||
</p>
|
||||
<p>Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan gravida. <br>
|
||||
Nam nec sapien in neque accumsan <br>
|
||||
eleifend vel et tellus. <br>
|
||||
Fusce non arcu id turpis aliquam vehicula.
|
||||
</p>
|
||||
<p>Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan gravida. <br>
|
||||
Nam nec sapien in neque accumsan <br>
|
||||
eleifend vel et tellus. <br>
|
||||
Fusce non arcu id turpis aliquam vehicula.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<section id="#moral-1" class=container">
|
||||
<div class="section-label">
|
||||
<p>Moral N°1</p>
|
||||
</div>
|
||||
<h2 class="section-title">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
|
||||
<div class="row d d-flex justify-content-center">
|
||||
<div class="col-md-4">
|
||||
<p><span>Lorem ipsum dolor sit amet</span><br>
|
||||
Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan <br>
|
||||
gravida. <br>
|
||||
Nam nec sapien in neque accumsan <br>
|
||||
eleifend vel et tellus. <br>
|
||||
Fusce non arcu id turpis aliquam <br>
|
||||
vehicula.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p><span>Lorem ipsum dolor sit amet</span><br>
|
||||
Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan <br>
|
||||
gravida. <br>
|
||||
Nam nec sapien in neque accumsan <br>
|
||||
eleifend vel et tellus. <br>
|
||||
Fusce non arcu id turpis aliquam <br>
|
||||
vehicula.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="#moral-2" class="container">
|
||||
<div class="section-label">
|
||||
<p>Moral N°2</p>
|
||||
</div>
|
||||
<h2 class="section-title">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
|
||||
<div class="row d d-flex justify-content-center">
|
||||
<div class="col-md-4">
|
||||
<p class=""><span>Lorem ipsum dolor sit amet</span><br>
|
||||
Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan <br>
|
||||
gravida. <br>
|
||||
Nam nec sapien in neque accumsan <br>
|
||||
eleifend vel et tellus. <br>
|
||||
Fusce non arcu id turpis aliquam <br>
|
||||
vehicula.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p class=""><span>Lorem ipsum dolor sit amet</span><br>
|
||||
Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan <br>
|
||||
gravida. <br>
|
||||
Nam nec sapien in neque accumsan <br>
|
||||
eleifend vel et tellus. <br>
|
||||
Fusce non arcu id turpis aliquam <br>
|
||||
vehicula.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p class=""><span>Lorem ipsum dolor sit amet</span><br>
|
||||
Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan <br>
|
||||
gravida. <br>
|
||||
Nam nec sapien in neque accumsan <br>
|
||||
eleifend vel et tellus. <br>
|
||||
Fusce non arcu id turpis aliquam <br>
|
||||
vehicula.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class ="row d d-flex justify-content-center comp-logos">
|
||||
<img class=col-md-4" src="/img/logo/comp_film.png" alt="">
|
||||
<img class=col-md-4" src="/img/logo/comp_youtube.png" alt="">
|
||||
<img class=col-md-4" src="/img/logo/comp_wordpress.png" alt="">
|
||||
<img class=col-md-4" src="/img/logo/comp_seo.png" alt="">
|
||||
<img class=col-md-4" src="/img/logo/comp_phpmysql.png" alt="">
|
||||
<img class=col-md-4" src="/img/logo/comp_mobile.png" alt="">
|
||||
<img class=col-md-4" src="/img/logo/comp_instagram.png" alt="">
|
||||
<img class=col-md-4" src="/img/logo/comp_html5.png" alt="">
|
||||
<img class=col-md-4" src="/img/logo/comp_facebook.png" alt="">
|
||||
<img class="col-md-4" src="/img/logo/comp_eshop.png" alt="">
|
||||
</div>
|
||||
</section>
|
||||
<section id="#section-contact" class="d-flex flex-column justify-content-center align-items-center">
|
||||
<div class="section-label">
|
||||
<p>Moral N°3</p>
|
||||
</div>
|
||||
<h2 class="section-title">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
|
||||
<form action="#" class="d-flex flex-column justify-content-center align-items-center">
|
||||
<input type="email" placeholder="Votre email">
|
||||
<input type="text" placeholder="Votre nom">
|
||||
<textarea placeholder="Votre message"></textarea>
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<input type="checkbox">
|
||||
<p>J'accepte de recevoir vos communications</p>
|
||||
<p>Pour toutes informations, consultez en bas de cette page notre politique de confidentialité</p>
|
||||
</div>
|
||||
<button type="submit">Nous contacter</button>
|
||||
</form>
|
||||
</section>
|
||||
<section id="#section-fabulateurs" class="container">
|
||||
<h2 class="section-title">Les fabulateurs</h2>
|
||||
<div class="row d-flex justify-content-center align-items-center">
|
||||
<div class="col-md-4 fabulateur">
|
||||
<img src="img/portraits/totem_frank.png" alt="chien">
|
||||
<p><span>Lorem ipsum</span><br>
|
||||
Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan <br>
|
||||
gravida. <br>
|
||||
Nam nec sapien in neque accumsan
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 fabulateur">
|
||||
<img src="img/portraits/RomaneFaverjon.png" alt="panthère">
|
||||
<div>
|
||||
<p><span>Lorem ipsum</span><br>
|
||||
Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan <br>
|
||||
gravida. <br>
|
||||
Nam nec sapien in neque accumsan
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 fabulateur">
|
||||
<img src="img/portraits/totem_christophe.png" alt="cheval">
|
||||
<div>
|
||||
<p><span>Lorem ipsum</span><br>
|
||||
Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan <br>
|
||||
gravida. <br>
|
||||
Nam nec sapien in neque accumsan
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center align-items-center">
|
||||
<div class="col-md-4 fabulateur">
|
||||
<img src="img/portraits/totem_francois.png" alt="ours">
|
||||
<div>
|
||||
<p><span>Lorem ipsum</span><br>
|
||||
Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan <br>
|
||||
gravida. <br>
|
||||
Nam nec sapien in neque accumsan
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 fabulateur">
|
||||
<img src="img/portraits/totem_jean-marc.png" alt="insecte">
|
||||
<div>
|
||||
<p><span>Lorem ipsum</span><br>
|
||||
Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan <br>
|
||||
gravida. <br>
|
||||
Nam nec sapien in neque accumsan
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 fabulateur">
|
||||
<img src="img/portraits/totem_sylvestre.png" alt="renard">
|
||||
<div>
|
||||
<p><span>Lorem ipsum</span><br>
|
||||
Aenean ultrices tempus urna, <br>
|
||||
in dapibus tortor suscipit ut. <br>
|
||||
Vivamus nec nisi vel leo accumsan <br>
|
||||
gravida. <br>
|
||||
Nam nec sapien in neque accumsan
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="section-clients" class="container">
|
||||
<h2 class="section-title">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
|
||||
<div class="row d-flex justify-content-around align-items-center clients">
|
||||
<img class="col-md-3" src="img/clients/logo_xylem.png" alt="">
|
||||
<img class="col-md-3" src="img/clients/logo_uniqpeople.png" alt="">
|
||||
<img class="col-md-3" src="img/clients/logo_texto.png" alt="">
|
||||
<img class="col-md-3" src="img/clients/logo_pramex.png" alt="">
|
||||
<img class="col-md-3" src="img/clients/logo_myleasing.png" alt="">
|
||||
<img class="col-md-3" src="img/clients/logo_herault.png" alt="">
|
||||
<img class="col-md-3" src="img/clients/logo_haasavocats.png" alt="">
|
||||
<img class="col-md-3" src="img/clients/logo_fftb.png" alt="">
|
||||
<img class="col-md-3" src="img/clients/logo_bouygues.png" alt="">
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
<footer class="d-flex justify-content-center align-items-center">
|
||||
<p>Copyright 2020</p>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
|
||||
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
|
||||
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
</html>
|
||||
142
styles.css
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||