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>
Related
I have three bars set to slide in from the right and settle at the left. The animation itself is fine. The problem is that before the animation begins the three bars are positioned in the middle of the screen before disappearing and then commencing the animation.
When the page is refreshed I do not want these bars to be visible until they begin their slide-in. How can I do this?
<body>
<header>
<h1>xxxx xxxxxxx</h1>
<nav>
<ul>
<li>About Me</li>
<li id="contact_nav">Contact</li>
<li id="gallery_nav">Gallery</li>
</ul>
</nav>
<div class="container">
<div id="bar1" class="bar1"><p>Bespoke furniture ...</p></div><br>
<div id="bar2" class="bar2"><p>... and interesting items ...</p></div><br>
<div id="bar3" class="bar3"><p>... brought to life!</p></div><br>
</div>
</header>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#font-face {
font-family: 'Avenida Std';
src: url('AvenidaStd.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-image: linear-gradient(to right, #24243E, #302B63, #0F0C29);
}
h1, h2, h3, h4 {
font-family: 'Avenida Std';
}
header h1 {
font-size: 12vw;
color: grey;
position: absolute;
padding-left: 20px;
padding-top: 55px;
text-shadow: 0.10em 0.08em 5px black;
transform: rotate(-10deg);
}
nav {
position: relative;
}
nav ul {
align-content: right;
}
nav ul li {
font-family: 'Avenida Std';
font-size: 5rem;
margin-left: 85%;
padding-top: 20px;
list-style-type: none;
justify-content: right;
}
nav ul li a {
text-decoration: none;
color: white;
}
nav ul li a:hover {
color: yellow;
text-shadow: 0 0 40px yellow;
}
nav #contact_nav {
padding-top: 0.5rem;
}
nav #gallery_nav {
padding-top: 0.5rem;
padding-bottom: 0;
z-index: 100;
}
#bar1 {
width: 50vw;
height: 3rem;
background: black;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#bar2 {
width: 50vw;
height: 3rem;
background: black;
}
#bar3 {
width: 50vw;
height: 3rem;
background: black;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.container {
position: relative;
}
.container p {
color: white;
font-family: sans-serif;
font-size: 2.5rem;
position: relative;
padding-left: 5px;
}
/* Bars Animation CSS */
.bar1 {
animation: move1 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 500ms;
position: fixed;
top: 30%;
margin-bottom: 2px;
left: 30%;
z-index: 50;
}
#keyframes move1 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 80%;
}
}
.bar2 {
animation: move2 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1000ms;
position: fixed;
top: 36%;
left: 30%;
z-index: 999;
}
#keyframes move2 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 65%;
}
}
.bar3 {
animation: move3 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1500ms;
position: fixed;
top: 42%;
left: 30%;
z-index: 999;
}
#keyframes move3 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 52%;
}
}
Just add default value for transform like this:
.bar1 {
animation: move1 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 500ms;
position: fixed;
top: 30%;
margin-bottom: 2px;
left: 30%;
z-index: 50;
transform: translateX(100vw); // added
}
.bar2 {
animation: move2 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1000ms;
position: fixed;
top: 36%;
left: 30%;
z-index: 999;
transform: translateX(100vw); // added
}
.bar3 {
animation: move3 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1500ms;
position: fixed;
top: 42%;
left: 30%;
transform: translateX(100vw); //added
z-index: 999;
}
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>
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 want to make center this Miss, hug...
This is my site: https://www.ajdinalic.cf/
Image: http://prntscr.com/69oewr
I am still new at this coding, and found this code on google
This is on weebly btw, i tried to fix but i dont know and i dont want to make it worse
.rw-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Bree Serif';
padding: 10px;
}
.rw-sentence{
margin: 0;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
color: #444;
white-space: initial;
font-size: 200%;
font-weight: normal;
}
.rw-words{
display: inline;
}
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: #6b969d;
text-align: center;
}
.rw-words-1 span{
animation: rotateWordsFirst 18s linear infinite 0s;
text-align: center;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
animation-delay: 3s;
color: #6b889d;
}
.rw-words span:nth-child(3) {
animation-delay: 6s;
color: #6b739d;
}
.rw-words span:nth-child(4) {
animation-delay: 9s;
color: #7a6b9d;
}
.rw-words span:nth-child(5) {
animation-delay: 12s;
color: #8d6b9d;
}
.rw-words span:nth-child(6) {
animation-delay: 15s;
color: #9b6b9d;
}
#keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
<!DOCTYPE html>
<html>
<head></head>
<section class="rw-wrapper">
<h2 class="rw-sentence">
<span>I</span>
<br>
<div class="rw-words rw-words-1">
<span>Miss</span>
<span>Want to hug</span>
<span>Want to kiss</span>
<span>Need</span>
<span>Want to see</span>
<span>Want to be with</span>
</div><br>
<span>You</span>
</h2>
</section>
<body class=' wsite-theme-light'>
<div style='display:none'>{title}</div>
<div style='display:none'>{menu}</div>
<div style='display:none'>{content}</div>
<div style='display:none'>{content}>{footer}</div>
</body>
</html>
Add top: 75px; left: 0; right: 0; to .rw-words span.
Let me know if this helps.
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>