Bonjours, je demande un peu d'aide si possible, pour ceux qui ne le savent pas, je suis debutant en html, css, et je pratique pour le plaisir, merci.
Apres si vous avec des solutions pour ameliorer le code html, ou css, je suis preneur, et pour le rendre reponsive completement egalement, car je ne suis pas sure que se soit bien.
merci et bonne journée.
Modifié par Gipsy88 (04 Aug 2025 - 13:16)
Apres si vous avec des solutions pour ameliorer le code html, ou css, je suis preneur, et pour le rendre reponsive completement egalement, car je ne suis pas sure que se soit bien.
merci et bonne journée.
<!DOCTYPE html>
<html lang="fr">
<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">
<title>- Pégase Hôtel -</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body class="opak" id="top">
<div class="logo">
<h1 class="logotitre">Pégase Hôtel</h1>
<div class="entete">
- Pension, <br>
- Visites à domicile, <br>
- Promenades, <br>
- Educatrice comportementaliste canin. <br>
</div>
<img class="image" src="frame/logo.jpg" alt="Mes chiens" title="Emy et Pegase" >
</div>
<div class="description">
<div class="feuille">
<p class="texte">
Je me présente, je m’appelle Angélique Schwartz, je suis depuis toujours passionnée par les chiens. <br>
<br>
Je suis <strong> titulaire d'un certificat de formation d'éducateur comportementaliste canin </strong>,
de <strong> l'ACACED <i> (attestation de connaissances pour les animaux de compagnie d'espèces domestiques) </i> </strong>,
ainsi que d'une <strong> attestation d'aptitude pour les chiens de catégorie 1 et 2 </strong>. <br>
<br>
En janvier 2023, j’ai décidé de travailler à mon propre compte pour gérer une <strong> <i> pension canine </i> "Pégase Hôtel" </strong>
pour vivre des moments de partages avec les toutous. <br>
<br>
- Je vous propose une garde à domicile pour votre chien, en pension familiale. <br>
Mon terrain comporte 19 ares où votre toutou pourra jouer et se défouler en liberté, et passer de la maison au jardin ou dans la cour à sa convenance. <br>
De plus <strong> les pensionnaires sont promenés tous les jours </strong>. <br>
<br>
- Si vous manquez de temps pour balader votre fidèle compagnon, je suis également <strong> à votre disposition pour des promenades </strong> en laisse ou lâché selon vos préférences. <br>
<br>
- Lors de vos absences, je me charge de <strong> venir rendre des visites à domicile </strong>, à votre ami à quatre pattes, pour ses besoins, un temps de jeu et de caresses. <br>
<br>
- <strong> Je donne également des cours d'éducation comportementale privés et personnalisés adaptés au mode de vie et aux attentes des propriétaires, dispensés à domicile et en environnement extérieur </strong>. <br>
Les services d'éducation incluent l'obéissance de base, la marche en laisse, le rappel en extérieur, la sociabilisation, la gestion des aboiements, l'agressivité, la malpropreté et l'accueil. <br>
<br>
<i><u> Les tarifs sont disponibles, sur demande, voir les informations en bas de page pour me contacter </u></i>. <br>
</p>
</div>
</div>
<div class="sortie">
<h1 class="titre1"> Accueil et Balades de vos compagnons. </h1>
<br> <br>
<div class="photo">
<div class="slider1">
<div class="slider">
<img src="picture/1.jpg" alt="">
<img src="picture/2.jpg" alt="">
<img src="picture/3.jpg" alt="">
<img src="picture/4.jpg" alt="">
<img src="picture/5.jpg" alt="">
<img src="picture/6.jpg" alt="">
<img src="picture/7.jpg" alt="">
<img src="picture/1.jpg" alt="">
</div>
</div>
<div class="video">
<video autoplay loop muted playsinline>
<source src="frame/Video-Presentation.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="coordonnee">
<div class="Localisation">
<h2 class="soustitre"> Localisation : </h2>
<br>
<p>
<span style="unicode-bidi:bidi-override; direction: rtl;">
nihr ud eur A54 <br>
miehnesurD 01476 <br>
ecnarF</span>
</p>
<h2 class="soustitre"> Informations juridiques : </h2>
<br>
<p>
<span style="unicode-bidi:bidi-override; direction: rtl;">
987237229 : NERIS <br>
3202/10/20 : noitaérc ed etaD </span>
</p>
<h2 class="soustitre"> Appelez moi au : </h2>
<br>
<p>
<span style="unicode-bidi:bidi-override; direction: rtl;">
<b> 53 01 40 03 60 </b></span>
</p>
<h2 class="soustitre"> Envoyez-moi un email à : </h2>
<br>
<p>
<span style="unicode-bidi:bidi-override; direction: rtl;">
<b> moc.liamg@letohesagep </b></span>
</p>
<br>
<a class="fb" href="https://www.facebook.com/100087107103273"> Mon facebook </a> <br>
<br>
<a href=""> </a> <br>
<br>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5260.510780006607!2d7.954699975083007!3d48.75791900777365!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4796c2ad383fa055%3A0x5e0474642aa673ae!2s45a%20Rue%20du%20Rhin%2C%2067410%20Drusenheim!5e0!3m2!1sfr!2sfr!4v1754299646829!5m2!1sfr!2sfr"
width="600" height="450" style="border:0;"
allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
<br> <br> <br>
</div>
<!-- Fin Footer -->
<!-- Debut triangle -->
<div id="scrollUp">
<a href="#top"><img src="frame/to_top.png" alt=""></a>
</div>
<script src="to-top.js"></script>
<!-- >Fin triangle -->
</body>
</html>
/* Mise en page principale */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Reset Margin et Padding */
}
html {
font-size: 16px;
}
body {
width: 100%; /* Largeur body */
height: 100%; /* Hauteur body */
font-family: Arial, Helvetica, Helvetica, sans-serif; /* Choix Fonts */
background-color: #e0eaff;/* remplacement image */
padding: 1px; /* Marge Exterieur Body */
background-image: url("frame/logo.jpg"); /* image de fond */
background-position: 50%;/* position image */
background-size: 100%;/* taille image */
background-repeat: no-repeat;/* statut image */
background-color: black;/* remplacement image */
background-attachment: fixed;/* effet sur image */
}
.titre1 {
color: black; /* Couleur Texte */
text-shadow: red 0.1em 0.1em 0.3em; /* ombre texte */
/* text-align: center; */
font-size: 50px; /* Taille ecriture texte */
margin: 10px 10px 00px 10px ; /* Marge Interieur */
}
.soustitre {
color: black; /* Couleur Texte */
text-shadow: red 0.1em 0.1em 0.3em; /* ombre texte */
/* text-align: center; */
font-size: 30px; /* Taille ecriture text */
}
p {
padding: 0px 10px 10px 10px; /* Marge Exterieur */
}
.image {
padding: 10px 0 0 0;
}
.image:hover {
width:400px;
height:400px;
}
.texte {
font-size: 20px; /* Taille ecriture text */
}
a {
padding: 0px 10px 10px 10px;
text-decoration: none; /* Suprime le soulignement genere par Menu */
color: black; /* Couleur des Liens */
text-shadow: red 0.1em 0.1em 0.3em;
font-weight: bold; /* Liens en Gras */
font-size: 20px; /* Taille ecriture text */
}
a:hover {
background-color: wheat;
text-shadow: red 0.1em 0.1em 0.3em;
margin: 0 0 0 0; /* Marge Exterieur header */
padding: 10px 10px 10px 10px; /* Marge Interieur header */
}
.opak {
opacity: 0.9; /* opacite du texte */
}
/* Debut Mise en page Haute */
div.logo {
width: 100%; /* Largeur body */
height: 100%; /* Hauteur body */
font-family: Arial, Helvetica, Helvetica, sans-serif; /* Choix Fonts */
background-color: #e0eaff;/* remplacement image */
border-top: 10px ridge #0099ff; /* bordure du header */
border-right: 10px ridge #0099ff; /* bordure du header */
border-left: 10px ridge #0099ff; /* bordure du header */
}
.logo {
/*background-color: red;/* */
display: flex;
flex-direction: row; /* axe vertical enfants seront l'un en dessous des autres */
justify-content: space-evenly; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
}
.logotitre {
/*background-color: yellow; /* */
width: 30%; /* Largeur body */
height: 50%; /* Hauteur body */
font-size: 50px; /* Taille ecriture liste */
margin: 20px 0px 0px 20px; /* marge Exterieur logo */
padding: 30px 20px 30px 20px; /* Redimensionne Interieur Logo */
color: wheat; /* couleur texte logo */
text-shadow: red 0.1em 0.1em 0.2em; /* ombre texte menu */
background-color: #0099ff; /* couleur fond logo */
box-shadow: #99ffff 0.2em 0.2em 0.4em; /* ombre texte boite */
border-radius: 50%; /* bordure logo */
text-align: center;
}
.entete {
/*background-color: green; /* */
width: 550px; /* Largeur body */
height: 100%; /* Hauteur body */
font-size: 30px; /* Taille ecriture liste */
margin: 10px 10px 10px 10px; /* marge Exterieur logo */
padding: 10px 10px 10px 10px; /* Redimensionne Interieur Logo */
color: black; /* couleur texte logo */
text-shadow: red 0.1em 0.1em 0.2em; /* ombre texte menu */
}
/* Fin Mise en page Haute */
/* Debut Mise en page */
.description {
width: 100%; /* Largeur body */
height: 100%; /* Hauteur body */
font-family: Arial, Helvetica, Helvetica, sans-serif; /* Choix Fonts */
background-color: #e0eaff;/* remplacement image */
border-right: 10px ridge #0099ff; /* bordure du header */
border-left: 10px ridge #0099ff; /* bordure du header */
padding: 60px 10px 10px 10px;
margin-top: 0px;
}
.feuille {
width: 80%; /* Largeur body */
height: 100%; /* Hauteur body */
font-family: Arial, Helvetica, Helvetica, sans-serif; /* Choix Fonts */
background-image : url("frame/FeuillePC.png");
background-position: center;
margin:auto;
background-color: #e0eaff;/* remplacement image */
padding: 40px 20px 40px 20px;
border-radius: 5%; /* padding: 10px 10px 10px 10px; */
}
/* Fin Mise en page */
.sortie {
width: 100%; /* Largeur body */
height: 000%; /* Hauteur body */
font-family: Arial, Helvetica, Helvetica, sans-serif; /* Choix Fonts */
background-color: #e0eaff;/* remplacement image */
border-right: 10px ridge #0099ff; /* bordure du header */
border-left: 10px ridge #0099ff; /* bordure du header */
padding: 30px 0 30px 0;
text-align: center;
}
.photo {
/*background-color: red;/* */
display: flex;
flex-direction: row; /* axe vertical enfants seront l'un en dessous des autres */ justify-content: space-evenly; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
}
/* Debut Slider */
.slider1 {
background-color: green;
width: 30%; /* taille Slider */
margin: 25px 0 30px 100px;
overflow: hidden;
border: 10px solid white;
box-shadow: black 4px 4px 12px; /* ombre boite */
display: flex;
justify-content: center; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
}
.slider1 .slider {
display: flex;
animation: slider1 16s infinite ease-in-out;
}
.slider1 img {
background-color: yellow;
flex-shrink: 0;
padding: 0px 0;
width: 100%;
height: 100%;
}
/*
Pour un diaporama de 8 images.
Calcule a effectuer:
2sec par image soit 2x8=16
donc remplaer par votre valer =>
=> animation: slider1 16s infinite ease-in-out;
------------------------------------------------
5% par transition
soit 5x8=40% de transition
reste divise par
100-40=60%
60%/nbr photo soit 8 = 7.5%
Avec ces deux valeur on adapte l'echelle du temps
et le nombre de photos
*/
@keyframes slider1 {
0%,
9.28%{ /* duree visionnage photo */
transform: translateX(0);
}
14.28%, /* plus transion */
23.56%{ /* duree visionnage photo */
transform: translateX(-100%);
}
28.56%, /* plus transion */
37.84%{ /* duree visionnage photo */
transform: translateX(-200%);
}
42.84%, /* plus transion */
52.12%{ /* duree visionnage photo */
transform: translateX(-300%);
}
57.12%, /* plus transion */
66.4%{ /* duree visionnage photo */
transform: translateX(-400%);
}
71.4%, /* plus transion */
80.68%{ /* duree visionnage photo */
transform: translateX(-500%);
}
85.68%, /* plus transion */
94.96%{ /* duree visionnage photo */
transform: translateX(-600%);
}
99.5%, /* plus transion
ICI JE TRICHE UN PEU POUR MASQUER L4EFFET DE RETOUR*/
100%{ /* duree visionnage photo */
transform: translateX(-700%);
}
}
/* Fin Slider */
.video {
/* background-color: green; */
overflow: hidden;
border: 10px solid white;
box-shadow: black 4px 4px 12px; /* ombre boite */
/*aspect-ratio: 16/9; /* */
width: 35%;
height: 60%;
max-height: 530px; /* */
margin-right: 100px;/* */
}
/* ----------------Coordonnees---------------------- */
.coordonnee {
width: 100%; /* Largeur body */
height: 100%; /* Hauteur body */
background-color: #e0eaff;/* remplacement image */
/*background-color: transparent;*/
display: flex;
flex-direction: row; /* axe vertical enfants seront l'un en dessous des autres */
justify-content: space-between; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
border-bottom: 10px ridge #0099ff; /* bordure du header */
border-right: 10px ridge #0099ff; /* bordure du header */
border-left: 10px ridge #0099ff; /* bordure du header */
padding: 0px 0 0px 0;
}
.fb:hover {
background-color: blueviolet; /* */
border: blue ridge 2px;
color: chartreuse;
text-shadow: #e0eaff 0.2em 0.2em 0.5em;
margin: 0 0 0 0; /* Marge Exterieur header */
padding: 10px 10px 10px 10px; /* Marge Interieur header */
}
.Localisation {
width: 40%; /* taille Slider */
background-color: transparent;
padding: 0 0 0 40px;
}
.map {
width: 55%; /* taille Slider */
height: auto;
/* width="600" height="450" */
background-color: transparent;
padding: 30px 40px 40px 0;
margin-bottom: 50px;
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
/* -------------------------------------- */
/* -----------------Retour haut de page----------------------------------- */
#scrollUp {
position: fixed;
bottom : 10px;
opacity: 0.9;
filter: grayscale(100%);
transform: scale(0.2);
left: -90px;
bottom: -80px;
z-index: 10;
}
#scrollUp:hover {
position: fixed;
opacity: 1.1;
filter: grayscale(100%);
transform: scale(0.4);
left: -70px;
bottom: -60px;
z-index: 10;
}
/* -------------------------------------- */
/* ----------------------Adaptation Ecran------------------------------ */
/* ----------------------Adaptation Ecran------------------------------ */
@media all and (max-width: 1000px) { /* (max-width: 991px) */
.coordonnee {
width: 100%; /* Largeur body */
height: 100%; /* Hauteur body */
background-color: #e0eaff;/* remplacement image */
/*background-color: transparent;*/
display: flex;
flex-direction: column; /* axe vertical enfants seront l'un en dessous des autres */
justify-content: center; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
border-bottom: 10px ridge #0099ff; /* bordure du header */
border-right: 10px ridge #0099ff; /* bordure du header */
border-left: 10px ridge #0099ff; /* bordure du header */
padding: 0px 0 0px 0;
}
.Localisation {
width: 60%; /* taille Slider */
background-color: transparent;
padding: 40px 0 0 40px;
}
}
@media all and (max-width: 800px) { /* (max-width: 991px) */
.sortie {
width: 100%; /* Largeur body */
height: 100%; /* Hauteur body */
font-family: Arial, Helvetica, Helvetica, sans-serif; /* Choix Fonts */
background-color: #e0eaff;/* remplacement image */
border-right: 10px ridge #0099ff; /* bordure du header */
border-left: 10px ridge #0099ff; /* bordure du header */
padding: 10px 0 10px 0;
display: flex;
flex-direction: column; /* axe vertical enfants seront l'un en dessous des autres */
justify-content: center; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
}
.photo {
/*background-color: red;/* */
display: flex;
flex-direction: column; /* axe vertical enfants seront l'un en dessous des autres */
justify-content: center; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
}
.titre1 {
color: black; /* Couleur Texte */
text-shadow: red 0.1em 0.1em 0.3em; /* ombre texte */
font-size: 30px; /* Taille ecriture texte */
margin: 10px 10px 30px 10px ; /* Marge Interieur */
}
.slider1 {
background-color: green;
width: 30%; /* taille Slider */
margin: auto;
overflow: hidden;
border: 10px solid white;
box-shadow: black 4px 4px 12px; /* ombre boite */
display: flex;
justify-content: center; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
}
.video {
/* background-color: green; */
overflow: hidden;
border: 10px solid white;
box-shadow: black 4px 4px 12px; /* ombre boite */
margin-top: 30px;
margin-left: 100px;
/*aspect-ratio: 16/9; /* */
width: 35%;
height: 60%;
max-height: 530px; /* */
margin-right: 100px;/* */
}
.coordonnee {
width: 100%; /* Largeur body */
height: 100%; /* Hauteur body */
background-color: #e0eaff;/* remplacement image */
/*background-color: transparent;*/
display: flex;
flex-direction: column; /* axe vertical enfants seront l'un en dessous des autres */
justify-content: center; /* Centre mon paragraphe3*/
align-items: center; /* Centre mon paragraphe3*/
border-bottom: 10px ridge #0099ff; /* bordure du header */
border-right: 10px ridge #0099ff; /* bordure du header */
border-left: 10px ridge #0099ff; /* bordure du header */
padding: 0px 0 0px 0;
}
.Localisation {
width: 80%; /* taille Slider */
background-color: transparent;
padding: 40px 0 0 40px;
}
.image {
display: none;
}
.logotitre {
/*background-color: yellow; /* */
width: 30%; /* Largeur body */
height: 50%; /* Hauteur body */
font-size: 30px; /* Taille ecriture liste */
margin: 20px 0px 0px 20px; /* marge Exterieur logo */
padding: 25px 15px 25px 15px; /* Redimensionne Interieur Logo */
color: wheat; /* couleur texte logo */
text-shadow: red 0.1em 0.1em 0.2em; /* ombre texte menu */
background-color: #0099ff; /* couleur fond logo */
box-shadow: #99ffff 0.2em 0.2em 0.4em; /* ombre texte boite */
border-radius: 50%; /* bordure logo */
text-align: center;
}
}
/* -------------------------------------- */
/* @media all and (max-width: 868px) { /* (max-width: 991px) */
/* } */
/* -------------------------------------- */
@media all and (max-width: 500px) { /* (max-width: 991px) */
.Localisation {
width: 100%; /* taille Slider */
background-color: transparent;
padding: 20px 0 0 20px;
}
}
/* -------------------------------------- */
/* @media all and (max-width: 868px) { /* (max-width: 991px) */
/* } */
/* -------------------------------------- */
Modifié par Gipsy88 (04 Aug 2025 - 13:16)
