Scroll page parallax when I click on menu bar? - html

my question is related to this question parallax menu scrolling
I am trying to the same thing.
But, due to some issue, its not working. I think I am choosing the wrong id and class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SNAPCHAT</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="js/jquery.stellar.js"></script>
<script src="js/scrip.js"></script>
<script src="js/jquery.nicescroll.js"></script>
</head>
<body>
<a id="#nav1"></a>
<a id="#nav2"></a>
<a id="#nav3"></a>
<a id="#nav4"></a>
Back to Top
<div id="nav">
<!-- <div id="logo"><img src=""></div> -->
<ul>
<li>Home</span></li>
<li>Sponsored Snapchat</li>
<li>Snapchat Content</li>
<li>Display Ads</li>
<li>Media Central</li>
</ul>
</div id="main">
<div id="#nav1" class="image" data-stellar-background-ratio="0.5" >
<!-- <div id="content_1" class="content1">
-->
</div>
</div>
</div>
<div id="#nav2" class="image" data-stellar-background-ratio="0.4" ></div>
<!-- <div id="content_1" class="content2">
-->
</div>
<div id="#nav3" class="image" data-stellar-background-ratio="0.4" ></div>
<!-- <div id="content_1" class="content3">
-->
</div>
<div id="#nav4" class="image" data-stellar-background-ratio="0.4" ></div>
<!-- <div id="content_1" class="content4">
-->
</div>
<script type="text/javascript">
// create the back to top button
$('body').prepend('Back to Top');
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
$('a.back-to-top, a.simple-back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 700);
return false;
});
</script>
</body>
</html>
this is my css
body{
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
background-color: #fffc00;
}
.image {
height: 750px;
width: 100%;
/*background: #55e6c5;*/
}
.content {
height: 750px;
width:100%;
/* background: white;*/
z-index: 2;
}
.content h1 {
font-size: 40px;
color: #464646;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
margin: 30px 60px;
}
.content p {
font-size:20px;
color: #343434;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin: 30px 60px;
}
#nav1 {
background: url(../images/bg1.png);
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav2 {
background: url(../images/bg2.png);
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav3 {
background: url(../images/bg3.png) ;
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav4 {
background: url(../Images/bg4.png) ;
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px 80px 0 80px ;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav {
height: 70px;
width: 100%;
position: fixed;
top:5px;
left:0;
background: #00000;
z-index: 100;
}
a[id= "#nav1"]:target ~ #main div.image {
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
a[id= "#nav2"]:target ~ #main div.image {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[id= "#nav3"]:target ~ #main div.image {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[id= "#nav4"]:target ~ #main div.image {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
/*#nav #logo {
height: 50px;
width: 50px;
position: relative;
top: 0;
bottom:0;
margin: auto 100px;
text-align: left;
}*/
#nav #logo img {
height: 100%;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
opacity: 0.6;
filter: alpha(opacity=60)
}
li {
float: left;
padding-left:80px;
}
li a {
display: inline-block;
color: #fffc00;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: #fff;
}
a.back-to-top {
display: none;
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: #333 url("../images/up-arrow.png") no-repeat center 43%;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
/*#content_1 {position: relative;}*/
Please help me.
this is my code https://jsfiddle.net/vrg9qmp1/


Don't use # when defining an id attribute, only when referencing it in href or css selector. And only use the same id on a single element. So remove the a elements in the very beginning of your body, since you use the same ids later on.
This will not work.
<div id="#nav1">
<a href="nav1">
This will work:
<div id="nav1">
<a href="#nav1">

Related

How can a centered <hr> be absolutely placed within a div, without losing its center alignment?

I need this to be placed 20px from the bottom of the page, but every time I try to give it absolute positioning, it jumps halfway outside the div or it becomes longer.
It was centered using display:flex and justify-content:center. The exact same problem occurs with the socila icons, which need to be at the top on desktop and at the bottom on mobile, but if I give them an absolute position, then they are no longer centered.
Here is the entire page for you to see what I need, and thank you so much for your time:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/234b945d49.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
transition: 0.3s;
}
#main-menu-container{
right:0;
}
.sidenav {
padding:0;
height: 100%;
margin:0;
width: 0px;
position: fixed;
z-index: 1;
top: 0px;
right: 0;
background: radial-gradient(#3d77a7, #264c6d);
overflow-x: hidden;
transition: 0.5s ease-in-out;
text-align: center;
}
.sidenav ul{
list-style: none;
padding: 150px 0 0 0;
text-align:center;
display: inline-block;
}
.sidenav ul a {
padding: 8px 8px 8px 8px;
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
color:white;
font-weight:bold;
display: block;
transition: 0.3s;
}
.sidenav ul a:hover {
color: #ffdc00;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 20px;
font-size: 36px;
margin-left: 50px;
color:#ffdc00;
}
#main {
transition: margin-right .5s;
padding: 16px;
}
/* #media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
} */
#nav-icon3 {
width: 40px;
height: 30px;
position: fixed;
top:20px;
right:20px;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span{
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #ffdc00;
border-radius: 1px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .4s ease-in-out;
-moz-transition: .4s ease-in-out;
-o-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.social-icons {
display: flex;
justify-content: center;
position:absolute;
top: 20px;
}
.social-icons i{
color:#ffdc00;
padding:5px;
transition: 0.3s;
}
.social-icons i:hover{
color: white;
}
.menu-separator {
/* position:relative;
bottom:50px; */
border: none;
border-radius: 2px;
height: 7px !important;
opacity: 100%;
color: #ffdc00; /* old IE */
background: #ffdc00; /* Modern Browsers */
width: 80%;
margin: 20px auto 20px auto;
}
.menu-additional-links{
display: flex;
justify-content: center;
width: 80%;
margin: auto;
}
.menu-additional-links a{
text-decoration: none;
padding: 20px 15px 20px 15px;
color: white;
}
.menu-additional-links a:hover{
color: #ffdc00;
}
/*MOBILE BREAKPOINTS*/
#media only screen and (max-width: 768px) {
}
</style>
</head>
<body>
<div id="main-menu-container">
<div id="mySidenav" class="sidenav" role="navigation">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
<div class="social-icons">
<i class="fab fa-facebook-square fa-2xl"></i>
<i class="fab fa-instagram-square fa-2xl"></i>
<i class="fab fa-linkedin fa-2xl"></i>
</div>
<hr class="menu-separator">
<div class="menu-additional-links">
Datenschutzerklärung
Impressum
</div>
</div>
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span class="breakpoint"></span>
</div>
<script>
//check screen width via javascript, and pass a diffrent width to the nav menu
const mediaQuery = window.matchMedia('(min-width: 768px)')
let menuWidth = "";
if (mediaQuery.matches){menuWidth = "500px";} else {menuWidth = "100vw";}
function handleScreenChange(e){
if (mediaQuery.matches){
menuWidth = "500px";
} else {
menuWidth = "100vw";
}
}
mediaQuery.addListener(handleScreenChange);
//set the width and play the animation on hamburger click
$("#nav-icon3").click(function() {
if (document.getElementById('nav-icon3').classList.contains("open")){
document.getElementById("mySidenav").style.width = "0";
document.body.style.backgroundColor = "rgba(0,0,0,0)";
}
else{
document.getElementById("mySidenav").style.width = menuWidth;
document.body.style.backgroundColor = "rgba(0,0,0,0.5)";
}
document.getElementById('nav-icon3').classList.toggle("open");
});
</script>
</body>
</html>

You can try with this styles to hr
position: absolute;
bottom: 20px;
margin-left: 10%;
You have 80% for the width, so a left of 10% makes hr centered

CSS Img resize transition time only on hover

I'm having an issue with an animation on one of my images. I want the image to resize on hover with a transition time (and then have a transition time back to the original size when the mouse moves off the image) but then when i resize the window and the image resizes accordingly, it resizes with the transition time . Does anyone know a way to get around this?
<div class="column">
<a href="-----.html">
<img src="-----.jpg">
</a>
</div>
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
width:100%;
height: calc(100vh - 300px);
}
.column:hover img{
filter: brightness(0.5);
width:110%;
transform: translate(-5%,-5%);
transition: 0.6s ease;
height: calc(110vh - 300px);
}
I can see why the transition applies to the image when the window resizes, but i don't know how else to get the transition to apply when the mouse moves away. Can anyone suggest a way around this?
Gif of resizing issue
edit: full code posted below
html {
height: 100%;
}
body {
min-width: 600px;
min-height: 100%;
position: relative;
font-family: Helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #FFFFFF;
overflow-y: hidden;
}
/*Header*/
header {
background: #FFFFFF;
color: #F89828;
height: 159px;
}
header img {
margin-left: calc(50% - 122px);
margin-top: 60px;
margin-bottom: 60px;
height: 39px;
width: 244px;
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(100vh - 239px);
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(100vh - 239px);
transition: 0.6s ease;
}
.row .column:hover img {
transition: 0.6s ease;
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(110vh - 239px);
}
.centered {
color: #FFFFFF;
position: absolute;
font-size: 4em;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
}
/*footer*/
footer {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: #FFFFFF;
background-color: #808080;
font-weight: bold;
}
<body>
<header>
<img src="https://picsum.photos/400/100/?random">
</header>
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
<footer>
<p>This is where I would put some filler text, if I had any</p>
</footer>
</body>

You could set the transition on your image only when the window is hovered. This way, on resize it won't affect your element anymore, but on your element's hover and mouseout it will still be active.
/* when hovering the page */
:hover .row .column img {
transition: 0.6s ease;
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(80vh - 10px);
/* transition: 0.6s ease; [removed]*/
}
.row .column:hover img {
/* transition: 0.6s ease; [useless]*/
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(80vh - 10px);
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(60vh - 10px);
}
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
But using this solution, if mousing-out from the document itself, then the transition will also get disabled...
Unfortunately, I don't see any other solution than that, except using js of course.
(function(){
let timer;
const docEl = document.documentElement;
addEventListener('resize', e => {
clearTimeout(timer);
docEl.classList.add('resizing');
timer = setTimeout(_ => docEl.classList.remove('resizing'), 200);
});
})();
:root.resizing .row .column img {
transition: none;
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(80vh - 10px);
transition: 0.6s ease;
}
.row .column:hover img {
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(80vh - 10px);
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(60vh - 10px);
}
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>

You need to assign width without hover for animation on mouse out, check it
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
width:35%;
}
.column:hover img{
filter: brightness(0.5);
width:110%;
transform: translate(-5%,-5%);
transition: 0.6s ease;
}
<div class="column">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>

Try this:
.container {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.icon, .icon-one, .icon-two{
position: absolute;
transition: all .5s;
transform-style: preserve-3d;
backface-visibility: hidden;
width:50px;
height:50px;
}
}
.icon-wrap .icon-one{
width:150px;
height:150px;
transform:translate(0%,0%);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.icon-wrap:hover .icon{ transform: translate(0%,0%); }
/* ::: AUTOMATED EFFECTS */
.icon-wrap .icon{
animation: icon-wrap 5s 1s infinite alternate ease-in-out;
-webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}
#keyframes icon-wrap {
0% { transform:translate(0%,0%); }
100% { transform: translate(40%,40%)scale(2);
width:150px;
height:150px;
}
}
#-webkit-keyframes icon-wrap {
0% { transform: translate(0%,0%); }
100% { transform: translate(40%,40%) scale(2);
width:150px;
height:150px; }
}
<div class="container icon-wrap">
<div class="icon">
<div class="icon-one">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>
</div>
</div>
.container {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.icon, .icon-one, .icon-two{
position: absolute;
transition: all .5s;
transform-style: preserve-3d;
backface-visibility: hidden;
width:50px;
height:50px;
}
}
.icon-wrap .icon-one{
width:150px;
height:150px;
transform:translate(40%,40%)scale(2);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.icon-wrap:hover .icon{ transform: translate(40%,40%)scale(2); }
/* ::: AUTOMATED EFFECTS */
.icon-wrap .icon{
animation: icon-wrap 5s 1s infinite alternate ease-in-out;
-webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}
<div class="container icon-wrap">
<div class="icon">
<div class="icon-one">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>
</div>
</div>

Try using scale(2) it's working well for me.
But you need to change translate() value as per the scale() value as per your requirement.
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
}
.column:hover img{
filter: brightness(0.5);
transform: translate(50%,50%) scale(2);
transition: 0.6s ease;
}
<div class="column">
<a href="-----.html">
<img src="https://picsum.photos/300/100/?random">
</a>
</div>
Updated with your code.
html {
height: 100%;
}
body {
min-width: 600px;
min-height: 100%;
position: relative;
font-family: Helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #FFFFFF;
overflow-y: hidden;
}
/*Header*/
header {
background: #FFFFFF;
color: #F89828;
height: 159px;
}
header img {
margin-left: calc(50% - 122px);
margin-top: 60px;
margin-bottom: 60px;
height: 39px;
width: 244px;
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(100vh - 239px);
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(100vh - 239px);
transition: 0.6s ease;
}
.row .column:hover img {
transition: 0.6s ease;
width: 110%;
cursor: pointer;
transform: translate(-10%,-10%) scale(1.3);
filter: brightness(0.5);
height: calc(110vh - 239px);
}
.centered {
color: #FFFFFF;
position: absolute;
font-size: 4em;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
}
/*footer*/
footer {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: #FFFFFF;
background-color: #808080;
font-weight: bold;
}
<body>
<header>
<img src="https://picsum.photos/400/100/?random">
</header>
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
<footer>
<p>This is where I would put some filler text, if I had any</p>
</footer>
</body>
Hope this was helpful for you.

Full Width - Owl Carousel 2 issue

Attempting to create a full-width owl-carousel but I keep seeing this on .owl-stage when I inspect-element on chrome:
element.style {
transform: translate3d(-1872px, 0px, 0px);
transition: 0s;
width: 7264px;
padding-left: 200px;
padding-right: 200px;
}
Initially I tried to just overwrite padding on .owl-stage, but the padding stayed the same.
I also tried setting min-width for all images to 100% and 100vw, but that hasn't worked either.
Is there anyway to adjust the padding on .owl-stage?
This is my code:
$('.owl-carousel').owlCarousel({
stagePadding: 200,
loop:true,
margin:0,
singleItem:true,
nav:true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
dots:true,
// autoplay: true,
// autoplayHoverPause: true,
responsive:{
0:{
items:1,
stagePadding: 60
},
600:{
items:1,
stagePadding: 100
},
1000:{
items:1,
stagePadding: 200
},
1200:{
items:1,
stagePadding: 250
},
1400:{
items:1,
stagePadding: 300
},
1600:{
items:1,
stagePadding: 350
},
1800:{
items:1,
stagePadding: 400
}
}
});
body {
padding: 0;
margin: 80px 0 0 0;
font-family: Merriweather;
}
.owl-carousel:after {
content: "";
display: block;
position: absolute;
width: 8%;
top: 0;
bottom: 0;
left: 50%;
margin-left: 0;
pointer-events: none;
background: url() no-repeat center 50%;
background-size: 100% auto;
}
.owl-stage{
min-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.owl-item {
-webkit-backface-visibility: hidden;
-webkit-transform: translate(0) scale(1.0, 1.0);
}
.item {
opacity: 0.4;
transition: .4s ease all;
transform: scale(.6);
}
.item img{
display: block;
min-width: 100%;
width: auto;
height: auto;
max-height: 680px !important;
}
.active .item {
display: block;
width: 100%;
height: auto;
opacity: 1;
transform: scale(1);
max-height: 680px !important;
}
/* content and cta */
.inner {
position: absolute;
bottom: 20%;
left: 0;
right: 0;
text-align: center;
}
/* END CTA Button*/
/* Title Animation */
.reveal-text,
.reveal-text:after {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 600ms;
animation-duration: 600ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.reveal-text {
position: relative;
-webkit-user-select: none;
user-select: none;
color:#ffe221;
text-shadow: 1px 1px #000000;
white-space: nowrap;
}
.reveal-text:after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #8ce2ea;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
pointer-events: none;
}
.active .reveal-text{
-webkit-animation-name: reveal-text;
animation-name: reveal-text;
}
.active .reveal-text:after {
-webkit-animation-name: revealer-text;
animation-name: revealer-text;
}
/* Before animation */
#-webkit-keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
#keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
/* After animation */
#-webkit-keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
#keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
/* Title Animation END */
/* OWL-Carousel Navigation*/
.owl-nav div {
position: absolute;
top: 45%;
color: #cdcbcd;
}
.owl-nav i {
font-size: 52px;
}
.owl-nav .owl-prev {
left: 5% !important;
}
.owl-nav .owl-next {
right: 5% !important;;
}
.owl-prev:hover, .owl-next:hover{
text-shadow: 2px 2px #000000;
transform: translateX(10%);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.owl-prev:hover{
text-shadow: -2px 2px #000000;
transform: translateX(-10%);
}
.owl-theme .owl-dots .owl-dot span{
width: 0;
}
.owl-dots {
text-align: center;
position: fixed;
margin-top: 10px;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
/* END OWL-Carousel Navigation*/
#media only screen and (max-width:768px) {
#full-width{
padding: 0;
}
.item{
transform: scale(0);
}
.item img{
height: 400px !important;
}
.active .item img{
max-height: 400px;
}
}
#media only screen and (max-width:420px) {
.item img{
height: 200px !important;
}
.active .item img{
max-height: 200px;
}
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Tanya-UI-Kit-3 Full Page Width</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
</head>
<body>
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="item">
<img src="https://bboyjplus.files.wordpress.com/2014/04/bboying-steps-2043304.jpg" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.vimeocdn.com/video/550760587.jpg?mw=1920&mh=1080&q=70" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap js-cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</body>
</html>

Set items: 1, stagePadding: 0 on the carousel, body { margin: 0; }, removed your styling for .owl-stage (didn't do anything), and removed the max-height you had set on the images, which would distort them with min-width: 100% specified.
$('.owl-carousel').owlCarousel({
stagePadding: 0,
items: 1,
loop:true,
margin:0,
singleItem:true,
nav:true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
dots:true
});
body {
padding: 0;
margin: 0;
font-family: Merriweather;
}
.owl-carousel:after {
content: "";
display: block;
position: absolute;
width: 8%;
top: 0;
bottom: 0;
left: 50%;
margin-left: 0;
pointer-events: none;
background: url() no-repeat center 50%;
background-size: 100% auto;
}
.owl-item {
-webkit-backface-visibility: hidden;
-webkit-transform: translate(0) scale(1.0, 1.0);
}
.item {
opacity: 0.4;
transition: .4s ease all;
transform: scale(.6);
}
.item img{
display: block;
min-width: 100%;
width: auto;
height: auto;
}
.active .item {
display: block;
width: 100%;
height: auto;
opacity: 1;
transform: scale(1);
max-height: 680px !important;
}
/* content and cta */
.inner {
position: absolute;
bottom: 20%;
left: 0;
right: 0;
text-align: center;
}
/* END CTA Button*/
/* Title Animation */
.reveal-text,
.reveal-text:after {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 600ms;
animation-duration: 600ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.reveal-text {
position: relative;
-webkit-user-select: none;
user-select: none;
color:#ffe221;
text-shadow: 1px 1px #000000;
white-space: nowrap;
}
.reveal-text:after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #8ce2ea;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
pointer-events: none;
}
.active .reveal-text{
-webkit-animation-name: reveal-text;
animation-name: reveal-text;
}
.active .reveal-text:after {
-webkit-animation-name: revealer-text;
animation-name: revealer-text;
}
/* Before animation */
#-webkit-keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
#keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
/* After animation */
#-webkit-keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
#keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
/* Title Animation END */
/* OWL-Carousel Navigation*/
.owl-nav div {
position: absolute;
top: 45%;
color: #cdcbcd;
}
.owl-nav i {
font-size: 52px;
}
.owl-nav .owl-prev {
left: 5% !important;
}
.owl-nav .owl-next {
right: 5% !important;;
}
.owl-prev:hover, .owl-next:hover{
text-shadow: 2px 2px #000000;
transform: translateX(10%);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.owl-prev:hover{
text-shadow: -2px 2px #000000;
transform: translateX(-10%);
}
.owl-theme .owl-dots .owl-dot span{
width: 0;
}
.owl-dots {
text-align: center;
position: fixed;
margin-top: 10px;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
/* END OWL-Carousel Navigation*/
#media only screen and (max-width:768px) {
#full-width{
padding: 0;
}
.item{
transform: scale(0);
}
.item img{
height: 400px !important;
}
.active .item img{
max-height: 400px;
}
}
#media only screen and (max-width:420px) {
.item img{
height: 200px !important;
}
.active .item img{
max-height: 200px;
}
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Tanya-UI-Kit-3 Full Page Width</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
</head>
<body>
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="item">
<img src="https://bboyjplus.files.wordpress.com/2014/04/bboying-steps-2043304.jpg" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.vimeocdn.com/video/550760587.jpg?mw=1920&mh=1080&q=70" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap js-cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</body>
</html>

I ran into the same issue when I upgraded to version 3 of this owl-carousel.
After a few trials, I found out adding a line in CSS worked for me.
.owl-carousel .owl-stage-outer{
transform:translate3d(0,0,0)
}

Can't get my css selector to work properly

the last :checked call in my css code is not working. I want to be ably to have the .nav-bar-element's move from off the screen to where they are now when the hamburger icon is clicked, but I can't seem to get the selector working.
#import url('https://fonts.googleapis.com/css?family=Raleway');
body {
background-image: url(http://www.hayesandjarvis.co.uk/medias/sys_master/hcf/hbb/8912480731166.jpg);
min-height: 100%;
position: relative;
opacity: 0.75;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
font: 400 15px/1.8"Raleway", sans-serif;
color: #777;
}
.nav-bar {
z-index: 100;
background-color: rgba(255, 255, 255, 0.2);
width: 100vw;
height: 64px;
overflow: hidden;
position: absolute;
font-weight: bold;
font-size: 18px;
}
.nav-bar:hover {
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: 0.4s ease, width 0.3s ease;
transition: 0.4s ease, width 0.3s ease;
}
.nav-content {
position: absolute;
right: 0px;
float: right;
height: 64px;
width: 512px;
color: #000;
}
.nav-content .nav-bar-element {
float: left;
margin: 0px;
width: 100px;
height: 32px;
margin: 16px 25px 16px 25px;
}
.nav-content .nav-bar-element a {
width: 100px;
height: 32px;
text-decoration: none;
color: #000;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#nav-button {
display: none;
}
.menu-button {
z-index: 101;
vertical-align: baseline;
position: absolute;
height: 48px;
width: 48px;
top: 8px;
right: 25px;
}
.bar {
position: absolute;
height: 2px;
width: 66%;
background-color: #000;
left: 20%;
-webkit-transition: 0.4s ease, width 0.3s ease;
transition: 0.4s ease, width 0.3s ease;
}
.bar:nth-child(1) {
top: 24%;
}
.bar:nth-child(2) {
top: 47%;
}
.bar:nth-child(3) {
top: 47%;
}
.bar:nth-child(4) {
top: 71%;
}
#nav-button:checked+ .menu-button .bar:nth-child(1) {
width: 0px;
}
#nav-button:checked+ .menu-button .bar:nth-child(2) {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: rotate(45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(3) {
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: rotate(-45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(4) {
width: 0px;
}
#nav-button:checked+ #change-me {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="bgimg-1">
<!--<div class="nav-bar-bg"></div>-->
<div class="nav-bar">
<input type="checkbox" id="nav-button" />
<label for="nav-button" class="menu-button">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</label>
<div class="nav-content" id="change-me">
<div class="nav-bar-element"><i class="fa fa-rocket" aria-hidden="true"></i> Projects
</div>
<div class="nav-bar-element"><i class="fa fa-user" aria-hidden="true"></i> About Me
</div>
<div class="nav-bar-element"><i class="fa fa-inbox" aria-hidden="true"></i> Contact
</div>
</div>
</div>
</div>

I need glasses it is a sibling, but not the adjacent sibling, so use ~ instead of +
OR
Use + between checkbox and label and a + between label and #change-me,
Remove the + on last ruleset, because #change-me is a child of #nav-button, not na sibling.
OK I finally got enough specificity! Use this:
#nav-button:checked ~ .nav-content#change-me * {
color: #fff;
}
SNIPPET
#import url('https://fonts.googleapis.com/css?family=Raleway');
body {
background-image: url(http://www.hayesandjarvis.co.uk/medias/sys_master/hcf/hbb/8912480731166.jpg);
min-height: 100%;
position: relative;
opacity: 0.75;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
font: 400 15px/1.8"Raleway", sans-serif;
color: #777;
}
.nav-bar {
z-index: 100;
background-color: rgba(255, 255, 255, 0.2);
width: 100vw;
height: 64px;
overflow: hidden;
position: absolute;
font-weight: bold;
font-size: 18px;
}
.nav-bar:hover {
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: 0.4s ease, width 0.3s ease;
transition: 0.4s ease, width 0.3s ease;
}
.nav-content {
position: absolute;
right: 0px;
float: right;
height: 64px;
width: 512px;
color: #000;
}
.nav-content .nav-bar-element {
float: left;
margin: 0px;
width: 100px;
height: 32px;
margin: 16px 25px 16px 25px;
}
.nav-content .nav-bar-element a {
width: 100px;
height: 32px;
text-decoration: none;
color: #000;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#nav-button {
display: none;
}
.menu-button {
z-index: 101;
vertical-align: baseline;
position: absolute;
height: 48px;
width: 48px;
top: 8px;
right: 25px;
}
.bar {
position: absolute;
height: 2px;
width: 66%;
background-color: #000;
left: 20%;
-webkit-transition: 0.4s ease, width 0.3s ease;
transition: 0.4s ease, width 0.3s ease;
}
.bar:nth-child(1) {
top: 24%;
}
.bar:nth-child(2) {
top: 47%;
}
.bar:nth-child(3) {
top: 47%;
}
.bar:nth-child(4) {
top: 71%;
}
#nav-button:checked+ .menu-button .bar:nth-child(1) {
width: 0px;
}
#nav-button:checked+ .menu-button .bar:nth-child(2) {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: rotate(45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(3) {
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: rotate(-45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(4) {
width: 0px;
}
#nav-button:checked ~ .nav-content#change-me * {
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sam Erickson</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="bgimg-1">
<!--<div class="nav-bar-bg"></div>-->
<div class="nav-bar">
<input type="checkbox" id="nav-button" />
<label for="nav-button" class="menu-button">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</label>
<div class="nav-content" id="change-me">
<div class="nav-bar-element"><i class="fa fa-rocket" aria-hidden="true"></i> Projects
</div>
<div class="nav-bar-element"><i class="fa fa-user" aria-hidden="true"></i> About Me
</div>
<div class="nav-bar-element"><i class="fa fa-inbox" aria-hidden="true"></i> Contact
</div>
</div>
</div>
</body>
</html>

Navbar collapsing without Bootstrap

Hi I was trying to get my navigation bar to collapse on smaller screen size I am trying to do this without bootstrap any suggestions?
HTML
<html>
<head>
<title></title>
<!-- CSS STYLESHEET -->
<link rel="stylesheet" type="text/css" href="index.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat|Black+Ops+One|Luckiest+Guy|Montez|Courgette|Slackey|Fontdiner+Swanky|Permanent+Marker|Aclonica|Lobster" rel='stylesheet' type='text/css'>
<!-- JavaScript's -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<script type="text/javascript">
$(function() {
// note that this doens't call hide
$('#loading').delay(3000).fadeOut('slow');
});
</script>
<body>
<div id="loading">
<div id="loading-center">
<div id="loading-center-absolute">
<div id="object"></div>
</div>
</div>
</div>
<!-- Loading Section Ends -->
<div class="header">
<nav class="nav_first">
<img class="nike" src="http://s3.amazonaws.com/nikeinc/assets/7366/Nike_Swoosh_Logo_White_original.jpg?1328660973">
<ul>
<li class="wiggle" class="wiggle" class="wiggle" class="wiggle">Home</li>
<li class="wiggle" class="wiggle" class="wiggle">About Us</li>
<li class="wiggle" class="wiggle">Shop</li>
<li class="wiggle">Contact</li>
</ul>
</nav>
</div>
<div class="wrapper">
<div>
<h1 id="nike_text">Nike</h1>
</div>
</div>
</body>
</html>
CSS
body {
width: auto;
height: auto;
font-size:14px;
margin:0;
background-color:black;
}
#loading {
display:none;
background-color: #bd4932;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
#loading-center{
width: 100%;
height: 100%;
position: relative;
}
#loading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
#object{
width: 80px;
height: 80px;
background-color: #FFF;
-webkit-animation: animate 1s infinite ease-in-out;
animation: animate 1s infinite ease-in-out;
margin-right: auto;
margin-left: auto;
margin-top: 60px;
}
#-webkit-keyframes animate {
0% { -webkit-transform: perspective(160px); }
50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}
#keyframes animate {
0% {
transform: perspective(160px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
} 50% {
transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
} 100% {
transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
}
}
/* SASU - Navigation Bar */
.nav_first{
overflow:none;
list-style-type:none;
margin:0;
padding:0;
text-align:center;
}
.nav_first li{
display:inline;
}
.nav_first a{
margin-top:25px;
font-size: 30px;
letter-spacing: 3px;
font-weight:900;
margin-left:40px;
margin-right:40px;
font-family: 'Montserrat';
text-decoration: none;
display:inline-block;
padding:10px;
}
.nav_first a:hover {
color:white;
font-size:35px;
}
#-webkit-keyframes wiggle {
0% {
-webkit-transform:rotate(4deg);
}
50% {
-webkit-transform:rotate(-4deg);
}
100% {
-webkit-transform:rotate(4deg);
}
}
.wiggle:hover {
-webkit-animation: wiggle 0.5s infinite;
}
.active {background-color:orangered;}
img{
float:left;
margin:0 auto;
padding:0 auto;
}
/* Middle Section */
.nike {
display: block;
margin:auto;
height:115px;
}
#nike_text {
font-family:'Montez';
font-size:80px;
text-align: center;
color:white;
margin:auto;
letter-spacing: 2px;
}