Transforming Vertical Tab to Accordion - javascript

I'm trying to turn my vertical tab into an accordion view when the page is less than 480px and back to vertical tab view if it is not. I've tried to use #media screen and (min-width: 480px) {} + adding the vertical tab CSS styling but I ended up going no where with it. Then I tried searching a way on how to do this online. I ended up finding some examples but they used different methods on how to accomplish this effect. How can I get this vertical tab transform into an accordion when the screen is less than 480px?
The Link below is an example of the effect I'm going for. (when looking at the example resize the window to see the vertical tab/accordion effect)
Example: https://codepen.io/thejettmiller/pen/hqnua
$(document).ready(function() {
//----------Select the first tab and div by default
$('#vertical_tab_nav > ul > li > a').eq(0).addClass("selected");
$('#vertical_tab_nav > div > article').eq(0).css('display', 'block');
//---------- This assigns an onclick event to each tab link("a" tag) and passes a parameter to the showHideTab() function
$('#vertical_tab_nav > ul').click(function(e) {
if ($(e.target).is("a")) {
/*Handle Tab Nav*/
$('#vertical_tab_nav > ul > li > a').removeClass("selected");
$(e.target).addClass("selected");
/*Handles Tab Content*/
var clicked_index = $("a", this).index(e.target);
$('#vertical_tab_nav > div > article').css('display', 'none');
$('#vertical_tab_nav > div > article').eq(clicked_index).fadeIn();
}
$(this).blur();
return false;
});
}); //end ready
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {
$(".tab_content").hide();
var d_activeTab = $(this).attr("rel");
$("#"+d_activeTab).fadeIn();
$(".tab_drawer_heading").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs li").removeClass("active");
$("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
});
body {
margin: 0px;
padding: 20px;
background: #9adde5;
font-family: arial, sans-serif;
font-size: 10pt;
line-height: 15pt;
}
/*---------- vertical tab nav */
#vertical_tab_nav {
display: block;
width: 100%;
}
#vertical_tab_nav ul {
display: block;
float: left;
margin: 0px;
padding: 0px;
list-style: none;
overflow: hidden;
width: 30%;
border-radius: 10px 0 0 10px;
background: #555;
}
#vertical_tab_nav li {
border-bottom: 1px solid #000;
margin-bottom: 1px;
text-align: left;
padding: 0px;
}
#vertical_tab_nav li:last-child {
margin-bottom: 0px;
border-bottom: 0px;
}
#vertical_tab_nav li a {
display: block;
font-size: 14pt;
color: #fff;
text-decoration: none;
padding: 7%;
background: #57cac9;
background: -webkit-linear-gradient(top, #444, #333);
background: -moz-linear-gradient(top, #444, #333);
}
#vertical_tab_nav li a.selected {
background: #fff;
color: #000;
}
#vertical_tab_nav div {
display: block;
float: left;
background: #fff;
background: #fff;
width: 64%;
min-height: 500px;
padding: 10px 3% 3% 3%;
border-radius: 0 10px 10px 0;
}
#vertical_tab_nav div article {
display: none;
margin: 0px;
color: #555;
}
#vertical_tab_nav div article p {
margin: 0px 0px 20px 0px;
}
.tab_drawer_heading {
display: none;
}
#media screen and (max-width: 781px) {
ul.tabs {
display: none;
}
.tab_container {
display: block;
margin: 0 auto;
width: 95%;
border-top: none;
border-radius: 0;
box-shadow: 0px 0px 10px black;
}
.tab_drawer_heading {
background-color: #ccc;
color: #000;
margin: 0;
padding: 5px 20px;
display: block;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
&:hover {
background: #ccc;
}
}
.d_active {
background: #fff;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="vertical_tab_nav">
<ul class="tabs">
<li>Tab One</li>
<li class="selected">Tab Two</li>
<li>Tab Three</li>
<li>Tab Four</li>
</ul>
<div class="tab_container">
<article>
<h2 class="d_active tab_drawer_heading">Tab Content One</h2>
<p>Adult education is essential for Democracy of India. The number of grown up illiterates is great. All college and senior School students should come forward to visit villages in the summer vacation. Each one will teach one there. This will remove
illiteracy and strengthen our democracy.</p>
<p>I happened to see a one day cricket match between Pakistan and Australia at Wankhade Stadium, Mumbai. I went for a fun. But I witnessed a horrible sight. Two thousand ticketless cricket fans gate crashed. There was a stampede. Three persons died
and twenty were injured. Administration was responsible for it.</p>
</article>
<article>
<h2 class="d_active tab_drawer_heading">Tab Content Two</h2>
<p>City Anti-pollution Drive demands certain steps from all the citizens of ABC city. All house-holders should pack the waste in a plastic bag and put the bag in front of their house. The bag will be replaced with an empty bag by the Municipal van
every morning. They should maintain the cleanliness of the city. This will make the city pollution free.</p>
<p>My visit to a slum area after the rainy season was a sad affair. The pits were still full of rain water. There was mud all around. The polluted water had caused various diseases. There was no home without a sick person. Small children suffered from
stomach troubles. The government should immediately rush to the help of the sufferers in the slum area.</p>
</article>
<article>
<h2 class="d_active tab_drawer_heading">Tab Content Three</h2>
<p>I saw a man climbing down a water pipe. He had a knife in his hand. I hit his hand with a brick. He fell down on the ground and I jumped upon him. Soon others reached there and we handed him over to the police.</p>
<p>A tragedy took place yesterday when a Matador fell into a canal. The driver of the Matador tried to save an auto-rickshaw and lost control on the vehicle. About fifty students were travelling in it. The people from the nearby villages saved twenty-seven
students. The dead bodies of the drowned were recovered. It was a very painful sight.</p>
</article>
<article>
<h2 class="d_active tab_drawer_heading">Tab Content Four</h2>
<p>City life is full of fun. There are parks and picnic spots to visit. We have cinema halls to see movies. We have electricity which runs our factories, light and cools our home and helps us in seeing T.V. There are all type of amenities like water,
health check up and transport. Sometimes circus shows and magic shows entertain the city people.</p>
<p>I was lucky to escape death by a few seconds.' A bomb blasted in the compartment of Nilanchal Express. The overcrowded compartment made me to get down. Anyhow the loss was great. About ten people died and many got injured. It was the job of a terrorist.
The government should intensify searching operations in trains.1</p>
</article>
</div>
</section>


I belive this is what you are after:
Codepen link: https://codepen.io/teodragovic/pen/wqEvOV
$(document).ready(function() {
//----------Select the first tab and div by default
$('#vertical_tab_nav > ul > li > a').eq(0).addClass("selected");
$('#vertical_tab_nav > div > article').eq(0).css('display', 'block');
//---------- This assigns an onclick event to each tab link("a" tag) and passes a parameter to the showHideTab() function
$('#vertical_tab_nav > ul').click(function(e) {
if ($(e.target).is("a")) {
/*Handle Tab Nav*/
$('#vertical_tab_nav > ul > li > a').removeClass("selected");
$(e.target).addClass("selected");
/*Handles Tab Content*/
var clicked_index = $("a", this).index(e.target);
$('#vertical_tab_nav > div > article').css('display', 'none');
$('#vertical_tab_nav > div > article').eq(clicked_index).fadeIn();
}
$(this).blur();
return false;
});
}); //end ready
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {
$("article").hide();
var d_activeTab = $(this).attr("rel");
$("#"+d_activeTab).fadeIn();
$(".tab_drawer_heading").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs li a").removeClass("selected");
$("ul.tabs li a[rel^='"+d_activeTab+"']").addClass("selected");
});
body {
margin: 0px;
padding: 20px;
background: #9adde5;
font-family: arial, sans-serif;
font-size: 10pt;
line-height: 15pt;
}
/*---------- vertical tab nav */
#vertical_tab_nav {
display: block;
width: 100%;
}
.tabs {
float: left;
margin: 0px;
padding: 0px;
list-style: none;
overflow: hidden;
width: 30%;
border-radius: 10px 0 0 10px;
background: #555;
}
.tabs li {
border-bottom: 1px solid #000;
margin-bottom: 1px;
text-align: left;
padding: 0px;
}
#vertical_tab_nav li:last-child {
margin-bottom: 0px;
border-bottom: 0px;
}
#vertical_tab_nav li a {
display: block;
font-size: 14pt;
color: #fff;
text-decoration: none;
padding: 7%;
background: #57cac9;
background: -webkit-linear-gradient(top, #444, #333);
background: -moz-linear-gradient(top, #444, #333);
}
#vertical_tab_nav li a.selected {
background: #fff;
color: #000;
}
.tab_container {
display: block;
background: #fff;
width: 80%;
min-height: 500px;
}
#vertical_tab_nav div article {
display: none;
margin: 0px;
color: #555;
padding: 10px 3% 3% 3%;
}
#vertical_tab_nav div article p {
margin: 0px 0px 20px 0px;
}
#media screen and (max-width: 781px) {
.tab_container {
display: block;
margin: 0 auto;
width: 95%;
border-top: none;
border-radius: 0;
box-shadow: 0px 0px 10px black;
}
.d_active {
background: #fff;
}
}
.tabs {
display: none;
}
// style accordion links
.tab_drawer_heading {
margin: 0;
font-size: 14pt;
color: #fff;
text-decoration: none;
padding: 3%;
background: #57cac9;
background: -webkit-linear-gradient(top, #444, #333);
background: -moz-linear-gradient(top, #444, #333);
}
#media screen and (min-width: 480px) {
.tab_container {
float: left;
padding: 10px 3% 3% 3%;
border-radius: 0 10px 10px 0;
width: 64%;
}
.tabs {
display: block;
}
.tab_drawer_heading {
display: none;
}
article {
padding: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section id="vertical_tab_nav">
<ul class="tabs">
<li><a rel="tab1" href="index.html">Tab One</a></li>
<li><a rel="tab2" href="index.html">Tab Two</a></li>
<li><a rel="tab3" href="index.html">Tab Three</a></li>
<li><a rel="tab4" href="index.html">Tab Four</a></li>
</ul>
<div class="tab_container">
<h3 class="tab_drawer_heading" rel="tab1">Tab One</h3>
<article id="tab1">
<h2>Tab Content One</h2>
<p>Adult education is essential for Democracy of India. The number of grown up illiterates is great. All college and senior School students should come forward to visit villages in the summer vacation. Each one will teach one there. This will remove
illiteracy and strengthen our democracy.</p>
<p>I happened to see a one day cricket match between Pakistan and Australia at Wankhade Stadium, Mumbai. I went for a fun. But I witnessed a horrible sight. Two thousand ticketless cricket fans gate crashed. There was a stampede. Three persons died
and twenty were injured. Administration was responsible for it.</p>
</article>
<h3 class="tab_drawer_heading" rel="tab2">Tab Two</h3>
<article id="tab2">
<h2>Tab Content Two</h2>
<p>City Anti-pollution Drive demands certain steps from all the citizens of ABC city. All house-holders should pack the waste in a plastic bag and put the bag in front of their house. The bag will be replaced with an empty bag by the Municipal van
every morning. They should maintain the cleanliness of the city. This will make the city pollution free.</p>
<p>My visit to a slum area after the rainy season was a sad affair. The pits were still full of rain water. There was mud all around. The polluted water had caused various diseases. There was no home without a sick person. Small children suffered from
stomach troubles. The government should immediately rush to the help of the sufferers in the slum area.</p>
</article>
<h3 class="tab_drawer_heading" rel="tab3">Tab Three</h3>
<article id="tab3">
<h2>Tab Content Three</h2>
<p>I saw a man climbing down a water pipe. He had a knife in his hand. I hit his hand with a brick. He fell down on the ground and I jumped upon him. Soon others reached there and we handed him over to the police.</p>
<p>A tragedy took place yesterday when a Matador fell into a canal. The driver of the Matador tried to save an auto-rickshaw and lost control on the vehicle. About fifty students were travelling in it. The people from the nearby villages saved twenty-seven
students. The dead bodies of the drowned were recovered. It was a very painful sight.</p>
</article>
<h3 class="tab_drawer_heading" rel="tab4">Tab Four</h3>
<article id="tab4">
<h2>Tab Content Four</h2>
<p>City life is full of fun. There are parks and picnic spots to visit. We have cinema halls to see movies. We have electricity which runs our factories, light and cools our home and helps us in seeing T.V. There are all type of amenities like water,
health check up and transport. Sometimes circus shows and magic shows entertain the city people.</p>
<p>I was lucky to escape death by a few seconds.' A bomb blasted in the compartment of Nilanchal Express. The overcrowded compartment made me to get down. Anyhow the loss was great. About ten people died and many got injured. It was the job of a terrorist.
The government should intensify searching operations in trains.1</p>
</article>
</div>
</section>
What was missing/was wrong in your code:
in between article elements I added <h3> tags that serve as accordion links (if you want them to be also titles for content then hide article heading when width is less than 480px) and applied .tab_drawer_heading to that element instead of article title element.
added rel attribute and id on article to make "drawer" JS code work
I edited "drawer mode" piece of JS to match your classes to add .selected class on tab nav link instead of .active on parent <li>.
did some styling on accordion links and also hide them on +480px widths and did opposite for tabs navigation.


Adding some styles under the media query, its working fine.
$(document).ready(function() {
//----------Select the first tab and div by default
$('#vertical_tab_nav > ul > li > a').eq(0).addClass("selected");
$('#vertical_tab_nav > div > article').eq(0).css('display', 'block');
//---------- This assigns an onclick event to each tab link("a" tag) and passes a parameter to the showHideTab() function
$('#vertical_tab_nav > ul').click(function(e) {
if ($(e.target).is("a")) {
/*Handle Tab Nav*/
$('#vertical_tab_nav > ul > li > a').removeClass("selected");
$(e.target).addClass("selected");
/*Handles Tab Content*/
var clicked_index = $("a", this).index(e.target);
$('#vertical_tab_nav > div > article').css('display', 'none');
$('#vertical_tab_nav > div > article').eq(clicked_index).fadeIn();
}
$(this).blur();
return false;
});
}); //end ready
body {
margin: 0px;
padding: 20px;
background: #9adde5;
font-family: arial, sans-serif;
font-size: 10pt;
line-height: 15pt;
}
/*---------- vertical tab nav */
#vertical_tab_nav {
display: block;
width: 100%;
}
#vertical_tab_nav ul {
display: block;
float: left;
margin: 0px;
padding: 0px;
list-style: none;
overflow: hidden;
width: 30%;
border-radius: 10px 0 0 10px;
background: #555;
}
#vertical_tab_nav li {
border-bottom: 1px solid #000;
margin-bottom: 1px;
text-align: left;
padding: 0px;
}
#vertical_tab_nav li:last-child {
margin-bottom: 0px;
border-bottom: 0px;
}
#vertical_tab_nav li a {
display: block;
font-size: 14pt;
color: #fff;
text-decoration: none;
padding: 7%;
background: #57cac9;
background: -webkit-linear-gradient(top, #444, #333);
background: -moz-linear-gradient(top, #444, #333);
}
#vertical_tab_nav li a.selected {
background: #fff;
color: #000;
}
#vertical_tab_nav div {
display: block;
float: left;
background: #fff;
width: 64%;
min-height: 500px;
padding: 10px 3% 3% 3%;
border-radius: 0 10px 10px 0;
}
#vertical_tab_nav div article {
display: none;
margin: 0px;
color: #555;
}
#vertical_tab_nav div article p {
margin: 0px 0px 20px 0px;
}
#media screen and (max-width: 480px) {
#vertical_tab_nav ul {
width: 100%;
border-radius: 10px 10px 0 0;
}
#vertical_tab_nav li {
display: inline-block;
width: 24%;
height: auto;
}
#vertical_tab_nav div {
width: 94%;
border-radius: 0 0 10px 10px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="vertical_tab_nav">
<ul>
<li>Tab One</li>
<li class="selected">Tab Two</li>
<li>Tab Three</li>
<li>Tab Four</li>
</ul>
<div>
<article>
<h2>Tab Content One</h2>
<p>Adult education is essential for Democracy of India. The number of grown up illiterates is great. All college and senior School students should come forward to visit villages in the summer vacation. Each one will teach one there. This will remove illiteracy and strengthen our democracy.</p>
<p>I happened to see a one day cricket match between Pakistan and Australia at Wankhade Stadium, Mumbai. I went for a fun. But I wit­nessed a horrible sight. Two thousand ticketless cricket fans gate crashed. There was a stampede. Three persons died and twenty were injured. Administration was responsible for it.</p>
</article>
<article>
<h2>Tab Content Two</h2>
<p>City Anti-pollution Drive demands certain steps from all the citi­zens of ABC city. All house-holders should pack the waste in a plastic bag and put the bag in front of their house. The bag will be replaced with an empty bag by the Municipal van every morning. They should maintain the cleanliness of the city. This will make the city pollution free.</p>
<p>My visit to a slum area after the rainy season was a sad affair. The pits were still full of rain water. There was mud all around. The polluted water had caused various diseases. There was no home without a sick person. Small children suffered from stomach troubles. The govern­ment should immediately rush to the help of the sufferers in the slum area.</p>
</article>
<article>
<h2>Tab Content Three</h2>
<p>I saw a man climbing down a water pipe. He had a knife in his hand. I hit his hand with a brick. He fell down on the ground and I jumped upon him. Soon others reached there and we handed him over to the police.</p>
<p>A tragedy took place yesterday when a Matador fell into a canal. The driver of the Matador tried to save an auto-rickshaw and lost con­trol on the vehicle. About fifty students were travelling in it. The people from the nearby villages saved twenty-seven students. The dead bod­ies of the drowned were recovered. It was a very painful sight.</p>
</article>
<article>
<h2>Tab Content Four</h2>
<p>City life is full of fun. There are parks and picnic spots to visit. We have cinema halls to see movies. We have electricity which runs our factories, light and cools our home and helps us in seeing T.V. There are all type of amenities like water, health check up and transport. Sometimes circus shows and magic shows entertain the city people.</p>
<p>I was lucky to escape death by a few seconds.' A bomb blasted in the compartment of Nilanchal Express. The overcrowded compartment made me to get down. Anyhow the loss was great. About ten people died and many got injured. It was the job of a terrorist. The government should intensify searching operations in trains.</p>
</article>
</div>
</section>

Related

The fixed topbar is covering the Heading I'm jumping to

I know this code is REALLY messy, but it's my first project and I'm still learning how to align code correctly. I've tried margin with h2::before in CSS, it kinda worked but with it came other problems regarding the text's formation. I've seen that it is possible to achieve the desired result with the help of JavaScript but I'm a total noob at that.
Hope some of you can help me solve this problem, thanks in advance.
function openNav() {
document.getElementById("mySidenav").style.width = "260px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
body {
background-image: url('https://i.imgur.com/oGNxInf.jpg');
background-size: cover;
margin-top: ;
}
h1 {
position: relative;
text-align: center;
color: orange;
padding: 30px 50px;
margin-left: 0px;
bottom: 15px;
}
figure {
text-align: center;
}
/*nav{
background-color: white;
background-size: ;
/*overflow: hidden; hat verhindert, dass Fenster aufpoppen
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
margin: 20px 20px;
padding:20px 20px;
} */
/*.topbar a{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topbar a:hover {
background-color: gray;
}*/
.input {
float: left;
text-align: ;
padding: 5px 0px;
margin: 10px 0px 10px 800px;
}
button {
float: left;
text-align: center;
padding: 3px 3px;
margin: 10px 0px 10px 0px;
}
.acc {
float: left;
margin: 10px 0px 10px 60px;
}
ul ul {
float: left;
display: none;
background: black;
top: 100%;
padding: 0px 0px;
width: 100%;
}
ul li:hover>ul {
display: block;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
font-size: 6;
padding: 0px 0px;
text-align: center;
}
#topbar {
background: black;
background-size: ;
position: fixed;
top: 0;
left: 0;
padding: 0 0px;
margin: 0;
border-radius: 0;
display: inline-table;
width: 100%;
z-index: 2;
}
ul:after {
content: "";
clear: both;
display: block;
padding: 0px 0px;
}
ul li:hover {
background: gray;
padding: 0px 0px;
}
ul li:hover a {
color: white;
}
ul li a {
display: block;
padding: 15px 40px;
color: orange;
text-decoration: none;
font-size: 100%;
}
ul li ul {
display: none;
position: absolute;
padding: 0px 0px;
}
ul li ul li {
width: 100%;
padding: 0px 0px;
margin: 0px 0px;
text-align: center;
}
.li {
width: 150px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 3;
top: 0;
right: 0;
background-color: black;
overflow-x: hidden;
padding-top: 30px;
transition: 0.5s;
padding-left: 5px;
}
.sidenav a {
padding: 8px 8px 30px 10px;
font-size: 20px;
color: orange;
display: block;
transition: 0.5s;
text-decoration: none;
}
.sidenav a:hover {
color: white;
}
.sidenav .close {
position: absolute;
top: 0;
right: 0px;
font-size: 30px;
padding-top: 0px;
}
.konto {
color: orange;
padding-left: 10px;
padding-bottom: 20px;
text-decoration: underline orange;
}
.Header {
position: relative;
width: 1050px;
height: 100px;
background-color: brown;
padding: 0;
margin-top: 160px;
left: 300px;
z-index: 1;
}
.Header a {
position: relative;
padding: 0px 50px;
text-decoration: none;
color: orange;
bottom: 50px;
left: 140px;
}
.Header a:hover {
color: white;
}
.textblock {
position: relative;
border: solid 3px;
width: 1045px;
height: 3500px;
margin-top: ;
left: 299px;
background: rgba(100, 100, 100, 0.5)
}
.text {
width: 800px;
padding-left: 20px;
}
h2 {
border-bottom: solid 1px black;
padding-top: 0px;
cursor: pointer;
padding-left: 20px;
margin: 0;
position: ;
top: -20px;
}
ol li {
padding: 10px;
margin-top: px;
}
.anchor {
position: relative;
top: ;
}
details>summary h2 {
color: black;
padding-top: ;
cursor: pointer;
}
details summary {
list-style: none;
}
summary:before {
content: "֍";
color: red;
cursor: pointer;
position: relative;
top: px;
}
details[open] summary:before {
content: "֎";
position: relative;
top: px;
cursor: pointer;
}
summary {
height: 100;
margin: 0;
padding: 0;
}
h2::before {
display: block;
content: "";
margin-top: ;
padding-top: ;
pointer-events: none;
}
p {
position: relative;
top: -20px;
}
<!doctype html>
<html>
<head>
<title>Aldia, seeker of truth</title>
</head>
<body>
<ul id="topbar">
<li class="li">Home</li>
<li class="li">Characters
<ul>
<li>Bosses</li>
<li>NPC's</li>
<li>Merchants</li>
</ul>
</li>
<li class="li">World
<ul>
<li>Areas</li>
<li>Shortcuts</li>
<li>Bonfires</li>
</ul>
</li>
<li class="li">Weapons
<ul>
<li>One-Handed</li>
<li>Two-Handed</li>
<li>Ranged Weapons</li>
</ul>
</li>
<input class="input" type="text" placeholder="Search">
<button type="submit"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/OOjs_UI_icon_search-ltr.svg/2000px-OOjs_UI_icon_search-ltr.svg.png" height="10px" width="10px"></button>
<a onclick="openNav()" class="acc" href="#create"><img src="http://getdrawings.com/free-icon/google-account-icon-65.png" height="25px" width="25px"></a>
</ul>
<div id="mySidenav" class="sidenav">
×
<h2 class="konto">Account-Options</h2>
Log In
Register
Delete
Manage
</div>
<div class="Header">
<h1>Aldia, scholar of the first sin</h1>
Description
Lore
Dialogue
Items
Gallery
</div>
<div class="textblock">
<figure>
<img src="https://i.imgur.com/VqTZcGU.png" height="640" width="588" />
<div>
<figcaption>Aldia has become one with the flame after his last experiment turned him into a charred, immortal being.</figcaption>
</div>
</figure>
<div class="text">
<details open>
<summary>
<h2 id="Description" class="anchor">Description</h2>
</summary>
<!--<button type="button" data-toggle="collapse" data-target: "#Des" height="3px" width="3px"></button>-->
<p id="Des" class="collapse">All we see of Aldia are his head and shoulders, his skin color turned gray like ash, maybe caused by the flames that surround his presence. It is speculated that the parts the player sees of Aldia are only part of a giant body that he inherited
after conducting his last experiment. The roots on his head resemble hair and a read eye orb is in one of his sockets. <br>His voice is a mixture of many different voices at one point the Emerald Herald Shanalotte can be heard talking out of
Aldia.</p>
</details>
<details open>
<summary>
<h2 id="Lore" class="anchor">Lore</h2>
</summary>
<p>Aldia is one of the most interesting characters in the dark souls universe. He's tried to uncover the secrets of life by conducting several experiments on others and on himself. He always thought he would find the answer to all his questions in
the curse of the undead, hence why he researched it's origins to a great extend.<br> Discovering the falsehood of Gwyns linking of the first flame, Aldia quickly proclaimed it as "the first sin". As a consequence of the first linking of the
fire, men assumed a fleeting form for every time the fire would fade. They would return to their natural state of being hollow, loosing a piece of themselves for every death they experience. The dark that churns within men marks them as human,
the dark sign limits the boundaries of their humanity, making them less of a human with every loss of life. Aldia sought to find a path that exists outside of the cycle of light and dark, shattering the yoke that binds all humans.<br> The ancient
dragon that is found at the top of dragon shrine is only an illusion created by Vendricks older brother with a giants soul and dragon bones. He probably was inspired by the immortal dragons of the age of ancients, as they exist outside of the
cycle Aldia seeks to break out of. In the age of ancients there was no fire, no dark nor life or death, just a never changing landscape shrouded by fog, consisting of only archtrees and everlasting dragons.<br>In an attempt to create a being
with these properties the Emerald Herald was fabricated but she did not come out as intended. Later on she may has served as means for Aldia to obtain a great amount of souls to become a true monarch, in the end he failed his goal even secluding
his soul from his body, which would explain why we don't get a soul after fighting him at the throne of want. He even narrates the ending indicating that he keeps on living even after his defeat against the bearer of the curse.</p>
</details>
<details open>
<summary>
<h2 id="Dialogue" class="anchor">Dialogue</h2>
</summary>
<p><strong>1st encounter</strong>
<br> "No one has come this far not for a very long while, Young hollow do you wish to shed this curse? Then accept the fate of your ilk and face the trials that await you Unless, you have joined the crestfallen *laughs*"</p>
<p><strong>2nd encounter</strong>
<br> "Young hollow, there are but two paths. Inherit the order of this world, or destroy it. But only a true monarch can make such a choice. Very few indeed have come even this far. And yet your journey is far from over. Half-grown hollow, have
you what it takes, truly?"</p>
<p><strong>3rd encounter</strong>
<br> "Young hollow, seek after Vendrick. He who almost became a true monarch. Vendrick is certain to guide your way Fledgling Hollow, may we meet again."</p>
<p><strong>Undead Crypt</strong>
<br> "Heheh, I believe we’ve been acquainted Young Hollow, conqueror of fear What drives you so to overcome this supposed curse?"
<br> "Life is brilliant. Beautiful. It enchants us, to the point of obsession. Some are true to their purpose though they are but shells, flesh and blood. One man lost his own body, but lingered on as a head. Others chase the charms of love,
however elusive. What is it that drives you?"
<br> "Once, the Lord of Light banished Dark, and all that stemmed from humanity And men assumed a fleeting form. These are the roots of our world Men are props on the stage of life, and no matter how tender, how exquisite A lie will remain a
lie. Young Hollow, knowing this, do you still desire peace?" Choice – No (asks for a yes or no) "Vendrick, the near true monarch, is here and not far off. But what is a king? You, neither born with greatness nor granted it by the fates, what
is it that you seek? You cannot even say yourself. We shall meet again, young Hollow."
</p>
<p><strong>Dragon Shrine</strong>
<br> "Young Hollow. How you grapple, without falter, with this dreadfully twisted world."
<br> "Peace grants men the illusion of life Shackled by falsehoods, they yearn for love, unaware of its grand illusion. Until, the Curse touches their flesh. We are bound by this yoke. As true as the Dark that churns within men."
<br> "All men trust fully the illusion of life. But is this so wrong? A construction, a façade and yet. A world full of warmth and resplendence. Young hollow are you intent on shattering the yoke spoiling this wonderful falsehood?
<p>Yes or no choice</p>
I am Aldia. I sought to shed the yoke of fate, but failed. Now, I only await an answer. Seek the throne. Seek light, Dark, and what lies beyond…"
</p>
<p><em>With peace Aldia probably means the linking of the flame. When the fire is linked the curse temporarily disappears, granting men the illusion called life.</em></p>
<p><strong>Throne of Want</strong>
<br> When entering the first time (speaks with many voices – a woman included): "Many monarchs have come and gone One drowned in poison, another succumbed to flame, Still another slumbers in a realm of ice. Not one of them stood here, as you
do now. You, conqueror of adversities. Give us your answer"
<br> Has no dialogue when re-entering</p>
<p><em>The voice of a woman is the voice of Shanalotte, a being created by Aldia, a part of him.</em></p>
<p><strong>After defeating Aldia:</strong>
<br> "I lost everything but remained here patiently The throne will certainly receive you But the question remains… What do you want, truly? Light? Dark? Or something else entirely…"</p>
<p><strong>When choosing to leave the throne room:</strong>
<br> "There is no path. Beyond the scope of light, Beyond the reach of dark… …what could possibly await us? And yet, we seek it, insatiably Such is our fate…"</p>
</details>
<details open>
<summary>
<h2 id="Items" class="anchor">Items</h2>
</summary>
<ol type="I">
<li>Aldia Hammer</li>
<li>Malformed Shell</li>
<li>Spitfire Spear</li>
<li>Aldia Key</li>
<li>Southern Ritual Band</li>
<li>Northern ritual Band</li>
<li>Sunset Staff</li>
<li>Soul Geyser</li>
<li>Unleash Magic</li>
<li>Forbidden Sun</li>
</ol>
</details>
<details open>
<summary>
<h2 id="Gallery" class="anchor">Gallery</h2>
</summary>
<p>Hello world I'm cool</p>
</details>
</div>
</div>
</html>

You can try using the :target pseudo-class and add it like this .anchor:target{padding-top:100px}
It will only add padding when using the anchor tag.

Why doesn't my nav bar hide when scrolling down and appear when scrolling up?

So I've tried adapting this http://jsfiddle.net/mariusc23/s6mLJ/31/ code to my webpage so that my nav bar hides when scrolling down and appears when scrolling back up, however it doesn't seem to work and I just can't see the problem, I've included my code below, thanks for the help!
<script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
</script>
<style type="text/css">
a {
box-sizing: border-box;
}
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
padding-top:110px;
max-width: 1600px; margin: auto
}
header {
background: #55d6aa;
flex: 0 0 100%;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
height:110px;
}
.nav-up {
top: -110px;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.text-wrapper{
max-width:800px;
margin:auto;
}
aside .articles{
list-style-type: none;
padding: 0px;
margin-top:0px;
border-top:3px solid;
}
.articles > li.card{
border-left: 1px solid #55d6aa;
border-right: 1px solid #55d6aa;
border-bottom: 1px solid #55d6aa;
}
.articles h3, .articles p {
margin-top: 0px;
}
.articles .content_col{
margin-left: 10px;
}
.card-link{
/* remove deafult link color + underline */
color: #55d6aa;
text-decoration: none;
/* change a display from deafult inline to block (all card area is clickbale) */
display: block;
/* transition */
transition: background-color 0.5s ease;
/* flex setting */
display: flex;
align-items: center;
/* extra padding around the card */
padding: 10px;
}
.card-link:hover{
background: #f3f3f3;
}
button {
color: #55d6aa;
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #55d6aa;
position: relative;
margin: 1em;
display: inline-block;
padding: 0.5em 1em;
transition: all 0.3s ease-in-out;
text-align: center;
font-weight: bold;
}
button:before,
button:after {
content: "";
display: block;
position: absolute;
border-color: #55d6aa;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
transition: all 0.3s ease-in-out;
}
button:before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
button:after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
button {
color: #55d6aa;
border-color: #55d6aa;
}
button:before,
button:after {
border-color: #55d6aa;
}
button:hover:before,
button:hover:after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #55d6aa;
transform: rotateY(180deg);
}
button:hover {
color: #55d6aa;
background-color: transparent;
border-color: #55d6aa;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class= "nav-down">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</div>
</header>
<aside>
<h2 style="padding:10px;">Most Popular Posts</h2>
<ul class="articles">
<!-- card 1 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/300" />
</div>
<div class="content_col">
<h3>Features</h3>
<p>Responsive Buttons!</p>
<button>Hover me</button>
</div>
</a>
</li>
<!-- card 2 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/301" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 3 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/302" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 4 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/303" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 5 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/304" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 6 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/305" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</li> <!-- card 7 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/306" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</ul>
</aside>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<div class = "text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br>
Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br>
These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply.<br><br>
James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br>
We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br>
All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br>
The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br>
The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>
I'm currently trying to make a movie review blog post and really want to make everything just stand out, but I'm only relatively new to Css,html and javascript therefore I really can't identify any problems I might have and how to fix them. Again thank you for y'alls help :)

its because you have additional closing tag on line no 15 and 98 in your html, I have fixed that see below demo
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
a {
box-sizing: border-box;
}
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
padding-top:110px;
max-width: 1600px; margin: auto
}
header {
background: #55d6aa;
flex: 0 0 100%;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
height:110px;
}
.nav-up {
top: -110px;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.text-wrapper{
max-width:800px;
margin:auto;
}
aside .articles{
list-style-type: none;
padding: 0px;
margin-top:0px;
border-top:3px solid;
}
.articles > li.card{
border-left: 1px solid #55d6aa;
border-right: 1px solid #55d6aa;
border-bottom: 1px solid #55d6aa;
}
.articles h3, .articles p {
margin-top: 0px;
}
.articles .content_col{
margin-left: 10px;
}
.card-link{
/* remove deafult link color + underline */
color: #55d6aa;
text-decoration: none;
/* change a display from deafult inline to block (all card area is clickbale) */
display: block;
/* transition */
transition: background-color 0.5s ease;
/* flex setting */
display: flex;
align-items: center;
/* extra padding around the card */
padding: 10px;
}
.card-link:hover{
background: #f3f3f3;
}
button {
color: #55d6aa;
background: transparent;
border-width: 2px;
border-style: solid;
border-color: #55d6aa;
position: relative;
margin: 1em;
display: inline-block;
padding: 0.5em 1em;
transition: all 0.3s ease-in-out;
text-align: center;
font-weight: bold;
}
button:before,
button:after {
content: "";
display: block;
position: absolute;
border-color: #55d6aa;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
transition: all 0.3s ease-in-out;
}
button:before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
button:after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
button {
color: #55d6aa;
border-color: #55d6aa;
}
button:before,
button:after {
border-color: #55d6aa;
}
button:hover:before,
button:hover:after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #55d6aa;
transform: rotateY(180deg);
}
button:hover {
color: #55d6aa;
background-color: transparent;
border-color: #55d6aa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class= "nav-down">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</header>
<aside>
<h2 style="padding:10px;">Most Popular Posts</h2>
<ul class="articles">
<!-- card 1 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/300" />
</div>
<div class="content_col">
<h3>Features</h3>
<p>Responsive Buttons!</p>
<button>Hover me</button>
</div>
</a>
</li>
<!-- card 2 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/301" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 3 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/302" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 4 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/303" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 5 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/304" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li> <!-- card 6 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/305" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 7 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/306" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</ul>
</aside>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class = "thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<div class = "text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br>
Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br>
These shots strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable reply.<br><br>
James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br>
We know before the movie begins that certain things must happen. We must see the Titanic sail and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br>
All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br>
The human story involves an 17-year-old woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br>
The screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>

How to increase the width of my twitter feed

I am trying to increase the width of the twitter feed displayed on my webpage, I added a Div id to it and tried increasing its size in css however it stops getting bigger after a certain point, Also I want to add images in my portfolio section which includes 3 random pictures of like computers which get bigger and change size when you hover over them in css, how do I do this? Also I can't figure out how to change the color of the background of the webpage, everything I have tried doesn't work. Thanks.
I have provided the HTML, CSS and JS code for my code below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<style>
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat', Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display: inline-block;
height: 500px;
width: 650px;
}
#twitter {
display: inline-block;
height: 300px;
width: 300px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</head>
<body>
<div class="mainlogo">
<div>Muhammed's
<br>Webpage
</div>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id="twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by
#applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"><u>Basic Information</u></h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"><u>Curriculum Vitae</u></h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent
service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon
receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service
environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio">
<h3 class="contentbox"><u>Portfolio</u></h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
</div>
<div class="content" id="Report">
<h3 class="contentbox"><u>Report</u></h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</div>
</body>
</html>

Your Twitter feed has a width set in HTML property. Erase the property and move it to CSS. That should fix the Twitter thing. Edit: Remember that the height is set on Twitter > Settings > Widget > Height.
- EDIT 1 -
Now that I know your Twitter feed can't be controlled by you, you have to control the result of your Twitter script which will normally be 600px of height by default. No matter what this is, you know it will end up styling an iframe with the twitter-timeline CSS class, so you only need to overwrite the value like this:
.twitter-timeline {
height: 503px; // 503 because for some reason it needs 3 more pixels to catch up with your video, as I could see.
}
- END EDIT 1 -
You just gave away all of your personal information to strangers around the web. You'll probably be spammed in a few seconds if they are true. I suggest you ONLY provide necessary code. There is a lot of CSS and HTML not related to the question, you can simply ask them in another question or explain them apart of each other.
To place pictures you can do many things, being them random means either JavaScript or preloaded with PHP. I imagine you would be loading them from your site, let's say /images/computers/ and give them a class, for instance photo. Then on CSS, you can do the following:
.photo {
height:200px;
}
.photo:hover {
height:400px;
}
That will make it bigger on hover using CSS. If you like to animate it, you might want to use other CSS properties. Search on the web, you'll find them.
- EDIT 2 -
So, looking at your pictures with the class photo, I see that you were not adding the % values correctly. You need to find a balanced value for each one of your images. In your case, we are playing with image padding, margin and width basically. So there are 3 images and you know that the percentage must reach something around 100%:
.photo {
background-color: white;
padding: 1%;
margin-left: 5%;
margin-bottom: 2%;
-webkit-box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
float: left;
width: 25%;
transition: all 0.25s ease-out;
}
According to this code I wrote for you, now the formula is:
(3 * 25%) + (6 * 1%) + (3 * 5%) = 75% + 6% + 15% = 96%
6 times 1% because the padding will be added to both left and right of the picture.
- END EDIT 2 -
The background color of the website? That is just too basic. It depends on your needs, you can set your background color to the <html> or <body>. I'll use HTML:
html {
background-color:red;
}
With that, your website will have a red background. Of course you can use HEX, or rgb() or rgba() or color names, whatever you want.

Try this codes.
twitter frame having max-width="520" that is a boundary.portfolia images supported responsive also.
MAKE IT COOL,WE LOVE OUR CODING.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="homepage.js"></script>
<link href='https://fonts.googleapis.com/css?family=Exo+2:500,700,800italic,600|Montserrat' rel='stylesheet' type='text/css'>
</head>
<div class="mainlogo">
<body>Muhammed's
<br>Webpage</body>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id = "twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by #applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"> <u>Basic Information</u> </h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"> <u>Curriculum Vitae</u> </h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio" style="height:250px">
<h3 class="contentbox"> <u>Portfolio</u> </h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
<ul class="portfolioimg" style="">
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
</ul>
</div>
<div class="content" id="Report">
<h3 class="contentbox"> <u>Report</u> </h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</body>
</html>
<style>
body{
background-color:gray;
}
.portfolioimg {
clear: both;
display: block;
margin: 30px auto 0;
padding: 0;
position: static !important;
text-align: center;
width: 1000px;
background-color:transparent;
}
.portfolioimg > li {
background-color: transparent !important;
border: medium none !important;
display: inline-block;
float: none;
list-style-type: none;
margin-right: 40px;
text-align: center;
}
.portfolioimg > li img{
width:200px;
}
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat' , Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa ;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display:inline-block;
height: 500px;
width: 650px;
}
#twitter {
display:inline-block;
height: 300px;
width: 520px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>

JavaScript Enabled Scroll Fixed Nav Bar Trouble

I have a JavaScript enabled scrolling nav bar. It starts below a hero graphic then sticks to the top when it gets to the top. It works perfectly, however, when it reaches the top it causes the div below it to snap to the top instead of smoothly getting there. It's hard to explain so here's the code.
I know what's happening: Once the nav bar reaches the top, it stacks above the div causing the div to "jump." I just can't figure out how to make it smoother.
Here's the code and thanks for your thoughts!
<body>
<div class="home-hero-image">
<h1>Assemble</h1>
</div>
<div class="header">
<div class="header_container">
<div class="header_onecol">
<ol>
<li class="links">Blog</li>
<li class="links">Members</li>
<li class="links">Technology</li>
<li class="links">Contact Us</li>
</ol>
</div>
</div>
</div>
<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</body>
body {
font-family: Helvetica, Arial, Sans-serif;
font-style: normal;
font-weight: 200;
color: #888888;
margin: 0;
padding: 0;
font-size: 100%;
display: block;
text-align: center;
}
p {
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
}
.home-hero-image {
height: 250px;
background: url('../images/hero_image.jpg') no-repeat;
z-index: -1;
}
h1 {
color: white;
float: right;
padding-right: 5%;
font-size: 5em;
}
.header {
height: 77px;
position: relative;
clear: both;
background-color: white;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
}
.fixed {
position:fixed;
top:0px;
right:0px;
left:0px;
padding-bottom: 7px;
z-index:999;
}
.header_container {
width: 75%;
margin: 0 auto;
padding: 0 12px;
}
.header_onecol {
width: 97%;
height: 40px;
margin: 1%;
display: block;
overflow: hidden;
background-image: url('../images/Logo.png');
background-repeat: no-repeat;
padding-top: 24px;
}
<script language="javascript" type="text/javascript">
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});
</script>

When a div is fixed, it will no longer take up "space", meaning the next div will do exactly as you described -- stack up near the top.
Consider wrapping all of your content after the header using a div:
<div class="header">
...
</div>
<div class="main-body">
<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</div>
When we fix the header, we can add top-padding equal to the height of the header to the main-body div to prevent it from jumping.
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
$(".main-body").css("padding-top", fxel.height());
fxel.addClass("fixed");
} else {
$(".main-body").css("padding-top", 0);
fxel.removeClass("fixed");
}
});
JSFiddle here
Hope this helps!

jquery show() breaks css position properties while acting

my problem is in my website,when I load the page and click Home,if article is visible on screen, the js I've written hides it smoothly and great with no problem.but when I click the About Us Link,it shows the article but with broken css position while its act is finished.
here is the code:
HTML:
<nav>
<ul class="sf-menu sf-vertical">
<li><a href=# onclick=home()>Home</a></li>
<li><a href=#about onclick=about()>About Us</a></li>
<li><a href=#>Cuisines</a>
<ul>
<li><a href=#starters>Starters</a></li>
<li><a href=#>Main Dishes</a></li>
<li><a href=#>Desserts</a></li>
<li><a href=#>Mezes</a></li>
</ul>
</li>
<li><a href=#>Wine List</a></li>
<li><a href=#gallery>Gallery</a></li>
<li><a href=#contacts>Contacts</a></li>
</ul>
</nav>
<article class=vanished id=about>
<h1>About Us</h1>
<div class="main-wrapper scroll">
<div class="wrapper clearfix">
<img src=img/bazar-place.png alt=bazar-place width=222 height=150 class=about-img>
<h4>Our Restaurant</h4>
<p>Bazar is a restaurant located between the districts Haga and Vasastaden in Gothenburg with a focus on Turkish and Persian food of the best quality that creates opportunities for an exciting mix all the way, from appetizer to dessert.</p>
</div>
<div class="wrapper clearfix">
<img src=img/belly.jpg alt=belly-dancing width=222 height=167 class=about-img id=belly>
<h4>Events</h4>
<p>Every Saturday from 21, we have Belly dancing at Bazar.</p>
</div>
<div class="wrapper clearfix">
<img src=img/food.jpg alt=food-services width=222 height=167 class=about-img id=food>
<h4>Food Services</h4>
<p>Taste our famous pasta dish to the human price of 69 :- We offer 10% discount for take-away at our entire menu.</p>
<p>At lunchtime you can choose from three Turkish pasta dishes or among two or three different main dishes. Ask about vegetarian options! Drinking, salad and coffee / tea included. Lunch can also be picked up.</p>
</div>
<div class="wrapper last clearfix">
<img src=img/extra.jpg alt=extra-services width=222 height=167 class=about-img id=extra>
<h4>Extra Services</h4>
<p>We can help with everything from after work, kick-off to the birthday called with food and drink that lasts all night. Do you want more entertainment we can arrange live music and belly dancing.</p>
</div>
</div>
</article>
JAVASCRIPT:
function home(){
if ($(".active") == [])
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
}
}
function about(){
if ($(".active") == [])
{
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
else
{
if ($("#about").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
}
}
CSS:
article{
position: absolute;
width: 550px;
height: 100%;
background-image: url("../img/blockBG.png");
z-index: 1;
left: 235px;
border-left: 1px solid #4A4A4A;
border-right-color: #7b7b7b;
border-right-style: solid;
border-right-width: thick;
padding-right: 40px;
padding-left: 40px;
text-align: center;
}
.vanished{
display:none;
}
.main-wrapper{
position:relative;
z-index:1;
width: 100%;
height: 590px;
display:block;
}
.wrapper{
border-bottom:1px solid #4A4A4A;
margin-bottom: 15px;
}
.last{
border: none;
}
h4{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:'Yeseva One',cursive;
font-size: 17px;
font-weight: normal;
margin-bottom: 10px;
margin-top: 0;
line-height: 19px;
}
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
p{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:Arial, sans-serif;
font-size: 12px;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}

The problem is with the <h1> margin-top only being correctly applied at the end of the animation.
Try turning the distance top into a padding instead of margin, it should fix it:
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 0;
padding-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
Alternatively, you could give the parent <article> a padding or border top. This will prevent the <h1> margin from collapsing outside it's container while the animation runs.

Categories

Resources