HTML et CSS avancé

<a href="#section1">
<a href="#section2">

<!-- ... -->

<div id="section1">
</div>

<!-- ... -->

<div id="section2">
</div>

copier

<a href="https://site-externe.com" target="_blank">

copier

<a href="mailto:example@example.com">

copier

/* le style suivant ne sera appliqué que lorsqu'un lien sera survolé */
a:hover {
	font-weight: bold;
}
/* cible une image lorsque son parent est survolé */
div:hover a {
	border: 1px solid black;
}
/* cible tous les paragraphes pairs (1 liens sur 2) */
p:nth-child(odd) {
	background-color: light-grey;
}

copier

/* Transition simple sur le survol d'un élément */
.button {
  background-color: blue;
  transition: background-color 0.5s ease;
}

.button:hover {
  background-color: red;
}

/* Transition multiple (couleur et transformation) */
.icon {
  color: black;
  transform: scale(1);
  transition: color 0.3s ease, transform 0.3s ease;
}

.icon:hover {
  color: green;
  transform: scale(1.2);
}

copier

/* Style de base pour mobile */
.container {
  background-color: lightblue;
}

/* Changement de style pour les écrans > 1280px */
@media (min-width: 1280px) {
  .container {
    background-color: coral;
  }
}

/* Changement de style pour les écrans < 600px */
@media (max-width: 600px) {
  .container {
    background-color: pink;
  }
}

copier

body {
  cursor: url('path-to-cursor-image.png'), auto;
}
img {
	cursor: pointer;
}

copier

.rotate {
  transition: transform 0.3s ease;
}

.rotate:hover {
  transform: rotate(45deg);
}

copier

.blur {
  filter: blur(5px);
}

.brightness {
  filter: brightness(150%);
}

copier

<iframe src="https://www.example.com" width="300" height="200"></iframe>

copier

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

.animated-element {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

copier