We Keep Coding

bootstrap Carousel buttons don't work and indicators don't show

I am basically trying to recreate a bootstrap carousel with indicators but in my code I cannot see the indicators and the previous/next buttons don't work. I have found an alternate solution that I could adapt here but I would like to understand where mine goes wrong, as it's pretty much copy-pasted from Bootstrap's site. HTML and CSS Below:
/* Define our custom colors */
:root{
--livingcoral: #FC766AFF;
--stormgray: #B0B8B4FF;
--forestbiome: #184A45FF;
--sagegreen: #567572FF;
--marsala: #964F4CFF;
--granitegray: #696667FF;
--blacksteel: #080706;
--paper: #EFEFEF;
--goldleaf: #D1B280;
--silver: #594D46;
}
/* Boilerplate CSS for box sizing and body */
* {
box-sizing: border-box;
}
body{
background-color: var(--paper);
font-family: Georgia, Times, Courier;
color: var(--blacksteel);
}
/* Top Bar including opacity transition */
#welcome {
color: var(--paper);
text-align: center;
background-color: var(--blacksteel);
font-family: Courier, Times, Georgia;
transition: opacity 0.5s;
cursor: default;
/* background-image: url("BlueBuilding.jpg") */
}
#welcome:hover{
opacity: 0.7;
}
/* Top left personal quote, including transition when hovering */
#top-left-motivation{
text-align: left;
color: var(--silver);
overflow: hidden;
cursor: default;
}
.quote, .text {
display: block;
overflow: hidden;
transition: opacity 0.8s ease-in-out;
}
.quote{
height: auto;
width: auto;
opacity: 1;
}
.text{
height: 0;
width: 0;
opacity: 0;
}
#top-left-motivation:hover .quote{
height: 0;
width: 0;
opacity: 0;
}
#top-left-motivation:hover .text{
height: auto;
width: auto;
opacity: 1;
font-style: italic;
}
/* Top right list including link hover effects */
#top-right-list{
text-align: right;
font-family: Georgia;
}
.list-inline-item{
text-align: right;
margin-left: 15px;
}
.info-link{
color: var(--silver);
transition: color 0.3s, border 0.3s, padding 0.3s;
}
.info-link:link { text-decoration: none; }
.info-link:visited { text-decoration: none; }
.info-link:hover {
color: var(--goldleaf);
text-decoration: none;
cursor: pointer;
border-top: 1px solid var(--goldleaf);
border-bottom: 1px solid var(--goldleaf);
/* background-color: lightskyblue; */
/* border-radius: 2px; */
padding: 4px 5px 5px 5px;
}
.info-link:active {
text-decoration: none;
color: brown;
}
/* personalt statement formatting */
#personal-statement{
text-align: center;
font-family: Georgia;
/* color: #327c9c; */
}
#maincarousel{
margin: 100px 100px 100px 100px;
padding: 50px 50px 50px 50px;
background-color: var(--silver);
border-radius: 5px;
color: var(--paper);
}
/* Special thanks to W3Schools for the
timeline tutorial: https://www.w3schools.com/howto/howto_css_timeline.asp */
/* Container around content */
.timeline {
position: relative;
max-width: 1400px;
margin: 0 auto;
}
/* Uncomment if you want the circles on the timeline */
.timeline::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: var(--paper);
border: 2px solid var(--blacksteel);
border-radius: 50%;
z-index: 2;
left: calc(50% - 7px);
top: 0;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: var(--blacksteel);
top: 2px;
bottom: 0px;
left: 50%;
}
.container-timeline {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* For Javascript to hide/reveal elements on scroll */
.container-timeline {
visibility: hidden;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.container-timeline.show{
transform: none;
visibility: visible;
opacity: 1;
}
.left-side {
left: 0;
}
.right-side {
left: 50%;
text-align: right;
}
/* Add lines to the left container (pointing right) */
.left-side::before {
content: " ";
height: 2px;
position: absolute;
top: 30px;
width: 40px;
z-index: 1;
right: 0px;
background: var(--blacksteel);
}
/* Add lines to the right container (pointing left) */
.right-side::before {
content: " ";
height: 2px;
position: absolute;
top: 30px;
width: 40px;
z-index: 1;
left: 0px;
background: var(--blacksteel);
}
/* Fix the circle for containers on the right side */
.right-side::after {
left: -9px;
}
/* The actual content */
.content-timeline {
padding: 20px 30px;
position: relative;
border-radius: 6px;
border: 1px solid var(--blacksteel);
}
.left-side .content-timeline {
background: linear-gradient(45deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}
.right-side .content-timeline {
background: linear-gradient(225deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}
/* format the timeline boxes */
.timeline-heading{
color: var(--paper);
font-family: Courier;
}
.left-side .timeline-heading{
border-image-slice: 1;
border-bottom: 1px solid;
border-image-source: linear-gradient(225deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}
.right-side .timeline-heading{
border-image-slice: 1;
border-bottom: 1px solid;
border-image-source: linear-gradient(45deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}
.timeline-text{
color: var(--paper);
font-family: Georgia;
text-decoration: bold;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
#media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 25px;
}
.timeline::before {
left: 18px;
}
/* Full-width containers */
.container-timeline {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all lines are pointing leftwards */
.container-timeline::before {
left: 30px;
}
/* Make sure all circles are at the same spot */
.left-side::after, .right-side::after {
left: 15px;
}
/* Make all right containers behave like the left ones */
.right-side {
left: 0%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>work exp.</title>
</head>
<body class="workexp">
<h1 id="welcome">
Work experience.
</h1>
<div class="container-fluid" id="head">
<div class="row justify-content-md-center">
<div class="col" id="top-left-motivation">
<span class="quote">Personal Quote.</span>
<span class="text">Transition text</span>
</div>
<div class="col" id="top-right-list">
<ul class="list-inline">
<li class="list-inline-item"><a class="info-link" href="index.html" class="">Home.</a></li>
<li class="list-inline-item"><a class="info-link" href="aboutme.html">About me.</a></li>
<li class="list-inline-item"><a class="info-link" href="contact.html">Contact.</a></li>
</ul>
</div>
</div>
</div>
<div id="maincarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#maincarousel" data-slide-to="0" class="active"></li>
<li data-target="#maincarousel" data-slide-to="1" class=""></li>
<li data-target="#maincarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active text-center p-4">
<p>lorem ipsum (imagine longer text)</p>
</div>
<div class="carousel-item text-center p-4">
<p>lorem ipsum v2 (imagine longer text)</p>
</div>
<div class="carousel-item text-center p-4">
<p>lorem ipsum v2 (imagine longer text)</p>
</div>
</div>
<a class="carousel-control-prev" href="#maincarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#maincarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</body>
</html>
Also JSfiddle here https://jsfiddle.net/j9skLwye/2/
Any help appreciated.

After some playing around, i found out that adding the -bs property to data-slide (i.e. data-bs-slide) solved the issue and my carousel works.
<div id="maincarousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#maincarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></li>
<li data-bs-target="#maincarousel" data-bs-slide-to="1" class=""></li>
<li data-bs-target="#maincarousel" data-bs-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active text-center p-4">
<p>lorem ipsum (imagine longer text)</p>
</div>
<div class="carousel-item text-center p-4">
<p>lorem ipsum v2 (imagine longer text)</p>
</div>
<div class="carousel-item text-center p-4">
<p>lorem ipsum v3 (imagine longer text)</p>
</div>
</div>
<a class="carousel-control-prev" href="#maincarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#maincarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>

I want the animation to work on the progress bar when hovering on an a element

Here is my HTML and CSS:
.choosebybrand {
position: relative;
display: flex;
width: 100%;
height: auto;
justify-content: space-around;
flex-wrap: wrap;
background: linear-gradient(to bottom, #ffffff, whitesmoke);
margin-bottom: 0px;
text-align: center;
padding: 70px;
}
.choosebybrand img {
box-shadow: 0px 5px 20px 1px rgba(0, 0, 0, 1);
margin: 15px;
border-radius: 20px;
}
.choosebybrandtext h1 {
margin-top: 100px;
left: 50%;
text-align: center;
color: rgb(255, 0, 68);
font-size: 40px;
font-style: italic;
}
.choosebybrand h3 {
margin-top: 20px;
font-size: 20px;
font-family: 'Pacifico', 'cursive';
color: rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.apple:hover h3,
.motorola:hover h3,
.lg:hover h3,
.samsung:hover h3,
.huawei:hover h3 {
cursor: pointer;
color: rgb(255, 0, 68);
transition: 1s;
}
a:hover {
text-decoration: none;
}
.icons a {
margin: 10px;
}
.progress-bar {
animation: pr 5s infinite;
background-color: red;
}
#keyframes pr {
0% {
width: 0;
color: red;
}
10% {
background-color: blue;
}
20% {
background-color: black;
}
30% {
background-color: yellow;
}
40% {
background-color: tomato;
}
50% {
width: 100%;
background-color: violet;
}
60% {
background-color: rgb(184, 145, 145);
}
70% {
background-color: white;
}
80% {
background-color: rgb(0, 255, 234);
}
100% {
width: 0;
background-color: red;
}
}
<div class="choosebybrandtext">
<h1>Choose by Brand</h1>
</div>
<div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand">
<div class="samsung">
<a href="samsung.html">
<div class="frontimage">
<img src="images/samsung.png" height="232px" width="115px" alt="">
</div>
<h3>Samsung</h3>
</a>
</div>
<div class="apple">
<a href="apple.html">
<div class="frontimage">
<img src="images/apple.png" height="232px" width="115px" alt="">
</div>
<H3>Apple</H3>
</a>
</div>
<div class="lg">
<a href="lg.html">
<div class="frontimage">
<img src="images/LG.png" height="232px" width="115px" alt="">
</div>
<h3>Lg</h3>
</a>
</div>
<div class="motorola">
<a href="motorola.html">
<div class="frontimage">
<img src="images/Motorola.png" height="232px" width="115px" alt="">
</div>
<h3>Motorola</h3>
</a>
</div>
<div class="huawei">
<a href="huawei.html">
<div class="frontimage">
<img src="images/huawei.png" height="232px" width="115px" alt="">
</div>
<h3>Huawei</h3>
</a>
</div>
</div>
<div class="progress">
<div class="progress-bar"></div>
</div>

const element = document.querySelector(".element")
const progressBar = document.querySelector(".progress-bar")
element.addEventListener("mouseover", function() {
progressBar.style.animation = "pr 5s infinite"
})

It would be best to put an eventListener on the element.
const element = document.querySelector(".element")
const progressBar = document.querySelector(".progress-bar")
element.addEventListener("mouseover", function() {
progressBar.style.animation = "pr 5s infinite"
})
make sure to replace .element with your own class

Fixed Headers and Section Anchors with bootstrap

I swear I have tried everything that I can think of to solve this issue. I have a fixed bootstrap navbar, using a javascript onscroll event listener to apply the fixed attribute...I tried using style in the markup, but it did not have the desired effect. So of course this is a repetitive issue, but I have tried all the recommendations and then some. At least all that I could find. The problem is that when I use any #about internal link, the content falls beneath the navbar. I have tried margins, absolute, relative, top -...px on .section2. None of it worked.
And please I am new to this, so any solutions, please make it specific to my code and not just add a position to the anchor. Give me the exact class/id and what to add, or remove, or both.
here is a link to the live page to see what happens when you click any link for #about section: portfolio #about
https://kingdomb.github.io/live_portfolio/#about
NOTE: The code below does not give display the error properly so use the link above.
UPDATE: 3/22 02:16
I managed to find this:
Come on guys!
This have a very simple solution, create your ancho like this:
<div style="margin: -50px 0px 50px 0px; position: absolute;">
<a id="myanchor"></a>
</div>
With -50px margin what i make is upper the anchor div, and with 50px margin, i push down the next content. You only have to make your test with your custom margins.
Works like a charm. I use this trick in all one page design websites.
BUT, now one click on the about link in the navbar to #myanchor gives me this:
And if I click the exact same navbar link I get a minor adjustment to this:
THANKS!!!
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
myFunction();
myFunction2();
};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll
position.Remove "sticky"
when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
// Get the logo
var logo = document.getElementById("logo");
// Get the offset position of the logo
var logoSpin = logo.offsetTop;
// Add the logo-spin class to the navbar when you reach its scroll
position.Remove "logo-spin"
when you leave the scroll position
function myFunction2() {
if (window.pageYOffset >= logoSpin) {
logo.classList.add("logo-spin");
} else {
logo.classList.remove("logo-spin");
}
}
// All links will have a target:__blank for external page linking
// Read more: https://html.com/attributes/a-target/#ixzz6GMsDfQEr
// jQuery(document.links)
// .filter(function() {
// return this.hostname != window.location.hostname;
// })
// .attr("target", "_blank");
//OR Read more: https://html.com/attributes/a-target/#ixzz6GN6pd1Qt
function externalLinks() {
for (var c = document.getElementsByTagName("a"), a = 0; a <
c.length; a++) {
var b = c[a];
b.getAttribute("href") &&
b.hostname !== location.hostname &&
(b.target = "_blank");
}
}
externalLinks();
html,
body {
background-color: #E3E3E3;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* HOME */
.section1 {
background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 100%;
}
.section1 .container {
background-color: rgb(0, 0, 0, 0.65);
min-height: -webkit-fill-available;
min-width: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.home-btn {
background-color: transparent;
font-weight: 500;
border-color: #8e0000;
border-radius: 3px;
color: #8e0000;
margin-top: 35px;
font-size: 1.12em;
transform: translate(-50%, -50%);
position: absolute;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
/* hover styling required !important */
.home-btn:hover {
color: #8e0000 !important;
border-color: #8e0000;
font-size: 1.4em;
border-width: 3px;
font-weight: 600;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.intro {
color: white;
font-size: 2.74em;
text-shadow: .1px .8px 1px black;
}
.highlight {
color: #8e0000;
text-shadow: .1px .8px 1px black;
}
/* NAVIGATION */
.logo {
display: inline-flex;
flex-direction: row;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.navbar-brand {
margin: 0px;
padding: 0px 0px !important;
}
.logo-wrapper {
color: white;
font-size: 1.4em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 2px 1px black;
}
.logo-spin {
-webkit-animation: spin 1s;
animation: spin 3s;
animation-iteration-count: 1;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
#keyframes spin {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.navbar {
background-color: #333;
height: 65px;
border-bottom: 6px solid #212529;
border-top: 6px solid #212529;
}
#navbar {
z-index: 9999;
}
.navbar-text {
vertical-align: middle;
margin-left: 200px;
height: inherit;
}
#media only screen and (max-width: 860px) {
.navbar-text {
display: inline-block;
align-items: center;
margin-left: 30px;
}
}
#navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 0px 30px;
text-decoration: none;
font-size: 1.2em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 1px 1px black;
}
/* ABOUT */
#about {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
text-shadow: .1px .8px 1px black;
position: relative;
height: -65px;
margin-top: 200px;
}
/* .section2 {
position: absolute;
width: 100%;
} */
.section2 .row {
background: url("../images/improved-teamwork-and-
collaboration_1887x741.jpg") center center no-repeat;
height: 100%;
width: 100%;
margin-left: 0px;
margin-right: 0px;
border-radius: 0%;
}
.section2 .card {
background-color: RGBA(33, 37, 41, .80);
color: white;
min-height: -webkit-fill-available;
height: 100%;
}
.section2 .card-block {
font-weight: 520;
width: 50%;
margin: 0 auto;
font-size: 25px;
line-height: 50px;
padding: 60px;
}
.section2 a {
color: #9b0000;
-webkit-filter: drop-shadow(.1px .8px 2px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.section2 .card-block {
z-index: 8000;
padding-right: 200px;
padding-left: 0px;
margin-left: 100px;
}
.section2 a:hover,
.section2 #skills:hover,
.section2 #projects:hover {
text-decoration: underline;
}
.section2 .btn {
border-color: #8e0000;
border-radius: 13px;
border-width: 3px;
font-weight: 500;
font-size: 0.8em;
transition: color 0.15s ease-in-out, background-color 0.15s ease- in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in- out;
}
.section2 .btn:hover {
background-color: #8e0000;
color: #212529;
text-decoration: none;
}
#about {
margin-bottom: 75px;
}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<!-- HOME -->
<section id="home" class="section1">
<div class='container'>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12">
<p class='intro'>
Hello, my name is <span class="highlight animated fadeIn" style="animation-delay: 1s; animation-duration:
1.8s">King</span>.
<br>
<div class="intro animated fadeInLeft" style="animation-
delay: 3s; animation- duration: 2s">And I'm a full- stack web developer.</div>
<a href="#myanchor"><button type="button" class="home-btn
btn btn-primary-outline btn-xs animated fadeIn"
style="animation-delay: 5s; animation-duration:
2s">VIEW MY WORK</button></a>
</p>
</div>
</div>
</div>
</section>
<!-- NAVIGATION -->
<div id="navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="logo-wrapper nav-item active">
<div class="logo" id="logo">
<a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand Logo"></a>
</div>
<span class="brand" id="brand" style="animation-delay: 0s;
animation-duration: 3s">KING MAJOR</span>
</div>
<button class="navbar-toggler" type="button" data- toggle="collapse" data- target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myanchor">ABOUT
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">SKILLS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">PROJECTS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ABOUT -->
<div class="blank" style="margin: -65px 0px 200px 0px; position:
absolute;">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent
projects. THANKS!
</p>
<a href="General_Resume.pdf" class="btn btn-outline-
primary" target="__blank">Print My Resume
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

The reason you are having this issue is that the .section2 section it looks like you have a margin-top: 200px. Therefore creating that space. Now you can just adjust accordingly.
I would be careful when using margins. Using them only if you have to. I rarely use it, only for minor tweaks and responsiveness. If you are styling correct there should be no use for margins. I would take a look into using Flexbox. This is super useful when creating nice functional layouts. It's a great starter for new people too. The sooner you get into it, the easier layouts will be for you.
I also noticed that you are using javascript to add external links that open in a new page. To do that an easier way is to do something like this <a href="someoutsidelink.com" target="_blank">. Here is a reference, w3schools
As for your navbar fixed, here is some code that you should use instead of the one you have now.
var elementPosition = $("#navbar").offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$("#navbar")
.css("position", "fixed")
.css("top", "0");
} else {
$("#navbar").css("position", "static");
}
});
Edit One:
Here's one way to do this one is adding a blank <div class="blank"> tags. Place it on top of the <section class="section2"> opening tag. then add a height: 200px; width: 100% therefore creating that space.

I found a solution! I refactored the code in the ABOUT section to this:
<!-- ABOUT -->
<div class="blank" style="position: absolute">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent projects. THANKS!
</p>
Print My Resume
</div>
</div>
</div>
</div>
</div>
</section>
Notice that I removed the opening div margin html styling.

when i re-size my browser all element change their place

when i re-size my browser all element change their place can any one help me ??? but some of element like logo & navigation when i re-size the browser Not affected
i tried to make the position fixed absolute or static but nothing change
<head>
<title>www.adamkides.com/main</title>
<link rel="icon" href="logo.jpg" type="image/x-icon">
<link href='http://fonts.googleapis.com/css? family=Archivo+Narrow:700italic,700,400' rel='stylesheet' type='text/css'>
<style type="text/css">
a{color:black;}
body {
font-family: 'Lucida Grande', helvetica, arial, sans-serif;
font-size: 12px;
background: white;
background-size:101%;
height:100%;
background-image: url('dr5.jpg');
background-repeat:no-repeat;
margin:-70 0 0 0;
}
#face:hover {
background: #333;
border-left: 5px solid #000;
}
#face{ MARGIN-LEFT: -850PX;
MARGIN-TOP: 1PX;}
#container
{
margin: 0 auto;
width: 100%;
background: #fff;
}
#header
{
background-image: url(hand.jpg);
background-size: 310px;
background-repeat: no-repeat;
padding: 20px;
background-color:white;
width: 320px;
height: 100px;
float:right;
margin: 70px 500px -11px 0%;
}
#header h1 { margin: 0; }
.navigation {
margin: 5px 20px 30px 20%;
background: #fff;
overflow: hidden;
width: 760px;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}
.navigation li {
width: 120px; border-left: 5px solid #666;
float: left;
cursor: pointer;
list-style-type: none;
padding: 10px 50px 10px 15px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.navigation li h2 {
font-family: georgia;
font-weight: bold;
font-style:arial;
font-size: 20px;
margin-bottom: 5px;
line-height: 16px;
}
.navigation li p{
font-size: 11px;
color: #999;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
.navigation li:hover {
background: greenyellow;
border-left: 5px solid #000;
}
.navigation li:hover h2 {
font-weight: bold;
color: yellow;
}
.navigation li:hover p {
color: orange;
padding-left: 5px;
}
#content-container
{ float: left;
width: 55%;
margin-top: -25px;
margin-left: 320px;
height: 60%;
background: #FFF url(layout-two-liquid-background.gif) repeat-y 68% 0;
}
.ti{
border-color: greenyellow;
border-style: dotted;
margin-top: -70px;
border-width: thin;
width: 235px;
height: 250px;
margin-left: 295px;
font-size: 24px;
color: orange;
font-weight: 700;}
#content {
clear: right;
float: left;
width: 60%;
padding: 5px 0;
margin: -14px -41px -294px 7%;
display: inline;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 26%;
padding: 20px 0;
margin: 15 320 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer{margin: 30px 20px -2px 0px;
overflow: hidden;
border-color: greenyellow;
border-style: dotted;
border-width: thin;
width: 760px;
height:100px;
background-color:white;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);}
</style>
</head>
<body>
<div id="container">
<img src="logo1.jpg" width="50px" height="50px" style="margin-top: 75px;margin-left: 522px;/* border:solid; *//* border-color:#ef5d9b; */height: 100px;float: left;width: 100px;"> <div id="header" style="background-image: url(hand.jpg);">
</div>
<ul class="navigation">
<a href="mainpage.html"><li>
<h2>الصفحة الرئسية</h2>
<p>main page</p>
</li></a>
<a href="f.html"><li>
<h2>فلسفتنا</h2>
<p>our</p>
</li></a>
<a href="how.html"><li>
<h2>من نحن</h2>
<p>Who we are</p>
</li></a>
<a href="gallary.html"><li>
<h2>الاستديو</h2>
<p>gallary</p>
</li></a>
<image id="face" src="face.jpg" width="80px" height="80px"/>
</ul>
<div id="content-container">
<div id="content">
<h2 style="float:right;font-size:50px;color:green;"><img src="well.jpg" width="70px" height="70px"style="margin-top:10px;"> كلمة ترحيبية </h2>
<p align="right"style="float:right;font-size:25px ;margin-left:-10px;color:black;">
مرحباً بكم في صفحتنا التي عملنا بجهد متواضع لنجعل منها موقعاً متميزاً يخدم الجميع ، ليس فقط أهالي أطفال الروضة بل و أيضاً الزبائن الكرام ، و نتمنى أن تكون مرجعاً مفيداً لكم، و أن تكون حلقة وصل بيننا و بينكم ، . . . فلا تترددوا بتزويدنا بكل مقترحاتكم و آرائكم التي تساعدنا على التطور نحو الأفضل واعلموا أن رأيكم مهم لدينا وسيساعدنا على لتطور .
نأمل أن تجدوا المعلومات التي تبحثون عن
ها على موقعنا الالكتروني
، ولمزيد من المعلومات أو الاستفسارات الرجاء طلب ذلك،
وسوف يسعد نا توفيرها لكم نتطلع إلى الترحيب بكم في
روضتنا ونأمل أن يعودو أطفالكم بذكريات جميلة و تجربة
فريدة.
</p>
</div>
<div id="aside">
<h3>
<div class="ti" >
<p id="time"style="margin-left:20%;margin-top:70px;"></p>
<script>
var x=setInterval(function(){myTimer()},1000);
function myTimer() {
var d = new Date();
document.getElementById("time").innerHTML = d.toLocaleTimeString();
}</script>
<p id="date"style="margin-left:15%"></p>
<p style="margin-left:30%">اتسلى معنى</p>
<script>
var d = new Date();
document.getElementById("date").innerHTML = d.toDateString();
</script><br><br>
</script>
</div>
</div>
<div id="footer"><h2 style="margin-top:7px;float:right;margin-right:30px;color:green;font-size:30px;">:اتصل بنا</h2></div>
<h4 style="font-size:18px;float:right;margin-top:-60px;margin-right:50px;">065925575 - 0796877760<br> 065925575 فاكس </h4>
<h2 style="margin-top:-94px;float:left;margin-left:30px;color:green;font-size:30px;">:البريد الالكتروني</h2>
<h4><a style="margin-left:30px;margin-top:-40px;clear:left;color:black;float:left;font-size:18px;" href="mailto:info#adam-kids.com">info#adam-kids.com</a></h4 >
<h2 style="float:right;margin-top:-100px;margin-right:150px;color:green;font-size:30px;">:العنوان</h2>
<h4 style="margin-bottom: auto;margin-top:-67px;margin-right:80px;font-size:18px;width:190px;float:right;">
بناية رقم 9 - شارع علي سيدو الكردي
- خلف كنيسة اللاتين - عبدون الشمالي
- عمان - الأردن
</h4>
</div>
</body>
</html>

You need to make your CSS responsive. By responsive, I mean that your CSS should be able to react to the different browser widths and heights.
This is a massive topic but a good place to start might be here:
http://www.w3schools.com/css/css_responsive_intro.asp
You should also look into CSS frameworks such as Bootstrap or Foundation:
http://getbootstrap.com/
http://foundation.zurb.com/
Both of which have plenty of online tutorials you can learn from. The w3schools link I have provided gives you a basic introduction to Bootstrap.

That's happening because you're mixing fixed units and relative units in your CSS.
Fixed units like pixels keeps the especified sizes even when you resize your browser, while relative units like percentages reacts and adapts to resizing.
Consider that fixed units will create a lot of horizontal scroll depending on the device your site it's being viewed from, but relative units will reorganize your page for a better presentation, that's what we call "Responsive".

Use the browser development tool to see the properties of elements and inspect why they are behaving that way. For your example, the ul with the 'navigation' class has margin-left set to 20%, which makes it change position when the total width of the page changes.
I have to agree with the others, though, and ask you to read more about the subject so you can understand the samples you are working with.

jquery image slider "Unslider" not working correctly

I got this snippet http://unslider.com/. I did everything asked there to get it working. But somehow it doesn't seem to load the next image in the queue and in return gives a blank space... You can see it here. easycounseling.org/new.html .. Here's the code:
<script>
$(function() {
$('.ss-area').unslider();
});
</script>
<div class="ss-area clearfix">
<ul class="img-sli">
<li class="fimg">
<div class="contents clearfix">
<div class="info-box">
<h2>DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo </h2>
<div class="con-us-btn-wr">
<button ONCLICK="window.location.href='contact.html'" class="con-us-mer-pg btn con-us">Contact us Now!</button>
</div>
<p>
to signup and avail of our limited period promotional offer!
</p>
</div>
</div>
<div class="mer-usp-wr">
<ul class="mer-usp clearfix" style="font-size:18px;">
<li>DEmo DEmo </li>
<li>DEmo DEmo DEmo </li>
<li>DEmo e</li>
<li>DEmo DEmo </li>
<li>DEmo DEmo </li>
</ul>
</div>
</li>
<li class="simg">
<div class="contents clearfix">
<div class="info-box">
<h2>DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo </h2>
<div class="con-us-btn-wr">
<button ONCLICK="window.location.href='contact.html'" class="con-us-mer-pg btn con-us">Contact us Now!</button>
</div>
<p>
to signup and avail of our limited period promotional offer!
</p>
</div>
</div>
<div class="mer-usp-wr">
<ul class="mer-usp clearfix" style="font-size:18px;">
<li>DEmo DEmo </li>
<li>DEmo DEmo DEmo </li>
<li>DEmo e</li>
<li>DEmo DEmo </li>
<li>DEmo DEmo </li>
</ul>
</div>
</li>
</ul>
</div>

The plugin is based on jQuery library
So you need to include jQuery and the plugin script file to make it work. The order in which they are loaded is important
---> jQuery
---> unslider plugin
Put this in the section where you have included the other script files. You can always test this by inspecting the console in Developer tools of the browser. It clearly shows the error.

Hi check this my unslider.com help file:
<!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unslider.com example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://unslider.com/unslider.min.js"type="text/javascript"></script>
<!-- JavaScript -->
<script type="text/javascript">
$(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
var unslider = $('.banner').unslider();
$('.prev').click(function() {
unslider.data('unslider').prev();
});
$('.next').click(function() {
unslider.data('unslider').next();
});
return false;
});
</script>
<!-- CSS -->
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
.banner {
position: relative;
width: 100%;
overflow: auto;
top: 50px;
/*z-index: -1;*/
font-size: 18px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.banner ul {
list-style: none;
width: 300%;
}
.banner ul li {
display: block;
float: left;
min-height: 500px;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}
.banner .inner {
padding: 360px 0 110px;
float: left;
vertical-align:-100px;
}
.banner h1, .banner h2 {
font-size: 40px;
line-height: 52px;
color: #fff;
}
.banner .btn {
display: inline-block;
margin: 25px 0 0;
padding: 9px 22px 7px;
clear: both;
color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border : rgba(255, 255, 255, 0.4) solid 2px;
border-radius: 5px;
}
.banner .btn:hover {
background : rgba(255, 255, 255, 0.05);
}
.banner .btn:active {
-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
}
.banner .btn, .banner .dot {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.banner .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
}
.banner .dots li {
display: inline-block;
width: 10px;
height: 10px;
line-height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
background: #fff;
opacity: 1;
}
.unslider-arrow {
font-family: Expressway;
font-size: 50px;
text-decoration: none;
color: #3d3d3d;
background: rgba(255,255,255,0.7);
padding: 0 20px 5px 20px;
}
.next {
position: absolute;
top: 65%;
right: 0
}
.prev {
position: absolute;
top: 65%;
right: 90 /* change to left:0; if u wanna have arrow on left side */
}
</style>
</head>
<!-- Body of HTML document -->
<body>
<div class="slider">
<div class="banner">
<ul>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
</ul>
</div>
←
→
</div>
</body>
</html>