Problème d'affichage avec bootstrap

Messages postés
18
Date d'inscription
jeudi 19 mars 2015
Statut
Membre
Dernière intervention
1 octobre 2019
-
bonjour à tous, comme indiquer dans le titre j'ai un problème avec l'affichage sur bootstarp, je m'explique j'ai suivie un tuto sur youtube pour crée une animation sympa que je voulais intégrer à mon site Internet, le résultat est correct, mais quand je l’intègre à mon site c'est là que les problèmes commence.
Petite précision le tuto que j'ai suivie n'utilisé pas bootstrap en revanche bootsatrp est bien présent sur mon site.
Dès que j'intègre le bout de code à mon site les 4 blocs que compte le bout de code se mettent sur 2 lignes alors que normalement ils son sensé rester sur la même ligne. pour essayer de palier à ce problème, j'ai mis une row mais en vains le résultat reste le même.

pouvez vous m'aider pour mon problème merci d'avance.

ci joint le code HTML et CSS

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>effets</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="card">
				<div class="col-md-3">	
					<div class="face face1">
						<div class="content">
							<div class="icon">
						<i class="fa fa-desktop"></i>
					</div>
							<h3>Design</h3>
						</div>
					</div>
					<div class="face face2">
						<div class="content">
							<p>Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années</p>
							<a href="#">Read More</a>
						</div>
					</div>
				</div>
			</div>

			
			<div class="card">
				<div class="col-md-3">	
					<div class="face face1">
						<div class="content">
							<img src="data.png">
							<h3>Code</h3>
						</div>
					</div>
					<div class="face face2">
						<div class="content">
							<p>Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années</p>
							<a href="#">Read More</a>
						</div>
					</div>
				</div>
			</div>
			
			<div class="card">
				<div class="col-md-3">	
					<div class="face face1">
						<div class="content">
							<img src="data.png">
							<h3>Code</h3>
						</div>
					</div>
					<div class="face face2">
						<div class="content">
							<p>Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années</p>
							<a href="#">Read More</a>
						</div>
					</div>
				</div>
			</div>

			<div class="card">
				<div class="col-md-3">		
					<div class="face face1">
						<div class="content">
							<img src="startup.png">
							<h3>Launch</h3>		
						</div>		
					</div>		
					<div class="face face2">	
						<div class="content">	
							<p>Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années</p>		
						</div>	
					</div>			
				</div>	
			</div>
		</div>
	</div>
</body>
</html>



body{
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: red;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: consolas;
}

.container{
	width: 1000px;
	position: relative;
	display: flex;
	justify-content: space-between;
}

.container .card{
	position: relative;

}

.container .card .face{
	width: 300px;
	height: 200px;
	transition: 0.5s;
}

.container .card .face.face1{
	position: relative;
	background: blue;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	transform: translateY(100px); 
}

.container .card:hover .face.face1{
		background: green;
		transform: translateY(0px); 
}

.container .card .face.face1 .content{
	opacity: 0.2;
	transition: 0.5s;
}

.container .card:hover .face.face1 .content{
	opacity: 1;
}

.container .card .face.face1 .content img{
	max-width: 100px;
}

.container .card .face.face1 .content h3{
	margin: 10px 0 0;
	padding: 0;
	color: yellow;
	text-align: center;
	font-size: 1.5em; 
}

.container .card .face.face2{
	position: relative;
	background: orange;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	box-sizing: border-box;
	box-shadow: 0 20px 50px rgba(0,0,0,0.8);
	transform: translateY(-100px);
}

.container .card:hover .face.face2{
	transform: translateY(0px);
}

.container .card .face.face2 .content p{
	margin: 0;
	padding: 0;
}

.container .card .face.face2 .content a{
	margin: 15px 0 0;
	display: inline-block;
	text-decoration: none;
	font-weight: 900;
	color: purple;
	padding: 5px;
	border:1px solid red;
}

.container .card .face.face2 .content a:hover{
	background: #333;
	color: #fff;

}
.icon{
	font-size: 40px;
	margin: 20px auto;
	padding: 20px;
	height: 90px;
	width: 90px;
	border: 1px solid #fff;
	border-radius: 50%;
}

Afficher la suite