Added gitignore. Multiple pictures for the droit and join pages. Added page-header div. Changed header for all pages. Created many CSSs

This commit is contained in:
Yohan Boujon 2023-07-05 00:09:49 +02:00
parent 0a0b6516c2
commit 3c21af8d14
25 changed files with 224 additions and 27 deletions

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
robots.txt
sitemap.xml

BIN
assets/affaire-fond.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

BIN
assets/affaire.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 370 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.9 MiB

After

Width:  |  Height:  |  Size: 7.9 MiB

BIN
assets/contact.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 436 KiB

BIN
assets/coordonnees-fond.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 MiB

BIN
assets/coordonnees.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 418 KiB

BIN
assets/index.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 357 KiB

BIN
assets/penal-fond.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

BIN
assets/penal.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 322 KiB

BIN
assets/poto.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 MiB

View file

@ -14,8 +14,8 @@
<body> <body>
<Navbar></Navbar> <Navbar></Navbar>
<div class="avocat"> <div class="page-header" style="background-image: url('../assets/saoult_bg_arbre_full.jpg');">
<div class="avocat-text"> <div class="page-header_text">
<h1>Saoul Bonmonsieur</h1> <h1>Saoul Bonmonsieur</h1>
</div> </div>
</div> </div>
@ -60,17 +60,17 @@
routes, des petites voitures par millier. Il a décidé de passer le permis assez jeune (35 ans) routes, des petites voitures par millier. Il a décidé de passer le permis assez jeune (35 ans)
et sest vite acheté une Fiat Multiplat, la voiture de ses rêves. Après avoir fait des drifts et sest vite acheté une Fiat Multiplat, la voiture de ses rêves. Après avoir fait des drifts
ainsi que les courses de la semaine il se dirige vers lécole pour récupérer son enfant. ainsi que les courses de la semaine il se dirige vers lécole pour récupérer son enfant.
Malheureusement M. Cunier navait pas fait attention et à causer la mort de deux enfants : Enzo Malheureusement M. Cunier navait pas fait attention et a causé la mort de deux enfants : Enzo
et Timéo.</p> et Timéo.</p>
<br> <br>
<h3>Mon constat :</h3> <h3>Mon constat :</h3>
<p>Bien que la passion des voitures nexcuse rien jai mis toute mes forces pour comprendre les <p>Bien que la passion des voitures nexcuse rien jai mis toutes mes forces pour comprendre les
motivations de Monsieur Cunier. Bien quinvolontaire la mort de ces enfants ne soit pas sans motivations de Monsieur Cunier. Bien quinvolontaire la mort de ces enfants ne sera pas sans
conséquence. En regardant les caméras de sécurité certaines informations pouvaient nous indiquer conséquence. En regardant les caméras de sécurité certaines informations pouvaient nous indiquer
la réelle mesure de la situation.</p> la réalité de la situation.</p>
<br> <br>
<h3>Peine :</h3> <h3>Peine :</h3>
<p>En observant avec attention les caméras le juge ainsi que moi-même avons pu être témoin dun <p>En observant avec attention les caméras le juge ainsi que moi-même avons pu être témoins dun
délit pour les deux jeunes Enzo et Timéo. Ils ne regardaient pas des deux côtés de la route, délit pour les deux jeunes Enzo et Timéo. Ils ne regardaient pas des deux côtés de la route,
selon larticle L145-6 du permis piéton une amende de plus de 10000 euros est applicable. Les selon larticle L145-6 du permis piéton une amende de plus de 10000 euros est applicable. Les
deux enfants étant morts les deux familles devront donc réunir largent pour dédommager Monsieur deux enfants étant morts les deux familles devront donc réunir largent pour dédommager Monsieur

View file

@ -11,7 +11,8 @@
<p> <p>
En collaboration avec Lemiament. En collaboration avec Lemiament.
<br><br> <br><br>
Nom du site : <a href="http://saoulbonmonsieur.etheryo.fr">saoulbonmonsieur.etheryo.fr</a><br> Nom du site : <a href="http://saoulbonmonsieur.etheryo.fr" target="_blank"
rel="noopener noreferrer">saoulbonmonsieur.etheryo.fr</a><br>
Propriétaire du site : M. Saoul Bonmonsieur<br> Propriétaire du site : M. Saoul Bonmonsieur<br>
Email : <a href="mailto:yo.boujon@gmail.com">saoulbonmonsieur@skyblog.fr</a><br> Email : <a href="mailto:yo.boujon@gmail.com">saoulbonmonsieur@skyblog.fr</a><br>
<br><br> <br><br>
@ -45,9 +46,11 @@
ce dernier. ce dernier.
<br><br> <br><br>
<br><br> <br><br>
Le présent site est la propriété de LeMiament, réalisé par Yohan Boujon - <a href="mailto:yo.boujon@gmail.com">yo.boujon@gmail.com</a> Le présent site est la propriété de LeMiament, réalisé par Yohan Boujon - <a
href="mailto:yo.boujon@gmail.com">yo.boujon@gmail.com</a>
<br> <br>
Le code source est disponible sur <a href="https://github.com/yoboujon/saoulbonmonsieur/">Github</a> Le code source est disponible sur <a href="https://github.com/yoboujon/saoulbonmonsieur/"
target="_blank" rel="noopener noreferrer">Github</a>
<br><br> <br><br>
Ce site web est une parodie basée sur avocat-fonvieille</a> Ce site web est une parodie basée sur avocat-fonvieille</a>
<br> <br>
@ -60,7 +63,10 @@
le cas d'un site d'un particulier. Toutes les mentions suivantes sont également à visée parodique et le cas d'un site d'un particulier. Toutes les mentions suivantes sont également à visée parodique et
ne reflète en aucun cas la réalité. Aucune donnée n'est récupérée sur ce site. ne reflète en aucun cas la réalité. Aucune donnée n'est récupérée sur ce site.
<br> <br>
Les images de la page <a href="http://saoulbonmonsieur.etheryo.fr/avocat/">Avocat</a> ont été générés à l'aide d'une intelligence artificielle à l'aide du site <a href="https://thispersondoesnotexist.com/">thispersondoesnotexist</a> Les images de la page <a href="http://saoulbonmonsieur.etheryo.fr/avocat/">Avocat</a> ont été
générés à l'aide d'une intelligence artificielle à l'aide du site <a
href="https://thispersondoesnotexist.com/" target="_blank"
rel="noopener noreferrer">thispersondoesnotexist</a>
</p> </p>
</div> </div>
</div> </div>
@ -71,8 +77,10 @@
</div> </div>
<div class="footer-container_grid"> <div class="footer-container_grid">
<h1>Informations</h1> <h1>Informations</h1>
<p>Color Palette based on <a href="https://colorhunt.co/palette/4b4a5aa55540e79a58e1d5d2">this one</a> and <p>Color Palette based on <a href="https://colorhunt.co/palette/4b4a5aa55540e79a58e1d5d2" target="_blank"
<a href="https://colorhunt.co/palette/2d24245c3d2eb85c38e0c097">this one</a> rel="noopener noreferrer">this one</a> and
<a href="https://colorhunt.co/palette/2d24245c3d2eb85c38e0c097" target="_blank"
rel="noopener noreferrer">this one</a>
</p> </p>
</div> </div>
<div class="footer-container_grid"> <div class="footer-container_grid">

View file

@ -140,6 +140,30 @@ p {
float: right; float: right;
margin: 0 2rem; margin: 0 2rem;
} }
.page-header {
background-position-y: 50%;
background-size: cover;
overflow: hidden;
width: 100%;
height: 50rem;
display: flex;
position: relative;
}
.page-header_text h1 {
position: absolute;
top: 22rem;
padding: 0 5rem;
font-size: 4rem;
}
.page-header_text p {
position: absolute;
top: 28rem;
padding: 0 5rem;
font-size: 4rem;
}
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
@ -169,6 +193,40 @@ p {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
} }
.page-header {
background-position-y: 50%;
background-size: cover;
overflow: hidden;
width: 100%;
height: 30rem;
display: flex;
position: relative;
}
.page-header_text h1 {
position: absolute;
top: 12.5rem;
padding: 0 2rem;
font-size: 2.5rem;
}
.page-header_text p {
position: absolute;
top: 22rem;
padding: 0 2rem;
font-size: 2.5rem;
}
}
.page-header_text {
flex: 2;
height: 100%;
}
.page-header_img {
flex: 1;
height: 100%;
} }
.block em { .block em {

16
css/droit-affaire.css Normal file
View file

@ -0,0 +1,16 @@
@media screen and (min-width: 1000px) {
.page-header_img img {
width: auto;
height: 100%;
float: right;
}
}
@media screen and (max-width: 1000px) {
.page-header_img img {
width: auto;
height: 70%;
margin-top: 9rem;
float: right;
}
}

16
css/droit-penal.css Normal file
View file

@ -0,0 +1,16 @@
@media screen and (min-width: 1000px) {
.page-header_img img {
width: auto;
height: 100%;
float: right;
}
}
@media screen and (max-width: 1000px) {
.page-header_img img {
width: auto;
height: 60%;
margin-top: 12rem;
float: right;
}
}

View file

@ -114,9 +114,10 @@
.legal-text { .legal-text {
overflow-y: scroll; overflow-y: scroll;
margin: 2rem; padding: 2rem 2rem;
height: inherit; height: inherit;
font-size: small; font-size: small;
margin: 0 1rem;
} }
.legal-close-container .legal-close-container

View file

@ -16,14 +16,18 @@
} }
.presentation-text { .presentation-text {
width: 100%;
margin: 1rem;
padding: 0 0 0 2rem;
z-index: 1; z-index: 1;
font-size: larger; font-size: larger;
color: var(--color-dark); color: var(--color-dark);
position: relative; }
top: 45%;
.presentation-text h1 {
top: 21rem;
}
.presentation-text p {
top: 27rem;
font-size: larger;
} }
.photosaoul { .photosaoul {
@ -85,13 +89,9 @@
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
.presentation-text { .presentation-text {
width: 100%;
padding: 0 0 0 2rem;
z-index: 1; z-index: 1;
font-size: small; font-size: small;
color: var(--color-dark); color: var(--color-dark);
position: relative;
top: 45%;
} }
.photosaoul { .photosaoul {
@ -116,6 +116,18 @@
position: relative; position: relative;
} }
.presentation-text h1 {
top: 15rem;
font-size: 2rem;
padding: 0 2rem;
}
.presentation-text p {
top: 18rem;
font-size: larger;
padding: 0 2rem;
}
.description { .description {
background-color: var(--color-main-light); background-color: var(--color-main-light);
width: 100%; width: 100%;
@ -172,7 +184,6 @@
} }
.presentation-img { .presentation-img {
width: 100%;
height: 100%; height: 100%;
z-index: 10; z-index: 10;
} }

16
css/join-contact.css Normal file
View file

@ -0,0 +1,16 @@
@media screen and (min-width: 1000px) {
.page-header_img img {
width: auto;
height: 100%;
float: right;
}
}
@media screen and (max-width: 1000px) {
.page-header_img img {
width: auto;
height: 70%;
margin-top: 9rem;
float: right;
}
}

33
css/join-coordonees.css Normal file
View file

@ -0,0 +1,33 @@
@media screen and (min-width: 1000px) {
.page-header_img img {
width: auto;
height: 100%;
float: right;
}
.page-header {
background-position-y: 70%;
}
.page-header_text {
color: var(--color-white);
}
}
@media screen and (max-width: 1000px) {
.page-header_img img {
width: auto;
height: 50%;
margin-top: 15rem;
float: right;
}
.page-header {
background-position-y: 50%;
}
.page-header_text {
color: var(--color-dark);
}
}

View file

@ -8,10 +8,19 @@
<script src="../lib/anime.min.js"></script> <script src="../lib/anime.min.js"></script>
<link href="../css/base.css" rel="stylesheet"> <link href="../css/base.css" rel="stylesheet">
<link href="../css/droit-affaire.css" rel="stylesheet">
</head> </head>
<body> <body>
<Navbar></Navbar> <Navbar></Navbar>
<div class="page-header" style="background-image: url('../assets/affaire-fond.jpg');">
<div class="page-header_text">
<h1>Droits des affaires</h1>
</div>
<div class="page-header_img">
<img src="../assets/affaire.png"/>
</div>
</div>
<Footer></Footer> <Footer></Footer>
</body> </body>

View file

@ -8,10 +8,19 @@
<script src="../lib/anime.min.js"></script> <script src="../lib/anime.min.js"></script>
<link href="../css/base.css" rel="stylesheet"> <link href="../css/base.css" rel="stylesheet">
<link href="../css/droit-penal.css" rel="stylesheet">
</head> </head>
<body> <body>
<Navbar></Navbar> <Navbar></Navbar>
<div class="page-header" style="background-image: url('../assets/penal-fond.jpg');">
<div class="page-header_text">
<h1>Droit pénal</h1>
</div>
<div class="page-header_img">
<img src="../assets/penal.png"/>
</div>
</div>
<Footer></Footer> <Footer></Footer>
</body> </body>

View file

@ -14,13 +14,13 @@
<body> <body>
<Navbar></Navbar> <Navbar></Navbar>
<div class="presentation"> <div class="page-header" style="background-image: url('assets/cabinet-avocats-900x601.jpeg');">
<div class="presentation-text anim-text"> <div class="page-header_text presentation-text anim-text">
<h1>Saoul Bonmonsieur</h1> <h1>Saoul Bonmonsieur</h1>
<p>Avocat sur loi de Toulouse</p> <p>Avocat sur loi de Toulouse</p>
</div> </div>
<div class="presentation-img"> <div class="presentation-img">
<img class="photosaoul" src="assets/saoul.png"></img> <img class="photosaoul" src="assets/index.png"></img>
</div> </div>
<div class="whiteband"></div> <div class="whiteband"></div>
</div> </div>

View file

@ -8,10 +8,19 @@
<script src="../lib/anime.min.js"></script> <script src="../lib/anime.min.js"></script>
<link href="../css/base.css" rel="stylesheet"> <link href="../css/base.css" rel="stylesheet">
<link href="../css/join-contact.css" rel="stylesheet">
</head> </head>
<body> <body>
<Navbar></Navbar> <Navbar></Navbar>
<div class="page-header" style="background-image: url('../assets/contact-fond.jpg');">
<div class="page-header_text">
<h1>Me contacter</h1>
</div>
<div class="page-header_img">
<img src="../assets/contact.png"/>
</div>
</div>
<Footer></Footer> <Footer></Footer>
</body> </body>

View file

@ -8,10 +8,19 @@
<script src="../lib/anime.min.js"></script> <script src="../lib/anime.min.js"></script>
<link href="../css/base.css" rel="stylesheet"> <link href="../css/base.css" rel="stylesheet">
<link href="../css/join-coordonees.css" rel="stylesheet">
</head> </head>
<body> <body>
<Navbar></Navbar> <Navbar></Navbar>
<div class="page-header" style="background-image: url('../assets/coordonnees-fond.jpg');">
<div class="page-header_text">
<h1>Mes coordonnées</h1>
</div>
<div class="page-header_img">
<img src="../assets/coordonnees.png"/>
</div>
</div>
<Footer></Footer> <Footer></Footer>
</body> </body>