How can I adjust the width of how long the <hr class="content-divider"> is but I need it to be responsive. I don't want the line to go past from where the buttons on each side end.
My site code.
Here is the html to the line divider.
<hr class="content-divider">
Update css part
.content-divider {
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
position:relative; /*Add this*/
left:0px; /*Add this*/
right:0px; /*Add this*/
margin: 20px auto; /*Add this you can change as your need*/
max-width:70%; /*Add this*/
}
Working fiddle - fiddle link
body {
background-color: #1b1b1b;
}
#app {
display: none;
}
#splash {
margin: 200px auto;
}
#splash span {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
position: absolute;
left: 50%;
margin-left: -10px;
-webkit-animation: 3s infinite linear;
-moz-animation: 3s infinite linear;
-o-animation: 3s infinite linear;
}
#splash span:nth-child(2) {
background: white;
-webkit-animation: kiri 1.2s infinite linear;
-moz-animation: kiri 1.2s infinite linear;
-o-animation: kiri 1.2s infinite linear;
}
#splash span:nth-child(3) {
background: white;
z-index: 100;
}
#splash span:nth-child(4) {
background: white;
-webkit-animation: kanan 1.2s infinite linear;
-moz-animation: kanan 1.2s infinite linear;
-o-animation: kanan 1.2s infinite linear;
}
#-webkit-keyframes kanan {
0% {
-webkit-transform: translateX(20px);
}
50% {
-webkit-transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(20px);
z-index: 200;
}
}
#-moz-keyframes kanan {
0% {
-moz-transform: translateX(20px);
}
50% {
-moz-transform: translateX(-20px);
}
100% {
-moz-transform: translateX(20px);
z-index: 200;
}
}
#-o-keyframes kanan {
0% {
-o-transform: translateX(20px);
}
50% {
-o-transform: translateX(-20px);
}
100% {
-o-transform: translateX(20px);
z-index: 200;
}
}
#-webkit-keyframes kiri {
0% {
-webkit-transform: translateX(-20px);
z-index: 200;
}
50% {
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(-20px);
}
}
#-moz-keyframes kiri {
0% {
-moz-transform: translateX(-20px);
z-index: 200;
}
50% {
-moz-transform: translateX(20px);
}
100% {
-moz-transform: translateX(-20px);
}
}
#-o-keyframes kiri {
0% {
-o-transform: translateX(-20px);
z-index: 200;
}
50% {
-o-transform: translateX(20px);
}
100% {
-o-transform: translateX(-20px);
}
}
.n2j-loading-video {
width: 60px;
height: 60px;
margin: auto;
border-color: white transparent white transparent;
border-width: 5px;
border-style: solid;
animation: loading 1s ease infinite;
position: fixed;
border-radius: 50%;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body,
html {
width: 100%;
height: 100%;
}
.header1 {
text-align: center;
color: #f8f8f8;
}
.header-content>h1 {
font-size: 5rem;
font-family: sans-serif;
font-weight: 700;
margin: 0;
}
.header-content>h3 {
font-size: 3rem;
font-family: sans-serif;
font-weight: 400;
margin: 0;
}
.header-content {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.content-divider {
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
position: relative;
left: 0px;
right: 0px;
margin: 20px auto;
max-width: 70%;
}
.btn.outline {
background: none;
padding: 12px 22px;
}
.btn-primary.outline {
border: 2px solid #f8f8f8;
color: #f8f8f8;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active,
.open>.dropdown-toggle.btn-primary {
color: #f7ca18;
border-color: #f7ca18;
}
.btn-primary.outline:active,
.btn-primary.outline.active {
border-color: #f7ca18;
color: #f7ca18;
box-shadow: none;
}
ul.intro-social-buttons li {
padding-bottom: 10px;
}
<script>
setTimeout(function() {
document.getElementById('app').style['display'] = 'block';
document.getElementById('splash').style['display'] = 'none';
}, 3000);
</script>
<!--The script above is placed in head within my code-->
<body>
<div id="splash">
<div class='n2j-loading-video'></div>
</div>
<div id="app">
<div class="header1">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="header-content">
<h1 class="maintxt rotateInUpLeft animated">LIAM DOCHERTY</h1>
<h3 class="subtxt rotateInUpLeft animated">WEB DEVELOPER & GRAPHIC DESIGNER</h3>
<hr class="content-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Web Development Portfolio</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">GFX Design Portfolio</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">About Me</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Contact Me</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<script src="js/javascript.js"></script>
</body>
</html>
Related
I have two elements in which I want to mix them together, a button and a simple loader. each element works fine alone but I want to have them together so that the loader be positioned at the center of the button and still the style of the form doesn't ruin...
Here is the loader alone:
Note that if disabled class is attached to submit-container the loader would be visible:
.btn {
font-family: "IRANSansWeb";
max-width: 200px;
width: 100%;
height: 40px;
font-weight: 600;
margin: 5px 0;
margin-top: 15px;
cursor: pointer;
opacity: 1;
background: linear-gradient(to right, #9672fb, #d772fb);
border-radius: 30px;
border: none;
color: white;
box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
transition: 0.2s;
}
.submit-container:not(.disabled) .btn:active {
transform: translateY(5px) !important;
box-shadow: none !important;
}
.submit-container:not(.disabled) .btn:hover {
transform: translateY(1px);
box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}
.submit-container.disabled .submit {
opacity: 0.5;
cursor: default;
}
.submit-container.disabled .spinner {
display: inline-block;
}
.submit-container {
display: flex;
flex-direction: row;
max-width: 200px;
width: 100%;
position: relative;
}
.modal .submit-container {
height: 70px;
}
.spinner {
font-size: 20px;
position: absolute;
display: none;
width: 1em;
height: 1em;
}
.spinner.center {
left: 8%;
top: 50%;
margin-top: -5px;
}
.spinner-blade {
position: absolute;
left: 0.4629em;
bottom: 0;
width: 0.074em;
height: 0.2777em;
border-radius: 0.5em;
background-color: transparent;
transform-origin: center -0.2222em;
-webkit-animation: spinner-fade 1s infinite linear;
animation: spinner-fade 1s infinite linear;
}
.spinner-blade:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
transform: rotate(0deg);
}
.spinner-blade:nth-child(2) {
-webkit-animation-delay: 0.083s;
animation-delay: 0.083s;
transform: rotate(30deg);
}
.spinner-blade:nth-child(3) {
-webkit-animation-delay: 0.166s;
animation-delay: 0.166s;
transform: rotate(60deg);
}
.spinner-blade:nth-child(4) {
-webkit-animation-delay: 0.249s;
animation-delay: 0.249s;
transform: rotate(90deg);
}
.spinner-blade:nth-child(5) {
-webkit-animation-delay: 0.332s;
animation-delay: 0.332s;
transform: rotate(120deg);
}
.spinner-blade:nth-child(6) {
-webkit-animation-delay: 0.415s;
animation-delay: 0.415s;
transform: rotate(150deg);
}
.spinner-blade:nth-child(7) {
-webkit-animation-delay: 0.498s;
animation-delay: 0.498s;
transform: rotate(180deg);
}
.spinner-blade:nth-child(8) {
-webkit-animation-delay: 0.581s;
animation-delay: 0.581s;
transform: rotate(210deg);
}
.spinner-blade:nth-child(9) {
-webkit-animation-delay: 0.664s;
animation-delay: 0.664s;
transform: rotate(240deg);
}
.spinner-blade:nth-child(10) {
-webkit-animation-delay: 0.747s;
animation-delay: 0.747s;
transform: rotate(270deg);
}
.spinner-blade:nth-child(11) {
-webkit-animation-delay: 0.83s;
animation-delay: 0.83s;
transform: rotate(300deg);
}
.spinner-blade:nth-child(12) {
-webkit-animation-delay: 0.913s;
animation-delay: 0.913s;
transform: rotate(330deg);
}
#-webkit-keyframes spinner-fade {
0% {
background-color: #51386b;
}
100% {
background-color: transparent;
}
}
#keyframes spinner-fade {
0% {
background-color: #51386b;
}
100% {
background-color: transparent;
}
}
<div class="submit-container disabled">
<div class="spinner center">
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
</div>
</div>
Now I try to have both button and loader together:
.btn {
font-family: "IRANSansWeb";
max-width: 200px;
width: 100%;
height: 40px;
font-weight: 600;
margin: 5px 0;
margin-top: 15px;
cursor: pointer;
opacity: 1;
background: linear-gradient(to right, #9672fb, #d772fb);
border-radius: 30px;
border: none;
color: white;
box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
transition: 0.2s;
}
.submit-container:not(.disabled) .btn:active {
transform: translateY(5px) !important;
box-shadow: none !important;
}
.submit-container:not(.disabled) .btn:hover {
transform: translateY(1px);
box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}
.submit-container.disabled .submit {
opacity: 0.5;
cursor: default;
}
.submit-container.disabled .spinner {
display: inline-block;
}
.submit-container {
display: flex;
flex-direction: row;
max-width: 200px;
width: 100%;
position: relative;
}
.modal .submit-container {
height: 70px;
}
.spinner {
font-size: 20px;
position: absolute;
display: none;
width: 1em;
height: 1em;
}
.spinner.center {
left: 8%;
top: 50%;
margin-top: -5px;
}
.spinner-blade {
position: absolute;
left: 0.4629em;
bottom: 0;
width: 0.074em;
height: 0.2777em;
border-radius: 0.5em;
background-color: transparent;
transform-origin: center -0.2222em;
-webkit-animation: spinner-fade 1s infinite linear;
animation: spinner-fade 1s infinite linear;
}
.spinner-blade:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
transform: rotate(0deg);
}
.spinner-blade:nth-child(2) {
-webkit-animation-delay: 0.083s;
animation-delay: 0.083s;
transform: rotate(30deg);
}
.spinner-blade:nth-child(3) {
-webkit-animation-delay: 0.166s;
animation-delay: 0.166s;
transform: rotate(60deg);
}
.spinner-blade:nth-child(4) {
-webkit-animation-delay: 0.249s;
animation-delay: 0.249s;
transform: rotate(90deg);
}
.spinner-blade:nth-child(5) {
-webkit-animation-delay: 0.332s;
animation-delay: 0.332s;
transform: rotate(120deg);
}
.spinner-blade:nth-child(6) {
-webkit-animation-delay: 0.415s;
animation-delay: 0.415s;
transform: rotate(150deg);
}
.spinner-blade:nth-child(7) {
-webkit-animation-delay: 0.498s;
animation-delay: 0.498s;
transform: rotate(180deg);
}
.spinner-blade:nth-child(8) {
-webkit-animation-delay: 0.581s;
animation-delay: 0.581s;
transform: rotate(210deg);
}
.spinner-blade:nth-child(9) {
-webkit-animation-delay: 0.664s;
animation-delay: 0.664s;
transform: rotate(240deg);
}
.spinner-blade:nth-child(10) {
-webkit-animation-delay: 0.747s;
animation-delay: 0.747s;
transform: rotate(270deg);
}
.spinner-blade:nth-child(11) {
-webkit-animation-delay: 0.83s;
animation-delay: 0.83s;
transform: rotate(300deg);
}
.spinner-blade:nth-child(12) {
-webkit-animation-delay: 0.913s;
animation-delay: 0.913s;
transform: rotate(330deg);
}
#-webkit-keyframes spinner-fade {
0% {
background-color: #51386b;
}
100% {
background-color: transparent;
}
}
#keyframes spinner-fade {
0% {
background-color: #51386b;
}
100% {
background-color: transparent;
}
}
.settings-input label{
align-self: flex-start;
margin-bottom: 3px;
font-size: 13px;
color: #a697bb;
}
.settings-input .input-field {
display: flex;
flex-direction: column;
margin: 15px;
}
.settings-input div,
.settings-input .input-field,
.settings-input input {
position: relative;
}
.settings-input .container {
width: 300px;
display: flex;
align-items: center;
}
.settings-input button {
text-align: center;
font-family: "IRANSansWeb_Light";
font-size: 11.5px;
position: absolute;
left: 0;
background-color: #8f7cff;
outline: none;
border: none;
color: #00eff3;
cursor: pointer;
padding: 3.5px 0;
direction: ltr;
width: 3rem;
}
.settings-input button:hover {
color: white;
background-color: #9e91ef;
}
.settings-input input {
font-family: "Open Sans";
font-size: 13px;
display: inline-block;
direction: ltr;
text-align: center;
outline: none;
width: 300px;
background: #edc3ff4a;
color: #743db0;
padding: 4px 4px;
border-radius: 3px;
border: solid 1px;
border-color: transparent;
transition: all 0.3s ease-in;
padding-left: 1.2rem;
}
.settings-input input:focus {
color: #8e5bc5;
background: #fff;
border-color: #e38fff;
}
<div class="settings-input">
<div class="input-field">
<label>phone</label>
<div id="phone-input" class="container">
<input type="text" placeholder="enter your phone" />
<div class="submit-container disabled">
<div class="spinner center">
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
</div>
<button>apply</button>
</div>
</div>
</div>
<div class="input-field">
<label>email</label>
<div id="email-input" class="container">
<input type="email" placeholder="enter your email" />
<button>apply</button>
</div>
</div>
</div>
As you see the style of the form ruins and even the loader distortion occurs...
I just want to place the loader at the center of the button without ruining the form style..
How can I do this?
I did not improve the code as much as I had written in the comment. But this just fixes your issue. You can improve the layout a bit more later on.
The issue is that position: relative will create a new layout context. In this context, everything can be layered along the z-axis and all the child elements that have position: absolute will refer to the nearest relative parent. Therefore, you get this distortion effect.
Removed this ...
.settings-input div,
.settings-input .input-field,
.settings-input input {
position: relative;
}
Added that ...
button { [...] position: relative; }
And I moved the spinner inside the button.
Here you go:
.btn {
font-family: "IRANSansWeb";
max-width: 200px;
width: 100%;
height: 40px;
font-weight: 600;
margin: 5px 0;
margin-top: 15px;
cursor: pointer;
opacity: 1;
background: linear-gradient(to right, #9672fb, #d772fb);
border-radius: 30px;
border: none;
color: white;
box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
transition: 0.2s;
}
.submit-container:not(.disabled) .btn:active {
transform: translateY(5px) !important;
box-shadow: none !important;
}
.submit-container:not(.disabled) .btn:hover {
transform: translateY(1px);
box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}
.submit-container.disabled .submit {
opacity: 0.5;
cursor: default;
}
.submit-container.disabled .spinner {
display: inline-block;
}
.submit-container {
display: flex;
flex-direction: row;
max-width: 200px;
width: 100%;
position: relative;
}
.modal .submit-container {
height: 70px;
}
.spinner {
font-size: 20px;
position: absolute;
display: none;
width: 1em;
height: 1em;
}
.spinner.center {
left: 8%;
top: 50%;
transform: translateY(-50%)
}
.spinner-blade {
position: absolute;
left: 0.4629em;
bottom: 0;
width: 0.074em;
height: 0.2777em;
border-radius: 0.5em;
background-color: transparent;
transform-origin: center -0.2222em;
-webkit-animation: spinner-fade 1s infinite linear;
animation: spinner-fade 1s infinite linear;
}
.spinner-blade:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
transform: rotate(0deg);
}
.spinner-blade:nth-child(2) {
-webkit-animation-delay: 0.083s;
animation-delay: 0.083s;
transform: rotate(30deg);
}
.spinner-blade:nth-child(3) {
-webkit-animation-delay: 0.166s;
animation-delay: 0.166s;
transform: rotate(60deg);
}
.spinner-blade:nth-child(4) {
-webkit-animation-delay: 0.249s;
animation-delay: 0.249s;
transform: rotate(90deg);
}
.spinner-blade:nth-child(5) {
-webkit-animation-delay: 0.332s;
animation-delay: 0.332s;
transform: rotate(120deg);
}
.spinner-blade:nth-child(6) {
-webkit-animation-delay: 0.415s;
animation-delay: 0.415s;
transform: rotate(150deg);
}
.spinner-blade:nth-child(7) {
-webkit-animation-delay: 0.498s;
animation-delay: 0.498s;
transform: rotate(180deg);
}
.spinner-blade:nth-child(8) {
-webkit-animation-delay: 0.581s;
animation-delay: 0.581s;
transform: rotate(210deg);
}
.spinner-blade:nth-child(9) {
-webkit-animation-delay: 0.664s;
animation-delay: 0.664s;
transform: rotate(240deg);
}
.spinner-blade:nth-child(10) {
-webkit-animation-delay: 0.747s;
animation-delay: 0.747s;
transform: rotate(270deg);
}
.spinner-blade:nth-child(11) {
-webkit-animation-delay: 0.83s;
animation-delay: 0.83s;
transform: rotate(300deg);
}
.spinner-blade:nth-child(12) {
-webkit-animation-delay: 0.913s;
animation-delay: 0.913s;
transform: rotate(330deg);
}
#-webkit-keyframes spinner-fade {
0% {
background-color: #51386b;
}
100% {
background-color: transparent;
}
}
#keyframes spinner-fade {
0% {
background-color: #51386b;
}
100% {
background-color: transparent;
}
}
.settings-input label {
align-self: flex-start;
margin-bottom: 3px;
font-size: 13px;
color: #a697bb;
}
.settings-input .input-field {
display: flex;
flex-direction: column;
margin: 15px;
}
.settings-input .container {
width: 300px;
display: flex;
align-items: center;
}
.settings-input button {
text-align: center;
font-family: "IRANSansWeb_Light";
font-size: 11.5px;
position: relative;
left: 0;
background-color: #8f7cff;
outline: none;
border: none;
color: #00eff3;
cursor: pointer;
padding: 3.5px 0;
direction: ltr;
width: 3rem;
}
.settings-input button:hover {
color: white;
background-color: #9e91ef;
}
.settings-input input {
font-family: "Open Sans";
font-size: 13px;
direction: ltr;
text-align: center;
outline: none;
width: 300px;
background: #edc3ff4a;
color: #743db0;
padding: 4px 4px;
border-radius: 3px;
border: solid 1px;
border-color: transparent;
transition: all 0.3s ease-in;
padding-left: 1.2rem;
box-sizing: border-box;
}
.settings-input input:focus {
color: #8e5bc5;
background: #fff;
border-color: #e38fff;
}
<div class="settings-input">
<div class="input-field">
<label>phone</label>
<div id="phone-input" class="container">
<input type="text" placeholder="enter your phone" />
<div class="submit-container disabled">
<button>
<div class="spinner center">
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
</div>
<span>apply</span>
</button>
</div>
</div>
</div>
<div class="input-field">
<label>email</label>
<div id="email-input" class="container">
<input type="email" placeholder="enter your email" />
<button>apply</button>
</div>
</div>
</div>
I am trying to create the equivalent of an IF statement in CSS. I have a small circle rotating around a larger circle. When the smaller circle reaches each of the points i want to fade in text in the centre.
Not sure if it's possible using CSS to say, when the small circle reaches x/y point then activate fade in text animation.
#keyframes clockwiseRotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
#keyframes counterClockwiseRotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(-360deg)
}
}
i {
animation: counterClockwiseRotate 25s linear infinite
}
body {
background-color: #022052;
}
.circle1{
border: 1px solid #0462FF;
width: 350px;
height: 350px;
position: absolute;
left: 24.3%;
top: 30px;
border-radius: 50%;
}
.link{
color:#fff;
width:20px;
height: 20px;
border-radius:50%;
border:1px solid #444;
position: absolute;
text-align: center;
line-height:33px;
}
.fb{
background:#0462FF;
border-color:#0462FF;
transform:translate(40px,40px);
}
.cp{
background:#0462FF;
border-color:#0462FF;
transform:translate(285px,40px);
}
.li{
background:#0462FF;
border-color:#0462FF;
transform:translate(300px,270px);
}
.tw{
background:#0462FF;
border-color:#0462FF;
transform:translate(25px,270px);
}
.an{
background:#0462FF;
border-color:#0462FF;
transform:translate(25px,270px);
}
.circle2{
border: 1px solid #0462FF;
width: 350px;
height: 350px;
position: absolute;
left: 24.3%;
top: 30px;
border-radius: 50%;
animation: clockwiseRotate 25s linear infinite;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Rotating circle</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel='stylesheet prefetch'
href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/
materialize.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="circle2">
<li class="link an"><i class="an an-new"></i></li>
</ul>
<ul class="circle1">
<li class="link fb"><i class="fa fa-facebook"></i></li>
<li class="link tw"><i class="fa fa-twitter"></i></li>
<li class="link li"><i class="fa fa-linkedin"></i></li>
<li class="link cp"><i class="fa fa-codepen"></i></li>
</ul>
</body>
</html>
Here is a working example of how you can accomplish fading text based on your parameters. Given that you have only four points, it's quite easy to calculate. I used percentages with opacity in my example.
#keyframes clockwiseRotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
#keyframes counterClockwiseRotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(-360deg)
}
}
i {
animation: counterClockwiseRotate 25s linear infinite
}
body {
background-color: #022052;
}
.circle1{
border: 1px solid #0462FF;
width: 350px;
height: 350px;
position: absolute;
left: 24.3%;
top: 30px;
border-radius: 50%;
}
.link{
color:#fff;
width:20px;
height: 20px;
border-radius:50%;
border:1px solid #444;
position: absolute;
text-align: center;
line-height:33px;
}
.fb{
background:#0462FF;
border-color:#0462FF;
transform:translate(40px,40px);
}
.cp{
background:#0462FF;
border-color:#0462FF;
transform:translate(285px,40px);
}
.li{
background:#0462FF;
border-color:#0462FF;
transform:translate(300px,270px);
}
.tw{
background:#0462FF;
border-color:#0462FF;
transform:translate(25px,270px);
}
.an{
background:#0462FF;
border-color:#0462FF;
transform:translate(25px,270px);
}
.circle2{
border: 1px solid #0462FF;
width: 350px;
height: 350px;
position: absolute;
left: 24.3%;
top: 30px;
border-radius: 50%;
animation: clockwiseRotate 25s linear infinite;
}
.circle3 {
width: 350px;
height: 350px;
position: absolute;
left: 24.3%;
top: 30px;
border-radius: 50%;
}
.circle3 > li {
width: 350px;
height: 350px;
position: absolute;
top: 0px;
left: 0px;
color: #FFF;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
opacity: 0;
}
.circle3 > li.facebook {
animation: fadeFacebook 25s linear infinite;
}
.circle3 > li.twitter {
animation: fadeTwitter 25s linear infinite;
}
.circle3 > li.linkedin {
animation: fadeLinkedin 25s linear infinite;
}
.circle3 > li.codepen {
animation: fadeCodepen 25s linear infinite;
}
#keyframes fadeTwitter {
0%, 20% {
opacity: 1;
}
25%, 95% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeFacebook {
0%, 20% {
opacity: 0;
}
25%, 45% {
opacity: 1;
}
50% {
opacity: 0;
}
}
#keyframes fadeCodepen {
0%, 45% {
opacity: 0;
}
50%, 70% {
opacity: 1;
}
75% {
opacity: 0;
}
}
#keyframes fadeLinkedin {
0%, 70% {
opacity: 0;
}
75%, 95% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css'>
<ul class="circle2">
<li class="link an"><i class="an an-new"></i></li>
</ul>
<ul class="circle1">
<li class="link fb"><i class="fa fa-facebook"></i></li>
<li class="link tw"><i class="fa fa-twitter"></i></li>
<li class="link li"><i class="fa fa-linkedin"></i></li>
<li class="link cp"><i class="fa fa-codepen"></i></li>
</ul>
<ul class="circle3">
<li class="text facebook">Facebook</li>
<li class="text twitter">Twitter</li>
<li class="text linkedin">Linkedin</li>
<li class="text codepen">Codepen</li>
</ul>
I have created a example for you based on transition timings...You will need to make only two animation, one for the rotation of the circle rotate and second for the text fade fade...You will also need to play with some animation-delay...
* {
box-sizing: border-box;
}
.circle {
font: 13px Verdana;
width: 150px;
height: 150px;
background: #022052;
border-radius: 50%;
margin: 30px auto 0;
position: relative;
box-shadow: 0 0 0 10px #022052;
}
.circle i {
position: absolute;
width: 20px;
height: 20px;
background: #0e61fb;
border-radius: 50%;
color: #fff;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.circle i.fa-facebook {
left: calc(90%);
top: calc(10%);
}
.circle i.fa-twitter {
left: calc(90%);
top: calc(90%);
}
.circle i.fa-linkedin {
left: calc(10%);
top: calc(90%);
}
.circle i.fa-codepen {
left: calc(10%);
top: calc(10%);
}
.pin,
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
}
.pin {
animation: rotate 8s linear infinite;
}
.pin:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #0e61fb;
border-radius: 50%;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes fade {
0%,
12.5% {
opacity: 0;
}
12.6%,
37.5% {
opacity: 1;
}
37.6%,
100% {
opacity: 0;
}
}
.text p {
position: absolute;
margin: 0;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: fade 8s linear infinite;
color: #fff;
}
.text p:nth-child(1) {
animation-delay: 0s;
}
.text p:nth-child(2) {
animation-delay: 2s;
}
.text p:nth-child(3) {
animation-delay: 4s;
}
.text p:nth-child(4) {
animation-delay: 6s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="circle">
<div class="pin"></div>
<div class="text">
<p>Facebook</p>
<p>Twitter</p>
<p>Linkedin</p>
<p>Codepen</p>
</div>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-codepen"></i>
</div>
been working and learning to build this page for about 4-5 hours and I cannot seem to find out why I am unable to get the navigation links on the same line as the navbar-logo and secondly is there any way I could make this code more efficient and less dependent/error-prone?
One more thing I wanted to ask is can we use flexbox in this webpage? and is CSS animation used is efficient here?
body{
background-color: #000;
color: #f1f1f1;
animation: fade-in 2s 1;
}
header{
width: 100%;
height: 10%;
margin: auto;
}
.navbar-logo{
padding: 2px 0px 2px 100px;
position: absolute;
z-index: 100;
}
.navbar-logo-sub{
padding: 55px 0px 0px 200px;
}
#logo-main{
font-family: 'Didact Gothic', sans-serif;
color: white;
font-size: 40px;
font-weight: 800;
margin: 0;
}
.parenthesis1{
color: #b22121;
font-family: 'Bungee', cursive;
}
.parenthesis2{
color: #787878;
font-family: 'Bungee', cursive;
}
#logo-sub{
color: white;
font-size: 14px;
font-weight: 20;
font-family: 'Coming Soon', cursive;
}
#banner-image{
width: 50%;
padding-left: 20%;
filter: blur(3px);
position: relative;
padding-top: 5%;
}
#banner-text{
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
font-size: 50px;
text-align: left;
}
nav{
padding: 0px 0px 0px 60%;
}
li{
float: left;
margin-right: 100px;
list-style-type: none;
}
a{
text-decoration: none;
color: white;
}
h1{
margin-top: 0px;
margin-bottom: -50px;
font-family: 'Permanent Marker', cursive;
font-weight: 300;
text-shadow: 4px 2px rgba(238, 238, 238, 0.5);
opacity: 0;
-webkit-animation: slide-in 3s 1 forwards;
}
div h1:nth-of-type(2){
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
div h1:nth-of-type(3){
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
div h1:nth-of-type(4){
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
div h1:nth-of-type(5){
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
div h1:nth-of-type(6){
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
div h1:nth-of-type(7){
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
div h1:nth-of-type(8){
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
div h1:nth-of-type(9){
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
#keyframes slide-in {
0%{
transform: rotateY(90deg) translateY(-50%);
opacity: 0.0;
}
100%{
transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
#-webkit-keyframes slide-in {
0%{
-webkit-transform: rotateY(90deg) translateY(25%);
opacity: 0.0;
}
100%{
-webkit-transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
#keyframes fade-in {
0%{
opacity: 0.0;
}
50%{
opacity: 0.5;
}
100%{
opacity: 1.0;
}
<html>
<head>
<title>.whatsthecode.</title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css?
family=Didact+Gothic|Coming+Soon|Bungee|Permanent+Marker" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar-logo">
<p id="logo-main">WhatsTheCode<span class="parenthesis1">(</span>
<span class="parenthesis2">)</span></p>
</div>
<div class="navbar-logo-sub"><p id="logo-sub">{<html><span style="color: #b22121"><style></span><span style="color: #787878"><script></span>}</p></div>
<nav>
<ul>
<li>Home</li>
<li>FAQ</li>
<li>About</li>
</ul>
</nav>
</header>
<section>
<div class="banner">
<img src="banner-background.png" id="banner-image">
<div id="banner-text"><h1>Your</h1><h1>web development</h1>
<h1>develops</h1><h1>here.</h1></div>
</div>
</section>
</body>
</html>
Here you go brother, I added a div with class="navbar-wrapper" and placed the header elements inside it. I used the display:inline-block on the header elements so that they are horizontally aligned. For the navbar-logo-sub, I placed it inside the navbar-logo and used position:absolute, and bottom:0 to place it at the bottom of the parent element. Run Code snippet and view it on full page.
body {
background-color: #000;
color: #f1f1f1;
animation: fade-in 2s 1;
}
header {
width: 100%;
}
.navbar-wrapper{
padding-left:50px; padding-right:50px;
}
header .navbar-logo {
display: inline-block;
position: relative;
}
header nav {
display: inline-block;
}
header .navbar-logo-sub {
display: block;
position: absolute;
bottom: 0;
left: 20%;
}
nav {
padding: 0px;
margin: 0px;
}
header li {
float: left;
margin-right: 50px;
list-style-type: none;
}
header li:last-of-type {
margin-right: 0px;
}
a {
text-decoration: none;
color: white;
}
#logo-main {
font-family: 'Didact Gothic', sans-serif;
color: white;
font-size: 2.3em;
font-weight: 800;
margin: 0;
}
.parenthesis1 {
color: #b22121;
font-family: 'Bungee', cursive;
}
.parenthesis2 {
color: #787878;
font-family: 'Bungee', cursive;
}
#logo-sub {
color: white;
font-size: 14px;
font-weight: 20;
font-family: 'Coming Soon', cursive;
}
#banner-image {
width: 50%;
padding-left: 20%;
filter: blur(3px);
position: relative;
padding-top: 5%;
}
#banner-text {
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
font-size: 50px;
text-align: left;
}
h1 {
margin-top: 0px;
margin-bottom: -50px;
font-family: 'Permanent Marker', cursive;
font-weight: 300;
text-shadow: 4px 2px rgba(238, 238, 238, 0.5);
opacity: 0;
-webkit-animation: slide-in 3s 1 forwards;
}
div h1:nth-of-type(2) {
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
div h1:nth-of-type(3) {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
div h1:nth-of-type(4) {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
div h1:nth-of-type(5) {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
div h1:nth-of-type(6) {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
div h1:nth-of-type(7) {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
div h1:nth-of-type(8) {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
div h1:nth-of-type(9) {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
#keyframes slide-in {
0% {
transform: rotateY(90deg) translateY(-50%);
opacity: 0.0;
}
100% {
transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
#-webkit-keyframes slide-in {
0% {
-webkit-transform: rotateY(90deg) translateY(25%);
opacity: 0.0;
}
100% {
-webkit-transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
#keyframes fade-in {
0% {
opacity: 0.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1.0;
}
<html>
<head>
<title>.whatsthecode.</title>
<link href="https://fonts.googleapis.com/css?
family=Didact+Gothic|Coming+Soon|Bungee|Permanent+Marker" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar-wrapper">
<div class="navbar-logo">
<p id="logo-main">WhatsTheCode<span class="parenthesis1">(</span>
<span class="parenthesis2">)</span></p>
<div class="navbar-logo-sub">
<p id="logo-sub">{<html><span style="color: #b22121"><style></span><span style="color:
#787878"><script></span>}</p>
</div>
</div>
<nav>
<ul>
<li>Home</li>
<li>FAQ</li>
<li>About</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="banner">
<img src="banner-background.png" id="banner-image">
<div id="banner-text">
<h1>Your</h1>
<h1>web development</h1>
<h1>develops</h1>
<h1>here.</h1>
</div>
</div>
</section>
</body>
</html>
I have some moving word css3 animation.
The animation is fine (snippet). If someone use hover the animation stops (fine), but don't accept a change of the opacity and z-index (.bubble:hover).
opacity: 1;
z-index: 100;
The .bubble:hover class is in use the transform action works.
transform: scale(1.2);
The aim is to pop the hovered bubble in the foreground.
If the bubble is left the animation should move on from the point of stop.
How can I fix it?
Thanks for help.
.solSystem {
postion: absolute;
height: 25vw;
}
.orbitLink,
.orbitLink:active,
.orbitLink:visited {
color: #FFF;
}
.mars:hover,
.earth:hover {
animation-play-state: paused;
}
.bubble:hover {
background: #DE383B !Important;
padding: 1vw;
border: 0.1vw solid #000;
color: #FFF !Important;
transform: scale(1.2);
opacity: 1;
z-index: 100;
}
.mars {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveRigthToLeft, scale, color;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.earth {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveLeftToRigth, scale, color;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.bubble {
padding: 1vw;
color: #FFF;
border-color: #000;
border-width: 0.1vw;
background-color: #004A99;
font-weight: bold;
font-size: 1.1vw;
font-family: Arial, FreeSans, sans-serif;
position: absolute;
border-style: solid;
border-radius: 100%;
}
#keyframes moveLeftToRigth {
0% {
left: 15vw;
}
50% {
left: 40vw;
}
100% {
left: 15vw;
}
}
#keyframes scale {
0% {
transform: scale(1);
}
32% {
transform: scale(0.7);
animation-timing-function: ease-in;
}
70% {
transform: scale(0.8);
animation-timing-function: ease-in;
}
75% {
transform: scale(0.9);
animation-timing-function: ease-in-out;
}
86% {
transform: scale(1.2);
}
98% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes color {
0% {
opacity: 0.5;
z-index: 1;
}
20% {
opacity: 0.6;
z-index: 2;
}
40% {
opacity: 0.7;
z-index: 3;
}
60% {
opacity: 0.8;
z-index: 4;
}
80% {
opacity: 0.9;
z-index: 5;
}
90% {
opacity: 1;
z-index: 6;
}
95% {
opacity: 0.8;
z-index: 4;
}
100% {
opacity: 0.6;
z-index: 2;
}
}
<div class="solSystem">
<a href="Test1.html">
<div class="earth" style="animation-duration: 20s,20s,20s;">
<div class="bubble" style="left:12vw;">
Test1
</div>
</div>
</a>
<a href="Test2.html">
<div class="mars" style="animation-duration: 30s,30s,30s;">
<div class="bubble" style="left:30vw;">
Test2
</div>
</div>
</a>
</div>
This happend cause you gave to parent div less opacity with "color" keyframes and then apply that animation to parent of a hovered div. You should make color changes on "bubble" div.
codepen:
http://codepen.io/bra1N/pen/dXKLbp
.solSystem {
postion: absolute;
height: 25vw;
}
.orbitLink,
.orbitLink:active,
.orbitLink:visited {
color: #FFF;
}
.mars:hover,
.earth:hover {
animation-play-state: paused;
}/*
.bubble:hover {
background: #DE383B !Important;
padding: 1vw;
border: 0.1vw solid #000;
color: #FFF !Important;
transform: scale(1.2);
opacity: 1 !important;
z-index: 100 !important;
}*/
.mars {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveRigthToLeft, scale;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.earth {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveLeftToRigth, scale;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.bubble {
padding: 1vw;
color: #FFF;
border-color: #000;
border-width: 0.1vw;
background-color: #004A99;
font-weight: bold;
font-size: 1.1vw;
font-family: Arial, FreeSans, sans-serif;
position: absolute;
border-style: solid;
border-radius: 100%;
animation-name: color;
animation-iteration-count: infinite;
animation-duration: 30s;
}
#keyframes moveLeftToRigth {
0% {
left: 15vw;
}
50% {
left: 40vw;
}
100% {
left: 15vw;
}
}
#keyframes scale {
0% {
transform: scale(1);
}
32% {
transform: scale(0.7);
animation-timing-function: ease-in;
}
70% {
transform: scale(0.8);
animation-timing-function: ease-in;
}
75% {
transform: scale(0.9);
animation-timing-function: ease-in-out;
}
86% {
transform: scale(1.2);
}
98% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes color {
0% {
opacity: 0.4;
z-index: 1;
}
20% {
opacity: 0.6;
z-index: 2;
}
40% {
opacity: 0.7;
z-index: 3;
}
60% {
opacity: 0.8;
z-index: 4;
}
80% {
opacity: 0.9;
z-index: 5;
}
90% {
opacity: 1;
z-index: 6;
}
95% {
opacity: 0.8;
z-index: 4;
}
100% {
opacity: 0.6;
z-index: 2;
}
}
<div class="solSystem">
<a href="Test1.html">
<div class="earth" style="animation-duration: 20s,20s,20s;">
<div class="bubble" style="left:12vw;">
Test1
</div>
</div>
</a>
<a href="Test2.html">
<div class="mars" style="animation-duration: 30s,30s,30s;">
<div class="bubble" style="left:30vw;">
Test2
</div>
</div>
</a>
</div>
I am a noob in website development. Im trying for a simple website for registration but have no idea how to position the layouts. I am too confused with the div tags.
I have already tried and played a lot with inspect element. After bit of trial and error I was able to position the website properly in chrome browser. However when I switched the browser to firefox and opened the same file, all the layout got changed. I primarily doubt on positioning !the spanning, animated text in my website. It changes position on switching browser.
Any help will be appreciated. Thanks in advance! Im also posting screenshots for both browsers i.e Chrome and Firefox.! In chrome it works fine but not in firefox. Also the rotating text become larger as I reduce the size of viewport
/* Header */
.large-header {
position: absolute;
width: 100%;
background: #333;
overflow: hidden;
background-size: cover;
background-position: center center;
z-index: 1;
}
.demo-1 .large-header {
background-image: url('../img/demo-1-bg.jpg');
background-position: center bottom;
overflow: scroll;
}
.payment {
width: 100px;
height: 100px;
}
.main-title {
display: inline-table;
position: absolute;
margin: 0;
padding: 0;
color: #f9f1e9;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.demo-1 .main-title {
text-transform: uppercase;
font-size: 3.5em;
letter-spacing: 0.1em;
}
.demo-2 .main-title {
font-family: 'Clicker Script', cursive;
font-weight: normal;
font-size: 8em;
padding-left: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.demo-2 .main-title::before {
content: '';
width: 20vw;
height: 20vw;
min-width: 3.5em;
min-height: 3.5em;
background: url(../img/deco.svg) no-repeat center center;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
z-index: -1;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.demo-3 .main-title {
padding: 10px 40px;
border: 10px double #f9f1e9;
text-transform: uppercase;
font-family: Londrina Outline, sans-serif;
}
.demo-4 .main-title {
font-size: 6em;
font-weight: 300;
padding: 10px 30px;
text-transform: uppercase;
color: #222;
}
.main-title .thin {
font-weight: 100;
font-size: 24px;
font-family: initial;
display: table-row-group;
}
#media only screen and (max-width: 768px) {
.demo-1 .main-title,
.demo-3 .main-title,
.demo-4 .main-title {
font-size: 3em;
}
.demo-2 .main-title {
font-size: 4em;
}
}
/*Rotating titles*/
.rw-words {
position: absolute;
text-align: center;
height: 25%;
width: 1140px;
top: 45%;
font-style: cursive;
font-family: serif;
-webkit-perspective: 800px;
perspective: 800px;
}
.rw-words span {
position: absolute;
width: 100%;
height: 50%;
text-align: center;
font-size: 100%;
float: right;
margin-left: -554px;
color: transparent;
margin-top: -13px;
text-shadow: 0px 0px 80px rgba(255, 255, 255, 1);
opacity: 0;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.rw-words span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.rw-words span:nth-child(6) {
-webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(-200px) translateZ(300px) rotateY(-120deg);
}
5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateY(0px) translateZ(0px) rotateY(0deg);
}
6% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
color: #fff;
}
17% {
opacity: 1;
text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
color: #fff;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
-ms-transform: translateY(-200px) translateZ(300px) rotateY(-120deg);
}
5% {
opacity: 1;
-ms-animation-timing-function: ease-out;
-ms-transform: translateY(0px) translateZ(0px) rotateY(0deg);
}
6% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
color: #fff;
}
17% {
opacity: 1;
text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
color: #fff;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-transform: translateY(-200px) translateZ(300px) rotateY(-120deg);
transform: translateY(-200px) translateZ(300px) rotateY(-120deg);
}
5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateY(0px) translateZ(0px) rotateY(0deg);
transform: translateY(0px) translateZ(0px) rotateY(0deg);
}
6% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
color: #fff;
}
17% {
opacity: 1;
text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
color: #fff;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#media screen and (max-width: 1060px) {
.rw-sentence > span:first-child {
font-size: 500%;
left: 0px;
}
.rw-sentence > span:nth-child(2) {
font-size: 200%;
top: 125px;
left: 30px;
}
.rw-sentence > span:nth-child(3) {
top: 175px;
left: 30px;
font-size: 235%;
}
.rw-words {
left: 95px;
top: 171px;
}
.rw-words span {
font-size: 250%;
}
.rw-sentence > span:last-child {
top: 240px;
left: 30px;
}
}
#media screen and (max-width: 400px) {
.rw-sentence > span:first-child {
font-size: 200%;
left: 0px;
}
.rw-sentence > span:nth-child(2) {
font-size: 100%;
top: 50px;
left: 10px;
}
.rw-sentence > span:nth-child(3) {
top: 76px;
left: 10px;
font-size: 120%;
}
.rw-words {
left: 45px;
top: 76px;
}
.rw-words span {
font-size: 120%;
}
.rw-sentence > span:last-child {
top: 106px;
left: 10px;
font-size: 100%;
}
}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="http://localhost/Project/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/Project/css/component.css " />
</head>
<body>
<div class="container demo-1">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title" style="font-family: initial;
font-style: initial;">Welcome to NextGen Ticketing <span class="thin" style="font-size:26px font-family:"fantasy" "><br/><font color="white" >Relieve yourself from</font></span>
<div class="rw-words">
<span>Queues</span>
<span>Inconvenience</span>
<span>Chisels</span>
<span>Register Today!</span>
</div> <br/><br/><span class="thin"><br/>Let's get Registered by<br/>Clicking here</span>
<span><p style="font-family: initial;
font-size: x-large;
font-style: normal;
font-weight: 600;">Refill wallet here</p></div></span></h1>
</h1>
Refill wallet here
</div>
</h1>
</div>
</div>
</div>
<!-- /container -->
<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-1.js"></script>
</body>
</html>