I'm a new student in the web development world. I am trying to create a static page for personal study and I need to leave the image to the left well below the menu, however, I have already tried the forms that I know and all continue to present the same error, so I believe someone here can answer me. Can someone help me?
https://ibb.co/M8rsp49
This is the html code:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Home</title>
<link rel="shortcun icon" type="image/x-png" href="_imagens/icone-adv6.png"/>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="_css/estilo.css">
</head>
<body>
<header class="header">
<!-- inicio menu -->
<div class="logo">
<img src="_imagens/iconadv6.png">
</div>
<nav>
<ul>
<li><p class="gilroy-bold">equipe</p></li>
<li><p class="gilroy-bold">cases</p></li>
<li><p class="gilroy-bold">agência</p></li>
</ul>
</nav>
<!-- fim menu -->
</header>
<div class="zoom">
<img src="_imagens/predio.png">
<div class="text-item">
</div>
<div id="tituloadv6">
<h1><p class="gilroy-bold">Somos a <br />ADV6</h1></p>
</div>
<div id="texto1">
<h3><p class="gilroy-bold">Não fazemos a menor ideia. <br />Fazemos a maior.</h3></a>
</div>
<div id="texto2">
<p class="gilroy-bold">Passa aqui! <br/> Tem playstation, café, <br />cerveja e muita criatividade. </a>
</div>
</body>
</html>
This is the CSS code:
#font-face{
font-family: "gilroy-bold";
src: url("../_fonts/gilroy-bold.ttf");
}
.gilroy-bold{
font-family: "gilroy-bold";
}
.header ul li a:hover {
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #FF8C00;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.zoom {
overflow: hidden;
}
.zoom img {
max-width: 90%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
float: right;
margin-top: 40px;
position: relative;
}
.zoom:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#tituloadv6{
margin-left: 60px;
font-size: 30px;
padding-top: 60px;
}
#logo{
padding-left: 20px;
padding-bottom: 0px;
padding-top: 15px;
}
#texto1{
padding-left: 100px;
}
#texto2{
font-size: 13px;
padding-left: 100px;
}
.header{
margin: 0;
padding: 0;
}
nav{
width: 100%;
}
ul{
margin: 5px 5px 5px 10px;
padding: 0px;
padding-bottom: 40px;
list-style: none;
}
li{
float: right;
}
.logo img{
position: absolute;
margin-top: 15px;
margin-left: 10px;
}
nav a{
width: 100px;
display: block;
padding: 20px 15px;
text-decoration: none;
}
changing float: right to float: left and margin-top: 40px to margin-top: 100px
.zoom img {
max-width: 90%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
float: left;
margin-top: 100px;
position: relative;
}
Hope that helps!
Change the .zoom class to this:
.zoom {
overflow: hidden;
display: block;
width: 100%;
}
Then change the float of the img tag:
.zoom img {
.zoom img {
max-width: 90%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
float: left;
margin-top: 40px;
position: relative;
}
You'll need to change the margins of the text to make sure text is readable.
See this codepen for more details: https://codepen.io/aharish-the-typescripter/pen/GPqqpw
Related
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>
My question is rather simple,
text-decoration:none - is not working in this example when a user hovers over an <a> tag. Where is my mistake?
I have provided the whole project to help you understand what I'm trying to achieve. There is a code snippet below that displays my code with the current problem.
Thanks in advance guys.
* {
font-family: "Helvetica Neue";
font-size: 22px;
text-decortion:none!important
}
.container {
color: #a2abbd;
width: 100%;
height: 100%;
background-color: #21212b;
}
.radio-container {
overflow: hidden;
position: relative;
margin: 7% auto;
height: 504px;
width: 320px;
background-color: #2c2c37;
border-top: 1px solid #f1be81;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
}
header {
text-align: center;
vertical-align: middle;
line-height: 79px;
height: 79px;
background-color: #edae61;
color: white;
font-weight: bold;
}
header a {
display: block;
position: absolute;
width: 60px;
height: 80px;
}
header .arrow {
left: 0;
top: 0;
}
header .arrow img {
margin-bottom: 5px;
}
header .on-off {
right: 0;
top: 0;
}
header .on-off img {
margin-bottom: 10px;
margin-right: 7px;
}
section {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul {
position: relative;
padding: 0;
margin: 11px 23px 0px 23px;
line-height: 1.364;
}
section ul li {
border-bottom: 1px solid #40404a;
list-style-type: none;
overflow: hidden;
}
section ul li:last-child {
border: none;
}
section ul li a {
display: block;
padding: 18px 0px 14px 0px;
cursor: pointer;
width: 100%;
height: 100%;
color: #a2abbd;
text-decoration: none;
}
section ul li a:hover p {
color: #848b9b;
}
section ul li a p {
display: inline;
}
section ul li a p strong {
float: right;
clear: both;
}
section ul li a p img {
padding-right: 0.5em;
padding-bottom: 0.2em;
}
section ul .dribbleFM {
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul .dribbleFM .dribble-anchor {
position: absolute;
top: -200px;
z-index: 1;
}
section ul .dribbleFM .dribble-anchor:target {
top: 18px;
margin-bottom: 18px;
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul .dribbleFM .dribble-anchor:target + .dribble-button1 {
display: none;
}
section ul .dribbleFM .dribble-anchor:target ~ .dribble-button2 {
display: block;
}
section ul .dribbleFM .dribble-anchor .volume {
pointer-events: none;
position: relative;
}
section ul .dribbleFM .dribble-anchor .volume a {
position: relative;
display: inline;
pointer-events: auto;
z-index: 100;
}
section ul .dribbleFM .dribble-anchor .volume .img-main {
margin-left: 33px;
margin-right: 33px;
padding-top: 40px;
padding-bottom: 40px;
}
section ul .dribbleFM .dribble-anchor .volume .clickable {
padding-top: 5px;
padding-bottom: 8px;
}
section ul .dribbleFM .dribble-button2 {
display: none;
}
footer {
position: absolute;
bottom: 0;
height: 79px;
width: 100%;
background-color: #22222b;
border-top: 1px solid #4d505c;
text-align: center;
vertical-align: middle;
line-height: 79px;
cursor: default;
}
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatibile" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="netguru recruitment task">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="radio-container">
<header><img src="https://imageshack.com/i/id8QV4sap">
<p>
STATIONS
</p><img src="https://imageshack.com/i/idUebcAVp">
</header>
<section>
<ul>
<li><a href="#">
<p>
Putin FM<strong>66,6</strong>
</p></a></li>
<li class="dribbleFM">
<div id="dribble-anchor-on" class="dribble-anchor">
<div class="volume"><img src="https://imageshack.com/i/exjVsiWzp"><img src="https://imageshack.com/i/ipxUWXkvp"><img src="https://imageshack.com/i/idsjoKxsp"></div>
</div><a href="#dribble-anchor-on" class="dribble-button1">
<p>
Dribbble FM<strong>101,2</strong>
</p></a><a href="#dribble-anchor-off" class="dribble-button2">
<p>
Dribbble FM<strong>101,2 </strong>
</p></a>
</li>
<li><a href="#">
<p>
Doge FM<strong>99,4</strong>
</p></a></li>
<li><a href="#">
<p>
Ballads FM<strong>87,1</strong>
</p></a></li>
<li><a href="#">
<p><img src="http://imageshack.com/a/img661/6406/acyLmg.png">Maximum FM<strong>142,2 </strong></p></a></li>
</ul>
</section>
<footer>
<p>High quality</p>
</footer>
</div>
</div>
</body>
</html>
By defualt, you have already set the text-decoration:none for anchors. But text-decoration is not acting on hover for anchors because you have not specified it for :hover state.
For :hover, Try this,
section ul li a:hover{text-decoration:none}
Hope this help.!
The solution already post should work fine. By the way, why are you keeping your styles first and then the bootstrap styles. You should keep your styles next to the bootstrap styles. Otherwise, whatever you will loose the impact of your styles overridden by bootstrap styles.
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
When you open it, click in the color aqua div, then make a hover in the first box and click where it says "CLICK ME". You'll see that when the appearing div reaches the border of the windows, there is a little movement in the top border, which is very annoying. I tried a lot of things but i wasn't able to remove it. Any ideas? Thanks in advance.
/* ////// INITIAL RESET AND CONFIGURATIONS ////// */
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
/* Hide the other pages */
}
body {
margin: 0;
padding: 0;
border: 0;
/*height: 100%; Also works 100vh (View percentage lenght) */
overflow: hidden;
}
ul {
list-style: none;
text-align: center;
}
a {
display: block;
border: none;
text-decoration: none;
color: black;
cursor: default;
}
/*================================== PAGE SLIDE TRANSITION ==================================*/
/* Basic Style/Positioning for all Pages */
.pages,
.page,
.page .backbutton,
.page .nextbutton {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.page .backbutton,
.page .nextbutton {
height: 10%;
background-color: red;
z-index: 1;
}
.page .backbutton {
top: 0%;
}
.page .nextbutton {
top: 90%;
background-color: aqua;
}
/* Pages */
#i2 {
top: 100%;
}
#i3 {
top: 200%;
}
/* Slide Effect */
.pages {
-webkit-transition: top 0.8s;
-moz-transition: top 0.8s;
-o-transition: top 0.8s;
-ms-transition: top 0.8s;
transition: top 0.8s;
}
#a1:target .pages {
top: 0%;
}
#a2:target .pages {
top: -100%;
}
#a3:target .pages {
top: -200%;
}
#i1 {
background-color: #fff;
}
#i2 {
background-color: #bbb;
}
#i3 {
background-color: #777;
}
/*================================== PAGE ONE ==================================*/
/* ////// ELEMENT'S POSITION ////// */
#i1 {
background-color: bisque;
/*position:relative; stacking context */
}
/* ////// HOVER ////// */
.menu li a:hover {
background: teal;
visibility: visible;
}
#i1 .menu li a:hover + .image {
top: 0;
}
#i1 .menu li a {
z-index: 3;
position: relative;
}
#i1 li .image {
position: absolute;
width: 17.5%;
padding: 0px;
border: 0px #999999 solid;
margin: 0px;
height: 100%;
transition: 0.8s;
top: -50%;
}
#i1 .image1 {
background-color: grey;
left: 10%;
}
#i1 .image2 {
background-color: #777777;
left: 27.5%;
}
#i1 .image3 {
background-color: #555555;
left: 45%;
}
#i1 .image4 {
background-color: #333333;
left: 62.5%;
}
/* ////// ICON ////// */
[data-icon]:before {
/* Allows to show the icons */
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon:before {
/* Shows the icon */
float: left;
content: '\e60e';
font-family: 'icomoon';
speak: none;
color: red;
font-size: 50px;
}
#button_menu {
position: absolute;
display: none;
}
label {
position: absolute;
float: left;
top: 75%;
left: 3%;
border: 1px green solid;
}
#button_menu + label {
cursor: pointer;
}
/* ////// MENU OPTION's TRANSITIONS ////// */
.menu {
list-style: none;
box-sizing: border-box;
width: 70%;
padding: 0;
margin: 0;
margin-top: 80vh;
margin-left: 10%;
overflow: hidden;
border: 1px solid #FF0000;
}
li.option {
float: left;
display: inline-block;
box-sizing: border-box;
padding: 0px 55px 0px 55px;
width: 25%;
margin: 0;
margin-top: 20px;
background: yellow;
border: 1px solid #000;
opacity: 0;
transition: .5s;
}
#button_menu:checked ~ .menu a {
cursor: pointer;
}
#button_menu:checked ~ .menu .option {
margin-top: 0px;
opacity: 1;
}
li.option:first-child {
transition-delay: .6s;
}
li.option:nth-child(2) {
transition-delay: .4s;
}
li.option:nth-child(3) {
transition-delay: .2s;
}
li.option:last-child {
transition-delay: 0s;
}
#button_menu:checked ~ .menu li.option:first-child {
transition-delay: 0s;
}
#button_menu:checked ~ .menu li.option:nth-child(2) {
transition-delay: .2s;
}
#button_menu:checked ~ .menu li.option:nth-child(3) {
transition-delay: .4s;
}
#button_menu:checked ~ .menu li.option:last-child {
transition-delay: .6s;
}
/*================================== PAGE TWO ==================================*/
h1,
p {
text-align: center;
padding: 0;
opacity: 0;
transform: scale(10);
transition: all 0.3s ease-in-out 0.1s;
}
.overlay {
display: block;
100%;
width: 100%;
margin: 0;
padding: 0;
}
#ov .overlay_open {
position: absolute;
margin: 0;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9|);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
background-color: chocolate;
z-index: 2;
}
/* ////// CENTERING THE PICTURES //////*/
.container {
/*occupes all the screen and hide the divs bigger than it*/
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.center {
position: absolute;
left: 50%;
top: 50%;
}
/*div centers in the middle of its parent, with 0
height and with (just a dot)*/
.center-container {
position: absolute;
left: -2500px;
top: -2500px;
/*move it left and top to be centered exactly in the middle from the center doth*/
width: 5000px;
height: 5000px;
line-height: 5000px;
text-align: center;
/*centers horizontally the pictures*/
overflow: hidden;
}
.dyn-box {
display: inline-block;
vertical-align: middle;
line-height: 100%;
}
/*-----------------***-----------------*/
.box {
float: left;
width: 130px;
height: 130px;
margin: 10px;
border: 5px black solid;
overflow: hidden;
}
.b4 {
clear: both;
}
.picture {
position: absolute;
width: 130px;
height: 130px;
background-color: beige;
}
.mask {
position: absolute;
width: 130px;
height: 130px;
overflow: hidden;
background-color: coral;
opacity: 0;
transition: all 0.3s ease-in-out 0.1s;
}
.box .mask:hover {
opacity: 0.4;
}
.box .mask:hover h1 {
transform: scale(1);
opacity: 1;
}
.box .mask:hover p {
transform: scale(1);
opacity: 1;
transition-delay: .2s;
}
#ov:target .overlay_open {
visibility: visible;
opacity: 0.8;
-webkit-transform: scale(1);
transform: scale(1);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="rock_page.css">
<link rel="stylesheet" type="text/css" href="icons_files/style.css">
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript" src="main.js"></script>
<title>Rock n' Roll</title>
</head>
<body>
<div id="a1">
<div id="a2">
<div id="a3">
<div class="pages">
<!-- Second Page #a1 -->
<div id="i1" class="page">
<input type="checkbox" name="button_menu" id="button_menu" />
<label for="button_menu" class="icon"></label>
<!--This also works for the icon instead of the CSS code
<span aria-hidden="true" data-icon="" class="down-arrow">-->
<ul class="menu">
<li class="option">Link 1
<div class="image image1"></div>
</li>
<li class="option">Link 2
<div class="image image2"></div>
</li>
<li class="option">Link 3
<div class="image image3"></div>
</li>
<li class="option">Link 4
<div class="image image4"></div>
</li>
</ul>
</div>
<!-- Second Page #a2 -->
<div id="i2" class="page">
<div class="container">
<div class="center">
<div class="center-container">
<span class="dyn-box">
<div class="box b1">
<div class="picture"></div>
<div class="mask">
<h1>Text</h1>
<p>Lore ipsum facto lore impsum facto</p>
CLICK ME
</div>
</div>
<div class="box b2">
<div class="picture"></div>
<div class="mask">
<h1>Text</h1>
<p>Lore ipsum facto lore impsum facto</p>
</div>
</div>
<div class="box b3">
<div class="picture"></div>
<div class="mask">
<h1>Text</h1>
<p>Lore ipsum facto lore impsum facto</p>
</div>
</div>
<div class="box b4">
<div class="picture"></div>
<div class="mask">
<h1>Text</h1>
<p>Lore ipsum facto lore impsum facto</p>
</div>
</div>
<div class="box b5">
<div class="picture"></div>
<div class="mask">
<h1>Text</h1>
<p>Lore ipsum facto lore impsum facto</p>
</div>
</div>
<div class="box b6">
<div class="picture"></div>
<div class="mask">
<h1>Text</h1>
<p>Lore ipsum facto lore impsum facto</p>
</div>
</div>
</span>
</div>
</div>
</div>
<div id="ov" class="overlay">
<div class="overlay_open">
</div>
</div>
</div>
<!-- Third Page #a3 -->
<div id="i3" class="page">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This simplified version works exactly like i want, and the transition is more fluid too.
body, .container { margin: 0; padding: 0;}
a {position: absolute}
.container .overlay {
position: fixed;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
background-color: chocolate;
z-index: 2;
}
#c:target .overlay {
visibility: visible;
opacity: 0.8;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
<body>
<div id="c" class="container">
OPEN
<div class="overlay">
</div>
</div>
</body>
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.