I have this image that I want as the background for the index page. But when I zoom in the background images appears between the form fields instead of going behind the form as it should. The body of the index page comprises a main element which consists of an aside element and a section. The section contains two forms, one for login and another for sign up with 2 buttons for the same. For clarity, vide the code given below.
1) The main problem I am facing is when I zoom in, approximately around and beyond 400%. The background image appears between the "email" and "password" fields of the login-form(active) on zooming in. I want the background image to actually be in the background and stay behind all of the content of the main tag, i.e basically behind the entire form and the aside image.
2) Additionally, you may notice when you zoom in that the log in or the sign up button do not appear at the end of the form, rather they appear mid-way with a big white space below it. I want those buttons to be at the very bottom of the form on zooming in.
3) Lastly, one may also notice how the upper portion of the svg image I have used in the aside tag is cut off when zoomed in and repositioned. With that, the intro text below the svg also appear behind the "LOGIN" and "SIGN UP" anchor tags when zoomed in. It would be nicer if they would all be non-overlapping or not cropped off.
P.S.- I have used inline svg. So skip or fold the long piece of svg code to not be agonised.(*Brownie points for someone who can suggest how to use external svg with the animation working. I have tried object, embed and img but to no avail*).
You can use any downloaded image as background by placing it inside the img folder and naming it "bg-index.jpeg".
HTML/JSP
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Login << Exam Nation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Take an Exam--Test Yourself | Exam Nation " />
<meta name="keywords" content="exam nation, online examination system, log in, sign up, index, default page, fallback page" />
<meta name="author" content="Akash Das" />
<!--===============================================================================================-->
<script src="https://use.typekit.net/lkh0ago.js"></script>
<!--===============================================================================================-->
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!--===============================================================================================-->
<link rel="shortcut icon" href="img/icons/favicon.ico" type="image/x-icon">
<!--===============================================================================================-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" href="css/style.css">
<!--===============================================================================================-->
</head>
<!--style="background: url(img/bg-index.jpeg) no-repeat center center fixed; background-size: cover; height: 100%; overflow: hidden;"-->
<body>
<main ontouchstart class="with-hover">
<aside>
<div></div>
<svg viewBox="0 0 100 100">
<g stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M65.892702,73 C70.3362168,68.5836139 73.0845878,62.4824333 73.0845878,55.7432553 C73.0845878,49.0040774 70.3362168,42.9028968 65.892702,38.4865107 C61.4491873,34.0701246 55.3105288,31.338533 48.5299539,31.338533 C41.749379,31.338533 35.6107205,34.0701246 31.1672058,38.4865107 C26.723691,42.9028968 23.97532,49.0040774 23.97532,55.7432553 C23.97532,62.4824333 26.723691,68.5836139 31.1672058,73 C31.1672058,73 65.892702,73 65.892702,73 Z M73.0594097,62.3985471 C76.4680437,61.2200182 88.5607213,56.1793944 85.5117743,37.8371245 L81.6924976,37.9360303 C80.8526284,43.134546 77.152648,46.6051883 72.4845099,46.6051883 M24.4062209,60.319036 C24.3904842,60.3191058 24.3747393,60.3191408 24.3589862,60.3191408 C18.6378761,60.3191408 14,55.70958 14,50.0233985 C14,44.3372171 18.6378761,39.7276563 24.3589862,39.7276563 C26.0569266,39.7276563 27.6594543,40.133673 29.0736464,40.8533508 M65.8946819,38.4867877 L31.1652244,38.4844448 M37.6782363,44.9577899 C34.9010396,47.7180312 33.1833077,51.5312691 33.1833077,55.7432553 C33.1833077,59.9552416 34.9010396,63.7684794 37.6782363,66.5287208 M45.4606247,29.0505903 L51.5992831,29.0505903 M48.5299539,26 L48.5299539,31.338533"></path>
</g>
</svg>
<div>
<p id="intro-signup"><br/>Be a citizen of <strong>Exam Nation</strong> with an account.</p>
<p id="intro-login" class="active"><br/>Welcome back to<br/><strong>Exam Nation</strong>!</p>
</div>
</aside>
<section>
<h1>
<a id="link-login" class="active">Login</a>
<a id="link-signup">Register</a>
</h1>
<form id="form-signup" action="test1.html" method="POST">
<div>
<fieldset>
<div>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Full Name" required/>
</div>
</fieldset>
<fieldset>
<div>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="abc#xyz.com" required/>
</div>
</fieldset>
<fieldset>
<div>
<label for="password">Password</label>
<input id="password" name="password" type="password" placeholder="••••••••" required/>
</div>
</fieldset>
</div>
<ul>
<li>
<button class="fb">Connect with Facebook</button>
</li>
<li>
<button class="tw">Connect with Twitter</button>
</li>
</ul>
<input type="submit" value="Sign Up"/>
</form>
<form id="form-login" class="active" action="test2.html" method="POST">
<div>
<fieldset>
<div>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="abc#xyz.com" required/>
</div>
</fieldset>
<fieldset>
<div>
<label for="password">Password</label>
<input id="password" name="password" type="password" placeholder="••••••••" required/>
</div>
</fieldset>
</div>
<ul>
<li>
<button class="fb">Connect with Facebook</button>
</li>
<li>
<button class="tw">Connect with Twitter</button>
</li>
</ul>
<input type="submit" value="Log In"/>
</form>
</section>
</main>
<!--===============================================================================================-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<!--===============================================================================================-->
<script src="js/index.js"></script>
<!--===============================================================================================-->
</body>
</html>
CSS
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:focus {
outline: none !important;
}
body, html {
height: 100%;
}
body {
background: url(../img/bg-index.jpeg) no-repeat center center;
background-size: cover;
height: 100%;
overflow: auto;
margin: 0;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
color: #857567;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
main {
background: white;
height: 100%;
}
main aside {
position: relative;
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: center;
height: calc(100% / 3);
padding: 12px;
background: #DFB72C url("../img/table-pc.jpg") no-repeat center center/cover;
}
.
.
.
main aside svg {
position: relative;
margin-top: -24px;
width: 120px;
height: 120px;
}
main aside p {
position: relative;
width: 100%;
padding : 5px;
margin: 0;
color: white;
font-size: 22px;
line-height: 1.2;
text-align: center;
text-shadow: 0 0 10px rgba(133, 117, 103, 0.5);
}
main aside p strong {
font-weight: 700;
}
main section form input[type="submit"] {
display: block;
align-self: flex-end;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
margin: 0;
border: 0;
border-radius: 0;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 24px;
text-transform: capitalize;
line-height: 2;
background: #DFB72C;
color: white;
cursor: pointer;
}
.
.
.
#media only screen and (min-width: 624px) {
body {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
background: url(../img/bg-index.jpeg) no-repeat center center;
background-size: cover;
height: 100%;
overflow: auto;
}
main {
display: flex;
border-radius: 2px;
overflow: hidden;
height: 100%;
max-height: 370px;
box-shadow: 0 0 10px rgba(56, 54, 53, 0.5);
}
SCREENSHOTS
a. Login Page without zoom
b. Login Page with 500% zoom
c. Login Page with 400% zoom
d. White weird space after the log in button on 500% zoom
e. On zooming in, the intro-text goes behind the LOGIN & REGISTER anchors. The svg image is cut off.
EDIT:- For complete CSS code(minus the webkit-keyframes), see the answer below. I have also attached the background image herewith.
Here's the full CSS code. I had reached the word-limit for the question.
CSS
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:focus {
outline: none !important;
}
body, html {
height: 100%;
}
body {
background: url(../img/bg-index.jpeg) no-repeat center center;
background-size: cover;
height: 100%;
overflow: auto;
margin: 0;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
color: #857567;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
main {
background: white;
height: 100%;
}
main aside {
position: relative;
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: center;
height: calc(100% / 3);
padding: 12px;
background: #DFB72C url("../img/table-pc.jpg") no-repeat center center/cover;
}
main aside div:empty {
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #DFB72C url("../img/table-pc.jpg") no-repeat center center/cover;
background-blend-mode: screen;
}
main aside svg {
position: relative;
margin-top: -24px;
width: 120px;
height: 120px;
}
main aside div:not(:empty) {
position: relative;
width: 100%;
margin-top: -24px;
}
main aside p {
position: relative;
width: 100%;
padding : 5px;
margin: 0;
color: white;
font-size: 22px;
line-height: 1.2;
text-align: center;
text-shadow: 0 0 10px rgba(133, 117, 103, 0.5);
}
main aside p strong {
font-weight: 700;
}
main aside p:nth-child(2) {
position: absolute;
top: 0;
left: 0;
}
main aside p.active {
visibility: visible;
opacity: 1;
-webkit-transform: none;
transform: none;
}
main aside p:not(.active) {
visibility: hidden;
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
main section {
position: relative;
height: calc(100% / 3 * 2);
}
main section h1 {
display: flex;
justify-content: center;
padding: 18px;
color: #DFB72C;
font-size: 22px;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
main section h1 a {
display: block;
margin: 0 6px;
cursor: pointer;
-webkit-transform: none;
transform: none;
}
main section h1 a:hover, main section h1 a:focus {
color: #976a36;
}
main section h1 a:active {
color: #857567;
}
main section h1 a.active {
font-weight: 500;
}
main section h1 a:not(.active) {
font-weight: 300;
}
main section form {
display: flex;
flex-flow: row wrap;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(100% - 40px);
}
main section form > div, main section form > ul {
width: 100%;
padding: 6px;
}
main section form fieldset {
padding: 6px;
}
main section form fieldset div {
display: flex;
border-radius: 2px;
overflow: hidden;
}
main section form fieldset div label {
display: block;
margin: 0;
padding: 6px 9px;
background: #DFB72C;
color: white;
font-size: 16px;
cursor: pointer;
line-height: 25px;
}
main section form fieldset div input {
display: block;
background: white;
border: 1px solid #DFB72C;
border-left: 0;
border-radius: 0 2px 2px 0;
box-shadow: none;
margin: 0;
padding: 6px 9px;
width: 100%;
color: #857567;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
}
main section form fieldset div input::-webkit-input-placeholder {
color: rgba(133, 117, 103, 0.4);
}
main section form fieldset div input:-ms-input-placeholder {
color: rgba(133, 117, 103, 0.4);
}
main section form fieldset div input::-ms-input-placeholder {
color: rgba(133, 117, 103, 0.4);
}
main section form fieldset div input::placeholder {
color: rgba(133, 117, 103, 0.4);
}
main section form fieldset div input:focus {
background: rgba(233, 226, 213, 0.5);
}
main section form fieldset div input:focus::-webkit-input-placeholder {
color: rgba(133, 117, 103, 0.6);
}
main section form fieldset div input:focus:-ms-input-placeholder {
color: rgba(133, 117, 103, 0.6);
}
main section form fieldset div input:focus::-ms-input-placeholder {
color: rgba(133, 117, 103, 0.6);
}
main section form fieldset div input:focus::placeholder {
color: rgba(133, 117, 103, 0.6);
}
main section form li {
padding: 6px;
}
main section form li button {
display: block;
margin: 0 auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
border: 0;
border-radius: 100px;
color: white;
font-size: 16px;
padding: 6px 12px;
cursor: pointer;
}
main section form li button.fb {
background: #3b5998;
}
main section form li button.fb:hover, main section form li button.fb:focus {
background: #5f7ec1;
}
main section form li button.fb:active {
background: #263961;
}
main section form li button.tw {
background: #00aced;
}
main section form li button.tw:hover, main section form li button.tw:focus {
background: #3bc9ff;
}
main section form li button.tw:active {
background: #0074a1;
}
main section form input[type="submit"] {
display: block;
align-self: flex-end;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
margin: 0;
border: 0;
border-radius: 0;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 24px;
text-transform: capitalize;
line-height: 2;
background: #DFB72C;
color: white;
cursor: pointer;
}
main section form input[type="submit"]:hover, main section form input[type="submit"]:focus {
background: #976a36;
}
main section form input[type="submit"]:active {
background: #857567;
}
main section form.active {
opacity: 1;
z-index: 1;
}
main section form.active fieldset, main section form.active li, main section form.active input[type="submit"] {
-webkit-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
}
main section form:not(.active) {
opacity: 0;
z-index: 0;
}
main section form:not(.active) fieldset, main section form:not(.active) li, main section form:not(.active) input[type="submit"] {
-webkit-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
}
main.with-hover aside p {
transition: all 250ms ease-out;
}
main.with-hover section h1 a {
transition: all 150ms ease-out;
}
main.with-hover section h1 a:hover, main.with-hover section h1 a:focus {
transition: all 300ms ease-out;
}
main.with-hover section h1 a:active {
transition: all 150ms ease-in;
}
main.with-hover section form {
transition: all 1000ms ease-out;
}
main.with-hover section form fieldset, main.with-hover section form li, main.with-hover section form input[type="submit"] {
transition: all 500ms ease-out;
}
main.with-hover section form button, main.with-hover section form input {
transition: all 150ms ease-out;
}
main.with-hover section form button:hover, main.with-hover section form button:focus, main.with-hover section form input:hover, main.with-hover section form input:focus {
transition: all 300ms ease-out;
}
main.with-hover section form button:active, main.with-hover section form input:active {
transition: all 150ms ease-in;
}
main.with-hover section form.active#form-signup fieldset:nth-child(2) {
transition-delay: 50ms;
}
main.with-hover section form.active#form-signup fieldset:nth-child(3) {
transition-delay: 100ms;
}
main.with-hover section form.active#form-signup li:nth-child(1) {
transition-delay: 150ms;
}
main.with-hover section form.active#form-signup li:nth-child(2) {
transition-delay: 200ms;
}
main.with-hover section form.active#form-signup input[type="submit"] {
transition-delay: 250ms;
}
main.with-hover section form.active#form-login fieldset:nth-child(2) {
transition-delay: 50ms;
}
main.with-hover section form.active#form-login li:nth-child(1) {
transition-delay: 100ms;
}
main.with-hover section form.active#form-login li:nth-child(2) {
transition-delay: 150ms;
}
main.with-hover section form.active#form-login input[type="submit"] {
transition-delay: 200ms;
}
main.with-hover section form:not(.active)#form-signup fieldset:nth-child(1) {
transition-delay: 250ms;
}
main.with-hover section form:not(.active)#form-signup fieldset:nth-child(2) {
transition-delay: 200ms;
}
main.with-hover section form:not(.active)#form-signup fieldset:nth-child(3) {
transition-delay: 150ms;
}
main.with-hover section form:not(.active)#form-signup li:nth-child(1) {
transition-delay: 100ms;
}
main.with-hover section form:not(.active)#form-signup li:nth-child(2) {
transition-delay: 50ms;
}
main.with-hover section form:not(.active)#form-login fieldset:nth-child(1) {
transition-delay: 200ms;
}
main.with-hover section form:not(.active)#form-login fieldset:nth-child(2) {
transition-delay: 150ms;
}
main.with-hover section form:not(.active)#form-login li:nth-child(1) {
transition-delay: 100ms;
}
main.with-hover section form:not(.active)#form-login li:nth-child(2) {
transition-delay: 50ms;
}
main.pre-enter aside {
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-transform: scaleY(0);
transform: scaleY(0);
visibility: hidden;
}
main.pre-enter aside svg {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(0) rotate(90deg);
transform: scale(0) rotate(90deg);
visibility: hidden;
}
main.pre-enter aside p.active {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
visibility: hidden;
}
main.pre-enter section h1 a {
visibility: hidden;
opacity: 0;
}
main.pre-enter section h1 a:first-child {
-webkit-transform-origin: right center;
transform-origin: right center;
-webkit-transform: translateX(200px) scaleX(0);
transform: translateX(200px) scaleX(0);
}
main.pre-enter section h1 a:last-child {
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform: translateX(-200px) scaleX(0);
transform: translateX(-200px) scaleX(0);
}
main.pre-enter section form fieldset, main.pre-enter section form li {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
visibility: hidden;
}
main.pre-enter section form input[type="submit"] {
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: scaleY(0);
transform: scaleY(0);
color: #DFB72C;
visibility: hidden;
}
main.on-enter aside {
-webkit-animation: scaleYIn 1000ms linear forwards;
animation: scaleYIn 1000ms linear forwards;
visibility: visible;
}
main.on-enter aside svg {
-webkit-animation: bounceIn-rotate 1000ms linear forwards 250ms;
animation: bounceIn-rotate 1000ms linear forwards 250ms;
visibility: visible;
}
main.on-enter aside p.active {
-webkit-animation: slideInUp-fadeIn 1000ms linear forwards 500ms;
animation: slideInUp-fadeIn 1000ms linear forwards 500ms;
visibility: visible;
}
main.on-enter section h1 a {
visibility: visible;
}
main.on-enter section h1 a:first-child {
-webkit-animation: scaleX-slideInRight 1000ms linear forwards 750ms;
animation: scaleX-slideInRight 1000ms linear forwards 750ms;
}
main.on-enter section h1 a:last-child {
-webkit-animation: scaleX-slideInLeft 1000ms linear forwards 750ms;
animation: scaleX-slideInLeft 1000ms linear forwards 750ms;
}
main.on-enter section form fieldset, main.on-enter section form li {
-webkit-animation: slideInUp-fadeIn 1000ms linear forwards;
animation: slideInUp-fadeIn 1000ms linear forwards;
visibility: visible;
}
main.on-enter section form fieldset:nth-child(1) {
-webkit-animation-delay: 1250ms;
animation-delay: 1250ms;
}
main.on-enter section form fieldset:nth-child(2) {
-webkit-animation-delay: 1350ms;
animation-delay: 1350ms;
}
main.on-enter section form fieldset:nth-child(3) {
-webkit-animation-delay: 1450ms;
animation-delay: 1450ms;
}
main.on-enter section form li:nth-child(1) {
-webkit-animation-delay: 1550ms;
animation-delay: 1550ms;
}
main.on-enter section form li:nth-child(2) {
-webkit-animation-delay: 1650ms;
animation-delay: 1650ms;
}
main.on-enter section form input[type="submit"] {
-webkit-animation: scaleYIn 1000ms linear forwards 1750ms, lemon-white 250ms linear forwards 2150ms;
animation: scaleYIn 1000ms linear forwards 1750ms, lemon-white 250ms linear forwards 2150ms;
visibility: visible;
}
#media only screen and (min-width: 624px) {
body {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
background: url(../img/bg-index.jpeg) no-repeat center center;
background-size: cover;
height: 100%;
overflow: auto;
}
main {
display: flex;
border-radius: 2px;
overflow: hidden;
height: 100%;
max-height: 370px;
box-shadow: 0 0 10px rgba(56, 54, 53, 0.5);
}
main aside, main section {
height: 100%;
width: 300px;
}
main.pre-enter {
opacity: 0;
visibility: hidden;
}
main.pre-enter aside {
-webkit-transform: none;
transform: none;
}
main.on-enter {
-webkit-animation: slideDown-fadeIn 1000ms linear forwards;
animation: slideDown-fadeIn 1000ms linear forwards;
visibility: visible;
}
main.on-enter aside {
-webkit-animation: none;
animation: none;
}
}
#-webkit-keyframes lemon-white {
0% {
color: #DFB72C;
}
100% {
color: white;
}
}
#keyframes lemon-white {
0% {
color: #DFB72C;
}
100% {
color: white;
}
}
Background Image
bg-index.jpeg
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>
There is background colour showing between image divs. I thought it might have something to do with margins. Even setting the div to absolute positioning and the parent to relative doesn't work. The picture still won't show without it being relative. (robot2.jpg in div sec, sectThree).
Here's the website: thomasogbourne.me
html,
body {
margin: 0px;
height: 100%;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
background-color: #000000;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 20px;
}
/*
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: rgba(0,0,0,.5);
z-index: 99;
text-align: center;
}
nav a {
text-decoration: none;
color: #fff;
margin-left: 30px;
line-height: 50px;
}*/
.sect {
position: rela;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.subSection {
height: 30%;
}
.smallsubSection {
height: 20%;
}
.sectOne {
background-image: url("/Images/CX750Msmall.jpg");
background-attachment: fixed;
}
.sectTwo {
background-image: url("/Images/drone.jpg");
position: relative;
top: -90px;
z-index: -1
}
.sectThree {
background-image: url("/Images/robot2.jpg");
position: absolute;
top: -150px;
background-repeat: space;
}
#aboutSection {
background: #648880;
background: linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);
}
#gearSection {
background: #0083FF;
background: linear-gradient(#3943DA, #00F3FF);
height: 66%;
}
#contactSection {
background: #648880;
background: linear-gradient(#DEDEDE, #898989 85%);
}
.smallsubSection {
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
#bigname {
font-family: "Luckiest Guy";
font-size: 45px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
letter-spacing: 2px;
text-decoration: overline underline;
color: #D5D5D5;
text-align: center;
position: absolute;
top: 33%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
/* MENU START */
nav.container {
margin: 0 auto;
padding: 30px 3em;
background-color: #000040;
position: fixed;
width: 40%;
text-align: center;
list-style: none;
margin-left: 27.5%;
z-index: 1;
}
nav.container a {
color: #fff;
text-decoration: none;
margin: 0 10px;
padding: 10px 10px;
position: relative;
z-index: 0;
cursor: pointer;
font-family: "Rockwell Extra Bold", "Rockwell Bold", monospace;
font-size: 25px;
padding: 10px;
}
nav.borderXwidth a:before,
nav.borderXwidth a:after {
position: absolute;
opacity: 0;
width: 0%;
height: 2px;
content: '';
background: #FFF;
transition: all 0.3s;
}
nav.borderXwidth a:before {
left: 0px;
top: 0px;
}
nav.borderXwidth a:after {
right: 0px;
bottom: 0px;
}
nav.borderXwidth a:hover:before,
nav.borderXwidth a:hover:after {
opacity: 1;
width: 100%;
}
/* MENU END */
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 13px 21px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 24px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 0.4s;
position: relative;
bottom: -90px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 150px;
}
.button1 {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
/* SCROLLING TEXT MAIN SECTION */
.content {
position: absolute;
top: 144%;
left: 54%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 35px;
line-height: 40px;
font-family: 'Lato', sans-serif;
color: #ecf0f1;
height: 160px;
overflow: hidden;
zoom: 3.5;
-moz-transform: scale(3.5);
}
.visible {
font-weight: 600;
overflow: hidden;
height: 40px;
padding: 0 40px;
}
.visible:before {
content: '';
left: 0;
line-height: 40px;
}
.visible:after {
content: '';
position: absolute;
right: -80px;
line-height: 40px;
}
.visible:after,
.visible:before {
position: absolute;
top: 0;
color: #16a085;
font-size: 42px;
-webkit-animation-name: opacity;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: opacity;
animation-name: opacity;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
p {
display: inline;
float: left;
margin: 0;
left: 40px;
}
ul {
margin-top: 0;
padding-left: 230px;
text-align: left;
list-style: none;
-webkit-animation-name: change;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: change;
animation-name: change;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
ul li {
line-height: 40px;
margin: 0;
}
li {
width: 270px
}
#-webkit-keyframes opacity {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-webkit-keyframes change {
0%,
12%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
17%,
29% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
34%,
46% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
51%,
63% {
-webkit-transform: translateY(-75%);
transform: translateY(-75%);
}
68%,
80% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
85%,
97% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
}
#keyframes opacity {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes change {
0%,
12%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
17%,
29% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
34%,
46% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
51%,
63% {
-webkit-transform: translateY(-75%);
transform: translateY(-75%);
}
68%,
80% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
85%,
97% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
}
<body>
<nav class="container borderXwidth">
<a id="home" href="#homeSection">HOME</a>
<a id="about" href="#aboutSection">ABOUT</a>
<a id="gear" href="#gearSection">MY GEAR</a>
<a id="portfolio" href="#portfolioSection">PORTFOLIO</a>
<a id="contact" href="#contactSection">CONTACT</a>
</nav>
<div id="homeSection" class="sect
sectOne">
<div id="bigname">
<h1>
THOMAS OGBOURNE
</h1>
<button class="button button2 hvr-icon-hang hvr-fade">Begin</button>
</div>
</div>`
<div id="aboutSection" class="subSection">
<div class='content'>
<div class='visible'>
<p>
Hello I'm Tom:
</p>
<ul>
<li>Web Developer</li>
<li>Gamer</li>
<li>Student</li>
<li>Computer Guy</li>
</ul>
</div>
</div>
</div>
<div id="serviceSection" class="sect
sectTwo"></div>
<div id="gearSection" class="subSection2"></div>
<div id="portfolioSection" class="sect
sectThree"></div>
<div id="contactSection" class="smallsubSection">
<h2 style="margin-top:0;">
Email: *******************
</h2>
<h2>
Phone: **************
</h2>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/app.js"></script>
</body>
Is this what you wanted? :
https://jsfiddle.net/n3h3cm1x/
Basically your code is very messy and chaotic. there is something like this in there:
<button class="button button2 hvr-icon-hang hvr-fade">Begin</button>
</div>
</div>`
<div id="aboutSection" class="subSection">
<div class='content'>
Notice that ` symbol? that was the cause of the first break between divs.
the second break between divs is
top:-90px;
which you added to few sections at the bottom.
I'm making my portfolio and I thought it would be cool when you could see some nice animations when the page loads. only I don't know how to get the animations working. My idea was to make all the classes fade and easeIn slightly after each other so you would get a cool animation sequince when you have loaded the page.
My idea was:
Fade in the title_text in as the first one from left to right.
after that al the programming languages start fading in and ease in to the right from "javascript" to "php" to "mysql" to "css" and finaly "html".
I would like to make it flexible so that I can add more languages once I have learned them.
I'd like to learn from it myself so that I can make my own animations in the future.
for those interested this is my portfolio
image
thanks in advance!
<div class="animations">
<div class="html">
HTML
</div>
<div class="css">
CSS
</div>
<div class="php">
PHP
</div>
<div class="javascript">
JAVASCRIPT
</div>
<div class="mysql">
MySQL
</div>
</div>
CSS
span.mycalendar {
font-size: 0.38em;
line-height: initial;
font-family: arial;
display: block;
position: relative;
width: 7em;
height: 7em;
background-color: #fff;
margin: 0 auto;
border-radius: 0.6em;
border-style: solid;
border-width: 1px;
border-color: #CFAF3B;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: rotate(0deg) skewY(0deg);
-webkit-transform-origin: 50% 10%;
transform-origin: 50% 10%;
}
title_text {
text-align: center;
width: 800px;
margin-left: auto;
margin-right: auto;
position: relative;
color: white;
z-index: 5;
margin-top: -420px;
font-size: 80px;
text-transform: uppercase;
font-family: league-gothic;
letter-spacing: 5px;
border: 10px solid white;
}
.animations .html {
font-family: league-gothic;
float: left;
margin-left: 200px;
top: 30px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
animation: 5s linear 2s infinite alternate;
}
.animations .css {
font-family: league-gothic;
float: right;
margin-right: 200px;
top: 100px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
.animations .php {
font-family: league-gothic;
float: right;
margin-right: 200px;
top: -270px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
.animations .javascript {
font-family: league-gothic;
float: left;
top: -330px;
margin-left: -100px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
.animations .mysql {
font-family: league-gothic;
float: right;
margin-right: -500px;
top: -150px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
li {
background-color: red;
text-align: center;
}
li > a {
display: inline-block;
vertical-align: middle;
background-color: blue;
padding: 10px;
}
.inner-wrapper {
display: inline-block;
vertical-align: middle;
}
span.mycalendar * {
display: block;
width: 100%;
font-size: 2.4em;
font-weight: bold;
font-style: normal;
text-align: center;
}
span.mycalendar strong {
position: absolute;
top: 0;
font-weight: normal;
padding-top: 0.06em;
color: #fff;
background-color: #CFAF3B;
box-shadow: 0 2px 0 #CFAF3B;
}
span.mycalendar span {
width: 100%;
font-size: 3.7em;
letter-spacing: -0.05em;
padding-top: 0.8em;
color: #2f2f2f;
}
ul {
list-style: none;
}
I've scaled it down a bit for the demo but I hope you get the idea
.animations .css,
.animations .html,
.animations .javascript,
.animations .mysql,
.animations .php {
font-family: league-gothic;
z-index: 10;
position: relative;
font-size: 20px;
color: #fff;
opacity: 0;
animation-name: fade-in;
animation-duration: 2s;
animation-fill-mode: forwards
}
body {
background: #777
}
.animations .html {
animation-delay: 0s
}
.animations .css {
animation-delay: 1s
}
.animations .php {
animation-delay: 2s
}
.animations .javascript {
animation-delay: 3s
}
.animations .mysql {
animation-delay: 4s
}
#-webkit-keyframes fade-in {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fade-in {
from {
opacity: 0
}
to {
opacity: 1
}
}
<div class="animations">
<div class="html">
HTML
</div>
<div class="css">
CSS
</div>
<div class="php">
PHP
</div>
<div class="javascript">
JAVASCRIPT
</div>
<div class="mysql">
MySQL
</div>
</div>
Or make other weird and wonderful animations
.animations .css,
.animations .html,
.animations .javascript,
.animations .mysql,
.animations .php {
font-family: league-gothic;
z-index: 10;
position: relative;
font-size: 20px;
color: #fff;
transform: scale(0,0);
animation-name: pop-in;
animation-duration: 2s;
animation-fill-mode: forwards
}
body {
background: #777
}
.animations .html {
animation-delay: 0s
}
.animations .css {
animation-delay: 1s
}
.animations .php {
animation-delay: 2s
}
.animations .javascript {
animation-delay: 3s
}
.animations .mysql {
animation-delay: 4s
}
#keyframes pop-in {
from {
transform: scale(0,0);
}
to {
transform: scale(1,1);
}
}
<div class="animations">
<div class="html">
HTML
</div>
<div class="css">
CSS
</div>
<div class="php">
PHP
</div>
<div class="javascript">
JAVASCRIPT
</div>
<div class="mysql">
MySQL
</div>
</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>