Embedded Files
Grid références couleurs cercles
Grid références couleurs cercles
Code à copier et à intégrer avec votre propre couleur "background-color: #votre couleur;" ⬇️
<div class="container">
<div>
<div class="items color1"><h1>#073763</h1></div>
<div class="items color2"><h1>#ffffff</h1></div>
<div class="items color3"><h1>#a4c2f4</h1></div>
</div>
<div>
<div class="items color-shadow-1"><h1>#073763</h1></div>
<div class="items color-shadow-2"><h1>#ffffff</h1></div>
<div class="items color-shadow-3"><h1>#a4c2f4</h1></div>
</div>
</div>
<style>
.container {
background-color: #e1f5eb;
margin: 30px auto;
padding: 30px;
display: grid;
grid-template-rows: repeat(2,450px);
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 150px;
width: 90%;
}
.items {
width: 100%;
height: 100%;
background-color: red;
}
/* calé au centre */
.color1 {
overflow: hidden;
max-width: 150px;
height: 150px;
background-color: #073763;
margin: 5% auto;
border-radius: 50%;
border-width: 2px;
border-color: #efefef;
border-style: solid;
}
.color1 h1 {
text-align: center;
margin: 45% auto;
font-size: 16px;
font-family: sans-serif;
color: #ffffff;
}
/* calé a gauche */
.color2 {
overflow: hidden;
margin: 20% 10% 10% 0;
max-width: 150px;
height: 150px;
background-color: #ffffff;
border-radius: 50%;
border-width: 2px;
border-color: #efefef;
border-style: solid;
}
.color2 h1 {
text-align: center;
margin: 45% auto;
font-size: 16px;
font-family: sans-serif;
color: #39393b;
}
/* calé a droite */
.color3 {
overflow: hidden;
margin: 20% 0 10% auto;
max-width: 150px;
height: 150px;
background-color: #a4c2f4;
border-radius: 50%;
border-width: 2px;
border-color: #efefef;
border-style: solid;
}
.color3 h1 {
text-align: center;
margin: 45% auto;
font-size: 16px;
font-family: sans-serif;
color: #39393b;
}
/* calé au centre */
.color-shadow-1 {
overflow: hidden;
max-width: 150px;
height: 150px;
background-color: #073763;
margin: 5% auto;
border-radius: 50%;
border: 1px solid #073763;
box-shadow: 2px 4px 20px 5px rgba(57, 57, 59, 0.3);
}
.color-shadow-1 h1 {
text-align: center;
margin: 45% auto;
font-size: 16px;
font-family: sans-serif;
color: #ffffff;
}
/* calé a gauche */
.color-shadow-2 {
overflow: hidden;
max-width: 150px;
height: 150px;
background-color: #ffffff;
margin: 20% 10% 10% 0;
border-radius: 50%;
border: 1px solid #ffffff;
box-shadow: 2px 4px 20px 5px rgba(57, 57, 59, 0.3);
}
.color-shadow-2 h1 {
text-align: center;
margin: 45% auto;
font-size: 16px;
font-family: sans-serif;
color: #39393b;
}
/* calé a droite */
.color-shadow-3 {
overflow: hidden;
margin: 20% 0 10% auto;
max-width: 150px;
height: 150px;
background-color: #a4c2f4;
border-radius: 50%;
border: 1px solid #a4c2f4;
box-shadow: 2px 4px 20px 5px rgba(57, 57, 59, 0.3);
}
.color-shadow-3 h1 {
text-align: center;
margin: 45% auto;
font-size: 16px;
font-family: sans-serif;
color: #39393b;
}
</style>
Grid références couleurs cercles
Grid références couleurs cercles
Code à copier et à intégrer avec votre propre couleur "background-color: #votre couleur;" ⬇️
<div class="container">
<div>
<div class="items color1"><h1>#073763</h1></div>
<div class="items color2"><h1>#ffffff</h1></div>
<div class="items color3"><h1>#a4c2f4</h1></div>
</div>
<div>
<div class="items color-shadow-1"><h1>#073763</h1></div>
<div class="items color-shadow-2"><h1>#ffffff</h1></div>
<div class="items color-shadow-3"><h1>#a4c2f4</h1></div>
</div>
</div>
<style>
.container {
background-color: #e1f5eb;
margin: 30px auto;
padding: 30px;
display: grid;
grid-template-rows: repeat(2,450px);
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 150px;
width: 90%;
}
.items {
width: 100%;
height: 100%;
background-color: red;
}
/* calé au centre */
.color1 {
overflow: hidden;
max-width: 150px;
height: 150px;
background-color: #073763;
margin: 5% auto;
border-radius: 50%;
border-width: 2px;
border-color: #efefef;
border-style: solid;
}
.color1 h1 {
text-align: center;
margin: 45% auto;
font-size: 16px;
font-family: sans-serif;
color: #ffffff;
}
/* calé a gauche */
.color2 {
overflow: hidden;
margin: 20% 10% 10% 0;
max-width: 150px;
height: 150px;
background-color: #ffffff;
border-radius: 50%;
border-width: 2px;
border-color: #efefef;
border-style: solid;
}
.color2 h1 {
text-align: center;
margin: 45% auto;
font-size: 16px;
font-family: sans-serif;
color: #39393b;
}
/* calé a droite */
.color3 {
overflow: hidden;
margin: 20% 0 10% auto;
max-width: 150px;
height: 150px;
background-color: #a4c2f4;
border-radius: 50%;
border-width: 2px;
border-color: #efefef;
border-style: solid;
}
.color3 h1 {
text-align: center;
margin: 45% auto;
font-size: 16px;
font-family: sans-serif;
color: #39393b;
}
/* calé au centre */
.color-shadow-1 {
overflow: hidden;
max-width: 150px;
height: 150px;
background-color: #073763;
margin: 5% auto;
border-radius: 50%;
border: 1px solid #073763;
box-shadow: 2px 4px 20px 5px rgba(57, 57, 59, 0.3);
}
.color-shadow-1 h1 {
text-align: center;
margin: 45% auto;
font-size: 16px;
font-family: sans-serif;
color: #ffffff;
}
/* calé a gauche */
.color-shadow-2 {
overflow: hidden;
max-width: 150px;
height: 150px;
background-color: #ffffff;
margin: 20% 10% 10% 0;
border-radius: 50%;
border: 1px solid #ffffff;
box-shadow: 2px 4px 20px 5px rgba(57, 57, 59, 0.3);
}
.color-shadow-2 h1 {
text-align: center;
margin: 45% auto;
font-size: 16px;
font-family: sans-serif;
color: #39393b;
}
/* calé a droite */
.color-shadow-3 {
overflow: hidden;
margin: 20% 0 10% auto;
max-width: 150px;
height: 150px;
background-color: #a4c2f4;
border-radius: 50%;
border: 1px solid #a4c2f4;
box-shadow: 2px 4px 20px 5px rgba(57, 57, 59, 0.3);
}
.color-shadow-3 h1 {
text-align: center;
margin: 45% auto;
font-size: 16px;
font-family: sans-serif;
color: #39393b;
}
</style>
Page updated
Google Sites
Report abuse