<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="back-gradient justify-content-center text-center">
<div class="cont justify-content-center text-center">
<div class="welcome" data-text="Welcome">
Welcome
</div>
</div>
.back-gradient {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
padding: 0.5%;
}
.welcome{
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
font-size: 10vw;
text-transform: uppercase;
color: #fff;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.733);
width: 100%;
height: 80%;
background-size: 1000% 800%;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
}
.back-gradient, .welcome {
background: linear-gradient(90deg, #660033, #ffcc99, #c999ff, #13dbdb, #003535, #660033);
background-size: 1000% 600%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
@-webkit-keyframes Gradient {
0% {
background-position: -1% 0;
}
100% {
background-position: 110% 0;
}
}
@-moz-keyframes Gradient {
0% {
background-position: -1% 0;
}
100% {
background-position: 110% 0;
}
}
@keyframes Gradient {
0% {
background-position: -1% 0;
}
100% {
background-position: 110% 0;
}
}
.cont{
background-color: black;
width: 100%;
height: 100%;
}
@media only screen and (min-width: 1000px) and (max-width: 1300px) {
.back-gradient, .welcome {
background: linear-gradient(90deg, #660033, #ffcc99, #c999ff, #13dbdb, #003535, #660033);
background-size: 1000% 400% !important;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
}
@media only screen and (min-width: 768px) and (max-width: 1000px) {
.back-gradient{
padding: 1%;
}
.back-gradient, .welcome {
background: linear-gradient(90deg, #660033, #ffcc99, #c999ff, #13dbdb, #003535, #660033);
background-size: 800% 250% !important;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0 0;
}
100% {
background-position: 115% 0;
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0 0;
}
100% {
background-position: 115% 0;
}
}
@keyframes Gradient {
0% {
background-position: 0 0;
}
100% {
background-position: 115% 0;
}
}
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
.back-gradient{
padding: 2%;
}
.back-gradient, .welcome {
background: linear-gradient(90deg, #660033, #ffcc99, #c999ff, #13dbdb, #003535, #660033);
background-size: 800% 200% !important;
-webkit-animation: Gradient 12s ease infinite;
-moz-animation: Gradient 12s ease infinite;
animation: Gradient 12s ease infinite;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0 0;
}
100% {
background-position: 115% 0;
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0 0;
}
100% {
background-position: 115% 0;
}
}
@keyframes Gradient {
0% {
background-position: 0 0;
}
100% {
background-position: 115% 0;
}
}
}
/*************************************** BANDIERE ***************************************/
.row{
width: 60%;
margin: 5% 20% !important;
}
#link_it, #link_en{
width: 90%;
}
#it, #en{
border-radius: 50%;
box-shadow: 0px 0px 15px -3px rgba(196,196,196,1);
}
@media only screen and (max-width: 2000px) {
#it, #en{
max-width: 20% !important;
}
}
