Develop Reference

How to make CSS transition work using onclick

I am taking reference from :
https://codepen.io/SudhakarJ/pen/GRgpddL .
I want to make same transition effect in my application, where I have 10 images and I use 3 classes namely cars,animals and fruits and when I click they should be filtered.
But the animated filter selector is not performing transition
HTML
<div class="section">
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill" style="color:#212121"></span>
<li class="filter-option option-1 active" onclick="filterSelection('all')" style="color:#fffefe">All</li>
<li class="filter-option option-2" onclick="filterSelection('cars')" style="color:#fffefe">Shoes</li>
<li class="filter-option option-3" onclick="filterSelection('animals')" style="color:#fffefe">Toys</li>
<li class="filter-option option-4" onclick="filterSelection('fruits')" style="color:#fffefe">Toys</li>
</ul>
</div>
css
body {background-color:#ffffff; margin: 0; padding:0; font-family: Tahoma;}
h2 {text-align:center;}
#filter-bar {width: 100%; margin:0; padding:0; height:36px; display:inline-flex;}
#wrapper-filter {background-color:#000; width: 570px; height:auto; margin:30px auto; border-radius: 30px; box-sizing: border-box;}
#filter-bar li {width: 190px;background-color: transparent; text-align: center; list-style-type: none;z-index:10; cursor: pointer; font-family: Open Sans, sans-serif; font-weight: 100; font-size: 15px;line-height:36px;}
.pill {position: absolute; width:190px; height: 38px; background-color: #39c; border-radius: 30px; color: #444; z-index:10; border: 5px solid #eee; box-sizing: border-box; }
.filter-option {transition: color 500ms;}
#filter-bar.option-1 .pill {margin-left: 0px; transition: margin-left 200ms ease;}
#filter-bar.option-2 .pill {margin-left: 187px; transition: margin-left 200ms ease;}
#filter-bar.option-3 .pill {margin-left: 380px; transition: margin-left 200ms ease;}
.option-1.active, .option-2.active, .option-3.active {color:#FFD700; transition: color 200ms; }
JS
$(document).ready(function() {
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active")
$(this).addClass("active")
$("#filter-bar").removeClass().addClass($(this).attr("data-target"))
})
})

Below is an adapted version of the codepen where:
menu width is changed from 570px to 760px to take in account the 4 elements instead of 3 (it could maybe done in a dynamic way to take in account any number of items)
item width is unchanged (190px)
onclick=filterSelection custom method is removed. JS retrieves the class to apply using the data-target-filter attr
CSS transitions rules are updated with your options (.all, .car, .animals, .fruits instead of example .option-1,.option-2,.option-3) so they match when the value is applied as a class on #bar-filter
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active");
$(this).addClass("active");
$("#filter-bar").removeClass().addClass($(this).attr("data-target-filter"));
});
#filter-bar {
width: 100%;
margin: 0;
padding: 0;
height: 36px;
display: inline-flex;
}
#wrapper-filter {
background-color: #000;
width: 760px;
height: auto;
margin: 30px auto;
border-radius: 30px;
box-sizing: border-box;
}
#filter-bar li {
width: 190px;
background-color: transparent;
text-align: center;
list-style-type: none;
z-index: 10;
cursor: pointer;
font-family: Open Sans, sans-serif;
font-weight: 100;
font-size: 15px;
line-height: 36px;
}
.pill {
position: absolute;
width: 190px;
height: 38px;
background-color: #39c;
border-radius: 30px;
color: #212121: z-index: 10;
border: 5px solid #eee;
box-sizing: border-box;
}
.filter-option {
transition: color 500ms;
color: #fffefe;
}
#filter-bar.all .pill {
margin-left: 0px;
transition: margin-left 200ms ease;
}
#filter-bar.cars .pill {
margin-left: 190px;
transition: margin-left 200ms ease;
}
#filter-bar.animals .pill {
margin-left: 380px;
transition: margin-left 200ms ease;
}
#filter-bar.fruits .pill {
margin-left: 570px;
transition: margin-left 200ms ease;
}
.all.active,
.cars.active,
.animals.active,
.fruits.active {
color: #FFD700;
transition: color 200ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill"></span>
<li class="filter-option all active" data-target-filter="all">All</li>
<li class="filter-option cars" data-target-filter="cars">Shoes</li>
<li class="filter-option animals" data-target-filter="animals">Toys</li>
<li class="filter-option fruits" data-target-filter="fruits">Fruits</li>
</ul>
</div>

CSS animation not happening when chrome auto-completes password

I am making a simple website, and now I'm working on the login page. It looks like this (run in full page, otherwise some parts miss):
html, body {
width: 100%;
height: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
body {
font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background-color: #2196F3;
height:100%;
overflow: hidden;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid {
-webkit-box-shadow: 0 0 0 30px #2196F3 inset;
-webkit-text-fill-color: white !important;
}
.msg {
font-size: 15px;
display: inline-block;
text-align: center;
word-wrap: break-word;
width: 90%;
max-width: 300px;
line-height: 28px;
min-height: 28px;
background-color: #ffc107;
border-radius: 2px;
color: white;
margin-bottom: 3em;
}
.spacer {
font-size: 15px;
display: block;
text-align: center;
word-wrap: break-word;
width: 90%;
max-width: 300px;
line-height: 28px;
min-height: 28px;
border-radius: 2px;
color: white;
margin-top: 2em;
margin-bottom: 3em;
}
form {
display: block;
position: absolute;
width: 100%;
height: 80%;
left: 0;
margin-top: -100px;
text-align: center;
animation: swipein 0.5s forwards;
}
#keyframes swipein {
from{top:30%;opacity: .8}
to{top:20%;opacity: 1}
}
input, button {
font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
outline: 0;
color: white;
}
.group {
display: inline-block;
position:relative;
margin-bottom: 20px;
}
.group:nth-of-type(1){
margin-top: 15%;
}
input {
font-size:21px;
padding:10px 10px 10px 5px;
display:block;
width:250px;
border:none;
border-bottom:1px solid white;
border-radius: 0;
background-color: transparent;
color: white;
}
input:focus { outline:none; }
label {
color: white;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color: white ;
}
.bar { position:relative; display:block; width:265px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:white;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
li {
list-style-type: none;
padding: 10px;
}
a {
color: white;
padding: 10px;
}
button {
-webkit-appearance: none;
padding: 12px 65px 12px 65px;
background-color: white;
color: #2196F3;
border: none;
border-radius: 2px;
font-size: 18px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
button:hover {
cursor: pointer;
}
#media screen and (min-width: 800px){
logo {
top: 15%;
}
.logo span {
font-size: 2em;
}
.logo h2 {
font-size: 2.7em;
}
.group:nth-of-type(1){
margin-top: 25%;
}
form {
width: 750px;
top: 20%;
left: calc(50% - 375px);
}
input{
width:350px;
}
.bar {
width:365px;
}
}
<title>connerdassen.ddns.net</title>
<script>
function test() {
var button = document.getElementById('button');
button.click();
alert('Click event simulated!');
}
</script>
<body id='body'>
<form id="form" method="POST" action="http://connerdassen.ddns.net/login.php">
<p>
</p><div class="group">
<input id='input' type="text" name="uid" required="">
<span class="bar"></span>
<label>Username</label>
</div><p>
</p><div class="group">
<input id='input' type="password" name="pwd" required="">
<span class="bar"></span>
<label>Password</label>
<li><a href='/signup'>Sign up</a></li>
<button>Log In</button>
</div><br>
</form>
<script>
if((window.location.href).indexOf('?') != -1) {
var afterURL = (window.location.href).substr((window.location.href).indexOf('?') + 1);
var msg = (afterURL.split('msg='))[1];
msg = decodeURIComponent(msg);
}
if(typeof msg !== "undefined" && msg !== "undefined" && msg !== ""){
var form = document.getElementById("form");
var oldForm = form.innerHTML;
form.innerHTML = '<div class="spacer"></div><div class="msg"><span>' + msg + '</span></div>' + oldForm;
}
</script>
</body>
As you see the labels 'Username' and 'Password' are animated up when selecting the input. But when google chrome auto-fills them, the username is automatically animated upwards, but the password label stays, as you can see here. After clicking any key on the keyboard/ mouse, the label is animated up immediately. I want the password to go up immediately. How would I do this?

How do I make a div with :hover stay in hover state on click?

I'm not exactly sure how to ask this question but basically, I have a div with a button with some :hover state in CSS, however, I want that upon clicking the button, it will stay on the hovered state, is this possible?
My Code
#englishbutton {
width:200px;
height:50px;
font-family: 'Raleway', sans-serif;
margin:0px 20px 20px 20px;
border:none;
outline:none;
background-color:#F16D71;
color:#FFFFFF;
transition: .3s background-color;
text-align:center;
font-size:20px;
border-radius:15px;
}
#englishbutton:hover {
background-color:#F5999C;
color:#FFFFFF;
cursor:pointer;
}
<div id="actionsection">
<input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>
I have tried searching for similar questions and one of them said to use :focus state but it does not work, any help would be much appreicated!

There are numerous way to do this:
You can use :focus:
#englishbutton {
width:200px;
height:50px;
font-family: 'Raleway', sans-serif;
margin:0px 20px 20px 20px;
border:none;
outline:none;
background-color:#F16D71;
color:#FFFFFF;
transition: .3s background-color;
text-align:center;
font-size:20px;
border-radius:15px;
}
#englishbutton:hover, #englishbutton:focus {
background-color:#F5999C;
color:#FFFFFF;
cursor:pointer;
}
<div id="actionsection">
<input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>
Using jQuery you can add the background on click of the button using css() method:
$('#englishbutton').on('click', function(){
$(this).css('background', '#F5999C');
});
#englishbutton {
width:200px;
height:50px;
font-family: 'Raleway', sans-serif;
margin:0px 20px 20px 20px;
border:none;
outline:none;
background-color:#F16D71;
color:#FFFFFF;
transition: .3s background-color;
text-align:center;
font-size:20px;
border-radius:15px;
}
#englishbutton:hover {
background-color:#F5999C;
color:#FFFFFF;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="actionsection">
<input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>
Or you can use addClass() method to add a styled active class like this:
$('#englishbutton').on('click', function() {
$(this).addClass('active');
});
#englishbutton {
width: 200px;
height: 50px;
font-family: 'Raleway', sans-serif;
margin: 0px 20px 20px 20px;
border: none;
outline: none;
background-color: #F16D71;
color: #FFFFFF;
transition: .3s background-color;
text-align: center;
font-size: 20px;
border-radius: 15px;
}
#englishbutton:hover, #englishbutton.active {
background-color: #F5999C;
color: #FFFFFF;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="actionsection">
<input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>

div:active
only stay when the mouse is clicked,
use
div:focus
instead

If you want the appearance to stay after the user clicks elsewhere on the page (an <input> element, etc.) you can set a class when the button is clicked, and use that for styling:
var el = $('#englishbutton');
el.click(
function() {
el.addClass('clickedbutton');
}
);
#englishbutton {
width: 200px;
height: 50px;
font-family: 'Raleway', sans-serif;
margin: 0px 20px 20px 20px;
border: none;
outline: none;
background-color: #F16D71;
color: #FFFFFF;
transition: .3s background-color;
text-align: center;
font-size: 20px;
border-radius: 15px;
}
#englishbutton:hover,
#englishbutton.clickedbutton {
background-color: #F5999C;
color: #FFFFFF;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="actionsection">
<input name="englishbutton" type="button" id="englishbutton" value="ENGLISH">
</div>
<input value="Focus here after clicking" />

You can also do it with a javascript to change make the hover formatting onclick like
<style>
.englishbutton {
width: 200px;
height: 50px;
font-family: 'Raleway', sans-serif;
margin: 0px 20px 20px 20px;
outline: none;
background-color: #F16D71;
color: #FFFFFF;
transition: .3s background-color;
text-align: center;
font-size: 20px;
border-radius: 15px;
}
.englishbutton:hover {
background-color: #F5999C;
color: #FFFFFF;
cursor: pointer;
}
</style>
<div>
<input id="button" type="button" class="englishbutton" value="ENGLISH" onclick="var s= document.getElementById('button');
s.style.backgroundColor='#F5999C';x.style.color='#ffffff';
" />
</div>

Adding image (tab) below pop down nav bar

Hi is it possible to add the (image) tab below outside the red border and still be responsive when the cursor is over the tab.
What I'm trying to achieve is so the tab sticks out and when the mouse hovers over the tab the menu pops out.
Here is an example but with the tab under the navigation bar when moving the mouse cursor over or inside the red border. The issue is the tab is also hidden.
* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: absolute;
top: -100px;
left: 0;
right: 0;
height: 110px;
border: 1px solid red;
background-image: url("http://static.tumblr.com/e2rgcy1/mWPod8ter/tab.png");
background-repeat: no-repeat;
background-position: center;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
z-index: 5;
}
nav:hover, nav.toggleNav {
top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
<nav>
<ul>
<li>
<a href="/"a target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
</ul>
</nav>

This should get you going in the right direction. If you want to handle this with CSS only (no javascript) and have it responsive especially if your height of your nav bar changes, I would set up media queries that specify a fixed height for your nav at each of whatever breakpoints you determine are best. Reason for using a fixed height is so that you can offset the menu to that exact dimension each time.
I moved your tab image into the HTML instead of using it as a background image. I noticed the image has a lot of whitespace around it. I would trim the image down and remove that to make positioning things in the css easier. I didn't alter that but if you do, you'll need to alter the css a bit to accommodate the new image size. I've kinda fudged it a bit to center it, but that extra white space kinda ruins the centering. You really want left: 50%, then a negative margin of half the width of the image to center it.
* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: relative;
top: -70px;
left: 0;
right: 0;
height: 70px;
border: none;
background-repeat: no-repeat;
background-position: center;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
z-index: 5;
padding: 0;
text-align:center;
}
#img-toggle {
margin: 0 auto;
padding: 0;
position:absolute;
top: -3px; /* fix this when you've trimmed your image */
left: 32%; /* fix this when you've trimmed your image */
}
nav:hover, nav.toggleNav {
top: 0px;
}
ul {
height: 70px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
<nav>
<ul>
<li>
<a href="/"a target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
</ul>
<img id='img-toggle' src="http://static.tumblr.com/e2rgcy1/mWPod8ter/tab.png"/>
</nav>

Extra white space below html body

I am working on an angular js app that consists of a swipeable carousel populated with data taken from a json array (which is held in a js var). However, I have run into an issue; a large amount of white space appears at the bottom of the page. I cannot seem to determine the cause of this extra white space. I have padding and margins set to 0 in the css. When I inspect the element the white space appears to be outside of the html so it seems almost as if its not even being added by a property of one of my elements.
heres my css but there is a full plunk linked at the bottom as well
html, body, #carousel, #carousel ul, #carousel li {
min-height: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
#link{
position: absolute;
bottom:20px;
right:20px;
}
#carousel {
background: white;
width: 100%;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-transform-style: preserve-3d;
}
#carousel ul.animate {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#carousel ul {
-webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-o-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
#carousel ul {
position: relative;
}
#carousel li {
float: left;
width:100%; -webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0);
}
#carousel li h2 {
color: #fff;
font-size: 30px;
text-align: center;
position: absolute;
top: 40%;
left: 0;
width: 100%;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
}
#carousel li.pane1 {
background: #fff;
}
#carousel li.pane2 {
background: #fff;
}
#carousel li.pane3 {
background: #fff;
}
#carousel li.pane4 {
background: #fff;
}
.january {
background-color:#ffe0b0;
height:8.33%;
}
.february {
background-color:#b0f7ff;
height:8.33%;
}
.march {
background-color:#e0b0ff;
height:8.33%;
}
.april {
background-color:#ffb9b0;
height:8.33%;
}
.may {
background-color:#b0cfff;
height:8.33%;
}
.june {
background-color:#b0ffe0;
height:8.33%;
}
.july {
background-color:#ffb0f7;
height:8.33%;
}
.august {
background-color:#ceffb0;
height:8.33%;
}
.september {
background-color: #ffb0cf;
height:8.33%;
}
.october {
background-color:#bab0ff;
height:8.33%;
}
.november {
background-color:#f6ffb0;
height:8.33%;
}
.december {
background-color: #b0f6ff;
height:8.33%;
}
.day {
font-family: 'Playfair Display Regular', serif;
color:#000;
text-align: center;
}
.titletext {
font-family: 'Playfair Display Bold', serif;
margin-left:20px;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
display:inline-block;
}
.title {
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-top: 0px;
text-align: initial;
}
.quote {
font-family: 'Playfair Display Italic', serif;
font-style: italic;
font-size:12px;
margin-top:10px;
margin-left:20px;
margin-right: 20px;
line-height:1.2em;
}
.attribution {
font-family: 'Playfair Display Regular', serif;
font-size:10px;
margin-left:25px;
margin-right: 20px;
line-height:1.2em;
}
.textt {
font-family: 'Playfair Display Regular', serif;
font-size:12px;
margin-top:10px;
margin-left:20px;
margin-right: 20px;
line-height:1.2em;
}
.date {
font-family: 'Playfair Display Regular', serif;
margin-left:15px;
padding-top: 10px;
}
#circleJan {
border-radius: 50%;
border: 3px solid #ffe0b0;
background-color:#ffe0b0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleFeb {
border-radius: 50%;
border: 3px solid #b0f7ff;
background-color:#b0f7ff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleMarch {
border-radius: 50%;
border: 3px solid #e0b0ff;
background-color:#e0b0ff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleApril {
border-radius: 50%;
border: 3px solid #ffb9b0;
background-color:#ffb9b0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleMay {
border-radius: 50%;
border: 3px solid #b0cfff;
background-color:#b0cfff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleJune {
border-radius: 50%;
border: 3px solid #b0ffe0;
background-color:#b0ffe0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleJuly {
border-radius: 50%;
border: 3px solid #ffb0f7;
background-color:#ffb0f7;
width: 20px;
height:20px;
margin-left:15px;
}
#circleAug {
border-radius: 50%;
border: 3px solid #ceffb0;
background-color:#ceffb0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleSept {
border-radius: 50%;
border: 3px solid #ffb0cf;
background-color:#ffb0cf;
width: 20px;
height:20px;
margin-left:15px;
}
#circleOct {
border-radius: 50%;
border: 3px solid #bab0ff;
background-color:#bab0ff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleNov {
border-radius: 50%;
border: 3px solid #f6ffb0;
background-color:#f6ffb0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleDec {
border-radius: 50%;
border: 3px solid #b0f6ff;
background-color:#b0f6ff;
width: 20px;
height:20px;
margin-left:15px;
}
.bg{}
.main{height:100%}
.heading{
font-family: 'Playfair Display Bold', serif;
text-align:center;
margin-top: 10px;
font-size:18px;
}
.stepOne{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepTwo{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepThree{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepFour{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepFive{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepSix{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepSeven{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepEight{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepNine{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepTen{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepEleven{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepTwelve{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
plunker

Your #carousel li is currently being set at a height: 100% which is causing the extra space in your first pane.
I would also strongly advise refactoring your CSS to more concise organization since I noticed a lot of repetitive code. The simplest example of this is .stepOne through .stepTwelve which all contain the same styles. Collapse that into one class and apply it across all the elements needed.

If you're referring to the white space after the pane1 element, you can get rid of of it by setting its height and min-height to initial:
#carousel li.pane1 {
height: initial;
min-height: initial;
background: #fff;
}
Plunker
I should mention, in a lot of instances you're using classes when you should be using IDs. If there's only one .january element for example, set it as an ID rather than a class, as classes are meant for grouping multiple elements. The same goes for your pane[x] classes. You should also merge your identical styles, e.g.
#pane2, #pane3, #pane4 {
background: #fff;
}
Or if you simply give them all the same class:
.pane {
background: #fff;
}