Develop Reference

Looking for a way to make this triangle at top of div rounded like this picture? [duplicate]

Can anyone please help with this? How to achieve the attached button with CSS only(no image)?
This is my code so far:
.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
<div class="triangle-up"></div>

Use pseudo element where you apply a radial-gradient:
.box {
margin:60px 10px 0;
display:inline-block;
color:#fff;
text-align:center;
padding:10px 30px;
background:green;
border-radius:50px;
position:relative;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:50%;
width:60px;
height:25px;
transform:translateX(-50%);
background:
radial-gradient(farthest-side at top left , transparent 98%,green 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,green 100%) right;
background-size:50.2% 100%;
background-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box">text here</div>
<div class="box">more and more text here</div>
<div class="box">2 lines <br>of text</div>
Another idea in case you want any kind of coloration:
.box {
margin:60px 10px 0;
display:inline-block;
color:#fff;
text-align:center;
padding:10px 30px;
background-image:linear-gradient(60deg,yellow,purple,green,blue);
background-size:100% calc(100% + 25px);
background-position:bottom;
border-radius:50px;
position:relative;
z-index:0;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
bottom:0;
left:0;
right:0;
height:calc(100% + 25px);
background-image:inherit;
-webkit-mask:
radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
mask:
radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
-webkit-mask-size:30px 25px;
mask-size:30px 25px;
-webkit-mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box">text here</div>
<div class="box" style="
background-image:linear-gradient(160deg,white,red,black,orange);">more and more text here</div>
<div class="box" style="
background-image:linear-gradient(180deg,blue 20%,violet 20%,black);">2 lines <br>of text</div>

you can use the shadow on both rounded pseudos
.bubble {
position: relative;
background: #00aabb;
border-radius: 0.4em;
width: 200px;
height: 100px;
}
.bubble:after,
.bubble:before {
content: "";
position: absolute;
height: 3em;
width: 3em;
border-radius: 50%;
top: 100%;
margin: -1px;
}
:after {
left: 50%;
box-shadow: -0.8em -1.4em 0 -0.5em #00aabb
}
:before {
right: 50%;
box-shadow: 0.8em -1.4em 0 -0.5em #00aabb;
}
<div class='bubble'></div>
to understand how it works, give a background to the pseudo and another color to the shadows. You'll be able to reproduce for the sides or the top. It's a matter of the circle size and shadow's size and direction.

One option is to create a normal rectangle and then position two circles over it, such that they create a curved point.
In the demo below, this rectangle is represented by the .point div, and the circles are represented by the pseudo-elements ::before and ::after.
.caption {
position: relative;
width: 350px;
margin-top: 40px;
}
.caption>.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 30px;
background-color: green;
color: white;
text-align: center;
}
.caption>.point {
position: absolute;
left: 50%;
top: -30px;
width: 30%;
height: 30px;
transform: translateX(-50%) translateZ(1px);
overflow: hidden;
background-color: green;
}
.caption>.point::before,
.caption>.point::after {
content: '';
display: block;
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background-color: white;
}
.caption>.point::before {
transform: translateX(-49%) translateY(-50%);
}
.caption>.point::after {
transform: translateX(49%) translateY(-50%);
}
<div class="caption">
<div class="point"></div>
<div class="content">This is some text!</div>
</div>
Here is a more visual demonstration of what the code is actually doing. The ::before and ::after elements are represented by the red circles. I've reduced the transparency of their fill to 50% so you can see which portion of the .point div they're cutting off.
.caption {
position: relative;
width: 350px;
margin-top: 40px;
}
.caption>.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 30px;
background-color: green;
color: white;
text-align: center;
}
.caption>.point {
position: absolute;
left: 50%;
top: -30px;
width: 30%;
height: 30px;
transform: translateX(-50%) translateZ(1px);
background-color: green;
}
.caption>.point::before,
.caption>.point::after {
content: '';
display: block;
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background-color: rgba(255,255,255,0.5);
border: 1px solid red;
}
.caption>.point::before {
transform: translateX(-49%) translateY(-50%);
}
.caption>.point::after {
transform: translateX(49%) translateY(-50%);
}
<div class="caption">
<div class="point"></div>
<div class="content">This is some text!</div>
</div>

Displaying a tree list using CSS or JS with dots on end of lines

I want to display something like this on a HTML page using CSS:
I currently use this code:
.tree,
.tree ul {
margin:0 0 0 1em; /* indentation */
padding:0;
list-style:none;
color:#1f1f1f;
position:relative;
}
.tree ul {margin-left:.5em}
.tree:before,
.tree ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
bottom:0;
left:0;
border-left:1px solid;
}
.tree li {
margin:0;
padding:0 1.5em; /* indentation + .5em */
line-height:2em; /* default list item's `line-height` */
font-weight:bold;
position:relative;
}
.tree li:before {
content:"";
display:block;
width:10px; /* same with indentation */
height:0;
border-top:1px solid;
margin-top:-1px; /* border top width */
position:absolute;
top:1em; /* (line-height/2) */
left:0;
}
.tree li:last-child:before {
background:#fff; /* same with body background */
height:auto;
top:1em; /* (line-height/2) */
bottom:0;
}
<ul class="tree">
<li>Bad Credit/No Credit</li>
<li>Bankruptcy</li>
<li>Repossession</li>
<li>Consumer Proposal</li>
</ul>
How can I do that and is possible?

You can use :after pseudo-elements to hold the dots:
.tree li:after {
content: "\2022"; /* bullet code */
position: absolute;
left: 9px;
top: -1px;
}
.tree:after {
content: "\2022"; /* bullet code */
position: absolute;
left: -3px;
top: -8px;
}
.tree,
.tree ul {
margin:0 0 0 1em; /* indentation */
padding:0;
list-style:none;
color:#1f1f1f;
position:relative;
}
.tree ul {margin-left:.5em}
.tree:before,
.tree ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
bottom:0;
left:0;
border-left:1px solid;
}
.tree li {
margin:0;
padding:0 1.5em; /* indentation + .5em */
line-height:2em; /* default list item's `line-height` */
font-weight:bold;
position:relative;
}
.tree li:before {
content:"";
display:block;
width:10px; /* same with indentation */
height:0;
border-top:1px solid;
margin-top:-1px; /* border top width */
position:absolute;
top:1em; /* (line-height/2) */
left:0;
}
.tree li:last-child:before {
background:#fff; /* same with body background */
height:auto;
top:1em; /* (line-height/2) */
bottom:0;
}
.tree li:after {
content: "\2022"; /* bullet */
position: absolute;
left: 9px;
top: -1px;
}
.tree:after {
content: "\2022"; /* bullet */
position: absolute;
left: -3px;
top: -8px;
}
<ul class="tree">
<li>Bad Credit/No Credit</li>
<li>Bankruptcy</li>
<li>Repossession</li>
<li>Consumer Proposal</li>
</ul>

Responsive Design: switching order of Div's

I have a simple page. What I want to do is when I make the width smaller, I would like the "middle" div to be on top of the "left" div. Right now, the middle div is second as it should be, but I'm wondering how I would make it so that the middle div goes on top of the left div.
http://jsfiddle.net/nynou9mr/
div{
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:60px;
}
body{
margin:0;padding:0;
}
#header{
height:100px;
width:100%;
background:purple;
text-align:center;
position:relative;
}
.wrap{
width:100%;
text-align:center;
background:blue;
overflow:hidden;
white-space:nowrap;
}
#left{
display: inline-block;
margin-top:10px;
height:500px;
width:300px;
background:red;
}
#middle{
display: inline-block;
margin-top:10px;
margin-left:10px;
height:500px;
width:1570px;
background:gray;
}
#media (max-width:1320px){
#left{
width:800px;
height:200px;
margin:20px auto;display:block;
}
#middle{
width:800px;
}
#bottom{
margin-top:100px;
}
}
#media (max-width:1625px){
#right{
width:100%;
height:300px;
}
}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=For Footer */
* {
padding: 0;
}
html, body {
height: 100%;
padding:0;
}
.forfooter{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#bottom{
/*position:absolute;
bottom:0;
width:100%;*/
height:100px;
background:orange;
}
.push{
height:0px;
margin-top:-100px;
}
<title>First Responsiveness</title>
</head>
<body>
<div class="forfooter">
<div id="header">Header</div>
<div class="wrap">
<div id="left">left</div>
<div id="middle">Middle</div>
</div>
<div class="push"></div>
</div>
<div class="push"></div>
<div id="bottom">Bottom</div>

Depending on what browser support you need.
flexbox makes this easy.
.wrap {
width: 80%;
margin: 10px auto;
border: 1px solid grey;
display: flex;
flex-direction: column;
padding: 25px;
}
#left,
#middle {
height: 50px;
line-height: 50px;
text-align: center;
order: 1;
}
#left {
background: #bada55;
}
#middle {
background: #663399;
color: white;
}
#media screen and (max-width: 760px) {
#middle {
order: 0;
}
}
<div class="wrap">
<div id="left">left</div>
<div id="middle">Middle</div>
</div>
Codepen Demo

Check this out: http://jsfiddle.net/e42q63w5/1/
The trick is to have div#middle before div#left in your html and control the position with float: left | right
div{
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:60px;
}
body{
margin:0;padding:0;
}
#header{
height:100px;
width:100%;
background:purple;
text-align:center;
position:relative;
}
.wrap{
width:100%;
text-align:center;
background:blue;
overflow:hidden;
white-space:nowrap;
}
#left{
float: left
display: inline-block;
margin-top:10px;
height:500px;
width:20%;
background:red;
}
#middle{
float: right;
display: inline-block;
margin-top:10px;
margin-left:10px;
height:500px;
width:75%;
background:gray;
}
#media (max-width:1320px){
#left{
float: none;
width:800px;
height:200px;
margin:20px auto;
display:block;
}
#middle{
float: none;
width:800px;
}
#bottom{
margin-top:100px;
}
}
#media (max-width:1625px){
#right{
width:100%;
height:300px;
}
}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=For Footer */
* {
padding: 0;
}
html, body {
height: 100%;
padding:0;
}
.forfooter{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#bottom{
/*position:absolute;
bottom:0;
width:100%;*/
height:100px;
background:orange;
}
.push{
height:0px;
margin-top:-100px;
}
<div class="forfooter">
<div id="header">Header</div>
<div class="wrap">
<div id="middle">Middle</div>
<div id="left">left</div>
</div>
<div class="push"></div>
</div>
<div class="push"></div>
<div id="bottom">Bottom</div>
</div>

Trying to place bullets of the nivo slider on the image

I'm working on a Nivo Slider for my website, and I'm facing a problem with the bullets of the slider. I want them on the images of the slider. Now they are on my menu.
Like this:
This is the nivo-slider.css file:
/*
* jQuery Nivo Slider v3.2
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
position: relative;
z-index:1000;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
And this is default.css
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Description: The default skin for the Nivo Slider.
Version: 1.3
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
Supports Thumbs: true
*/
.theme-default .nivoSlider {
position:relative;
background:#fff url(images/loading.gif) no-repeat 50% 50%;
margin-bottom:10px;
/*-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;*/
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
text-align: center;
padding: 20px 0;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:22px;
height:22px;
background:url(images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 0;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}
I'd really appreciate your help.
Thanks in advance.

It's hard to actually give you a working example from the code you provided above, but I went to Nivo Slider's page and played with one of their demos in the console. What you can do is change this:
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
to
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
position: absolute;
top: 800px; /*CHANGE THIS VALUE TO FIT YOUR NEEDS*/
left: 200px; /*CHANGE THIS VALUE TO FIT YOUR NEEDS*/
z-index: 5; /*MAKE THIS HIGHER IF THE BUTTONS ARE NOT ON TOP OF THE IMAGE IN YOUR
EXAMPLE, THIS WAS ENOUGH ON NIVO'S SITE*/
}

transition between HTML Pages using jQuery?

I am using this code for transition between my HTML pages and it works just fine:
http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
But there is tiny issue that I cannot resolve and that is the blank white background shown between fade in and fade out transitions.
basically when the page is faded out and the code is trying to the load the next page, there is a slight delay (almost 1 seconds) and in that 1 second gap a blank white screen is shown. I know that I have to use some CSS and i added this to my HTML css code:
html{
font-size: 100%;
background-color:#000;
}
but when i do that, a black line is shown on the loaded page for some strange reason!
is there anyway to eliminate the 1 second delay or eliminate the black line on the page as i really don't know what is causing the issue?
Here is my Entire CSS code:
<style type="text/css" media="screen">
html{
font-size: 100%;
background-color:#000;
}
#maximage {
/* position:fixed !important;*/
}
#container{
overflow:hidden;
}
#footer{
color:#FFF;
text-align:left;
}
/*Set my logo in bottom left*/
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
#txt1 {
top:55%;
height:auto;
left:5%;
position:absolute;
width:55%;
z-index:1000;
color:#FFF;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
}
#txt2 {
top:59%;
height:auto;
left:5%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
}
#txt3 {
top:63%;
height:auto;
left:5%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
}
#txt4{
top:22%;
height:auto;
left:3%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
margin-top:4%;
float:left;
}
#txt5{
height:auto;
width:100%;
z-index:1000;
color:#fff;
font-size:4%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
text-align:center;
}
#logo img {
width:69%;
}
body {
background-color:#000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font: 16px/1.8 sans-serif;
font-family:Verdana, Geneva, sans-serif;
}
#preloader{
position:absolute;
top: 45%;
left: 75%;
width:278px;
height: 105px;
margin-top: -45px;
margin-left: -210px;
z-index:1000;
}
#wait{
position:absolute;
top: 37%;
left: 45%;
width:300px;
height: 113px;
margin-top: -45px;
margin-left: -120px;
z-index:1000;
}
h1 {
text-align: left;
color:#fff;
font: 16px/1 "Verdana, Geneva, sans-serif";
display: inline-block;
width: 100%;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
position: relative;
width: 39%;
margin: 0 auto;
height:50%;
overflow: hidden;
}
#navigation{
margin-left:2%;
margin-top:2%;
}
#home{
width:10%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
}
#products{
width:10%;
margin-bottom:0.5%;
text-align:center;
}
a:link { text-decoration:none;} /* unvisited link */
a:visited { text-decoration:none;} /* visited link */
a:hover {
text-decoration:none;
} /* mouse over link */
a:active { text-decoration:none;} /* selected link */
#div101:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
padding: 20px;
border-radius: 15px;
/* HOVER ON */
-webkit-transition: border-radius 2s;
transition:all 2s ease-in-out;
perspective: 800px;
}
#div102:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
/* Landscape */
#media screen and (orientation:landscape) {
#logo{
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
#preloader{
position:absolute;
top: 45%;
left: 55%;
width:278px;
height: 105px;
margin-top: -45px;
margin-left: -210px;
z-index:1000;
}
}
#media screen and (max-width: 600px) , screen and (max-height: 700px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media screen and (max-width: 4000px) , screen and (max-height: 2000px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media only screen and (min-width : 321px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media only screen and (max-width : 321px) {
#footer {
font-size:10px;
text-align: left;
margin-left:10%;
margin-bottom:5%;
font-family:Verdana, Geneva, sans-serif;
width:42%;
}
#home{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#products{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
font-weight:bold;
color:#fff;
border:#666;
border:2px solid;
}
#vodka{
background-color:#C0C0C0;
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#contact{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#div101:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
padding: 5px;
border-radius: 5px;
/* HOVER ON */
-webkit-transition: border-radius 1s;
transition:all 1s ease-in-out;
perspective: 800px;
}
}
#media only screen and (min-width : 321px) {
#footer {
font-size:13px;
text-align:left;
margin-left:5%;
margin-bottom:10%;
font-family:Verdana, Geneva, sans-serif;
width:30%;
}
#home{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#products{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#vodka{
background-color:#C0C0C0;
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#contact{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
.rotate{
cursor:pointer;
}
.rotate:hover
{
background-color:#da2128;
}
}
#keyframes filleffect
{
from {width:0;}
to {width: 400px;}
}
#-webkit-keyframes filleffect /* Safari and Chrome */
{
from {width:0;}
to {width: 400px;}
}
</style>

I suspect the reason you are getting a black line is because your html tag contains no content in between page transitions, so what you are seeing is in fact the dark background of a very narrow page. Try adding height: 100%; min-height: 100% to your html tag to force the page to be full height.