Création de cards Fermé

Question

Bonjour,

Il faut que je crée des "cards" comme sur la photo. Il me semble que je dois utiliser la manière bootstrap. Je dois également remplir les titres... grâce à ma base de donnée qui est sur Phpmyadmin avec du php.

Si quelqu'un peut m'éclairer sur la manière dont il faut procéder.

Merci d'avance ????
Macintosh / Safari 16.3

jordane45 · Answer

Bonjour

Tu dois le faire en JavaScript ?

Pour bootstrap, tu trouveras les card dans la doc sans difficulté..

Reviens nous voir avec ce que tu auras commencé à coder... Là c'est trop vague.

kiki184 · Answer

Bonjour, Voici ce que j'ai déjà codé. Comment je-peux maintenant faire pour que lorsque la fenêtre est réduite, les cards soient "empilés" les une sur les autres et ne soient pas en 3 par 3. Merci d'avance. Accueil

Studyline

S'inscrire

Se connecter

Nos Cours

"; $i = 0; while ($data = mysqli_fetch_assoc($result)) { if($i % 3 == 0){ echo "

"; } echo "

" . $data['name_course'] . "

" . $data['theme'] . "

Durée " . $data['duration'] . " heures

Niveau " . $data['level'] . "

Accéder au cours

"; $i++; if($i % 3 == 0){ echo "

"; } } if($i % 3 != 0){ echo ""; } echo ""; } else { echo "La base de données n'existe pas"; } mysqli_close($db_handle); ?>

À propos de nous

Studyline est une plateforme de cours en ligne offrant une gamme de cours sur l'audiovisuel, conçus pour aider les étudiants à acquérir les compétences et les connaissances nécessaires pour réussir dans l'industrie de la production audiovisuelle. Nous proposons des cours d'introduction à la production audiovisuelle, ainsi que des cours plus avancés sur des sujets tels que le montage vidéo, la réalisation, le sound design, la diffusion et la promotion. Nos cours sont animés par des experts de l'industrie, qui partagent leur expérience et leur savoir-faire pour aider les étudiants à développer leur propre style et leur créativité. Les cours sont conçus pour être pratiques et faciles d'accès. Notre plateforme offre une expérience d'apprentissage flexible, avec des cours accessibles en ligne à tout moment, de n'importe où dans le monde, pour répondre aux besoins des étudiants qui ont des emplois du temps chargés.

kiki184 · Answer

/*FONTS*/

@font-face{
	font-family: "BakbakOne-Regular";
	src: url('Fonts/BakbakOne-Regular.ttf');
}
@font-face{
	font-family: "AmaticSC-Regular";
	src: url('Fonts/AmaticSC-Regular.ttf');
}
@font-face{
	font-family: "AmaticSC-Bold";
	src: url('Fonts/AmaticSC-Bold.ttf');
}
@font-face{
	font-family: "Montserrat-Regular";
	src: url('Fonts/Montserrat-Regular.ttf');
}
@font-face{
	font-family: "Montserrat-Bold";
	src: url('Fonts/Montserrat-Bold.ttf');
}
@font-face{
	font-family: "Montserrat-Black";
	src: url('Fonts/Montserrat-Black.ttf');
}

/*RESET*/

*, ::before, ::after{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body{
}

header{
	background-color: #97B797;
	height: 10vw;
}

nav{
	background-color: #E3E3E3;
}

main{
	margin-top: 500px;
}

.btn_header {
	background-color: #FFFFFF;
	border: 1px solid white;
	float: right;
	margin-left: 70%;
	margin-right: 20%;
	padding: 10px 30px;
}

img{
	cursor: pointer;
}

#logo{
	height: 100%;
	margin-left: 1vw;
}

.titre_0 {
	font-family: Montserrat-Bold;
	text-transform: uppercase;
	font-size: 4.5vw;
	text-align: center;
	float: right;
	margin-top: 2.5%;
	margin-right: 60%;
}

.titre_1 {
	font-family: BakbakOne-Regular;
	font-size: 5vh;
}

.titre_2 {
	font-family: Montserrat-Bold;
	font-size: 5vh;
}

.icon{
	width: 3%;
	height: 3%;
}

p{
	font-family: Montserrat-Regular;	
}

.card {
  margin-bottom: 20px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col-md-4 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  padding: 0 15px;
}

kiki184 · Answer

Voici mes différents codes

jordane45 · Answer

Bonjour

Tu as défini une largeur de 4 colonnes sur tes cardes pour le medium screen.

Tu dois également ajouter une définition sur 12 colonnes pour les petits écrans (small screen ) avec la class col-sm-12.

De cette façon, lorsque l'écran est réduit, ta carte prendra la largeur de l'écran. Les autres se placeront tout naturellement en dessous.

kiki184 · Answer

Super cela à fonctionné, merci beaucoup. Mes cartes sont maintenant collé les unes aux autres. J'ai essayé de mettre des
ou des margin dans mon css mais cela ne fonctionne pas. Est-ce qu'il y a un autre moyen ?