Develop Reference

my next "section" moves with my javascript animation

I am a junior developer and I am coding my portfolio. I have a problem which is the following:
I put an animation effect typing on a keyboard on a "p" with JS and it moves a lot of my elements.
I managed to fix some with: "position absolute" and some CSS adjustments but the second problem is that I put a JS library to put a dark mode and "position: absolute" makes that the dark mode does not take disregard color changes.
Here is the HTML5 code:
<section class="landing-page">
<p>Luck, <br> web developer <span id="monSpan">html</span> </p> **<-- animation is here**
<div>
<img src="/img/undraw_developer_activity_re_39tg.svg" alt="">
</div>
</section>
<section class="end-landing-page">
<div>
<button>En savoir plus <span class="material-symbols-outlined">
arrow_downward
</span> </button> **<-----the moving div is here**
</div>
</section>
Here is the CSS3 code:
.landing-page {
display: flex;
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: bold;
}
.landing-page p {
padding-left: 10%;
padding-right: 50%;
font-size: 4rem;
}
.landing-page img {
height: 10em;
padding-left: 20%;
padding-right: 9%;
}
.landing-page div {
position: absolute;
padding-left: 40%;
}
#monSpan {
transition: all 0.5s;
background-color: rgb(129, 129, 255);
}
.end-landing-page div {
padding-top: 10%;
padding-left: 8%;
}
.end-landing-page button {
display: flex;
align-items: center;
background-color: rgb(129, 129, 255);
border-radius: 30px;
padding: 10px;
}
as said before I tried with the "position" property and it works but the dark mode library no longer works on these elements
I also tried with the "z-index" property but without result
I am French and use google translation, and there may be bad translations do not hesitate to ask me to rephrase.

Transforming Vertical Tab to Accordion

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>

How to make container div "pointer-events:none" but content clickable...?

i have some setup... where tool tip appears on hover... so i have to put tool tip and anchor tags in same div... tool tips pointer events set to none.. but i cant set pointer events of container div to none because then Hover event is not detected... but i want the underlying element below tool tip to be clickable... please help me out (if possible) without java script... i have set up the dummy scenario below... also including code pen link.... and yeah... positions are not changeable...in my case the underlying div is partially visible as shown in this code below.. and i want it to be clickable/ fire alert function... yeah if there is other way by changing composition of UN-ordered list.. and separating it from that container please let me know... but tool tip should be visible on hover on switch...
<html>
<head>
<style>
.menudescription{
float: left;
width: 150px;
height: 30px;
text-align: center;
background-color: #A1BA94;
margin: 20px 0px 0px 12px;
font-size: 20px;
line-height: 25px;
font-family: 'Kaushan Script', cursive;
color: white;
border: solid white 2px;
opacity: 0;
pointer-events: none;
}
ul li {
list-style-type:none
}
#menulist{
clear: both;
width: 230px;
height: 342px;
position: fixed;
right: 0;
top: 5%;
z-index: 1000;
}
.menulistitem{
clear: both;
height: 60px;
width: 60px;
float: right;
position: relative;
text-align: center;
vertical-align: middle;
background-color: #A1BA94;
margin: 2px;
padding-top: 4px;
}
.menulistitem:hover + .menudescription{
opacity: 1;
}
.underlyingdiv{
height:200px;
width:50px;
background-color:red;
position:relative;
float:right;
margin:20px 40px;
display:block;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menulist">
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li></ul>
</div>
<div class="underlyingdiv" onClick="myfunction()"></div>
<script>
function myfunction(){
alert("hello");
}
</script>
</body>
</html>
below is the code pen link...
http://codepen.io/theprash/pen/MKwWoN

Check this out
The red container is clickable and the tooltip is visible on hover.
Things I do:
Added position:relative to li.
Removed floats to divs inside lis added below css to .menudescription
position: absolute;
right: 100%;
top: 0;
This will help to position the tooltip relative to li
Override the width of #menulist to 60px and remove padding-left for the same. This will make sure that the red container is clickable.
Working Code pen

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!