<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<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 rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="js/bootstrap.bundle.min.js">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="noir">
<div class="menuhaut">
<div class="left">
<div class="nav">
<ul class="nav">
<li class="nav-item">
<a style="color:white; text-shadow: 1PX 1PX 0 #bcf5a9, 1PX 1PX 0 #bcf5a9, 1PX -1PX 0 #bcf5a9, -1PX 1PX 0 #bcf5a9, -1PX -1PX 0 #bcf5a9, 1PX 0PX 0 #bcf5a9, 0PX 1PX 0 #bcf5a9, -1PX 0PX 0 #bcf5a9, 0PX -1PX 0 #bcf5a9;
" class="nav-link" href="user.html">se connecter</a>
</li>
</ul>
</div>
</div>
<div class="right">
<div class="nav">
<ul class="nav">
<li class="nav-item">
<a style="color: white; text-shadow: 1PX 1PX 0 #bcf5a9, 1PX 1PX 0 #bcf5a9, 1PX -1PX 0 #bcf5a9, -1PX 1PX 0 #bcf5a9, -1PX -1PX 0 #bcf5a9, 1PX 0PX 0 #bcf5a9, 0PX 1PX 0 #bcf5a9, -1PX 0PX 0 #bcf5a9, 0PX -1PX 0 #bcf5a9;
" class="nav-link" href="creer.html">creer un compte</a>
</li>
</ul>
</div>
</div>
</div>
<div class="contenudivnoir">
<div class="titre">
<h1>Visiter notre <br>shopping</h1>
</div>
<div class="btn">
<a class="btn btn-info" role="button"
Onclick="return confirm (' vous devez connecter ou creer un compte d\'abord ')"
href="#user.html">VISITER</a>
</div>
<div class="image">
<div class="r">
<img src="https://img.modivo.cloud/product(b/b/6/f/bb6f82033249febcfb4ad387ea46e8d2fd3ecff5_1_8720112502811.jpg,jpg)/tommy-jeans-marskiniai-tjm-multicheck-dm0dm08785-spalvota-regular-fit.jpg"
alt="un homme">
<p>une homme</p>
</div>
<div class="r">
<img src="https://i.pinimg.com/originals/28/72/29/28722979cc82cf585c7f947ad8af885d.jpg"
alt="un homme">
<p>une femme</p>
</div>
<div class="r">
<img src="https://www.petit-bateau.fr/dw/image/v2/BCKL_PRD/on/demandware.static/-/Sites-PB_master/default/dwd6100cbf/PB/4747601J.jpg?sw=1390&sh=1622&sm=fit"
alt="un homme">
<p>un enfant</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body {
margin: 0px;
padding: 0px;
font-family: 'Crimson Pro', serif;
font-size: 30px;
color: white;
}
.container {
background-color: pink;
margin-top: 100px;
padding-bottom: 50%;
padding-top: 60px;
padding-bottom: 80px;
margin-bottom: 10rem;
}
.noir {
background-color: black;
width: 90%;
height: 500px;
margin-left: 5%;
}
.left {
float: left;
color: white;
margin-left: 50px;
padding-top: 5px;
}
.right {
float: right;
color: white;
margin-right: 50px;
padding-top: 5px;
}
.titre {
text-align: center;
padding-top: 17%;
margin-left: -60%;
/*marge exterieur de drote a gauche*/
}
.menuhaut {
width: 100%;
}
.menubatt {
width: 100%;
}
.bleft {
float: left;
color: white;
margin-left: 50px;
padding-top: 150px;
}
.bright {
float: right;
color: white;
margin-right: 50px;
padding-top: 150px;
margin-right: -57%;
/*marge exterieur de gauche a drote*/
}
.contenudivnoir {
width: 100%;
}
.r {
display: block;
float: right;
margin-right: 40px;
padding-bottom: 130px;
margin-top: -199.9px;
/*marge exterieur de bas en haut*/
}
img {
width: 160px;
height: 190px;
margin: 5px;
cursor: pointer;
}
.r:hover {
transform: scale(1.08);
opacity: 0.9;
transition: ease-out 0.2s;
}
a {
text-decoration: none;
color: wheat;
}
a:hover {
background-color: white;
color: black;
font-weight: bold;
border-radius: 4px;
}
H1,
P {
text-shadow: 1PX 1PX 0 #bcf5a9, 1PX 1PX 0 #bcf5a9, 1PX -1PX 0 #bcf5a9, -1PX 1PX 0 #bcf5a9, -1PX -1PX 0 #bcf5a9, 1PX 0PX 0 #bcf5a9, 0PX 1PX 0 #bcf5a9, -1PX 0PX 0 #bcf5a9, 0PX -1PX 0 #bcf5a9;
}
.btn {
margin-left: 70px;
width: 90px;
}
.btn a {
color: wheat;
font-size: 18px;
font-weight: bold;
}
