Debutant et php

Version imprimable

Debutant et php

Bonjour,
Je suis actuellement en formation est mon formateur ma demandé de réaliser un site avec un carrousel en html css javascript et php) jusque la tout vas bien.
Cependant il ma demandé pour la suite de réaliser des inputs de types number et de pouvoir afficher l'image de départ du carrousel puis combie, d'image on veux par exemple démarré sur l'image 3 et finir le carrousel sur la 5eme image le tout en php.

Le souci c'est que je ne sais pas par ou demarré mon php.

Pour le moment j'ai realiser cela:

mon

Code:

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
<!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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="exo_diapo_volcans/test_diapo/css/style.css">
    <script src="volcan.js" defer></script>
    <title>Diaporama ASIE chargement ajax</title>
</head>
 
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#"><img src="exo_diapo_volcans/test_diapo/img/logo.jpg" alt="logo Ponant" width="60"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Accueil</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Voyage Volcans Asie</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Voyage USA côte ouest </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Voyage en Baie de Somme
                          </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li><a class="dropdown-item" href="#">Le phare du Hourdel</a></li>
                            <li><a class="dropdown-item" href="#">Les phoques et veaux marins du Hourdel</a></li>
                            <li><a class="dropdown-item" href="#">L'Avocette de la vasière</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
 
        <div class="carousel-inner">
 
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
 
      <fieldset>
        <h1>Choisir vos diapos</h1>
        <label for="min">Départ diaporama</label>
        <input type="number" name="min" id="min">
        <label for="max">fin diaporama</label>
        <input type="number" name="max" id="max">
        <button type="submit">valider</button>
      </fieldset>
 
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
 
</html>

mon

Code:

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
 
body{
    background-color: beige;
}
 
p{
text-align: center;
color: white;
font-weight: bold;
background-color: rgba(107, 96, 96, 0.427);
}
#carouselExampleCaptions{
margin-left: auto;
margin-right: auto;
width: 50%;
height: 20%;
}
 
fieldset{
    background-color: grey;
    border:2px solid black;
    width: 50%;
    -moz-border-radius: 10px;
    /* -webkit-border-radius: 10px; */
    border-radius: 10px;
    margin: auto;
}
.carousel img{
    width: 100% ;
    border-radius: 100%;
}
h1{
    text-align: center;
    font-size: xx-large;
}

Mon code json

Code:

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
[
    {
        "id":1,
        "titre":"L’Ile de Lombok vue depuis l’île de Trawangan (Iles Gili)",
        "alt":"L’Ile de Lombok vue depuis l’île de Trawangan (Iles Gili) «- volcans en indonésie »"
    },
    {
        "id":2,
        "titre":"Le volcan Agung, Bali.",
        "alt":"Le volcan Agung, Bali. «- volcans en indonésie »"
    },
    {
        "id":3,
        "titre":"Construction d’une embarcation traditionnelle, Lovina Beach, Bali.",
        "alt":"Construction d’une embarcation traditionnelle, Lovina Beach, Bali. «- volcans en indonésie »"
    },
    {
        "id":4,
        "titre":"Pêcheur artisanal sur la côte balinaise",
        "alt":"Pêcheur artisanal sur la côte balinaise «- volcans en indonésie »"
    },
    {
        "id":5,
        "titre":"Coucher de soleil sur la Mer de Bali",
        "alt":"Coucher de soleil sur la Mer de Bali«- volcans en indonésie »"
    },
    {
        "id":6,
        "titre":"Echange spirituel au temple hindou « Pura Ulun Danu », Bali.",
        "alt":"Echange spirituel au temple hindou « Pura Ulun Danu », Bali.«- volcans en indonésie »"
    },
    {
        "id":7,
        "titre":"Scène de vie quotidienne (nourriture destinée aux cochons), Lovina Beach, Bali.",
        "alt":"Scène de vie quotidienne (nourriture destinée aux cochons), Lovina Beach, Bali.«- volcans en indonésie »"
    },
    {
        "id":8,
        "titre":"Epouillage en règle à la forêt des singes d’Ubud ; cet animal est sacré pour les Balinais.",
        "alt":"Epouillage en règle à la forêt des singes d’Ubud ; cet animal est sacré pour les Balinais.«- volcans en indonésie »"
    },
    {
        "id":9,
        "titre":"Forêt des singes d’Ubud, Bali.",
        "alt":"Forêt des singes d’Ubud, Bali.«- volcans en indonésie »"
    },
    {
        "id":10,
        "titre":"Arbre de la forêt des singes d’Ubud. Il s’agit de racines et non de lianes.",
        "alt":"Arbre de la forêt des singes d’Ubud. Il s’agit de racines et non de lianes.«- volcans en indonésie »"
    },
    {
        "id":11,
        "titre":"Nénuphars du jardin aquatique de Tirta Gangga, Bali.",
        "alt":"«- volcans en indonésie »"
    },
    {
        "id":12,
        "titre":"Nénuphars du jardin aquatique de Tirta Gangga, Bali.",
        "alt":"Nénuphars du jardin aquatique de Tirta Gangga, Bali.«- volcans en indonésie »"
    },
    {
        "id":13,
        "titre":"Coq dans une cage en bambou. Les combats de coqs sont interdits en dehors de l’enceinte des temples, mais les Balinais en sont friands et en organisent clandestinement.",
        "alt":"Coq dans une cage en bambou. Les combats de coqs sont interdits en dehors de l’enceinte des temples, mais les Balinais en sont friands et en organisent clandestinement.«- volcans en indonésie »"
    },
    {
        "id":14,
        "titre":"Rizières de Jatiluwih, Bali.",
        "alt":"«- volcans en indonésie »"
    },
    {
        "id":15,
        "titre":"Cratère du volcan Bromo, vénéré par les Javanais hindous. Haut-lieu de pèlerinage et d’offrandes, un temple est édifié à ses pieds. Ile de Java.",
        "alt":"Cratère du volcan Bromo, vénéré par les Javanais hindous. Haut-lieu de pèlerinage et d’offrandes, un temple est édifié à ses pieds. Ile de Java.«- volcans en indonésie »"
    },
    {
        "id":16,
        "titre":"Massif du Tengger, très fertile en raison des dépôts volcaniques. Les cultures se situent en bordure de la caldeira du Bromo. Une caldeira est une immense dépression formée consécutivement à l’effondrement de la chambre magmatique du volcan. Ile de Java. ",
        "alt":"Massif du Tengger, très fertile en raison des dépôts volcaniques. Les cultures se situent en bordure de la caldeira du Bromo. Une caldeira est une immense dépression formée consécutivement à l’effondrement de la chambre magmatique du volcan. Ile de Java.«- volcans en indonésie »"
    },
    {
        "id":17,
        "titre":"Le Mont Bromo et sa caldeira, avec, en arrière-plan, le Semeru, qui  « explose » toutes les 30 mn environ et qui culmine à 3 676 m, en faisant le point culminant de l’île de Java.",
        "alt":"Le Mont Bromo et sa caldeira, avec, en arrière-plan, le Semeru, qui  « explose » toutes les 30 mn environ et qui culmine à 3 676 m, en faisant le point culminant de l’île de Java.«- volcans en indonésie »"
    },
    {
        "id":18,
        "titre":"Lac de cratère du volcan Batur, Bali.",
        "alt":"Lac de cratère du volcan Batur, Bali.«- volcans en indonésie »"
    },
    {
        "id":19,
        "titre":"Cratère du Kawah Ijen et son lac acide, sans doute le plus acide au monde ; extrême ouest de Java. ",
        "alt":"Cratère du Kawah Ijen et son lac acide, sans doute le plus acide au monde ; extrême ouest de Java.«- volcans en indonésie »"
    },
    {
        "id":20,
        "titre":"Vapeur d’eau émanant du cratère du volcan Bromo. On remarque des dépôts soufrés sur ses parois.",
        "alt":"Vapeur d’eau émanant du cratère du volcan Bromo. On remarque des dépôts soufrés sur ses parois.«- volcans en indonésie »"
    },
    {
        "id":21,
        "titre":"Idem.",
        "alt":"Idem.«- volcans en indonésie »"
    },
    {
        "id":22,
        "titre":"Affleurement lors de l’ascension du Kawah Ijen, à l’extrême ouest de Java.",
        "alt":"«- volcans en indonésie »"
    },
    {
        "id":23,
        "titre":"Chargement de plaques de soufre extraites du cratère du Kawah Ijen, à l’extrême ouest de Java. La production est remontée à dos d’hommes, sans équipement particulier et peut peser jusqu’à 80kg.",
        "alt":"«- volcans en indonésie »"
    },
    {
        "id":24,
        "titre":"Zone d’extraction du soufre, dont les gaz concentrés dans des conduits se liquéfient et ruissellent, prenant une couleur orangée (environ 120 degrés). La fumée est extrêmement toxique. Une fois refroidi, le soufre sera cassé à la barre à mine et chargé dans de simples paniers.",
        "alt":"«- volcans en indonésie »"
    }
 
]

mon

Code:

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
function genereImage(monObjet, monItem) {
    let monImg = document.createElement("img");
    monImg.setAttribute("src", "photos_volcans/fond" + monObjet.id + ".jpg");
    monImg.setAttribute("alt", monObjet.titre);
    monItem.appendChild(monImg);
}
 
function monTitre(monObjet, monCaption) {
    let monTitre = document.createElement("p");
    monTitre.innerText = monObjet.titre;
    monCaption.appendChild(monTitre);
}
 
function genereDiapo(_data) {
    for (let i = 0; i < _data.length; i++) {
        let monObjet = _data[i];
        if (i == 0) {
            let monItem = document.createElement("div");
            monItem.setAttribute("class", "carousel-item active");
            document.querySelector(".carousel-inner").appendChild(monItem);
            genereImage(monObjet, monItem);
 
            let monContainer = document.createElement("div");
            monContainer.setAttribute("class", "carousel-caption d-none d-md-block");
            monItem.appendChild(monContainer);
 
            let monCaption = document.createElement("div");
            monCaption.setAttribute("class", "carousel-caption");
            monContainer.appendChild(monCaption);
 
            monTitre(monObjet, monCaption);
        }
        else {
            let monItem = document.createElement("div");
            monItem.setAttribute("class", "carousel-item");
            genereImage(monObjet, monItem);
 
            let monContainer = document.createElement("div");
            monContainer.setAttribute("class", "carousel-caption d-none d-md-block");
            monItem.appendChild(monContainer);
 
            let monCaption = document.createElement("div");
            monCaption.setAttribute("class", "carousel-caption");
 
            monContainer.appendChild(monCaption);
 
            monTitre(monObjet, monCaption);
 
            document.querySelector(".carousel-inner").appendChild(monItem);
        }
    }
}
 
fetch("volcan.json")
.then(response=>response.json())
.then(data=>genereDiapo(data))
.then(response=>console.log(response))
.catch(error=>alert("erreur: "+ error));

13/06/2022, 14h12
mathieu
la 1re étape est de partir avec les nombres marqués en dur dans la code de la page, comme cela par exemple :
Code:

1 2 3 4 <script> let identifiant_depart = 2; let nombre_image = 5; </script>
avec cela, vous allez faire le code javascript qui s'occupe de l'affichage en fonction des ces 2 nombres.
avez vous déjà fait tout cela ?

ensuite la 2e étape sera de faire toute la partie php qui modifie ces nombres dans la page.
13/06/2022, 15h53
denisalb

Non j'ai encore rien fait car je debute et essaye de comprendre.

:help: Merci de m'aider

Après avoir longuement réfléchie j'ai partiellement réussi Mais quand je clique sur mon bouton valider une première fois cela fonctionne de choisir les images qui s’affiche mais quand je re sélectionne les image (sans recharger la page) cela fonctionne pas.

Je ne sais pas d’où viens mon problème.

Mon

Code:

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
function genereImage(monObjet, monItem) {
    let monImg = document.createElement("img");
    monImg.setAttribute("src", "photos_volcans/" + monObjet.id + ".jpg");
    monImg.setAttribute("alt", monObjet.titre);
    monItem.appendChild(monImg);
}
 
function monTitre(monObjet, monCaption) {
    let monTitre = document.createElement("p");
    monTitre.innerText = monObjet.titre;
    monCaption.appendChild(monTitre);
}
 
function genereDiapo(_data) {
    for (let i = 0; i < _data.length; i++) {
        let monObjet = _data[i];
        if (i == 0) {
            let monItem = document.createElement("div");
            monItem.setAttribute("class", "carousel-item active");
            document.querySelector(".carousel-inner").appendChild(monItem);
            genereImage(monObjet, monItem);
 
            let monContainer = document.createElement("div");
            monContainer.setAttribute("class", "carousel-caption d-none d-md-block");
            monItem.appendChild(monContainer);
 
            let monCaption = document.createElement("div");
            monCaption.setAttribute("class", "carousel-caption");
            monContainer.appendChild(monCaption);
 
            monTitre(monObjet, monCaption);
        }
        else {
            let monItem = document.createElement("div");
            monItem.setAttribute("class", "carousel-item");
            genereImage(monObjet, monItem);
 
            let monContainer = document.createElement("div");
            monContainer.setAttribute("class", "carousel-caption d-none d-md-block");
            monItem.appendChild(monContainer);
 
            let monCaption = document.createElement("div");
            monCaption.setAttribute("class", "carousel-caption");
 
            monContainer.appendChild(monCaption);
 
            monTitre(monObjet, monCaption);
 
            document.querySelector(".carousel-inner").appendChild(monItem);
        }
    }
}
 
// fetch("volcan.json")
// .then(response=>response.json())
// .then(data=>genereDiapo(data))
// .then(response=>console.log(response))
// .catch(error=>alert("erreur: "+ error));
 
 
function chargerDiapo() {
    let min =document.getElementById("min").value;
    let max =document.getElementById("max").value;
    let xhr = new XMLHttpRequest();
    xhr.open("GET", "volcan.php?min=" + min + "&max=" + max, true);
    // xhr.responseType = "json";
    xhr.send();
    xhr.onload = function() {
        //Si le statut HTTP n'est pas 200...
        if (xhr.status != 200) {
            //...On affiche le statut et le message correspondant
            alert("Erreur " + xhr.status + " : " + xhr.statusText);
            //Si le statut HTTP est 200, on affiche le nombre d'octets téléchargés et la réponse
        } else {
            let data = JSON.parse(xhr.responseText);
            // console.log(data);
            genereDiapo(data);
        }
    };
}
document.getElementById("valider").addEventListener("click",chargerDiapo);

mon

Code:

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
<?php
 
 
 
// parcourir $tab et sélectionner uniquement les images demandées
$min = intval($_GET["min"] ?? 0);
$max = intval($_GET["max"] ?? 0);
// todo: controler min et max
$donnees = file_get_contents("volcan.json");
if($min === 0 && $max === 0){
    exit($donnees);
}
// echo $donnees;
$tab = json_decode($donnees, true);
if($max== 0){
    $max = count($tab);
} 
//var_export($tab);
$result = [];
foreach ($tab as $key => $value) {
    if($value["id"] >= $min && $value["id"] <= $max){
        $result[] = $value;
    }
}
// parcourir $tab et sélectionner uniquement les images delandées
// et les mettres dans result.
//option pour les accents
echo json_encode($result, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE);
// et les mettres dans result.
// echo json_encode($result);

mon

Code:

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
<!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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="exo_diapo_volcans/test_diapo/css/style.css">
    <script src="volcan.js" defer></script>
    <title>Diaporama ASIE chargement ajax</title>
</head>
 
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#"><img src="exo_diapo_volcans/test_diapo/img/logo.jpg" alt="logo Ponant" width="60"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Accueil</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Voyage Volcans Asie</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Voyage USA côte ouest </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Voyage en Baie de Somme
                          </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li><a class="dropdown-item" href="#">Le phare du Hourdel</a></li>
                            <li><a class="dropdown-item" href="#">Les phoques et veaux marins du Hourdel</a></li>
                            <li><a class="dropdown-item" href="#">L'Avocette de la vasière</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
 
        <div class="carousel-inner">
 
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
 
      <fieldset>
        <h1>Choisir vos diapos</h1>
        <label for="min">Départ diaporama</label>
        <input type="number" name="min" id="min">
        <label for="max">fin diaporama</label>
        <input type="number" name="max" id="max">
        <button type="submit" id="valider">valider</button>
      </fieldset>
 
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
 
</html>

mon

Code:

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
body{
    background-color: beige;
}
 
p{
text-align: center;
color: white;
font-weight: bold;
background-color: rgba(107, 96, 96, 0.427);
}
#carouselExampleCaptions{
margin-left: auto;
margin-right: auto;
width: 50%;
height: 20%;
margin-top: 1%;
margin-bottom: 1%;
}
 
fieldset{
    background-color: grey;
    border:2px solid black;
    width: 50%;
    -moz-border-radius: 10px;
    /* -webkit-border-radius: 10px; */
    border-radius: 10px;
    margin: auto;
}
.carousel img{
    width: 100% ;
    border-radius: 100%;
}
h1{
    text-align: center;
    font-size: xx-large;
}