in this authentication page i want to do a background with 5 images rolling in 3 seconds, it works but also my auth form appears between every image and disappear when other image appear.
here the Fiddle with my html and css just to show you the code better, it doesn't work there because i have the images in my local path.
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
</head>
<body>
<div class="center">
<h1>Benvenuto!</h1>
<h3>Accedi con le tue credenziali</h3>
</div>
<form style="background-color: white">
<div class="group">
<input [(ngModel)]="user.email" name="email" type="email"><span class="highlight"></span><span
class="bar"></span>
<label>Email</label>
</div>
<div class="group">
<input [(ngModel)]="user.password" name="password" type="password"><span
class="highlight"></span><span
class="bar"></span>
<label>Password</label>
</div>
<button (click)="signin()" type="button" class="button buttonBlue">Accedi
<div class="ripples buttonRipples"><span class="ripplesCircle"></span>
</div>
</button>
</form>
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>
</body>
</html>
CSS:
.crossfade > figure {
animation: imageAnimation 15s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: fixed;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade > figure:nth-child(1) { background-image: url('../../../img/login/bath-bathroom-candlelight-3188.jpg'); }
.crossfade > figure:nth-child(2) {
animation-delay: 3s;
background-image: url('../../../img/login/bath-blur-brush-275765.jpg');
}
.crossfade > figure:nth-child(3) {
animation-delay: 6s;
background-image: url('../../../img/login/beauty-face-massage-56884.jpg');
}
.crossfade > figure:nth-child(4) {
animation-delay: 9s;
background-image: url('../../../img/login/bed-bedroom-blanket-275845.jpg');
}
.crossfade > figure:nth-child(5) {
animation-delay: 12s;
background-image: url('../../../img/login/body-massage-relax-7700.jpg');
}
#keyframes
imageAnimation { 0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
* { box-sizing:border-box; }
body {
font-family: Helvetica;
background: #eee;
-webkit-font-smoothing: antialiased;
}
hgroup {
text-align:center;
margin-top: 4em;
}
h1, h3 { font-weight: 300; }
h1 { color: #636363; }
h3 { color: #4a89dc; }
.center{
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
}
form {
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
}
input:focus { outline: none; }
/*/* Label */
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
}
/*/* active */
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75); left: -2px;
/* font-size: 14px; */
color: #4a89dc;
}
/*/* Underline */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4a89dc;
transition: all 0.2s ease;
}
.bar:before { left: 50%; }
.bar:after { right: 50%; }
/* active */
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
/* Highlight */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active */
input:focus ~ .highlight {
animation: inputHighlighter 0.3s ease;
}
/* Animations */
#keyframes inputHighlighter {
from { background: #4a89dc; }
to { width: 0; background: transparent; }
}
/* Button */
.button {
position: relative;
display: inline-block;
padding: 12px 24px;
margin: .3em 0 1em 0;
width: 100%;
vertical-align: middle;
color: #fff;
font-size: 16px;
line-height: 20px;
-webkit-font-smoothing: antialiased;
text-align: center;
letter-spacing: 1px;
background: transparent;
border: 0;
border-bottom: 2px solid #3160B6;
cursor: pointer;
transition: all 0.15s ease;
}
.button:focus { outline: 0; }
/* Button modifiers */
.buttonBlue {
background: #4a89dc;
text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
.buttonBlue:hover { background: #357bd8; }
/* Ripples container */
.ripples {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
/* Ripples circle */
.ripplesCircle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
}
.ripples.is-active .ripplesCircle {
animation: ripples .4s ease-in;
}
/* Ripples animation */
#keyframes ripples {
0% { opacity: 0; }
25% { opacity: 1; }
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
footer { text-align: center; }
footer p {
color: #888;
font-size: 13px;
letter-spacing: .4px;
}
footer a {
color: #4a89dc;
text-decoration: none;
transition: all .2s ease;
}
footer a:hover {
color: #666;
text-decoration: underline;
}
footer img {
width: 80px;
transition: all .2s ease;
}
footer img:hover { opacity: .83; }
footer img:focus , footer a:focus { outline: none; }
<!-- slideshow bckg -->
* {
padding: 0;
margin: 0
}
one solution is to add a div section to your crossfade too!
You just need to add the div section in your css and give the div a chance to show and disappear
.crossfade > figure {
animation: imageAnimation 18s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: fixed;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade > div {
animation: imageAnimation 15s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: fixed;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade > figure:nth-child(1) { background-image: url('https://www.uncommongoods.com/images/items/26500/26530_1_1200px.jpg'); }
.crossfade > figure:nth-child(2) {
animation-delay: 3s;
background-image: url('https://img1.southernliving.timeinc.net/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/2018/01/main/duck.jpg?itok=CHWo5-3d&1515187196');
}
.crossfade > figure:nth-child(3) {
animation-delay: 6s;
background-image: url('https://images-eu.ssl-images-amazon.com/images/I/41sfz8dKX1L._SL500_AC_SS350_.jpg');
}
.crossfade > figure:nth-child(4) {
animation-delay: 9s;
background-image: url('https://deltawaterfowl.org/wp-content/uploads/2017/04/mallard-web.jpg');
}
.crossfade > figure:nth-child(5) {
animation-delay: 12s;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg');
}
.crossfade > div:nth-child(6) {
animation-delay: 15s;
}
#keyframes
imageAnimation { 0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
* { box-sizing:border-box; }
body {
font-family: Helvetica;
background: #eee;
-webkit-font-smoothing: antialiased;
}
hgroup {
text-align:center;
margin-top: 4em;
}
h1, h3 { font-weight: 300; }
h1 { color: #636363; }
h3 { color: #4a89dc; }
.center{
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
}
form {
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
}
input:focus { outline: none; }
/*/* Label */
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
}
/*/* active */
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75); left: -2px;
/* font-size: 14px; */
color: #4a89dc;
}
/*/* Underline */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4a89dc;
transition: all 0.2s ease;
}
.bar:before { left: 50%; }
.bar:after { right: 50%; }
/* active */
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
/* Highlight */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active */
input:focus ~ .highlight {
animation: inputHighlighter 0.3s ease;
}
/* Animations */
#keyframes inputHighlighter {
from { background: #4a89dc; }
to { width: 0; background: transparent; }
}
/* Button */
.button {
position: relative;
display: inline-block;
padding: 12px 24px;
margin: .3em 0 1em 0;
width: 100%;
vertical-align: middle;
color: #fff;
font-size: 16px;
line-height: 20px;
-webkit-font-smoothing: antialiased;
text-align: center;
letter-spacing: 1px;
background: transparent;
border: 0;
border-bottom: 2px solid #3160B6;
cursor: pointer;
transition: all 0.15s ease;
}
.button:focus { outline: 0; }
/* Button modifiers */
.buttonBlue {
background: #4a89dc;
text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
.buttonBlue:hover { background: #357bd8; }
/* Ripples container */
.ripples {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
/* Ripples circle */
.ripplesCircle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
}
.ripples.is-active .ripplesCircle {
animation: ripples .4s ease-in;
}
/* Ripples animation */
#keyframes ripples {
0% { opacity: 0; }
25% { opacity: 1; }
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
footer { text-align: center; }
footer p {
color: #888;
font-size: 13px;
letter-spacing: .4px;
}
footer a {
color: #4a89dc;
text-decoration: none;
transition: all .2s ease;
}
footer a:hover {
color: #666;
text-decoration: underline;
}
footer img {
width: 80px;
transition: all .2s ease;
}
footer img:hover { opacity: .83; }
footer img:focus , footer a:focus { outline: none; }
<!-- slideshow bckg -->
* {
padding: 0;
margin: 0
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
</head>
<body>
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<div class="center">
<h1>Benvenuto!</h1>
<h3>Accedi con le tue credenziali</h3>
</div>
</div>
</body>
</html>
Have at it and goodluck :)
Related
Please help, i have a template that uses hero slider. The slider works fine in desktop but not on mobile. I was told to tweak the style.css file to resolve it.
I have read some similar issues here but no solutions. Can anyone help with it?
The template owners said the solution is in the stle.css but couldnt respond further.
Kinda confused not to mess up the style.css file. Find the style.css code below for the hero slider:
Hero Area CSS
========================================*/
.home-slider {
overflow: hidden;
}
.hero-slider {
position: relative;
}
.hero-slider,
.hero-slider .single-slider{
height:680px;
}
.hero-slider .single-slider {
background-size: cover;
background-position: center;
position: relative;
}
.hero-slider .single-slider .slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.65;
}
.hero-slider .welcome-text {
margin: 146px 0 0;
}
.hero-slider .hero-text h4 {
color: #fff;
margin-bottom: 10px;
font-weight: 400;
display: inline-block;
background: #2E2751;
padding: 8px 20px;
font-size: 16px;
}
.hero-slider .hero-text h4:before {
content: "";
position: absolute;
left: 0;
bottom: -8px;
border-top: 8px solid #2E2751;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.hero-slider .hero-text h1 {
color: #2E2751;
font-size: 50px;
font-weight: bold;
line-height: 65px;
margin-bottom: 20px;
padding-bottom: 20px;
}
.hero-slider .hero-text h1::before {
content: "";
position: absolute;
left: 0;
width: 50px;
height: 6px;
background: #1775b3;
bottom: -3px;
}
.hero-slider .hero-text .p-text{
max-width:80%;
}
.hero-slider .hero-text p {
color: #666;
font-size: 15px;
}
.hero-slider .hero-text .button {
margin-top: 30px;
}
/* Text Center */
.hero-slider .hero-text.text-center h1::before {
left: 50%;
margin-left: -25px;
}
/* Text Left */
.hero-slider .hero-text.text-right h1::before {
left: auto;
right:0;
margin:0;
}
/* Slider Nav */
.hero-slider .owl-nav{
margin: 0;
width: 100%;
}
.hero-slider .owl-carousel .owl-nav div {
width: 50px;
height: 60px;
line-height: 60px;
background: #1775b3;
color: #fff;
position: absolute;
margin: 0;
padding: inherit;
font-size: 30px;
text-align: center;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
border-radius: 0px;
top: 50%;
margin-top: -30px;
}
.hero-slider .owl-carousel .owl-nav div:hover{
color:#fff;
background:#2E2751;
}
.hero-slider .owl-carousel .owl-nav .owl-prev{
left:-100px;
}
.hero-slider:hover .owl-carousel .owl-nav .owl-prev{
left:0px;
}
.hero-slider .owl-carousel .owl-nav .owl-next{
right:-100px;
}
.hero-slider:hover .owl-carousel .owl-nav .owl-next{
right:0px;
}
/* Hero Animations */
.hero-slider .owl-item.active .hero-text h4{
animation: fadeInUp 0.8s both 1s;
}
.hero-slider .owl-item.active .hero-text h1{
animation: fadeInRight 1s both 1.2s;
}
.hero-slider .owl-item.active .hero-text p{
animation: fadeInLeft 1.2s both 1.4s;
}
.hero-slider .owl-item.active .button{
animation: fadeInUp 1.4s both 1.6s;
}
/* Hero Agency */
.hero-agency .ageny-main {
padding-top: 158px;
}
.hero-agency .hero-text {
z-index: 555;
position: relative;
text-align: center;
}
.hero-agency .agency-inner {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 800px;
}
.hero-agency .agency-inner:before {
opacity: 0;
background: #fff;
}
.hero-agency .hero-text {
z-index: 555;
position: relative;
text-align: center;
}
.hero-agency .hero-text h1 {
font-size: 55px;
color: #2E2751;
font-weight: 700;
line-height: 65px;
}
.hero-agency .hero-text h1 span {
color: #1775b3;
}
.hero-agency .hero-text h4 {
font-weight: 500;
}
.hero-agency .video-head {
margin-top: 35px;
position: relative;
}
.hero-agency .video-head .video {
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 100%;
background: #1775b3;
color: #fff;
display: inline-block;
font-size: 28px;
}
.hero-agency .video-head .video:hover{
background:#fff !important;
color:#1775b3;
-webkit-box-shadow:0px 0px 15px #00000029;
-moz-box-shadow:0px 0px 15px #00000029;
box-shadow:0px 0px 15px #00000029;
}
.hero-agency .video-play-main {
display: inline-block;
padding: 5px;
z-index: 3333;
position: relative;
}
.hero-agency .waves-block .waves {
position: absolute;
width: 150px;
height: 150px;
border: 2px solid #1775b38a;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
border-radius: 100%;
-webkit-animation: waves 3s ease-in-out infinite;
animation: waves 3s ease-in-out infinite;
left: 50%;
margin-left: -75px;
top: 50%;
margin-top: -75px;
}
.hero-agency .waves-block .wave-1 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.hero-agency .waves-block .wave-2 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.hero-agency .waves-block .wave-3 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#-webkit-keyframes waves {
0% {
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
50% {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
#keyframes waves {
0% {
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
50% {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
/* Agency Feature */
.hero-agency .agency-feature {
display: block;
text-align: center;
margin-top: 40px;
}
.hero-agency .a-feature {
background: #fff;
padding: 45px 20px;
text-align: center;
z-index: 333;
position: relative;
width: 220px;
display: inline-block;
margin-right: 20px;
border-radius: 0;
box-shadow: -2px 4px 13px rgba(0, 0, 0, 0.12);
border-top: 2px solid #1775b3;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.hero-agency .a-feature:hover{
border-top-color:#1775b3;
-webkit-transform:scale(1.05);
-moz-transform:scale(1.05);
transform:scale(1.05);
}
.hero-agency .a-feature:last-child{
margin:0;
}
.hero-agency .a-feature i {
display: inline-block;
border-radius: 100%;
font-size: 40px;
top: -30px;
background: #fff;
color: #1775b3;
left: 50%;
}
.hero-agency .a-feature h4 {
color: #2E2751;
font-size: 18px;
margin-top: 12px;
margin-bottom: 12px;
line-height: 22px;
}
.hero-agency .a-feature p {
line-height: 22px;
font-size: 14px;
}
/*======================================
End Hero Area CSS
========================================*/
To rephrase your question, you need to design the site to be mobile.
That involves adding new CSS rules that apply at lower screen sizes (or higher, it's your CSS).
If you apply CSS media queries like they do in this popular SO post, then you will be probably be able to solve your problem:
CSS media queries for screen sizes
I have removed irrelevant stuff to keep the question short, I had an issue with the same code earlier, I asked few more questions after it was resolved but did not hear back, that's why make a new post.
maintext class is not responding to any CSS styling e.g. border, background or other cosmetic properties, but has a major effect on the enclosing elements when commented out or deleted. Even an empty CSS declaration keeps the contents together when maintext class is deleted/commented out h1 spreads out and the effects go wild.
I want to position the maintext class including content elements to the right middle of the landing page. I can position button element and h1 items separately using with maintext class, using left and top properties, but I want the maintext block to position as a single unit.
#import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght#700&family=Reggae+One&display=swap');
html {
margin: 0;
padding: 0;
background-image: url(main.jpg);
width: 100%;
height: 100%;
background-size: cover;
z-index: 100;
position: relative;
}
html::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: white;
opacity: .3;
z-index: -10;
}
.menu {
display: inline-block;
margin-left: 52%;
/* border: 2px solid red; */
}
.menu ul {
right: 10px;
top: 10px;
list-style-type: none;
text-align: center;
border-radius: 10px;
background-color: transparent;
display: flex;
justify-content: center;
width: 600px;
padding: 0 10px;
height: 50px;
background-image: url(main.jpg);
background-size: cover;
background-position-x: -650px;
background-repeat: no-repeat;
background-color: tranparent .6;
}
.menu ul a {
text-decoration: none;
color: inherit;
transition-duration: 2s;
box-sizing: border-box;
}
.menu ul li {
border-collapse: collapse;
font-size: 18px;
font-family: 'Reggae One', cursive;
color: black;
box-sizing: border-box;
text-align: center;
margin-top: auto;
margin-bottom: auto;
margin-right: 40px;
display: inline-block;
/* padding: 7px 15px; */
border-radius: 7px;
transition-duration: 1s;
transition-timing-function: ease;
position: static;
font-weight: bolder;
background: transparent;
/* border: 1px solid red; */
text-decoration: underline;
}
.menu ul li:hover {
color: red;
/* box-shadow: 1px 1px 200px 200px rgba(92,137,204,.3); */
box-shadow: 1px 1px 200px 200px rgba(0, 0, 0, .3);
border: 1px solid black;
/* border: 1px solid rgba(0,0,0,.3); */
background: transparent;
}
/* /* .am
{
position:absolute;
}
ul.am{
position: absolute;
/* border: 2px solid red; */
/* list-style-type:none;
list-style-position: inside;
text-decoration: none;
display:none;
*/
*/
/* }
ul.am li{
display:block;
text-align: left;
margin-left:-40px;
padding:5px 0;
}
.menu ul li:hover ul.am{
display:block;
} */
*/
/*Main text on the main page*/
.maintext {
padding: 0;
margin: 0;
width: 100px;
height: 100px;
border: 2px solid red;
}
.maintext h1 {
z-index: 23;
color: transparent;
display: inline-block;
position: relative;
left: 900px;
top: 200px;
font-family: 'Reggae One', cursive;
border: 2px solid red;
margin-top: -10px;
animation: show .5s ease forwards;
animation-delay: 1s;
}
.maintext h1 span {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
background-color: rgba(0, 0, 0, .2);
animation: overlay 1s ease forwards;
animation-delay: .5s;
}
h1:nth-of-type(1) {
animation-delay: 1s;
}
h1:nth-of-type(2) {
animation-delay: 2s;
}
h1:nth-of-type(3) {
animation-delay: 3s;
}
h1:nth-of-type(1) span {
animation-delay: .5s;
}
h1:nth-of-type(2) span {
animation-delay: 1.5s;
}
h1:nth-of-type(3) span {
animation-delay: 2.5s;
}
.maintext .butt {
z-index: 45;
position: relative;
left: 900px;
top: 200px;
width: 250px;
height: 50px;
padding: 5px 30px;
border-radius: 8px;
background-color: transparent;
font-size: 25px;
font-weight: bolder;
font-family: 'Reggae One', cursive;
letter-spacing: 4px;
transition-duration: 2s;
transition-timing-function: ease;
color: black;
border: 2px solid black;
}
.maintext .butt:hover {
color: white;
box-shadow: 1px 1px 200px 200px rgba(92, 137, 204, .3);
background: transparent;
}
.maintext .align h1 {
display: flex;
justify-content: center;
align-items: center;
}
#keyframes overlay {
50% {
width: 100%;
left: 0;
}
100% {
left: 100%;
width: 0;
}
}
#keyframes show {
100% {
color: rgb(0, 0, 0, .8);
}
}
<section class="hero">
<div class="menu">
<ul>
<li>About Me</li>
<li>Work Experience</li>
<li>Hobbies</li>
<li>Gallery</samp>
</li>
</ul>
</div>
<div class="maintext">
<h1 class="align">Hello, <span></span></h1><br>
<h1 class="align">My Name is <span></span></h1><br>
<h1 class="align">Abc Xyz <span></span></h1><br>
<!-- <button class="butt align">Portfolio</button> -->
</div>
<div style="clear: both"></div>
</section>
I am a beginner in using HTML/CSS, but I started by editing different things to catch as little as possible. I have a problem. I was helped by a friend to create a menu, but it does not increase/shrink/center on the right side after each monitor/phone from which the site is accessed.
I don't know what to do first.
HTML
<!-- /Main navigation -->
</div>
</nav>
<div class="home-wrapper">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="home-content">
<h1 class="white-text"><b>Adrian Vichiriuc</b></h1>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- /Header -->
<!-- Back to top -->
<div id="back-to-top"></div>
<!-- /Back to top -->
<!-- Preloader -->
<div id="preloader">
<div class="preloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- /Preloader -->
<!-- jQuery Plugins -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!-- Footer -->
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
}
</style>
<div class="footer">
<p style="font-size:14px; color:#000000; font-weight:normal; text-align: center ">
COPYRIGHT © 2019. SITE CREAT DE <span style="color: #07B425; font-weight:bold">ADRIAN VICHIRIUC</span></p>
</div>
</body>
</html>
CSS
/*------------------------------------*\
General
\*------------------------------------*/
/* -- Buttons -- */
.main-btn, .white-btn, .outline-btn {
display: inline-block;
padding: 10px 35px;
margin: 3px;
border: 2px solid transparent;
border-radius: 3px;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.main-btn {
background: #6195FF;
color: #FFF;
}
.white-btn {
background: #FFF;
color: #10161A !important;
}
.outline-btn {
background: transparent;
color: #6195FF !important;
border-color: #6195FF;
}
.main-btn:hover, .white-btn:hover, .outline-btn:hover {
opacity: 0.8;
}
/*------------------------------------*\
Logo
\*------------------------------------*/
.navbar-brand {
padding: 0;
}
.navbar-right {
float: right!important;
margin-right: -350px;
}
.navbar-brand .logo, .navbar-brand .logo-alt {
max-height: 50px;
display: block;
}
#nav:not(.nav-transparent):not(.fixed-nav) .navbar-brand .logo-alt {
display: none;
}
#nav.nav-transparent:not(.fixed-nav) .navbar-brand .logo {
display: none;
}
#nav.fixed-nav .navbar-brand .logo-alt {
display: none;
}
#media only screen and (max-width: 767px) {
#nav.nav-transparent .navbar-brand .logo-alt {
display: none !important;
}
#nav.nav-transparent .navbar-brand .logo {
display: block !important;
}
}
/*------------------------------------*\
Navigation
\*------------------------------------*/
#nav {
padding: 10px 0px;
background: #FFF;
-webkit-transition: 0.2s padding;
transition: 0.2s padding;
z-index: 999;
}
#nav.navbar {
border: none;
border-radius: 0;
margin-bottom: 0px;
}
#nav.fixed-nav {
position: fixed;
left: 0;
right: 0;
padding: 0px 0px;
background-color: #FFF !important;
border-bottom: 1px solid #EEE;
}
#nav.nav-transparent {
background: transparent;
}
/* -- default nav -- */
#media only screen and (min-width: 768px) {
.main-nav li {
padding: 0px 15px;
}
.main-nav li a {
font-size: 14px;
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.main-nav>li>a {
color: #10161A;
padding: 15px 0px;
}
#nav.nav-transparent:not(.fixed-nav) .main-nav>li>a {
color: #000;
}
.main-nav>li>a:hover, .main-nav>li>a:focus, .main-nav>li.active>a {
background: transparent;
color: #6195FF;
}
.main-nav>li>a:after {
content: "";
display: block;
background-color: #6195FF;
height: 2px;
width: 0%;
-webkit-transition: 0.2s width;
transition: 0.2s width;
}
.main-nav>li>a:hover:after, .main-nav>li.active>a:after {
width: 100%;
}
/* dropdown */
.has-dropdown {
position: relative;
}
.has-dropdown>a:before {
font-family: 'FontAwesome';
content: "\f054";
font-size: 6px;
margin-left: 6px;
float: right;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 0.2s transform;
transition: 0.2s transform;
}
.dropdown {
position: absolute;
right: -50%;
top: 0;
background-color: #6195FF;
width: 200px;
-webkit-box-shadow: 0px 5px 5px -5px rgba(53, 64, 82, 0.2);
box-shadow: 0px 5px 5px -5px rgba(53, 64, 82, 0.2);
-webkit-transform: translateY(15px) translateX(50%);
-ms-transform: translateY(15px) translateX(50%);
transform: translateY(15px) translateX(50%);
opacity: 0;
visibility: hidden;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.main-nav>.has-dropdown>.dropdown {
top: 100%;
right: 50%;
}
.main-nav>.has-dropdown>.dropdown .dropdown.dropdown-left {
right: 150%;
}
.dropdown li a {
display: block;
color: #FFF;
border-top: 1px solid rgba(250, 250, 250, 0.1);
padding: 10px 0px;
}
.dropdown li:nth-child(1) a {
border-top: none;
}
.has-dropdown:hover>.dropdown {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px) translateX(50%);
-ms-transform: translateY(0px) translateX(50%);
transform: translateY(0px) translateX(50%);
}
.has-dropdown:hover>a:before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.nav-collapse {
display: none;
}
}
/* -- mobile nav -- */
#media only screen and (max-width: 767px) {
#nav {
padding: 0px 0px;
}
#nav.nav-transparent {
background: #FFF;
}
.main-nav {
position: fixed;
right: 0;
height: calc(100vh - 80px);
-webkit-box-shadow: 0px 80px 0px 0px #1C1D21;
box-shadow: 0px 80px 0px 0px #1C1D21;
max-width: 250px;
width: 0%;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
margin: 0;
overflow-y: auto;
background: #1C1D21;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
#nav.open .main-nav {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
width: 100%;
}
.main-nav li {
border-top: 1px solid rgba(250, 250, 250, 0.1);
}
.main-nav li a {
display: block;
color: #FFF;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.main-nav>li.active {
border-left: 6px solid #6195FF;
}
.main-nav li a:hover, .main-nav li a:focus {
background-color: #6195FF;
color: #FFF;
opacity: 1;
}
.has-dropdown>a:after {
content: "\f054";
font-family: 'FontAwesome';
float: right;
-webkit-transition: 0.2s -webkit-transform;
transition: 0.2s -webkit-transform;
transition: 0.2s transform;
transition: 0.2s transform, 0.2s -webkit-transform;
}
.dropdown {
opacity: 0;
visibility: hidden;
height: 0;
background: rgba(250, 250, 250, 0.1);
}
.dropdown li a {
padding: 6px 10px;
}
.has-dropdown.open-drop>a:after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.has-dropdown.open-drop>.dropdown {
opacity: 1;
visibility: visible;
height: auto;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
}
/* -- nav btn collapse -- */
.nav-collapse {
position: relative;
float: right;
width: 40px;
height: 40px;
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
z-index: 99999;
}
.nav-collapse span {
display: block;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
width: 25px;
}
.nav-collapse span:before, .nav-collapse span:after {
content: "";
display: block;
}
.nav-collapse span, .nav-collapse span:before, .nav-collapse span:after {
height: 4px;
background: #10161A;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.nav-collapse span:before {
-webkit-transform: translate(0%, 10px);
-ms-transform: translate(0%, 10px);
transform: translate(0%, 10px);
}
.nav-collapse span:after {
-webkit-transform: translate(0%, -14px);
-ms-transform: translate(0%, -14px);
transform: translate(0%, -14px);
}
#nav.open .nav-collapse span {
background: transparent;
}
#nav.open .nav-collapse span:before {
-webkit-transform: translateY(0px) rotate(-135deg);
-ms-transform: translateY(0px) rotate(-135deg);
transform: translateY(0px) rotate(-135deg);
}
#nav.open .nav-collapse span:after {
-webkit-transform: translateY(-4px) rotate(135deg);
-ms-transform: translateY(-4px) rotate(135deg);
transform: translateY(-4px) rotate(135deg);
}
/*------------------------------------*\
Header
\*------------------------------------*/
header {
position: relative;
}
#home {
height: 100vh;
}
#home .home-wrapper {
position: absolute;
left: 0px;
right: 0px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.home-content button {
margin-top: 20px;
}
.header-wrapper h2 {
display: inline-block;
margin-bottom: 0px;
}
.header-wrapper .breadcrumb {
float: right;
background: transparent;
margin-bottom: 0px;
}
.header-wrapper .breadcrumb .breadcrumb-item.active {
color: #868F9B;
}
.breadcrumb>li+li:before {
color: #868F9B;
}
/*------------------------------------*\
About
\*------------------------------------*/
.about {
position: relative;
text-align: center;
padding: 40px 20px;
border: 1px solid #EEE;
margin: 15px 0px;
}
.about i {
font-size: 36px;
color: #6195FF;
margin-bottom: 20px;
}
.about:after {
content: "";
background-color: #1C1D21;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0%;
z-index: -1;
-webkit-transition: 0.2s width;
transition: 0.2s width;
}
.about:hover:after {
width: 100%;
}
.about h3 {
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.about:hover h3 {
color: #fff;
}
/*------------------------------------*\
Portfolio
\*------------------------------------*/
.work {
position: relative;
padding: 20px;
}
.work>img {
width: 100%;
}
.work .overlay {
background: #1C1D21;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 0;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.work:hover .overlay {
-webkit-transition-delay: 0s;
transition-delay: 0s;
opacity: 0.8;
}
.work .work-content {
position: absolute;
left: 25px;
right: 25px;
top: 50%;
text-align: center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.work .work-content h3 {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
color: #FFF;
margin-bottom: 30px;
-webkit-transition: 0.2s all;
transition: 0.2s all;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.work:hover .work-content h3 {
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.work .work-content span {
display: block;
text-transform: uppercase;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
color: #6195FF;
margin-bottom: 5px;
-webkit-transition: 0.2s all;
transition: 0.2s all;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.work:hover .work-content span {
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.work .work-link {
text-align: center;
margin-top: 20px;
opacity: 0;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.work .work-link a {
display: inline-block;
width: 50px;
height: 50px;
background-color: #6195FF;
color: #FFF;
line-height: 50px;
text-align: center;
}
.work:hover .work-link {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
opacity: 1;
}
/*------------------------------------*\
Services
\*------------------------------------*/
.service {
position: relative;
padding: 40px 20px 40px 70px;
margin: 15px 0px;
border: 1px solid #EEE;
}
.service i {
position: absolute;
left: 20px;
text-align: center;
font-size: 32px;
color: #6195FF;
border-radius: 50%;
}
.service:after {
content: "";
background-color: #1C1D21;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0%;
z-index: -1;
-webkit-transition: 0.2s width;
transition: 0.2s width;
}
.service:hover:after {
width: 100%;
}
.service h3 {
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.service:hover h3 {
color: #fff;
}
/*------------------------------------*\
Why choose us
\*------------------------------------*/
.feature {
margin: 15px 0px;
}
.feature i {
float: left;
padding: 5px;
border-radius: 50%;
color: #6195FF;
border: 1px solid #6195FF;
margin-right: 5px;
}
/*------------------------------------*\
Numbers
\*------------------------------------*/
.number {
text-align: center;
margin: 15px 0px;
}
.number i {
color: #6195FF;
font-size: 36px;
margin-bottom: 20px;
}
.number h3 {
font-size: 36px;
margin-bottom: 30px;
}
/*------------------------------------*\
Pricing
\*------------------------------------*/
.pricing {
position: relative;
text-align: center;
border: 1px solid #EEE;
background-color: #FFF;
z-index: 11;
margin: 15px 0px;
}
.pricing::after {
content: "";
background-color: #1C1D21;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 0%;
z-index: -1;
-webkit-transition: 0.2s height;
transition: 0.2s height;
}
.pricing:hover:after {
height: 100%;
}
.pricing .price-head {
position: relative;
margin-bottom: 20px;
}
.pricing .price-title {
display: block;
padding: 40px 0px 20px;
text-transform: uppercase;
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.pricing:hover .price-title {
color: #6195FF;
}
.pricing .price {
position: relative;
width: 140px;
height: 140px;
line-height: 140px;
text-align: center;
margin: auto;
border-radius: 50%;
border: 2px solid #6195FF;
}
.pricing .price h3 {
font-size: 42px;
margin: 0px;
-webkit-transition: 0.2s color;
transition: 0.2s color;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
position: absolute;
left: 0;
right: 0;
}
.pricing:hover .price h3 {
color: #fff;
}
.pricing .duration {
display: block;
font-size: 14px;
text-transform: uppercase;
color: #10161A;
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.pricing:hover .duration {
color: #fff;
}
.pricing .price-btn {
padding-top: 20px;
padding-bottom: 40px;
}
/*------------------------------------*\
Testimonial
\*------------------------------------*/
.testimonial {
margin: 15px 0px;
}
.testimonial-meta {
position: relative;
padding-left: 90px;
height: 70px;
margin-bottom: 20px;
padding-top: 10px;
}
.testimonial img {
position: absolute;
left: 0;
top: 0;
width: 70px !important;
height: 70px !important;
border-radius: 50%;
}
.testimonial h3 {
margin-bottom: 5px;
}
.testimonial span {
font-size: 14px;
color: #6195FF;
text-transform: uppercase;
}
/*------------------------------------*\
Team
\*------------------------------------*/
.team {
position: relative;
background-color: #F4F4F4;
padding: 40px 20px;
margin: 15px 0px;
}
.team::after {
content: "";
background-color: #1C1D21;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 0%;
z-index: 1;
-webkit-transition: 0.2s height;
transition: 0.2s height;
}
.team:hover:after {
height: 100%;
}
.team-img {
position: relative;
margin-bottom: 20px;
z-index: 11;
}
.team-img>img {
width: 100%;
}
.team .overlay {
background: #1C1D21;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
opacity: 0;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.team:hover .overlay {
opacity: 0.8;
}
.team .team-content {
text-align: center;
position: relative;
z-index: 11;
}
.team .team-content h3 {
margin-bottom: 30px;
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.team .team-content span {
font-size: 14px;
text-transform: uppercase;
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.team:hover .team-content h3 {
color: #FFF;
}
.team:hover .team-content span {
color: #6195FF;
}
.team .team-social {
position: absolute;
top: 0;
right: 0;
opacity: 0;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.team .team-social a {
display: block;
line-height: 50px;
width: 50px;
text-align: center;
background-color: #6195FF;
color: #FFF;
}
.team:hover .team-social {
opacity: 1;
}
.rainbow {
/* Font options */
font-size:40px;
/* Chrome, Safari, Opera */
-webkit-animation: rainbow 3s infinite;
/* Internet Explorer */
-ms-animation: rainbow 3s infinite;
/* Standar Syntax */
animation: rainbow 3s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes rainbow{
0%{color: orange;}
10%{color: purple;}
20%{color: red;}
30%{color: CadetBlue;}
40%{color: yellow;}
50%{color: coral;}
60%{color: green;}
70%{color: cyan;}
80%{color: DeepPink;}
90%{color: DodgerBlue;}
100%{color: orange;}
}
/* Internet Explorer */
#-ms-keyframes rainbow{
0%{color: orange;}
10%{color: purple;}
20%{color: red;}
40%{color: yellow;}
60%{color: green;}
100%{color: orange;}
}
/* Standar Syntax */
#keyframes rainbow{
0%{color: orange;}
10%{color: purple;}
20%{color: red;}
40%{color: yellow;}
60%{color: green;}
100%{color: orange;}
}
/* blog reply form */
.reply-form {
margin: 40px 0px;
}
.reply-form form .input, .reply-form form .input , .reply-form form textarea {
margin-bottom:20px;
}
.reply-form form .input, .reply-form form .input {
width: calc(50% - 10px);
display: inline-block;
}
.reply-form form .input:nth-child(2) {
margin-left: 15px;
}
/*------------------------------------*\
Blog sidebar
\*------------------------------------*/
#aside .widget {
margin-bottom: 40px;
}
.widget h3 {
text-transform: uppercase;
}
/* -- search sidebar -- */
#aside .widget-search {
position: relative;
}
#aside .widget-search .search-input {
padding-right: 50px;
}
#aside .widget-search .search-btn {
position: absolute;
right: 0px;
bottom: 0px;
width: 40px;
height: 40px;
border: none;
line-height: 40px;
background-color: transparent;
color: #6195FF;
}
/* -- category sidebar -- */
.widget-category a {
display: block;
font-size: 14px;
color: #354052;
border-bottom: 1px solid #EEE;
padding: 5px;
}
.widget-category a:nth-child(1) {
border-top: 1px solid #EEE;
}
.widget-category a span {
float: right;
color: #6195FF;
}
.widget-category a:hover {
color: #6195FF;
}
/* -- tags sidebar -- */
.widget-tags a {
display: inline-block;
padding: 6px 13px;
font-size: 14px;
margin: 2px 0px;
background: #F4F4F4;
color: #10161A;
}
.widget-tags a:hover {
color: #FFF;
background-color: #6195FF;
}
/* -- posts sidebar -- */
.widget-post {
min-height: 70px;
margin-bottom: 25px;
}
.widget-post img {
display: block;
float: left;
margin-right: 10px;
margin-top: 5px;
}
.widget-post a {
display: block;
color: #10161A;
}
.widget-post a:hover {
color: #6195FF;
}
.widget-post .blog-meta {
display: inline-block;
}
.widget-post .blog-meta li {
display: inline-block;
margin-right: 5px;
color: #6195FF;
font-size: 12px;
}
.widget-post li i {
color: #6195FF;
margin-right: 5px;
}
/*------------------------------------*\
Contact
\*------------------------------------*/
.contact {
margin: 15px 0px;
text-align: center;
}
.contact i {
font-size: 36px;
color: #6195FF;
margin-bottom: 20px;
}
.contact-form {
text-align: center;
margin-top: 40px;
}
.contact-form .input {
margin-bottom: 20px;
}
.contact-form .input:nth-child(1), .contact-form .input:nth-child(2) {
width: calc(50% - 10px);
}
.contact-form .input:nth-child(2) {
margin-left: 15px;
}
/*------------------------------------*\
Footer
\*------------------------------------*/
#footer {
position: relative;
}
.footer-logo {
text-align: center;
margin-bottom: 40px;
}
.footer-logo>a>img {
max-height: 80px;
}
.footer-follow {
text-align: center;
margin-bottom: 20px;
}
.footer-follow li {
display: inline-block;
margin-right: 10px;
margin-bottom: 13px;
}
.footer-follow li a {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 3px;
background-color: #6195FF;
color:#FFF;
}
.footer-copyright p {
text-align: center;
font-size: 200px;
text-transform: uppercase;
margin: 0;
height: 20px;
}
}
.home-content__main {
padding-top: 24rem;
position: relative;
}
/*------------------------------------*\
Responsive
\*------------------------------------*/
#media only screen and (max-width: 991px) {}
#media only screen and (max-width: 767px) {
.section-header h2.title {
font-size:31.5px;
}
.main-btn , .default-btn , .outline-btn , .white-btn {
padding: 8px 22px;
font-size:14px;
}
.home-content h1 {
font-size:36px;
}
.header-wrapper h2 {
margin-bottom: 20px;
text-align: center;
display: block;
}
.header-wrapper .breadcrumb {
float: none;
text-align: center;
}
}
#media only screen and (max-width: 480px) {
#portfolio [class*='col-xs'] {
width:100%;
}
#numbers [class*='col-xs'] {
width:100%;
}
.contact-form .input:nth-child(1), .contact-form .input:nth-child(2) {
width: 100%;
}
.contact-form .input:nth-child(2) {
margin-left: 0px;
}
.reply-form form .input, .reply-form form .input {
width: 100%;
}
.reply-form form .input:nth-child(2) {
margin-left: 0px;
}
.blog-author .media .media-left {
display: block;
padding-right: 0;
margin-bottom: 20px;
}
.blog-author .media {
text-align: center;
}
.blog-author .media .media-heading .author-social {
margin-top: 10px;
float: none;
}
.blog-author .media .media-left img {
margin: auto;
}
.blog-comments .media .media {
margin:0px -15px;
}
}
/*------------------------------------*\
Owl theme
\*------------------------------------*/
/* -- dots -- */
.owl-theme .owl-dots .owl-dot span {
border: none;
background: #EEE;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.owl-theme .owl-dots .owl-dot:hover span {
background: #6195FF;
}
.owl-theme .owl-dots .owl-dot.active span {
background: #6195FF;
width:20px;
}
.row {
width: 94%;
max-width: 1200px;
margin: 0 auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
.row .row {
width: auto;
max-width: none;
margin-left: -20px;
margin-right: -20px;
}
/* -- nav -- */
.owl-theme .owl-nav {
opacity: 0;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.owl-theme:hover .owl-nav {
opacity: 1;
}
.owl-theme .owl-nav [class*='owl-'] {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background: #6195FF;
color: #FFF;
padding: 0px;
width: 50px;
height: 50px;
border-radius:3px;
line-height: 50px;
margin: 0;
}
.owl-theme .owl-prev {
left: 0px;
}
.owl-theme .owl-next {
right: 0px;
}
.owl-theme .owl-nav [class*='owl-']:hover {
opacity: 0.8;
background: #6195FF;
}
/*------------------------------------*\
Back to top
\*------------------------------------*/
#back-to-top {
display:none;
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #6195FF;
border-radius:3px;
color: #FFF;
z-index: 9999;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
cursor: pointer;
}
#back-to-top:after {
content: "\f106";
font-family: 'FontAwesome';
}
#back-to-top:hover {
opacity: 0.8;
}
/*------------------------------------*\
Preloader
\*------------------------------------*/
#preloader {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: #FFF;
z-index: 99999;
}
.preloader {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.preloader span {
display: inline-block;
background-color: #6195FF;
width: 25px;
height: 25px;
-webkit-animation: 1s preload ease-in-out infinite;
animation: preload 1s ease-in-out infinite;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
border-radius:50%;
}
.preloader span:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.preloader span:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.preloader span:nth-child(3) {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.preloader span:nth-child(4) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#-webkit-keyframes preload {
0% {
-webkit-transform:scale(0);
transform:scale(0);
}
50% {
-webkit-transform:scale(1);
transform:scale(1);
}
100% {
-webkit-transform:scale(0);
transform:scale(0);
}
}
#keyframes preload {
0% {
-webkit-transform:scale(0);
transform:scale(0);
}
50% {
-webkit-transform:scale(1);
transform:scale(1);
}
100% {
-webkit-transform:scale(0);
transform:scale(0);
}
}
I tried a few things but none worked, because I'm an nob.
I've been working on a website, and we wanted to an animated background. But the problem with this is that my Navbar disappears after the second picture is displayed.
This only happens on iOS devices, because my partner tried it with android and it worked how it is supposed to.
(tried it on both safari and google chrome.)
With header:
header disappears:
homepage:
<body>
<div class="bg-fade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>
<div id="main-container">
<!-- header -->
<?php include('inc/header.php'); ?>
CSS BACKGROUND:
.bg-fade > figure {
top: 0px;
left: 0px;
color: transparent;
width: 100%;
height: 100%;
opacity: 0;
z-index: -1;
position: fixed;
animation: imageAnimation 36s linear infinite 0s;
background-size: cover;
backface-visibility: hidden;
}
.bg-fade > figure:nth-child(1) {
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_01.jpg');
}
.bg-fade > figure:nth-child(2) {
animation-delay: 6s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_02.jpg');
}
.bg-fade > figure:nth-child(3) {
animation-delay: 12s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_03.jpg');
}
.bg-fade > figure:nth-child(4) {
animation-delay: 18s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_04.jpg');
}
.bg-fade > figure:nth-child(5) {
animation-delay: 24s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_05.jpg');
}
.bg-fade > figure:nth-child(6) {
animation-delay: 30s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_06.jpg');
}
/*keyframes .bg-fade*/
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
CSS NAV:
/*navigation*/
nav ul {
margin: 37px 0px 0px 0px;
padding: 0px;
list-style: none;
text-align: center;
z-index: 100;
opacity: 1;
}
nav li.left {
float: left;
color: #ffffff;
width: 125px;
margin: 0px -45px 0px 50px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
background-color: #E6332A;
position: relative;
}
nav li.left:hover {
background-color: #ff3333;
}
nav li.left.active {
background-color: #E6332A;
}
nav li.left.active:after {
left: 45%;
width: 0px;
bottom: -20px;
margin: 0px 0px 0px -10px;
content:"";
position: absolute;
border-top: 20px solid #E6332A;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
nav li.right.navigation-msp {
color: #ffffff;
width: 125px;
margin: 0px 0px 0px 150px;
display: inline-block;
padding: 15px 10px;
font-size: 14px;
position: relative;
background-color: #EF7D03;
}
nav li.right.navigation-msp:hover {
background-color: #F88017;
}
nav li.right.active:after {
left: 45%;
width: 0px;
bottom: -20px;
margin: 0px 0px 0px -10px;
content:"";
position: absolute;
border-top: 20px solid #EF7D03;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
nav li.right.active.navigation-msp:hover {
background-color: #EF7D03;
}
.handle {
width: 100%;
color: white;
cursor: pointer;
padding: 15px 10px;
display: none;
text-align: left;
box-sizing: border-box;
background-color: #E6332A;
}
.handle:hover {
background-color: #FF3333;
}
#media screen and (max-width: 1000px) {
nav ul {
position: relative;
color: #ffffff;
margin-top: 37px;
margin-bottom: 0px;
padding: 0;
overflow: hidden;
text-align: center;
}
nav li.left {
color: #ffffff;
width: 100%;
margin: 0px 0px 0px 0px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
background-color: #E6332A;
position: relative;
}
nav li.right.navigation-msp {
color: #ffffff;
width: 100%;
margin: 0px 0px 0px 0px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
position: relative;
}
nav a {
color: inherit;
text-decoration: none;
}
nav ul li {
margin: 0px 10px 0px 10px;
display: inline-block;
padding: 15px 10px 15px 10px;
background-color: #E6332A;
}
nav ul li {
width: 100%;
margin: 0;
text-align: left;
box-sizing: border-box;
}
nav ul {
max-height: 0;
}
.showing {
max-height: 15em;
border-bottom: 1px solid black;
}
.handle {
display: block !important;
}
I've been working on an website, and we wanted to a animated background.
But the problem with this is that my Navbar disappears after the second picture is displayed.
This only happends on ios devices, because my partner tried it with android and it worked how it is supposed to.
(tried it on both safari and google chrome.)
With header: https://imgur.com/a/rLswc
header disappears: https://imgur.com/a/G2A5b
homepage:
<body>
<div class="bg-fade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>
<div id="main-container">
<!-- header -->
<?php include('inc/header.php'); ?>
CSS - background:
.bg-fade > figure {
top: 0px;
left: 0px;
color: transparent;
width: 100%;
height: 100%;
opacity: 0;
z-index: -1;
position: fixed;
animation: imageAnimation 36s linear infinite 0s;
background-size: cover;
backface-visibility: hidden;
}
.bg-fade > figure:nth-child(1) {
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_01.jpg');
}
.bg-fade > figure:nth-child(2) {
animation-delay: 6s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_02.jpg');
}
.bg-fade > figure:nth-child(3) {
animation-delay: 12s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_03.jpg');
}
.bg-fade > figure:nth-child(4) {
animation-delay: 18s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_04.jpg');
}
.bg-fade > figure:nth-child(5) {
animation-delay: 24s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_05.jpg');
}
.bg-fade > figure:nth-child(6) {
animation-delay: 30s;
background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_06.jpg');
}
/*keyframes .bg-fade*/
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
CSS - nav:
/*navigation*/
nav ul {
margin: 37px 0px 0px 0px;
padding: 0px;
list-style: none;
text-align: center;
z-index: 100;
opacity: 1;
}
nav li.left {
float: left;
color: #ffffff;
width: 125px;
margin: 0px -45px 0px 50px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
background-color: #E6332A;
position: relative;
}
nav li.left:hover {
background-color: #ff3333;
}
nav li.left.active {
background-color: #E6332A;
}
nav li.left.active:after {
left: 45%;
width: 0px;
bottom: -20px;
margin: 0px 0px 0px -10px;
content:"";
position: absolute;
border-top: 20px solid #E6332A;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
nav li.right.navigation-msp {
color: #ffffff;
width: 125px;
margin: 0px 0px 0px 150px;
display: inline-block;
padding: 15px 10px;
font-size: 14px;
position: relative;
background-color: #EF7D03;
}
nav li.right.navigation-msp:hover {
background-color: #F88017;
}
nav li.right.active:after {
left: 45%;
width: 0px;
bottom: -20px;
margin: 0px 0px 0px -10px;
content:"";
position: absolute;
border-top: 20px solid #EF7D03;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
nav li.right.active.navigation-msp:hover {
background-color: #EF7D03;
}
.handle {
width: 100%;
color: white;
cursor: pointer;
padding: 15px 10px;
display: none;
text-align: left;
box-sizing: border-box;
background-color: #E6332A;
}
.handle:hover {
background-color: #FF3333;
}
#media screen and (max-width: 1000px) {
nav ul {
position: relative;
color: #ffffff;
margin-top: 37px;
margin-bottom: 0px;
padding: 0;
overflow: hidden;
text-align: center;
}
nav li.left {
color: #ffffff;
width: 100%;
margin: 0px 0px 0px 0px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
background-color: #E6332A;
position: relative;
}
nav li.right.navigation-msp {
color: #ffffff;
width: 100%;
margin: 0px 0px 0px 0px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
position: relative;
}
nav a {
color: inherit;
text-decoration: none;
}
nav ul li {
margin: 0px 10px 0px 10px;
display: inline-block;
padding: 15px 10px 15px 10px;
background-color: #E6332A;
}
nav ul li {
width: 100%;
margin: 0;
text-align: left;
box-sizing: border-box;
}
nav ul {
max-height: 0;
}
.showing {
max-height: 15em;
border-bottom: 1px solid black;
}
.handle {
display: block !important;
}
}