Site d'informations

6985 Mishary

Ouvrir dans l'éditeur Publiez votre code

Recommandé

7 May 2024

Modèle de site Web de présentations HTML et CSS

3 July 2025

Modèle HTML et CSS pour site Web de salle de sport

28 June 2025

Modèle de site Web HTML de location de vélos

HTML

CSS

/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #222727;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card-container {
  perspective: 1000px; /* For a subtle 3D effect on hover */
}

.card {
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: black;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s;
}

.card:hover {
  transform: rotateY(10deg);
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-top: 30px; /* Half outside the card */
  border: 5px solid #303537; /* Creates a nice border effect */
}

.info {
  text-align: center;
  padding: 20px;
}

h1 {
  color: white;
  margin: 10px 0;
}

p {
  color: #ffffff;
  font-size: 0.9em;
}

.social-icons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.social-icons img {
  width: 24px;
  height: 24px;
  margin: 0 10px;
}

.social-icons a {
  transition: transform 0.3s;
}

.social-icons a:hover {
  transform: scale(1.2);
}

Recommandé

Modèle de site Web de présentations HTML et CSS

Modèle HTML et CSS pour site Web de salle de sport

Modèle de site Web HTML de location de vélos

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS