We Keep Coding

How can I prevent my FadeIn animation from repeating when I refresh or click divs

I'm trying to create a todo board with sticky notes. I'm using vanilla js to practise. After pressing the add button, a new div appears with a fadeIn animation. Every time I refresh the page or press the line with the notes, the FadeIn animation repeats.
I've tried to give my div a class when adding throw dom, but I cannot figure out how to remove it after adding a new div (a new note). I know my code is messed up, I'm just experimenting with JS, CSS and HTML for fun. Any advice will be accepted with great pleasure I'm here to learn.
let stickyNotesArr = [];
const notesColor = ['#7afcff', '#feff9c', '#ff7eb9'];
if (localStorage.getItem('notesLclArr')) {
stickyNotesArr = JSON.parse(localStorage.getItem('notesLclArr'));
};
const cards = document.querySelector('#cards');
const sendBtn = document.querySelector('#sendBtn');
const resetBtn = document.querySelector('#resetBtn');
const date = document.querySelector('#date');
const time = document.querySelector('#time');
const txtInp = document.querySelector('#txtinp');
sendBtn.addEventListener('click', () => {
const randomColor = notesColor[Math.floor(Math.random() * notesColor.length)];
stickyNotesArr.push({
txtinp: txtInp.value,
date: date.value,
time: time.value,
color: randomColor
});
addStickyNts();
resetBtn.click();
});
function addStickyNts() {
cards.innerHTML = '';
let count = 0;
for (note of stickyNotesArr) {
const ntsRows = `
<div class="notesDiv mb-4" style="background-color: ${note.color};">
<div class='d-flex justify-content-end'>
<button type='button' class='btn myCustomBtn deleteBtn' ><i data-id=${count} class="deleteBtn fa-solid fa-xmark"></i></button>
</div>
<div class='txtArea d-flex scrollbar scrollbarNote'>${note.txtinp}</div>
<div class='timeNdate'>${note.date}<br>${note.time}</div>
</div>
`
count++
cards.insertAdjacentHTML('beforeend', ntsRows);
};
localStorage.setItem('notesLclArr', JSON.stringify(stickyNotesArr));
};
addStickyNts();
cards.addEventListener('click', (event) => {
let myId;
if (event.target.getAttribute('data-id')) {
myId = event.target.getAttribute('data-id');
};
if (event.target.classList.contains('deleteBtn')) {
stickyNotesArr.splice(myId, 1);
};
addStickyNts();
});
resetBtn.addEventListener('click', () => {
txtInp.value = '';
date.value = '';
time.value = '';
})
addStickyNts();
body {
font-family: 'Dancing Script', cursive;
}
#bgrImg {
margin: 1em;
background-image: url("images/pexels-fwstudio-168442.jpg");
background-size: 100% auto;
border: 1em solid #7f55398e;
border-radius: 15px;
min-height: 96vh;
background-clip: border-box;
}
h1 {
font-family: 'Abril Fatface', cursive;
text-align: center;
}
#mainDiv {
height: 400px;
width: 400px;
position: relative;
}
#txtinp {
position: absolute;
top: 91px;
left: 104px;
border: transparent;
background-color: transparent;
font-size: 1.5em;
outline: none;
resize: none;
overflow: auto;
transition: all 1s ease-out;
}
#duedate {
position: absolute;
top: 286px;
left: 142px;
font-size: 1.2em;
transition: 0.5s;
}
#duetime {
position: absolute;
top: 317px;
left: 187px;
font-size: 1.2em;
transition: 0.3s;
}
#duedate:hover,
#duetime:hover {
transform: translateY(-2px);
}
#time,
#date {
border: transparent;
background-color: transparent;
max-width: 125px;
outline: none;
}
#sendBtn {
position: absolute;
top: 296px;
left: 39px;
background-color: transparent;
border: transparent;
font-size: 1.4em;
transition: 0.5s;
}
#resetBtn {
position: absolute;
top: 322px;
left: 48px;
background-color: transparent;
border: transparent;
font-size: 1.4em;
transition: 0.5s;
}
#sendBtn:hover,
#resetBtn:hover {
color: #767676;
font-size: 1.2em;
cursor: pointer;
}
.notesDiv {
transition: 0.4s;
display: flex;
flex-direction: column;
width: 250px;
height: 250px;
font-size: 20px;
word-break: break-word;
}
.notesDiv:hover {
transform: scale(1.05);
box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.5);
}
.myCustomBtn {
display: flex;
visibility: hidden;
justify-content: center;
align-items: center;
margin-top: 5px;
margin-left: 200px;
border: none;
padding: 0px;
}
.notesDiv:hover .myCustomBtn {
visibility: visible;
}
.timeNdate {
margin-top: auto;
overflow: none;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.notesDiv {
animation: fadeIn 0.5s 1;
}
.notesDiv.animated {
animation: fadeIn paused;
}
.txtArea {
margin-top: 5px;
overflow: auto;
}
/*.........................................................................................................................*/
/*MY CUSTOM SCROLL BAR WORKING WITH EDGE/CHROME*/
.scrollbar::-webkit-scrollbar {
width: 12px;
background-color: #f5f5f53b;
scrollbar-color: grey;
border-radius: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #afb1b454;
}
/* FOR MOZILLA FIRE-FOX ONLY:*/
#-moz-document url-prefix() {
.scrollbar {
width: 240px;
scrollbar-color: grey;
border-radius: 10px;
}
.scrollbarNote {
width: 230px;
scrollbar-color: grey;
border-radius: 10px;
}
}
/*.........................................................................................................................*/
#media (max-width: 560px) {
#bgrImg {
width: 100%;
min-width: 460px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script:wght#400;500;600;700&family=Lobster&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="boardstyle.css">
</head>
<body>
<div id="bgrImg">
<form id="npdform">
<h1 class="text-light">Write Down Your Tasks:</h1>
<div id="mainDiv" class="d-flex justify-content-center m-auto">
<img id="inpImg" class="img-fluid" src="images/notepad-icon-17524.png">
<textarea class="scrollbar" id="txtinp" rows="5" cols="22" placeholder="write a task"></textarea>
<div id="duedate">
<label for="date">Due Date:</label>
<input id="date" type="date">
</div>
<div id="duetime">
<label for="time">Time:</label>
<input id="time" type="time">
</div>
<button class="ntpdBtns" id="sendBtn" type="button">
Add<i class="fa-solid fa-check"></i>
</button>
<button class="ntpdBtns" id="resetBtn" type="button">
Reset<i class="fa-solid fa-eraser"></i></i>
</button>
</div>
</form>
<section class="container-fluid">
<div id="cards" class="row d-flex justify-content-evenly">
</div>
</section>
</div>
<script src="boardfeatures.js"></script>
<script src=" https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js"
integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
</body>
</html>

Why aren't all the items in my ul displayed?

I'm trying to create a responsive navbar, but not all the items from my ul are showing,
PROBLEM:
console.log('works')
document.querySelector('.container__hamburger').addEventListener('click', ()=>{
document.querySelector('.container__navbar').classList.toggle('showMenu')
})
#import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
background-color: #2b2f33;
width: 100%;
height: 65px;
}
.container__navbar {
display: flex;
font-family: "Roboto", sans-serif;
width: 100%;
}
.container__logo {
display: inline;
width: 25%;
margin-right: 30px;
margin-left: 10px;
}
.navbar__list {
display: flex;
width: 100%;
list-style: none;
align-items: center;
color: #ffffff;
}
.list__item{
margin-right: 30px;
}
.container__hamburger {
display: none;
color: #ffffff;
align-self: center;
}
#media (max-width: 890px) {
.container {
position: fixed;
}
.container__navbar {
position: fixed;
height: 100%;
left: 0;
top: 65px;
transition: 0.5s;
background-color: #2b2f33;
transform: translateX(-100%);
width: 250px;
}
.showMenu {
transform: translateX(0);
}
.navbar__list {
display: block;
overflow-x: hidden;
overflow-y: scroll;
}
.container__hamburger {
display: block;
margin-left: auto;
margin-right: 30px;
}
.list__item {
width: 100%;
padding: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<img
class="container__logo"
src="assets/images/gamezonia.png"
alt="logo"
/>
<nav class="container__navbar">
<ul class="navbar__list">
<li class="list__item">Home</li>
<li class="list__item">Category 1</li>
<li class="list__item">Category 2</li>
<li class="list__item">Category 3</li>
<li class="list__item">Contact</li>
<li class="list__item">Item</li>
<li class="list__item">Item2</li>
<li class="list__item">Item3</li>
<li class="list__item">Item4</li>
<li class="list__item">Item5</li>
<li class="list__item">Item6</li>
</ul>
</nav>
<div class="container__hamburger">
<i class="fas fa-bars"></i>
</div>
</div>
<!-- FONT AWESOME -->
<script
src="https://kit.fontawesome.com/96fadf0e69.js"
crossorigin="anonymous"
></script>
<!-- FONT AWESOME -->
<script src="./index.js"></script>
</body>
</html>

You've dropped the .container__navbar down the viewport by 65 pixels. You need to take this off the 100% height using height:calc(100% - 65px);
console.log('works')
document.querySelector('.container__hamburger').addEventListener('click', ()=>{
document.querySelector('.container__navbar').classList.toggle('showMenu')
})
#import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
background-color: #2b2f33;
width: 100%;
height: 65px;
}
.container__navbar {
display: flex;
font-family: "Roboto", sans-serif;
width: 100%;
}
.container__logo {
display: inline;
width: 25%;
margin-right: 30px;
margin-left: 10px;
}
.navbar__list {
display: flex;
width: 100%;
list-style: none;
align-items: center;
color: #ffffff;
}
.list__item{
margin-right: 30px;
}
.container__hamburger {
display: none;
color: #ffffff;
align-self: center;
}
#media (max-width: 890px) {
.container {
position: fixed;
}
.container__navbar {
position: fixed;
height: calc(100% - 65px);
left: 0;
top: 65px;
transition: 0.5s;
background-color: #2b2f33;
transform: translateX(-100%);
width: 250px;
}
.showMenu {
transform: translateX(0);
}
.navbar__list {
display: block;
overflow-x: hidden;
overflow-y: scroll;
}
.container__hamburger {
display: block;
margin-left: auto;
margin-right: 30px;
}
.list__item {
width: 100%;
padding: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<img
class="container__logo"
src="assets/images/gamezonia.png"
alt="logo"
/>
<nav class="container__navbar">
<ul class="navbar__list">
<li class="list__item">Home</li>
<li class="list__item">Category 1</li>
<li class="list__item">Category 2</li>
<li class="list__item">Category 3</li>
<li class="list__item">Contact</li>
<li class="list__item">Item</li>
<li class="list__item">Item2</li>
<li class="list__item">Item3</li>
<li class="list__item">Item4</li>
<li class="list__item">Item5</li>
<li class="list__item">Item6</li>
</ul>
</nav>
<div class="container__hamburger">
<i class="fas fa-bars"></i>
</div>
</div>
<!-- FONT AWESOME -->
<script
src="https://kit.fontawesome.com/96fadf0e69.js"
crossorigin="anonymous"
></script>
<!-- FONT AWESOME -->
<script src="./index.js"></script>
</body>
</html>

How do i make an unordered list show and hide when a different div (menu i created) is clicked?

$(".menu").click(function () {
if ('.pagelinks').style.display = 'none';
{
$('.pagelinks').style.display = 'block';
}
else
{
$('.pagelinks').style.display = 'none';
}
})
html,body
{
margin:0;
width: 100%;
overflow:hidden;
box-sizing: border-box;
height: 100%;
}
body
{
background: url(best8.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
header
{
width: 100%;
background-color: black;
height: 85px;
position: fixed;
}
.heading1
{
color:white;
position: relative;
align-content: center;
margin: 3em ;
top: 100px;
left: 675px;
}
.logo img
{
left: 0;
filter: brightness 100%;
position: fixed;
}
.menu
{
margin: auto;
margin-left: 75%;
display: block;
position: fixed;
top: 11px;
}
.nav div
{
height: 5px;
background-color: white;
margin: 4px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav
{
width: 30px;
display: block;
margin: 1em 0 0
}
.one
{
width: 30px;
}
.two
{
width: 20px;
}
.three
{
width: 25px;
}
.nav:hover div
{
width: 30px;
}
.pagelinks
{
margin: auto;
margin-left: 49%;
position: fixed;
top: -10px;
display: none;
}
.pagelinks ul
{
list-style-type: none;
}
.pagelinks ul li
{
float: left;
padding:30px;
margin: auto;
transition: 0.3;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
opacity: 0.6;
}
.pagelinks ul li:hover
{
color: green;
transition: 0.6s;
}
.logo img:hover
{
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title>Goesta Calculators</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://use.typekit.net/axs3axn.js"></script>
<script>try{Typekit.load({ async: true});}catch(e){}</script>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="main.js" type="text/javascript"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="NewLogo.PNG" >
<div class="menu">
<a href="" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</a>
</div>
<nav class="pagelinks">
<ul>
<li>About</li>
<li>Contact</li>
<li>Calculators</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="heading1">
<h1>Estimate. Plan your future.</h1>
</div>
</body>
</html>
I'm trying to make an unordered list show/hide when another div with .menu class, is clicked. I've tried several different ways in javascript from research online but nothing is working. I also want it to transition slowly and smoothly. When I click the menu (I'm assuming because its a link) the page seems to refresh.

First, your condition syntax is very wrong.
if ('.pagelinks').style.display = 'none';
Don't put semicolon in there. And wrap your condition with open and close parenthesis.
Second, use .css() if you want to modify your css.
Here's the working version of your jQuery
$(".menu").click(function () {
if ($('.pagelinks').css("display") == 'none')
{
$('.pagelinks').css("display", "block");
}
else
{
$('.pagelinks').css("display", "none");
}
})
Also, don't use anchor tag on your nav if it is only a trigger. Use <div> instead.
Like this
<div class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
And if you have problem with the cursor not transforming into a hand, just have this in your css
.nav:hover
{
cursor: pointer;
}
Working Sandbox of your code HERE

How to expand the search bar from center to both sides with transition

I am trying to expand hidden search bar from center of div to both sides of div by clicking on search icon, using css. But it always expand to one side either left or right. I need transition to both sides simultaneously.
I need solution with purely css without javascript or jquery. I tried animations, transitions, positions everything but didn't find any solution. How I can solve this.
$(document).ready(function(){
$('.search-label').on("click",function(e){
$(".form-groups").addClass("move");
$("#for-grp").addClass("search-open");
$("#for-grp").removeClass("box-visible");
$(".close-label").removeClass("d-block");
});
});
.main
{
position:relative;
width: 50%;
background-color: aliceblue;
}
.form-groups{
width: 0%;
transition: width 1s;
}
.pull-right
{
float: right;
}
.search-label
{
position: absolute;
top: 0;
}
.sibling
{
clear: right;
}
#for-grp
{
width: 90%;
display: block;
margin-left:25px;
height: 20px;
}
.box-visible
{
visibility:hidden;
}
.move
{
width:100%;
}
.search-open
{
border: none !important;
border-bottom: 1px solid grey !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.close-label
{
position:absolute;
right:0px;
}
.d-block
{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="form-groups pull-right" style="display:inline" id="search">
<span class="search-label bg-white">
<i class="fa fa-search icon_search"></i>
</span>
<input type="text" placeholder="Search" id="for-grp" class="box-visible">
</div>
<span class="close-label d-block"><i class="fa fa-close"></i></span>
</div>
</body>
</html>

There is no style to it but maybe this is what your looking for
$(document).ready(function(){
$('i.fa-search').on("click",function(e){
$('.holder').addClass('open');
});
});
.main
{
position:relative;
width: 100%;
margin: auto;
background-color: aliceblue;
}
input {
width: 0%;
display: none;
}
i.fa {
position: absolute;
top: 0;
}
i.fa-search {
left: 0;
}
i.fa-close {
right: 0;
display: none;
}
.holder {
position: relative;
margin: auto;
width: 0%;
transition: width 1s;
}
.holder.open {
width: 50%;
}
.holder.open input {
width: 100%;
display: block;
}
.holder.open i.fa-close {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="holder">
<input placeholder="Search" type="text">
<i class="fa fa-search"></i>
<i class="fa fa-close"></i>
</div>
</div>
</body>
</html>

Unable to vertically align text against picture

I've been trying to get the text to align vertically (90 degrees) against a picture but unfortunately I haven't found a solution that is responsive and works properly. Tell me what you guys think!
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Bootstrap main css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<!--bootstrap-->
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
</head>
<body class = "loading">
<div id="preload">
<img src="img/bcg_slide-1.jpg">
</div>
<main>
<!--Navigation Menu -->
<nav class="navbar navbar-fixed-top" >
<div class="container-fluid">
<div class="navbar-header">
Random</span> Name
</div>
<div class="collapse navbar-collapse" id="myNavbar">
</div>
</div>
</nav>
<section id="slide-1" class="homeSlide">
<div class="hsContainer">
<div class="bcg">
</div>
</div>
<div class="displayContent">
<ul class = "rotate" style="background-color: #000; float: left;">
<li><a>ABOUT ME</a></li>
<li><a>PROJECTS</a></li>
<li><a>RESUME</a></li>
</ul>
</div>
</section>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/imagesloaded.js"></script>
<script src="js/skrollr.js"></script>
<script src="js/_main.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
color: #ffffff;
padding-bottom: 60px;
margin-bottom: 60px;
}
.navbar a {
font-size: 35px;
padding-left: 65px;
padding-top: 50px;
font-weight: normal;
opacity: 100%;
}
.navbar {
background-color: rgba(0,0,0, 0.0);
}
.no-js {
padding-top: 106px;
}
h2 {
margin-top: 0;
}
.loading {
background: url('../img/ico_loading.gif') no-repeat center center;
}
section {
min-width: 100%;
opacity: 0;
}
.loaded section,
.no-js section {
opacity: 1;
-webkit-transition: opacity 300ms ease-out;
-moz-transition: opacity 300ms ease-out;
transition: opacity 300ms ease-out;
}
#preload {
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
overflow: hidden;
height: 100%;
width: 50%;
}
.hsContainer {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.displayContent{
background-color: #fff;
height: 100%;
left: 50%;
top: 0;
bottom: 0;
float: left;
width: 50%;
position: absolute;
background-color: #0909fd
}
.rotate {
/* FF3.5+ */
-moz-transform: rotate(-90.0deg);
/* Opera 10.5 */
-o-transform: rotate(-90.0deg);
/* Saf3.1+, Chrome */
-webkit-transform: rotate(-90.0deg);
/* IE6,IE7 */
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
/* Standard */
transform: rotate(-90.0deg);
}
/* Slide 1 */
#slide-1 .bcg {background-image:url('../img/bcg_slide-1.jpg')}
#slide-1 .hsContent {
bottom: 200px;
top: auto;
}
.rotate li {
top: 50px;
display: inline;
padding: 10px;
text-decoration: none;
background-color: #000;
}

Normally your text will be filled in a as per it's width. So, you can reduce the width of the as that it accommodates only one character.
By doing so, you can achieve the vertical aligning of text.