Bonjour,
Nouvelle version encore plus simplifiée. Les seules ressources externes sont les images shadow1.png et shadow3.png.
J'ai séparé les css des exemples en 3 "types" : classes type1, type2 et type3. Ils peuvent être utilisés indépendamment les uns des autres.
Le css commence par la déclaration des polices. Ça peut être modifié en cas de changement de police sans problème.
Ensuite, on a des adaptations de la taille des polices en fonction de la largeur du viewport. A adapter éventuellement en fonction de la place réellement disponible.
Enfin, on a les styles pour les 3 "types".
Ça peut paraitre encore un peu compliqué, mais en fait, ça doit s'intégrer assez facilement dans une page. Il faut tester.
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* polices */
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Patua One';
font-style: normal;
font-weight: 400;
src: local('Patua One'), local('PatuaOne-Regular'), url(https://fonts.gstatic.com/s/patuaone/v11/ZXuke1cDvLCKLDcimxB44_luFgxbuQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* style du body et tailles des polices */
body
{
background-color: #FCFCFC;
font-family: "Roboto", Arial, Tahoma, sans-serif;
font-size: 13px;
line-height: 21px;
}
body>div
{
margin: 2em;
}
h3, h4 {font-family: "Patua One", Arial, Tahoma, sans-serif;}
h3 {font-size: 25px;}
h4 {font-size: 21px;}
@media only screen and (min-width: 768px) and (max-width: 959px)
{
body {font-size: 13px;}
h3 {font-size: 21px;}
h4 {font-size: 18px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px)
{
body {font-size: 13px;}
h3 {font-size: 19px;}
h4 {font-size: 16px;}
}
@media only screen and (max-width: 479px)
{
body {font-size: 13px;}
h3 {font-size: 15px;}
h4 {font-size: 13px;}
}
/* style des 3 types */
img.shadow
{
display:block;
width:100%;
}
.type1,
.type2,
.type3
{
position: relative;
}
.type1:after,
.type3:after
{
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: -1rem;
height: 1rem;
width:100%;
background-image: url(shadow3.png);
background-size: 100%;
background-repeat: no-repeat;
}
.type1 h3
{
margin: 0;
background-color: #e8e8e8;
color: #333333;
border-left: 3px solid #1a8be2;
padding: 1.5em;
}
.type2
{
text-align: center;
}
.type2 img
{
display: block;
width: 100%;
position: absolute;
bottom: 0.25em;
z-index: -1;
}
.type2 h4
{
margin: 0;
height: 2em;
}
.type2 h4 span
{
display: inline-block;
background: #fff;
padding-left: 0.25em;
padding-right: 1em;
}
.type2 h4 svg
{
display: inline-block;
height: 2em;
fill: rgb(68, 68, 68);
background: #fff;
padding-left: 1em;
}
.type3>div
{
border-radius: 5px;
border: 1px solid #1a8be2;
overflow: hidden;
}
.type3>div>div
{
color: #444;
background: #fff;
padding:1em;
}
.type3 h4
{
margin: 0;
background-color: #1a8be2;
color: #fff;
padding: 0.5em 1em;
font-weight: light;
}
/* style du lien du type 3. Peut-être supprimé complètement si on ne veut pas d'animation quand on fait un hover sur le lien */
.type3 a {color: #656B6F}
.type3 a:after,
.type3 a:before {background: #2195de}
.type3 a:hover {color: #2991d6}
.type3 a {position:relative;display:inline-block;margin:15px 25px;font-size:15px;text-shadow:0 0 1px rgba(255,255,255,0.3);text-decoration:none;outline:none;white-space:nowrap}
.type3 a:hover {text-decoration:none}
.type3 a {padding:0 5px;font-weight:700;-webkit-transition:color .3s;-moz-transition:color .3s;transition:color .3s;position:relative;z-index:1}
.type3 a:before,
.type3 a:after {position:absolute;width:100%;left:0;top:50%;height:2px;margin-top:-1px;content:'';z-index:-1;-webkit-transition:-webkit-transform 0.3s,opacity .3s;-moz-transition:-moz-transform 0.3s,opacity .3s;transition:transform 0.3s,opacity .3s;pointer-events:none}
.type3 a:before {-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);transform:translateY(-20px)}
.type3 a:after {-webkit-transform:translateY(20px);-moz-transform:translateY(20px);transform:translateY(20px)}
.type3 a:hover:before,
.type3 a:hover:after,
.type3 a.hover:before,
.type3 a.hover:after {opacity:.7}
.type3 a:hover:before,
.type3 a.hover:before {-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
.type3 a:hover:after,
.type3 a.hover:after {-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
.type3 a:hover:after,
.type3 a:hover:before,
.type3 a.hover:after,
.type3 a.hover:before {background:rgba(0,0,0,0.1)}
</style>
</head>
<body>
<div class="type1">
<h3>Mozilla Firefox est un navigateur Web libre et gratuit</h3>
</div>
<div class="type2">
<img src="shadow1.png">
<h4>
<svg viewBox="0 0 1200 1200">
<use xlink:href="#elusive-adjust-alt"></use>
</svg><span>Caractéristiques</span>
</h4>
</div>
<div class="type3">
<div>
<h4>Mots clés</h4>
<div>
<a href="https://www.clibre.eu/firefox-redecouvrez-le-web-avec-un-navigateur-libre-et-gratuit/" ontouchstart="this.classList.toggle('hover');">
<span>navigateur internet</span>
</a>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="elusive-adjust-alt" viewBox="0 0 1200 1200">
<path d="M 104.3125 0 L 104.3125 699.84375 L 0 699.84375 L 0 953.90625 L 367.28125 953.90625 L 367.28125 699.84375 L 262.96875 699.84375 L 262.96875 0 L 104.3125 0 z M 520.75 0 L 520.75 451.75 L 416.34375 451.75 L 416.34375 705.8125 L 783.65625 705.8125 L 783.65625 451.75 L 679.3125 451.75 L 679.3125 0 L 520.75 0 z M 937.03125 0 L 937.03125 201.625 L 832.71875 201.625 L 832.71875 455.6875 L 1200 455.6875 L 1200 201.625 L 1095.6875 201.625 L 1095.6875 0 L 937.03125 0 z M 885.9375 252.03125 L 1146.7812 252.03125 L 1146.7812 302.46875 L 885.9375 302.46875 L 885.9375 252.03125 z M 937.03125 498.125 L 937.03125 1200 L 1095.6875 1200 L 1095.6875 498.125 L 937.03125 498.125 z M 469.59375 502.15625 L 730.40625 502.15625 L 730.40625 552.59375 L 469.59375 552.59375 L 469.59375 502.15625 z M 520.75 746.1875 L 520.75 1200 L 679.3125 1200 L 679.3125 746.1875 L 520.75 746.1875 z M 53.21875 750.21875 L 314.0625 750.21875 L 314.0625 800.65625 L 53.21875 800.65625 L 53.21875 750.21875 z M 104.34375 996.3125 L 104.34375 1200 L 263 1200 L 263 996.3125 L 104.34375 996.3125 z " id="path2998">
</path>
</symbol>
</svg>
</body>
</html>
Amicalement,
, voilà une version "sans image" (on utilise des css radial-gradients à la place).
. Bon je ne souhaite ps d'embêter si cela est compliqué et prend trop de temps. Au pire, je reprends les svg avec le site dont je parlais pour trouver d'autres icônes. 
