I'm new to programming. I'm using bootstrap and I'm trying to get the Nav menu to overlay over the slider at the top of the website.
Can someone tell me what I'm doing wrong or point me in the right direction?
Here is a link to the site on codepen
http://codepen.io/anon/pen/MwLBKv
HTML
<!-- bootstarp-css -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- FontAwesome
-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!--// bootstarp-css -->
<!-- css -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!--// css -->
<script src="js/jquery-1.11.1.min.js"></script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600' rel='stylesheet' type='text/css'>
<!--/fonts-->
<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
<script src="js/wow.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
new WOW().init();
</script>
<!--start-smoth-scrolling-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
});
});
</script>
<!--start-smoth-scrolling-->
</head>
<body>
<!-- banner -->
<div id="home" class="banner a-banner">
<!-- container -->
<div class="container">
<div class="head-logo">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ6FfLzPB1MpLiIxrIapoSbEf0PFvTjQ3TbcLrQCijCN68LfWZi" alt="" />
</div>
<div class="top-nav">
<ul class="nav1">
<li class="hvr-sweep-to-bottom">Contact<i><img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom">Services<i><img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom">About<i><img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom active">Home<i><img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png" alt=""/></i></li>
<div class="clearfix"> </div>
</ul>
<!-- script-for-menu -->
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- /script-for-menu -->
</div>
</div>
<!-- car -->
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Recovery</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-2">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Equiped for any Job</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div> </div>
</div>
<div class="item slides">
<div class="slide-3">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Batman</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div> </div>
</div>
</div>
<!-- car -->
</div>
<!-- //container -->
</div>
CSS
body{
background:#fff;
font-family: 'Open Sans', sans-serif;
}
body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.banner{
background: url(../images/banner2.jpg) no-repeat 0px 0px #eeece9;
min-height: 855px;
background-size: cover;
position: relative;
}
.head-logo{
float: left;
}
.head-logo a {
display: block;
margin-top: 3.5em;
}
.top-nav{
float: right;
width: 70%;
}
.top-nav ul{
padding:0;
margin:0;
}
.top-nav ul li {
display: inline-block;
width: 20%;
margin-right: .4em;
display:block;
float: right;
line-height:38px;
margin:0;
padding:0;
position:relative;
}
.top-nav ul li.active{
background: #5abc5e;
}
.top-nav ul li a{
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 3em 0em 3em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i{
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul li a:hover{
text-decoration:none;
}
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: .3;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(../images/banner2.jpg);
}
.fade-carousel .slides .slide-2 {
background-image: url(../images/squad.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(../images/roadside.jpg);
}
/********************************/
/* Media Queries */
/********************************/
#media screen and (min-width: 980px){
.hero { width: 980px; }
}
#media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
/* Sweep To Bottom */
.hvr-sweep-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-ms-osx-font-smoothing: grayscale;
-o-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
-o-transition-property: color;
-moz-transition-property: color;
-ms-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #5abc5e;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
-o-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
color: white;
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.banner-bottom-grids{
margin: 5em 0;
}
.banner-bottom-left{
padding: 0;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0;
}
.banner-bottom-left h3{
color: #000;
font-size: 37px;
margin: 0;
line-height: 1.2em;
font-weight: 300;
}
.banner-bottom-left h5{
color: #969696;
font-size: 14px;
margin: 1em 0;
line-height: 1.8em;
}
.banner-bottom-left h5 span{
display:block;
}
.banner-bottom-left p{
color: #333333;
font-size: 14px;
margin: 0;
line-height: 1.8em;
font-weight: 600;
}
.banner-bottom-right img{
width:100%;
}
.see-button{
margin-top: 1em;
}
.see-button a{
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 1em 4em;
outline: none;
background: #393939;
border: none !important;
border-radius:0;
}
.jumbotron.banner-bottom-left {
background: none;
}
/*------------------ Slider Part starts Here----------*/
#slider2,
#slider3 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}
.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rslides_tabs li {
display: inline;
float: none;
margin-right: 1px;
}
.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs .rslides_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
.events {
list-style: none;
}
.callbacks_container {
position: relative;
float: left;
width: 100%;
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.callbacks li {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.callbacks img {
position: relative;
z-index: 1;
height: auto;
border: 0;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
left: 0;
right: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
top: 10%;
text-align: center;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 52%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 55px;
background: transparent url("../images/themes.png") no-repeat left top;
margin-top: -65px;
}
.callbacks_nav:active {
opacity: 1.0;
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 0;
}
#slider3-pager a {
display: inline-block;
}
#slider3-pager span{
float: left;
}
#slider3-pager span{
width:100px;
height:15px;
background:#fff;
display:inline-block;
border-radius:30em;
opacity:0.6;
}
#slider3-pager .rslides_here a {
background: #FFF;
border-radius:30em;
opacity:1;
}
#slider3-pager a {
padding: 0;
}
#slider3-pager li{
display:inline-block;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li{
position: relative;
display: block;
float: left;
}
.rslides img {
height: auto;
border: 0;
width:100%;
}
.callbacks_tabs{
list-style: none;
position: absolute;
top: 78%;
z-index: 999;
left: 45%;
padding: 0;
margin: 0;
}
.slider-top{
text-align: center;
padding:10em 0;
}
.slider-top h1{
font-weight:700;
font-size:48px;
color:#010101;
}
.slider-top p{
font-weight:400;
font-size:20px;
padding:1em 7em;
color:#010101;
}
.slider-top ul.social-slide{
display:inline-flex;
margin: 0px;
padding: 0px;
}
Apply position: absolute; and z-index: 5; to your nav .container. I would recommend you use the .container class on your page container and use some of bootstraps nav classes to build your nav bar.
Related
I try to make responsive part of this size with bootstrap grid. And always when I do resize of window, so there is made new gradient on right. I tried to find it in developer tools what it is, but there is nothing defined. I'm not sure but I have on more site with same design without bootstrap and there it looks nice when I resize window, but here with bootstrap it's bad. I am not sure if it's really bootstrap but looking for solution, because I really don't have idea.
Here is code and screen how it looks
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
#import url("https://fonts.googleapis.com/css?family=Titan+One");
body {
background: linear-gradient(45deg, #7b00e0, #ff006a);
margin: 0;
height: auto;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
margin: 0 auto;
overflow: hidden;
}
.menu-container {
background-color: #E59617;
border-radius: 100%;
color: white;
cursor: pointer;
position: absolute;
width: 250px;
height: 250px;
left: -120px;
top: -120px;
transition: all 0.3s;
}
.menu-container.full-menu {
border-radius: 0;
padding: 0 !important;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: all 0.3s;
}
.full-menu .menu {
top: 40px;
left: 40px;
}
.menu {
color: white;
font-size: 2em;
position: absolute;
top: 160px;
left: 160px;
z-index: 100;
transition: all 0.3s;
}
.menu i {
opacity: 0.7;
transform: scale(1);
transition: all 0.3s;
}
.menu i:hover {
opacity: 1;
transform: scale(1.2);
transition: all 0.3s;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay nav {
font-size: 3.2em;
font-family: "Titan One", san-serif;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
overflow: hidden;
opacity: 0.7;
transform: scale(1);
transition: all 0.3s;
}
.overlay ul li a:hover, .overlay ul li a:focus, .overlay ul li a:active {
opacity: 1;
transform: scale(1.2);
transition: all 0.3s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
h1.deti {
font-size: 5em;
font-family: "Titan One", san-serif;
background-color: rgba(255, 0, 106, 0.4);
border-radius: 100%;
box-shadow: 0 0 2em 1em rgba(255, 0, 106, 0.4);
color: white;
margin: 30vh auto;
position: relative;
text-align: center;
text-shadow: 0 8px 0 rgba(123, 0, 224, 0.4);
transform: rotate(-12deg);
width: 800px;
height: auto;
z-index: -1;
}
h1 span {
color: #ffc901;
}
.blob {
animation: blobby 4s infinite;
}
.blob2 {
animation: blobby2 6s infinite;
}
#keyframes blobby {
0% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}
#keyframes blobby2 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.18);
}
100% {
transform: scale(1);
}
}
svg {
position: absolute;
top: 0;
}
#svg-right {
display: block;
fill: #7b00e0;
opacity: 0.5;
right: 0;
width: 60%;
z-index: -10;
}
#svg-left {
fill: #ff006a;
margin: 0;
width: 60%;
z-index: -10;
}
#media all and (max-width: 980px) {
h1.deti {
font-size: 3em;
font-family: "Titan One", san-serif;
}
}
#media all and (max-width: 480px) {
h1.deti {
font-size: 2em;
font-family: "Titan One", san-serif;
}
.overlay li {
font-size: 0.5em;
}
}
/*komix*/
p {
color: #fff;
}
.row {
display: flex;
height: 200px;
background-color: #7b00e0;
z-index: -99999;
}
h1 span {
color: #ffc901;
}
h1.mobile {
visibility: hidden;
}
.mobile {
display: none;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Kajberšikana</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="mobile"><p class="mobile">Zmizni z mobilu na PC.</p></div>
<div class="title-deti"><h1 class="deti"><span>Lorem</span><br />Ipsum</h1>
<div class="circle"></div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
</div>
<div class="container">
<div class="menu-container" id="toggle">
</i>
</div>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Domov</li>
<li>Pre deti</li>
<li>Pre dospelých</li>
<li>Kontakt</li>
</ul>
</nav>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
**
You have several mistakes in your snippet.
First off, you're supposed to load bootstrap(.min).js after jQuery. You also need popper.js for v4.x.
Secondly, you should never have a .container inside another .container.
Third, you want to keep your .menu-deti from oversizing <body>, using:
.title-deti {
max-width: 100vw;
overflow: hidden;
}
See it fixed:
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
#import url("https://fonts.googleapis.com/css?family=Titan+One");
body {
background: linear-gradient(45deg, #7b00e0, #ff006a);
margin: 0;
height: auto;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
margin: 0 auto;
overflow: hidden;
}
.menu-container {
background-color: #E59617;
border-radius: 100%;
color: white;
cursor: pointer;
position: absolute;
width: 250px;
height: 250px;
left: -120px;
top: -120px;
transition: all 0.3s;
}
.menu-container.full-menu {
border-radius: 0;
padding: 0 !important;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: all 0.3s;
}
.full-menu .menu {
top: 40px;
left: 40px;
}
.menu {
color: white;
font-size: 2em;
position: absolute;
top: 160px;
left: 160px;
z-index: 100;
transition: all 0.3s;
}
.menu i {
opacity: 0.7;
transform: scale(1);
transition: all 0.3s;
}
.menu i:hover {
opacity: 1;
transform: scale(1.2);
transition: all 0.3s;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay nav {
font-size: 3.2em;
font-family: "Titan One", san-serif;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
overflow: hidden;
opacity: 0.7;
transform: scale(1);
transition: all 0.3s;
}
.overlay ul li a:hover,
.overlay ul li a:focus,
.overlay ul li a:active {
opacity: 1;
transform: scale(1.2);
transition: all 0.3s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
h1.deti {
font-size: 5em;
font-family: "Titan One", san-serif;
background-color: rgba(255, 0, 106, 0.4);
border-radius: 100%;
box-shadow: 0 0 2em 1em rgba(255, 0, 106, 0.4);
color: white;
margin: 30vh auto;
position: relative;
text-align: center;
text-shadow: 0 8px 0 rgba(123, 0, 224, 0.4);
transform: rotate(-12deg);
width: 800px;
height: auto;
z-index: -1;
}
h1 span {
color: #ffc901;
}
.blob {
animation: blobby 4s infinite;
}
.blob2 {
animation: blobby2 6s infinite;
}
#keyframes blobby {
0% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}
#keyframes blobby2 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.18);
}
100% {
transform: scale(1);
}
}
svg {
position: absolute;
top: 0;
}
#svg-right {
display: block;
fill: #7b00e0;
opacity: 0.5;
right: 0;
width: 60%;
z-index: -10;
}
#svg-left {
fill: #ff006a;
margin: 0;
width: 60%;
z-index: -10;
}
#media all and (max-width: 980px) {
h1.deti {
font-size: 3em;
font-family: "Titan One", san-serif;
}
}
#media all and (max-width: 480px) {
h1.deti {
font-size: 2em;
font-family: "Titan One", san-serif;
}
.overlay li {
font-size: 0.5em;
}
}
/*komix*/
p {
color: #fff;
}
.row {
display: flex;
height: 200px;
background-color: #7b00e0;
z-index: -99999;
}
h1 span {
color: #ffc901;
}
h1.mobile {
visibility: hidden;
}
.mobile {
display: none;
}
.title-deti {
max-width: 100vw;
overflow: hidden;
}
#media (max-width: 800px) {h1.deti{width: 100vw;}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kajberšikana</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="mobile">
<p class="mobile">Zmizni z mobilu na PC.</p>
</div>
<div class="title-deti">
<h1 class="deti"><span>Lorem</span><br />Ipsum</h1>
<div class="circle"></div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 1</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
</div>
</div>
<div class="container">
<div class="menu-container" id="toggle">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Domov</li>
<li>Pre deti</li>
<li>Pre dospelých</li>
<li>Kontakt</li>
</ul>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I'm writing a bookmarking program, and for the past few days, this bug has caught my eye: The "I'm Niva, a: " bar doesn't extend to fill up the whole page's width. I've already attempted checking the console, and adding 0 margins+paddings, but nothing seems to work. If anyone could provide a solution, that would be great!
#wide{
color:white;
font-size: 60px;
font-family: 'Quicksand', sans-serif;
flex: 0.1;
background-color:rgba(51,153,255,0.5);
}
Program:
https://codepen.io/Refath/pen/RjwOQN
#import url('https://fonts.googleapis.com/css?family=Quicksand:500');
body {
/**background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg")**/
align-content: no-repeat center center fixed;
background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fChange:hover,
.yChange:hover,
.gChange:hover,
.aChange:hover {
background-color: rgba(3, 3, 3, 0.21);
transition: all ease 0.2s;
}
.circle,
.r1c,
.r2c,
.r3c,
.r4c {
width: 90px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: fixed;
margin: auto;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: -5px -5px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1c,
.r2c,
.r3c,
.r4c,
.circle {
animation: around infinite;
animation-duration: 30s;
animation-direction: reverse;
}
.r1c.off,
.r2c.off,
.r3c.off,
.r4c.off {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.circle {
background-image: url(https://qph.ec.quoracdn.net/main-qimg-a1bd7842675b4c551751a7bb50da3667);
background-position: -5px -6px;
opacity: 0.9;
}
.r1c:hover,
.r2c:hover,
.r3c:hover,
.r4c:hover {
width: 108px;
height: 108px;
border-radius: 108px;
transition: 0.07s ease-in;
background-size: 120px 120px;
background-position: -5.4px -5.4px;
}
.r1c {
overflow: hidden;
top: 400px;
background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}
.r2c {
top: -400px;
background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}
.r3c {
left: 400px;
background-image: url(https://cdn.worldvectorlogo.com/logos/facebook-3.svg);
}
.r4c {
right: 400px;
background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}
.r1l,
.r2l,
.r3l,
.r4l {
border: white 1px solid;
width: 0px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1l {
top: 200px;
}
.r2l {
top: -200px;
}
.r3l {
width: 90px;
height: 0px;
left: 200px;
}
.r4l {
width: 90px;
height: 0px;
left: -200px;
}
.parent.off {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.parent {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
animation: around infinite;
}
.parent.custom {
animation-duration: 30s;
}
#keyframes around {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#wide {
color: white;
font-size: 60px;
font-family: 'Quicksand', sans-serif;
flex: 0.1;
background-color: rgba(51, 153, 255, 0.5);
}
#narrow {
color: lightblue;
font-size: 60px;
flex: 0.9;
font-family: 'Quicksand', sans-serif;
background-color: rgba(51, 153, 255, 0.7);
}
.name {
position: relative;
font-size: 60px;
text-align: center;
font-family: 'Quicksand', sans-serif;
}
.rotate-text {
color: white;
font-size: 60px;
flex: 0.5;
font-family: 'Quicksand', sans-serif;
background: lightblue;
background-color: rgba(51, 153, 255, 0.8);
}
#parent {
display: flex;
background-color: red;
}
.juan {
font: 40px/50px Arial;
text-align: center;
}
.jesus {
text-align: center;
font-size: 20px;
}
.rotate-text {
display: inline-block;
background-color: lightgreen;
}
.rotating {
float: right;
overflow: hidden;
position: relative;
height: 100px;
}
.inside {
display: inline-block;
color: lightblue;
position: relative;
white-space: nowrap;
top: -20px;
left: 0px;
animation: move 5s;
animation-iteration-count: infinite;
animation-delay: 1s;
padding: 20px;
}
#keyframes move {
0% {
top: -20px;
}
20% {
top: -100px;
}
40% {
top: -200px;
}
60% {
top: -300px;
}
}
.name {
color: white;
}
.options {
width: 400px;
height: 450px;
color: white;
padding: 15px 10px 0px 5px;
float: left;
position: relative;
top: -340px;
left: 20px;
}
.gtext,
.atext,
.ytext,
.ftext {
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
width: 20px;
height: 25px;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
}
li {
padding: 7px;
}
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
button {
fill: red;
}
.setText {
text-align: center;
font-size: 20px;
}
button {
color: red;
}
/**Derived from: **/
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 160px;
height: 236px;
text-align: center;
vertical-align: middle;
font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
width: 300px;
overflow: visible;
overflow-y: scroll;
padding-left: 20px;
transition: 0.9s ease-out all;
}
.main-menu {
padding-left: 20px;
background: #fbfbfb;
position: absolute;
top: 100px;
background-color: rgba(51, 153, 255, 0.5);
bottom: 0px;
height: 90%;
left: 0;
width: 20px;
overflow: visible;
overflow-y: scroll;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
z-index: 1000;
padding-top: 20px;
transition: 0.9s ease-out all;
padding-bottom: 50px;
}
.featureName {
transform: rotate(-90deg);
position: relative;
top: 50%;
right: 10px;
}
.main-menu:hover>.featureName {
visibility: hidden;
}
.main-menu>ul {
margin: 2px 0;
}
.main-menu li {
position: relative;
display: block;
width: 250px;
}
/**your element has a height of auto, overflow hidden, and content within it that are position float. giving that outer element a set height, and then a child element that grows to fit the content, would allow the parent element to scroll the child
**/
.main-menu li>a {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
color: #999;
font-family: arial;
font-size: 14px;
text-decoration: none;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-menu .nav-icon {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 18px;
}
.main-menu .nav-text {
position: relative;
display: table-cell;
vertical-align: middle;
width: 20px;
}
.main-menu>ul.logout {
position: absolute;
left: 0;
bottom: 0;
}
.no-touch .scrollable.hover {
overflow-y: visible;
overflow-y: scroll;
}
.no-touch .scrollable.hover:hover {
overflow-y: auto;
overflow: visible;
overflow-y: scroll;
}
a:hover,
a:focus {
text-decoration: none;
}
nav {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
color: #fff;
background-color: #5fa2db;
}
.blurredBg {
height: 100%;
width: 100%;
text-align: center;
background-size: cover;
position: absolute;
left: 0;
top: 0;
background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#ImageUrl {}
#charset "utf-8";
#import url(http://weloveiconfonts.com/api/?family=entypo);
a[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
left: 70%;
position: absolute;
top: 50%;
transition: 0.3s all ease;
}
/* ---------- SOCIAL ---------- */
.social {
position: relative;
height: 3em;
width: 13.5em;
}
.social li {
display: block;
height: 4em;
line-height: 4em;
margin: -2.2em;
position: absolute;
-webkit-transition: -webkit-transform .7s;
-moz-transition: -moz-transform .7s;
-ms-transition: -ms-transform .7s;
-o-transition: -o-transform .7s;
transition: transform .7s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
text-align: center;
width: 4em;
}
.social a {
color: #fffdf0;
display: block;
height: 4em;
line-height: 4em;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 4em;
transition: 0.3s all ease;
}
.social li:hover {
-webkit-transform: scale(1.3, 1.3) rotate(45deg);
-moz-transform: scale(1.3, 1.3) rotate(45deg);
-ms-transform: scale(1.3, 1.3) rotate(45deg);
-o-transform: scale(1.3, 1.3) rotate(45deg);
transform: scale(1.3, 1.3) rotate(45deg);
transition: 0.3s all ease;
}
.facebook {
background: #155b9d;
left: 0;
top: 0%;
}
.container img {
width: 50px;
position: relative;
top: -20%;
}
.twitter {
background: #1a9ec4;
bottom: 0;
left: 25%;
}
.dribbble {
background-color: lightblue;
left: 50%;
top: 0%;
width: 5em;
height: 5em;
}
.dribbble img {
top: 0%;
}
.social .dribbble {
width: 5em;
height: 5em;
left: 46%;
top: -50%;
}
.behance {
background: #3f7aa3;
bottom: 0;
left: 75%;
}
.linked-in {
background: #157f9d;
left: 100%;
top: 0%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-flat-attack.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-os.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class="blurredBg">
</div>
<div id="parent">
<div class="animated slideInLeft" id="wide">
<center>Hi.</center>
</div>
<div class="tooltipped animated lightSpeedIn" data-position="bottom" data-delay="50" data-tooltip="Hey there! Just hover over that Settings on the left :) Trust me on this one. " id="narrow">
<center>I'm <img src="https://qph.ec.quoracdn.net/main-qimg-00f778bc5f5fcb5d79a0372986ab1e66.webp" width=70>iva, a:
<b class="rotating"> <span class = "inside">
One-Stop Shop<br>
Music Player<br>
Task Manager<br>
Hover Me!
</span></b>
</center>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="parent">
<div id="weather"></div>
<div class="circle">
</div>
<a href="https://www.google.com" class="glink">
<div class="r1c">
</div>
</a>
<a href="https://www.youtube.com" class="ylink">
<div class="r2c">
</div>
</a>
<a href="https://www.facebook.com" class="flink">
<div class="r3c">
</div>
</a>
<a href="https://www.amazon.com" class="alink">
<div class="r4c">
</div>
</a>
<div class="r1l">
</div>
<div class="r2l">
</div>
<div class="r3l">
</div>
<div class="r4l">
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 class="name">
~ Refath</h2>
<div class="area"></div>
<nav class="main-menu">
<div class="featureName">Settings</div>
<div class="jesus">
<h3>Settings</h3>
<hl>
<ul>
<li class="gChange">Google</li>
<button class="gClick waves-effect waves-light green darken-2 btn">Change</button>
<button onClick="store()" class="gSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="gtext" id="gtext" placeholder="Paste New URL" onkeydown="if (event.keyCode == 13)
document.getElementById('gSave').click()">
<li class="aChange">Amazon</li><button class="aClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="aSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="atext" placeholder="Paste New URL">
<li class="yChange">Youtube</li><button class="yClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="ySave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ytext" placeholder="Paste New URL">
<li class="fChange">Facebook</li><button class="fClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="fSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ftext" placeholder="Paste New URL">
<li class="speedChange">Speed</li><button class="speedClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="speedSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="speedtext" placeholder="Change wheel speed">
<li class="bgChange">Background Image</li>
<input id="ImageUrl" placeholder="Background Image URL" /> <button class="waves-effect waves-light blue darken-2 btn" id="Btn">Go</span>
<br> <br>
<button class = "simple waves-effect waves-light green darken-2 btn">Simplify</button>
</ul>
</div>
</nav>
<div class="container">
<ul class="social">
<li class="dribbble">
<img src="http://cdn.appstorm.net/web.appstorm.net/files/2010/12/Chrome-Store1.png">
</li>
</ul>
</div>
<form>
<label>Enter a new task:</label>
<input class="input" type="text">
<input type="submit" value="Add">
</form>
<ul title="Click to delete; drag to reorder">
</ul>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="scripts.js"></script>
body {
height: 100%;
/* overflow: auto; */
}
#import url('https://fonts.googleapis.com/css?family=Quicksand:500');
body {
/**background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg")**/
align-content: no-repeat center center fixed;
background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fChange:hover,
.yChange:hover,
.gChange:hover,
.aChange:hover {
background-color: rgba(3, 3, 3, 0.21);
transition: all ease 0.2s;
}
.circle,
.r1c,
.r2c,
.r3c,
.r4c {
width: 90px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: fixed;
margin: auto;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: -5px -5px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1c,
.r2c,
.r3c,
.r4c,
.circle {
animation: around infinite;
animation-duration: 30s;
animation-direction: reverse;
}
.r1c.off,
.r2c.off,
.r3c.off,
.r4c.off {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.circle {
background-image: url(https://qph.ec.quoracdn.net/main-qimg-a1bd7842675b4c551751a7bb50da3667);
background-position: -5px -6px;
opacity: 0.9;
}
.r1c:hover,
.r2c:hover,
.r3c:hover,
.r4c:hover {
width: 108px;
height: 108px;
border-radius: 108px;
transition: 0.07s ease-in;
background-size: 120px 120px;
background-position: -5.4px -5.4px;
}
.r1c {
overflow: hidden;
top: 400px;
background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}
.r2c {
top: -400px;
background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}
.r3c {
left: 400px;
background-image: url(https://cdn.worldvectorlogo.com/logos/facebook-3.svg);
}
.r4c {
right: 400px;
background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}
.r1l,
.r2l,
.r3l,
.r4l {
border: white 1px solid;
width: 0px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1l {
top: 200px;
}
.r2l {
top: -200px;
}
.r3l {
width: 90px;
height: 0px;
left: 200px;
}
.r4l {
width: 90px;
height: 0px;
left: -200px;
}
.parent.off {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.parent {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
animation: around infinite;
}
.parent.custom {
animation-duration: 30s;
}
#keyframes around {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#wide {
color: white;
font-size: 60px;
font-family: 'Quicksand', sans-serif;
flex: 0.1;
background-color: rgba(51, 153, 255, 0.5);
}
#narrow {
color: lightblue;
font-size: 60px;
flex: 0.9;
font-family: 'Quicksand', sans-serif;
background-color: rgba(51, 153, 255, 0.7);
}
.name {
position: relative;
font-size: 60px;
text-align: center;
font-family: 'Quicksand', sans-serif;
}
.rotate-text {
color: white;
font-size: 60px;
flex: 0.5;
font-family: 'Quicksand', sans-serif;
background: lightblue;
background-color: rgba(51, 153, 255, 0.8);
}
#parent {
display: flex;
background-color: red;
}
.juan {
font: 40px/50px Arial;
text-align: center;
}
.jesus {
text-align: center;
font-size: 20px;
}
.rotate-text {
display: inline-block;
background-color: lightgreen;
}
.rotating {
float: right;
overflow: hidden;
position: relative;
height: 100px;
}
.inside {
display: inline-block;
color: lightblue;
position: relative;
white-space: nowrap;
top: -20px;
left: 0px;
animation: move 5s;
animation-iteration-count: infinite;
animation-delay: 1s;
padding: 20px;
}
#keyframes move {
0% {
top: -20px;
}
20% {
top: -100px;
}
40% {
top: -200px;
}
60% {
top: -300px;
}
}
.name {
color: white;
}
.options {
width: 400px;
height: 450px;
color: white;
padding: 15px 10px 0px 5px;
float: left;
position: relative;
top: -340px;
left: 20px;
}
.gtext,
.atext,
.ytext,
.ftext {
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
width: 20px;
height: 25px;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
}
li {
padding: 7px;
}
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
/* overflow: auto; */
}
button {
fill: red;
}
.setText {
text-align: center;
font-size: 20px;
}
button {
color: red;
}
/**Derived from: **/
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 160px;
height: 236px;
text-align: center;
vertical-align: middle;
font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
width: 300px;
overflow: visible;
overflow-y: scroll;
padding-left: 20px;
transition: 0.9s ease-out all;
}
.main-menu {
padding-left: 20px;
background: #fbfbfb;
position: absolute;
top: 100px;
background-color: rgba(51, 153, 255, 0.5);
bottom: 0px;
height: 90%;
left: 0;
width: 20px;
overflow: visible;
overflow-y: scroll;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
z-index: 1000;
padding-top: 20px;
transition: 0.9s ease-out all;
padding-bottom: 50px;
}
.featureName {
transform: rotate(-90deg);
position: relative;
top: 50%;
right: 10px;
}
.main-menu:hover>.featureName {
visibility: hidden;
}
.main-menu>ul {
margin: 2px 0;
}
.main-menu li {
position: relative;
display: block;
width: 250px;
}
/**your element has a height of auto, overflow hidden, and content within it that are position float. giving that outer element a set height, and then a child element that grows to fit the content, would allow the parent element to scroll the child
**/
.main-menu li>a {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
color: #999;
font-family: arial;
font-size: 14px;
text-decoration: none;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-menu .nav-icon {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 18px;
}
.main-menu .nav-text {
position: relative;
display: table-cell;
vertical-align: middle;
width: 20px;
}
.main-menu>ul.logout {
position: absolute;
left: 0;
bottom: 0;
}
.no-touch .scrollable.hover {
overflow-y: visible;
overflow-y: scroll;
}
.no-touch .scrollable.hover:hover {
overflow-y: auto;
overflow: visible;
overflow-y: scroll;
}
a:hover,
a:focus {
text-decoration: none;
}
nav {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
color: #fff;
background-color: #5fa2db;
}
.blurredBg {
height: 100%;
width: 100%;
text-align: center;
background-size: cover;
position: absolute;
left: 0;
top: 0;
background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#ImageUrl {}
#charset "utf-8";
#import url(http://weloveiconfonts.com/api/?family=entypo);
a[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
left: 70%;
position: absolute;
top: 50%;
transition: 0.3s all ease;
}
/* ---------- SOCIAL ---------- */
.social {
position: relative;
height: 3em;
width: 13.5em;
}
.social li {
display: block;
height: 4em;
line-height: 4em;
margin: -2.2em;
position: absolute;
-webkit-transition: -webkit-transform .7s;
-moz-transition: -moz-transform .7s;
-ms-transition: -ms-transform .7s;
-o-transition: -o-transform .7s;
transition: transform .7s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
text-align: center;
width: 4em;
}
.social a {
color: #fffdf0;
display: block;
height: 4em;
line-height: 4em;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 4em;
transition: 0.3s all ease;
}
.social li:hover {
-webkit-transform: scale(1.3, 1.3) rotate(45deg);
-moz-transform: scale(1.3, 1.3) rotate(45deg);
-ms-transform: scale(1.3, 1.3) rotate(45deg);
-o-transform: scale(1.3, 1.3) rotate(45deg);
transform: scale(1.3, 1.3) rotate(45deg);
transition: 0.3s all ease;
}
.facebook {
background: #155b9d;
left: 0;
top: 0%;
}
.container img {
width: 50px;
position: relative;
top: -20%;
}
.twitter {
background: #1a9ec4;
bottom: 0;
left: 25%;
}
.dribbble {
background-color: lightblue;
left: 50%;
top: 0%;
width: 5em;
height: 5em;
}
.dribbble img {
top: 0%;
}
.social .dribbble {
width: 5em;
height: 5em;
left: 46%;
top: -50%;
}
.behance {
background: #3f7aa3;
bottom: 0;
left: 75%;
}
.linked-in {
background: #157f9d;
left: 100%;
top: 0%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-flat-attack.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-os.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class="blurredBg">
</div>
<div id="parent">
<div class="animated slideInLeft" id="wide">
<center>Hi.</center>
</div>
<div class="tooltipped animated lightSpeedIn" data-position="bottom" data-delay="50" data-tooltip="Hey there! Just hover over that Settings on the left :) Trust me on this one. " id="narrow">
<center>I'm <img src="https://qph.ec.quoracdn.net/main-qimg-00f778bc5f5fcb5d79a0372986ab1e66.webp" width=70>iva, a:
<b class="rotating"> <span class = "inside">
One-Stop Shop<br>
Music Player<br>
Task Manager<br>
Hover Me!
</span></b>
</center>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="parent">
<div id="weather"></div>
<div class="circle">
</div>
<a href="https://www.google.com" class="glink">
<div class="r1c">
</div>
</a>
<a href="https://www.youtube.com" class="ylink">
<div class="r2c">
</div>
</a>
<a href="https://www.facebook.com" class="flink">
<div class="r3c">
</div>
</a>
<a href="https://www.amazon.com" class="alink">
<div class="r4c">
</div>
</a>
<div class="r1l">
</div>
<div class="r2l">
</div>
<div class="r3l">
</div>
<div class="r4l">
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 class="name">
~ Refath</h2>
<div class="area"></div>
<nav class="main-menu">
<div class="featureName">Settings</div>
<div class="jesus">
<h3>Settings</h3>
<hl>
<ul>
<li class="gChange">Google</li>
<button class="gClick waves-effect waves-light green darken-2 btn">Change</button>
<button onClick="store()" class="gSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="gtext" id="gtext" placeholder="Paste New URL" onkeydown="if (event.keyCode == 13)
document.getElementById('gSave').click()">
<li class="aChange">Amazon</li><button class="aClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="aSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="atext" placeholder="Paste New URL">
<li class="yChange">Youtube</li><button class="yClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="ySave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ytext" placeholder="Paste New URL">
<li class="fChange">Facebook</li><button class="fClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="fSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ftext" placeholder="Paste New URL">
<li class="speedChange">Speed</li><button class="speedClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="speedSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="speedtext" placeholder="Change wheel speed">
<li class="bgChange">Background Image</li>
<input id="ImageUrl" placeholder="Background Image URL" /> <button class="waves-effect waves-light blue darken-2 btn" id="Btn">Go</span>
<br> <br>
<button class = "simple waves-effect waves-light green darken-2 btn">Simplify</button>
</ul>
</div>
</nav>
<div class="container">
<ul class="social">
<li class="dribbble">
<img src="http://cdn.appstorm.net/web.appstorm.net/files/2010/12/Chrome-Store1.png">
</li>
</ul>
</div>
<form>
<label>Enter a new task:</label>
<input class="input" type="text">
<input type="submit" value="Add">
</form>
<ul title="Click to delete; drag to reorder">
</ul>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="scripts.js"></script>
Also you have a problem with
.main-menu {
height: 90%;
It should be
height: calc(100% - 100px);
But it would be better if you remove height (or set it to auto) and use only
bottom: 0;
So The block will fit regardless window size:
Problem solved! Turns out there was a padding code afterwards interfering with my commands!
I'm having trouble centering my home page text (the tag). I'm not sure why it's not working.
I have a button that performs a short animation when the user hovers over the button. The button is supposed to fill with red but when I change the background color of the #main container, the button loses its animation. I'm assuming that it's getting hidden behind main's background color but I don't know how to resolve this issue.
Thanks!
/*CSS DOCUMENT*/
/* Notes:
Hashtags are for ID's and dots(.) are for classes
If you do #nav .selected for example, it would look for .selected within the nav ID.
*/
/*Import stuff for button animations */
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/*Global Button Syles*/
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/*End Global Button Styles*/
/*Victoria Button Style 3*/
a.animated-button.victoria-three {
border: 2px solid #D24D57;
color: #333;
}
a.animated-button.victoria-three:after {
background: #D24D57;
opacity: .5;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
height: 140%;
opacity: 1;
}
body{
background-color: #EEEEEE;
font-family: 'Montserrat', sans-serif;
}
a{
text-decoration: none;
color: #D24D57;
}
h1{
padding: 10px;
align: left;
}
.light_saber{
align:bottom;
margin:5px;
}
h2{
align:center;
}
#container{
width: auto;
margin-left: 0px;
margin-right: auto;
}
#header{
background-color: #D24D57;
color: white;
padding: 10px;
}
#content{
padding: 10px 10px 10px 10px; /*top right bottom left*/
width: auto;
}
#nav{
width: auto;
height: auto;
background-color: #999;
}
#nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#nav .selected{
font-weight: bold;
}
#main{
width: auto;
height: 2000px;
float: center;
background-color: #999;
}
#main .profile_picture{
border-radius: 20px;
width: 250px;
height: 350px;
padding: 10px;
float: right;
background-color: #333;
}
#footer{
clear: both; /*Lets get past all the floating elements and then display footer*/
padding: 10px;
background-color: #999;
color: white;
text-align: center;
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Siman Shrestha</title>
<link href = "stylesheet.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Siman Shrestha</h1>
<div class="light_saber">
<img src="light_saber.gif" alt="Whoops, something went wrong :-(">
</div>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a class="selected" href=""> Home </a></li> <!--creates a class tag and hyperlink*/-->
<li><a class="selected" href=""> About </a></li>
<li><a class="selected" href=""> Contact </a></li>
</ul>
</div>
<div id="main">
<h2>Home Page</h2>
<img src="IMG_1689.jpg" class="profile_picture" alt="Whoops, something went wrong :-(">
<!--Resume Button-->
<div class="col-md-3 col-sm-3 col-xs-6">
Resume
</div>
<p>
Saucin'
</P>
</div>
</div>
<div id="footer">
Copyright © 2017 Siman Shrestha
</div>
</div>
</body>
</html>
Changing the z-index works
/*CSS DOCUMENT*/
/* Notes:
Hashtags are for ID's and dots(.) are for classes
If you do #nav .selected for example, it would look for .selected within the nav ID.
*/
/*Import stuff for button animations */
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/*Global Button Syles*/
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/*End Global Button Styles*/
/*Victoria Button Style 3*/
a.animated-button.victoria-three {
border: 2px solid #D24D57;
color: #333;
z-index:998;
}
a.animated-button.victoria-three span{
z-index:999;
}
a.animated-button.victoria-three:after {
background: #D24D57;
opacity: .5;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
height: 140%;
opacity: 1;
}
body{
background-color: #EEEEEE;
font-family: 'Montserrat', sans-serif;
}
a{
text-decoration: none;
color: #D24D57;
}
h1{
padding: 10px;
align: left;
}
.light_saber{
align:bottom;
margin:5px;
}
h2{
align:center;
}
#container{
width: auto;
margin-left: 0px;
margin-right: auto;
}
#header{
background-color: #D24D57;
color: white;
padding: 10px;
}
#content{
padding: 10px 10px 10px 10px; /*top right bottom left*/
width: auto;
}
#nav{
width: auto;
height: auto;
background-color: #999;
}
#nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#nav .selected{
font-weight: bold;
}
#main{
width: auto;
height: 2000px;
float: center;
background-color: #999;
}
#main .profile_picture{
border-radius: 20px;
width: 250px;
height: 350px;
padding: 10px;
float: right;
background-color: #333;
}
#footer{
clear: both; /*Lets get past all the floating elements and then display footer*/
padding: 10px;
background-color: #999;
color: white;
text-align: center;
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Siman Shrestha</title>
<link href = "stylesheet.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Siman Shrestha</h1>
<div class="light_saber">
<img src="light_saber.gif" alt="Whoops, something went wrong :-(">
</div>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a class="selected" href=""> Home </a></li> <!--creates a class tag and hyperlink*/-->
<li><a class="selected" href=""> About </a></li>
<li><a class="selected" href=""> Contact </a></li>
</ul>
</div>
<div id="main">
<h2>Home Page</h2>
<img src="IMG_1689.jpg" class="profile_picture" alt="Whoops, something went wrong :-(">
<!--Resume Button-->
<div class="col-md-3 col-sm-3 col-xs-6">
<span>Resume</span>
</div>
<p>
Saucin'
</P>
</div>
</div>
<div id="footer">
Copyright © 2017 Siman Shrestha
</div>
</div>
</body>
</html>
I am working on a responsive Nav menu for a website. I changed the header image into an image slider however now on the index.html page the nav menu is no longer aligned to the websites grid.
In the 'about', 'services' and contact pages the menu is positioned perfectly.
In the index.html page I have css code to position the navbar and logo position:absolute; but the rest of navs on the other page are position relative.
I want all the nav menus on each page to align the same so there is no obvious difference when the user changes pages. It may not be obvious on small screens but when you compare the index and about pages on a mobile device it is obvious the nav is not in the correct grid.
Can someone point me in the right direction?
Here is a link to the live site
http://shaneogrady.me/navtest/
HTML
<!DOCTYPE html>
<html>
<head>
<title> HELLO </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=""><script> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script src="js/jquery-1.11.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600' rel='stylesheet' type='text/css'>
<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
<script src="js/wow.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
new WOW().init();
</script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
});
});
</script>
</head>
<body>
<div id="home" class="banner a-banner">
<div class="container" style=" position: relative; z-index: 5; top: 0%; left: 5%;">
<div class="head-logo">
<img src="images/logo.png" alt="" />
</div>
<div class="top-nav">
<span class="menu"><img src="images/menu.png" alt=""></span>
<ul class="nav1">
<li class="hvr-sweep-to-bottom">Contact<i><img src="images/nav-but5.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom">Services<i><img src="images/nav-but3.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom">About<i><img src="images/nav-but2.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom active">Home<i><img src="images/nav-but1.png" alt=""/></i></li>
<div class="clearfix"></div>
</ul>
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {});
});
</script>
</div>
</div>
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Batman</h1>
<h3>Batman</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-2">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Superman</h1>
<h3>Superman</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-3">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Spiderman</h1>
<h3>Spiderman</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="services.html" role="button">See More</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
background:#fff;
font-family: 'Open Sans', sans-serif;
}
body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.banner{
background: url(../images/banner2.jpg) no-repeat 0px 0px #eeece9;
min-height: 855px;
background-size: cover;
position: relative;
}
.head-logo{
float: left;
}
.head-logo a {
display: block;
margin-top: 3.5em;
}
.top-nav{
float: right;
width: 70%;
}
.top-nav ul{
padding:0;
margin:0;
}
.top-nav ul li {
display: inline-block;
width: 20%;
margin-right: .4em;
display:block;
float: right;
line-height:38px;
margin:0;
padding:0;
position:relative;
}
.top-nav ul li.active{
background: #5abc5e;
}
.top-nav ul li a{
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 3em 0em 3em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i{
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul li a:hover{
text-decoration:none;
}
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: .3;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(../images/banner2.jpg);
}
.fade-carousel .slides .slide-2 {
background-image: url(../images/squad.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(../images/roadside.jpg);
}
/********************************/
/* Media Queries */
/********************************/
#media screen and (min-width: 980px){
.hero { width: 980px; }
}
#media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
/* Sweep To Bottom */
.hvr-sweep-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-ms-osx-font-smoothing: grayscale;
-o-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
-o-transition-property: color;
-moz-transition-property: color;
-ms-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #5abc5e;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
-o-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
color: white;
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.banner-bottom-grids{
margin: 5em 0;
}
.banner-bottom-left{
padding: 0;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0;
}
.banner-bottom-left h3{
color: #000;
font-size: 37px;
margin: 0;
line-height: 1.2em;
font-weight: 300;
}
.banner-bottom-left h5{
color: #969696;
font-size: 14px;
margin: 1em 0;
line-height: 1.8em;
}
.banner-bottom-left h5 span{
display:block;
}
.banner-bottom-left p{
color: #333333;
font-size: 14px;
margin: 0;
line-height: 1.8em;
font-weight: 600;
}
.banner-bottom-right img{
width:100%;
}
.see-button{
margin-top: 1em;
}
.see-button a{
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 1em 4em;
outline: none;
background: #393939;
border: none !important;
border-radius:0;
}
.jumbotron.banner-bottom-left {
background: none;
}
/*------------------ Slider Part starts Here----------*/
#slider2,
#slider3 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}
.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rslides_tabs li {
display: inline;
float: none;
margin-right: 1px;
}
.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs .rslides_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
.events {
list-style: none;
}
.callbacks_container {
position: relative;
float: left;
width: 100%;
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.callbacks li {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.callbacks img {
position: relative;
z-index: 1;
height: auto;
border: 0;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
left: 0;
right: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
top: 10%;
text-align: center;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 52%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 55px;
background: transparent url("../images/themes.png") no-repeat left top;
margin-top: -65px;
}
.callbacks_nav:active {
opacity: 1.0;
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 0;
}
#slider3-pager a {
display: inline-block;
}
#slider3-pager span{
float: left;
}
#slider3-pager span{
width:100px;
height:15px;
background:#fff;
display:inline-block;
border-radius:30em;
opacity:0.6;
}
#slider3-pager .rslides_here a {
background: #FFF;
border-radius:30em;
opacity:1;
}
#slider3-pager a {
padding: 0;
}
#slider3-pager li{
display:inline-block;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li{
position: relative;
display: block;
float: left;
}
.rslides img {
height: auto;
border: 0;
width:100%;
}
.callbacks_tabs{
list-style: none;
position: absolute;
top: 78%;
z-index: 999;
left: 45%;
padding: 0;
margin: 0;
}
.slider-top{
text-align: center;
padding:10em 0;
}
.slider-top h1{
font-weight:700;
font-size:48px;
color:#010101;
}
.slider-top p{
font-weight:400;
font-size:20px;
padding:1em 7em;
color:#010101;
}
.slider-top ul.social-slide{
display:inline-flex;
margin: 0px;
padding: 0px;
}
You might want to try rebuilding your css from scratch instruction by instruction and see what is changing something. If a change doesn't apply, try adding !important at the end (like so :{ width : 30% !important;}), sometimes Bootstrap is a bit possessive.
Maybe throwing a position : absolute ; right :0; top:0; in the .top-nav and building from there would help do the trick.
An element with position: absolute is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed)
position: absolute allows an element to be positioned with respect
to a containing block using left, right, top or bottom (the containing
block is the nearest ancestor node with a position of relative,
absolute or fixed).
To fix it just add left: 0 and right: 0 to .container this will make the div stretch to document width.
Here a minimal snippet example to illustrate (without using left, right):
div.relative {
position: relative;
height: 200px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
height: 100px;
border: 3px solid blue;
display: block;
}
<div class="relative">This
<div>element has position: relative;
<div class="absolute">This
<div>element has position: absolute;</div>
</div>
Now with left: 0, right: 0
div.relative {
position: relative;
height: 200px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
height: 100px;
border: 3px solid blue;
display: block;
left: 0;
right: 0;
}
<div class="relative">This
<div>element has position: relative;
<div class="absolute">This
<div>element has position: absolute;</div>
</div>
Check this out to full information
I just finished my site. Atleast mostly, because there is a block of white space that is puzzling me. It appears every time, but when i select it, it disappears. Here is what it looks like.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.Jack Murdock,</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="portfolio.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1//style.css" media="screen" />
<script type="text/javascript" src="engine1//jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body bgcolor="#3b3a3b">
<div id="HeaderContainer">
</div>
<h1>.01 Photography</h1>
<ul class="flatflipbuttons">
<li><span><img src="images/photography.png" /></span><b>photography</b></li>
<li><span><img src="images/graphicdesign.png" /></span><b>2D Design</b></li>
<li><span><img src="images/3dwork.png" /></span><b>3D Work</b></li>
<li><span><img src="images/contact.png" /></span><b>Contact</b></li>
</ul>
<!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/1277971_10202333285879975_353051239_o.jpg" alt="1277971_10202333285879975_353051239_o" title="1277971_10202333285879975_353051239_o" id="wows1_0"/></li>
<li><img src="data1/images/14262710457_9135dff762_o.jpg" alt="14262710457_9135dff762_o" title="14262710457_9135dff762_o" id="wows1_1"/></li>
<li><img src="data1/images/dsc_1180.jpg" alt="DSC_1180" title="DSC_1180" id="wows1_2"/></li>
<li><img src="data1/images/dsc_2612.jpg" alt="DSC_2612" title="DSC_2612" id="wows1_3"/></li>
<li><img src="data1/images/dsc_8128.jpg" alt="DSC_8128" title="DSC_8128" id="wows1_4"/></li>
<li><img src="data1/images/image_2.jpg" alt="image_2" title="image_2" id="wows1_5"/></li>
<li><img src="data1/images/image_10.jpg" alt="image_10" title="image_10" id="wows1_6"/></li>
<li><img src="data1/images/image_12.jpg" alt="image_12" title="image_12" id="wows1_7"/></li>
<li><img src="data1/images/image_15.jpg" alt="image_15" title="image_15" id="wows1_8"/></li>
<li><img src="data1/images/image_17.jpg" alt="image_17" title="image_17" id="wows1_9"/></li>
</ul></div>
<div class="ws_bullets"><div>
<img src="data1/tooltips/1277971_10202333285879975_353051239_o.jpg" alt="1277971_10202333285879975_353051239_o"/>1
<img src="data1/tooltips/14262710457_9135dff762_o.jpg" alt="14262710457_9135dff762_o"/>2
<img src="data1/tooltips/dsc_1180.jpg" alt="DSC_1180"/>3
<img src="data1/tooltips/dsc_2612.jpg" alt="DSC_2612"/>4
<img src="data1/tooltips/dsc_8128.jpg" alt="DSC_8128"/>5
<img src="data1/tooltips/image_2.jpg" alt="image_2"/>6
<img src="data1/tooltips/image_10.jpg" alt="image_10"/>7
<img src="data1/tooltips/image_12.jpg" alt="image_12"/>8
<img src="data1/tooltips/image_15.jpg" alt="image_15"/>9
<img src="data1/tooltips/image_17.jpg" alt="image_17"/>10
</div></div><span class="wsl">slider plugin wordpress by WOWSlider.com v5.6</span>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1//wowslider.js"></script>
<script type="text/javascript" src="engine1//script.js"></script>
<!-- End WOWSlider.com BODY section -->
<ul id= "nav2">
<li>Photography</li>
<li>Photo retouching</li>
<li>Studio Work</li>
</ul>
<p> </p>
<p> </p>
</body>
</html>
CSS
#charset "utf-8";
#charset "utf-8";
/* CSS Document */
body {
background-color: #FFFFFF;
}
#HeaderContainer {
width: 102%;
height: 320px;
background-color: #FFFFFF;
background-image: url("title2.png");
background-repeat: no-repeat;
margin-left: 0 auto;
margin-right: 0 auto;
float: center;
position: relative;
top: -50px;
}
.title {
position: relative;
text-align:center;
color: #5f5f5f;
}
#nav {
display: inline;
}
ul {
list-style: none;
display: block;
}
.CenterContainer {
width: 102%;
overflow: visible;
display: block;
height: 210px;
padding-top: 10px;
}
div.img{
height: 133px;
width: 200px;
float: left;
text-align: center;
margin: 20px 30px 20px;
display: block;
line-height:0;
}
#nav li a:hover {
color: #9BACC4;}
/* CSS Document */
a.current:link, a.current:visited {
border-bottom:thick dotted #FFFFFF;
}
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
.TitleImg {
position: relative;
top: 100px;
}
#nav2 {
max-width: 30%;
height: 50px;
float: left;
padding: 0;
list-style: none;
list-style: none;
background-color: #FFFFFF;
z-index: 90;
position: relative;
top: -500px;
left: 800px;
margin: 0 0 10px 0;
font-weight: bold;
font-family: 'Hammersmith One', sans-serif;
}
#nav2 li:hover{
transform: scale(0.862, 1.134);
-webkit-transform: scale(0.862, 1.134);
-moz-transform: scale(0.862, 1.134);
-o-transform: scale(0.862, 1.134);
-ms-transform: scale(0.862, 1.134);
}
#nav2 li {
float: left;
padding-left: 10px;
}
#nav2 li a {
display: inline;
color: #66a9df;
}
.frontimage {
position: absolute;
left: 500px;
display: inline;
}
#nav {
width: 25px;
height: 600px;
}
ul.flatflipbuttons{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.flatflipbuttons li{
margin:0;
display: block;
width: 100px; /* dimensions of buttons. */
height: 100px;
margin-bottom: 0; /* spacing between buttons */
background: white;
text-transform: uppercase;
text-align: center;
}
ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
color: black;
background: #3B9DD5;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
ul.flatflipbuttons li:nth-of-type(1) a{
color: green;
background: #3B9DD5;
}
ul.flatflipbuttons li:nth-of-type(2) a{
background: #A1CD3A;
}
ul.flatflipbuttons li:nth-of-type(3) a{
background: #80C5EC;
}
ul.flatflipbuttons li:nth-of-type(4) a{
color: white;
background: #635746;
}
ul.flatflipbuttons li:nth-of-type(5) a{
background: #F2C96D;
}
ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.flatflipbuttons li b{ /* CSS for text alongside button */
display: block;
position: relative;
top: -100%; /* starting vertical position of text */
left: 100%; /* horizontal position of text */
text-align: left;
text-indent: 10px;
width: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
-moz-transition: all 300ms ease-out 0.2s;
transition: all 300ms ease-out 0.5s;
}
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}
ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #c1e4ec; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover a span{
color: black; /* color of icon font onMouseover */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover b{
opacity: 1;
top: -65%; /* vertical position of text onmouseover */
}
/* CSS for 2nd menu below specifically */
ul.second li a{
background: #eee !important;
}
ul.second li a:hover{
background: #ddd !important;
}
h1 {
position: relative;
top: -100px;
font-family: 'Special Elite', cursive;
display: inline;
}
#nav3 {
max-width: 30%;
height: 50px;
float: left;
padding: 0;
list-style: none;
list-style: none;
background-color: #FFFFFF;
z-index: 90;
position: absolute;
top: 200px;
left: 800px;
margin: 0 0 10px 0;
font-weight: bold;
color: #5674DC;
}
#nav3 li {
float: left;
margin: 2px;
}
#nav3 li a {
display: inline;
}
#nav4 {
max-width: 30%;
height: 50px;
float: left;
padding: 0;
list-style: none;
list-style: none;
background-color: #FFFFFF;
z-index: 90;
position: absolute;
top: 200px;
left: 800px;
word-spacing:30px;
margin: 0 0 10px 0;
}
#nav2 li {
float: left;
margin: 2px;
}
#nav2 li a {
display: inline;
}
a:link {
text-decoration: none;
color: #0e5b9a;
}
.contact {
margin: 0 auto;
position: relative;
top: -400px;
display: block;
width: 40%;
font-family: 'PT Sans Narrow', sans-serif;
}
Any advice on fixing this would be greatly appreciated!
Change
font-family: 'Special Elite', cursive;
To:
font-family: 'Special Elite', sans-serif;
Cursive seems to have lots of issues.