Skip to content

P
Projet ISIS
Commit d52392c5 authored by BOUAZIZ Nassim 's avatar BOUAZIZ Nassim
Browse files
Options

Bootstrap verif photo

parent b1b0d076
Show whitespace changes
Inline Side-by-side
Showing with 85 additions and 62 deletions
index.php
View file @ d52392c5
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
...@@ -20,15 +20,33 @@ ...@@ -20,15 +20,33 @@
<!-- API TenserFlow --> <!-- API TenserFlow -->
</head> </head>
<body> <body>
<div class="site-header-main">
<div id="logo-header"></div>
<div class="site-branding">Titre de la page</div> <div class="mb-5">
<div id="couleurs-droite"></div>
</div>
<div class="container"> <div class="container">
<div class ="div-ID div-photo" >
<div class="d-none d-sm-none d-md-none d-lg-block">
<div id="header-large"class="row d-flex justify-content-between">
<!-- Bandeau -->
<div id="logo-header" class="logo-l col-md-1"></div>
<div class="site-branding col-md-4 align-self-center">Compléments Inscription</div>
<div id="couleurs-droite" class=" col-md-1"></div>
</div>
</div>
<div class="row d-flex justify-content-between d-lg-none d-xl-none d-xxl-none text-center">
<div class="col-md-12 header-small">Compléments Inscription<br>IMT Nord Europe</div>
</div>
</div>
</div>
<div class="container grayarea">
<div class ="row d-flex justify-content-center div-ID div-photo" >
<div class="col-md-3 my-auto d-flex justify-content-center" >
<img name ="im-ID" id="img-ID" src="" height="150em"/> <img name ="im-ID" id="img-ID" src="" height="150em"/>
<div id=conditions> </div>
<div id=conditions class="col-md-3 my-5 d-flex justify-content-center">
<ul> <ul>
<li id="li-oneface">Un seul visage<span></span></li> <li id="li-oneface">Un seul visage<span></span></li>
<li id="li-format">Format correct<span></span></li> <li id="li-format">Format correct<span></span></li>
...@@ -36,11 +54,13 @@ ...@@ -36,11 +54,13 @@
<li id="li-poids">Poids<span></span></li> <li id="li-poids">Poids<span></span></li>
</ul> </ul>
</div> </div>
<div class="col-md-3 my-auto d-flex justify-content-center">
<img name ="im_ID2" id="img-ID2" src="" height="150em"/> <img name ="im_ID2" id="img-ID2" src="" height="150em"/>
<div id="div-filename"></div>
</div> </div>
<div id="div-filename"></div>
</div> </div>
<div class ="row d-flex justify-content-center" >
<div class="div-form"> <div class="div-form">
<form id ="form" action="" method="" enctype="multipart/form-data"> <form id ="form" action="" method="" enctype="multipart/form-data">
<!-- <label for="fileUpload">Fichier:</label> --> <!-- <label for="fileUpload">Fichier:</label> -->
...@@ -88,9 +108,9 @@ ...@@ -88,9 +108,9 @@
// defaultBtn.click(); // defaultBtn.click();
// } // }
</script> </script>
</div> </div>
</div>
</div>
<div id="div"> <div id="div">
<p><strong>Note:</strong> Seuls les formats .jpg et .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p> <p><strong>Note:</strong> Seuls les formats .jpg et .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
<p id="p-status"><strong>Statut :</strong><span id="span-status"></span></p> <p id="p-status"><strong>Statut :</strong><span id="span-status"></span></p>
......
style.css
View file @ d52392c5
...@@ -12,26 +12,16 @@ html,body{ ...@@ -12,26 +12,16 @@ html,body{
} }
.container{
margin-bottom: 20px;
display: flex;
justify-content: center;
border-radius: 13px;
}
.div-btn-form{ .div-btn-form{
align-self: auto; align-self: auto;
text-align: center; text-align: center;
margin: 5px; margin: 5px;
} }
.grayarea {
max-width: 700px !important;/*Set your own width %; */
}
.div-photo { .div-photo {
height: 200px;
width: 700px;
margin-top: 35px;
padding-top: 50px;
display: flex;
justify-content: space-evenly;
background-color: whitesmoke; background-color: whitesmoke;
border: solid ; border: solid ;
border-color: #00b8de; border-color: #00b8de;
...@@ -53,6 +43,19 @@ html,body{ ...@@ -53,6 +43,19 @@ html,body{
line-height: 1.25; line-height: 1.25;
font-weight: 700; font-weight: 700;
color: white; color: white;
text-align: center;
}
#header-large{
background-color: #00b8de !important;
border: white;
}
.header-small{
color: #00B8DE;
font-weight: bold;
font-size: 200%;
} }
#logo-header{ #logo-header{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment