Develop Reference

toggleClass of parent div not changing with onClick

I'm trying to use onClick and toggleClass to change display:none to display:block on the parent elements which contain a child element that contains a certain text.
I.e., I want to show the parent div (or multiple divs) record when it contains the two letter state abbreviation, AK in li.address span.state.
But, it's not working. Fiddle https://jsfiddle.net/ky23ne1w/9/
$(".state-button-ak").on("click", function(e) {
if ($(".record li.address span.state:contains(AK)")) {
$(".record li.address span.state:contains(AK)").parent().toggleClass("display-block");
e.preventDefault();
}
});
.record {
display: none;
}
.state-button {
border: 2px solid #c2c2c2;
padding: 5px;
border-radius: 5px;
margin: 0 10px 0 10px;
}
.display-none {
display: none;
}
.display-block {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak">Alaska</button>
<button class="state-button state-button-al">Alabama</button>
<button class="state-button state-button-ca">California</button>
<div class="record">
<h1 class="name">Customer 1</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Anchorage, <span class="state">AK</span>
</li>
</ul>
</div>
<div class="record">
<h1 class="name">Customer 2</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Mobile, <span class="state">AL</span>
</li>
</ul>
</div>
<div class="record">
<h1 class="name">Customer 3</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Los Angeles <span class="state">CA</span>
</li>
</ul>
</div>

It is a really strange approach, why not work with data-attributes or specific classes to target the elements.
The parent in your case is li with address class, not the div with record class.
$('.state-button').on('click', function(){
let _this = $(this);
if(!_this.hasClass('active')){
$('.display-block ').removeClass('display-block ');
$('.state-button.active').removeClass('active');
_this.addClass('active');
let state = _this.text().substring(0,2).toUpperCase();
if(state === 'AL')
state = 'AK';
$('span.state:contains('+state+')').closest('.record').addClass('display-block');
}
});
.record {
display: none;
}
.state-button {
border: 2px solid #c2c2c2;
padding: 5px;
border-radius: 5px;
margin: 0 10px 0 10px;
}
.state-button.active {
border-color: red;
}
.display-none {
display: none;
}
.display-block {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak">Alaska</button>
<button class="state-button state-button-ar">Arkansas</button>
<button class="state-button state-button-ca">California</button>
<div class="record">
<h1 class="name">Customer 1</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li>
</ul>
</div>
<div class="record">
<h1 class="name">Customer 2</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Mobile, <span class="state">AR</span></li>
</ul>
</div>
<div class="record">
<h1 class="name">Customer 3</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Los Angeles <span class="state">CA</span></li>
</ul>
</div>
This is an example using data-attributes:
$('.state-button').on('click', function(){
let _this = $(this);
if(!_this.hasClass('active')){
$('.state-button.active, .record.active').removeClass('active');
$('[data-state='+_this.data('state')+']').addClass('active');
}
});
.record {
display: none;
}
.state-button {
border: 2px solid #c2c2c2;
padding: 5px;
border-radius: 5px;
margin: 0 10px 0 10px;
}
.state-button.active {
border-color: red;
}
.record.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak" data-state="AK">Alaska</button>
<button class="state-button state-button-ar" data-state="AR">Arkansas</button>
<button class="state-button state-button-ca" data-state="CA">California</button>
<div class="record" data-state="AK">
<h1 class="name">Customer 1</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li>
</ul>
</div>
<div class="record" data-state="AR">
<h1 class="name">Customer 2</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Mobile, <span class="state">AR</span></li>
</ul>
</div>
<div class="record" data-state="CA">
<h1 class="name">Customer 3</h1>
<ul>
<li class="focus">Focus: </li>
<li class="course">Course: </li>
<li class="business">Business: </li>
<li class="address">Location: Los Angeles <span class="state">CA</span></li>
</ul>
</div>

How to make it so that when you click on one of the menu items, the other changes color?

How to make one of the li circles in .sidebar-nav change the background color to white when you click on one of the li in the .sidebar-menu, by adding the .actived class to it? Moreover, when one of the li in the .sidebar-menu is clicked, the circle from the .sidebar-nav should change color in accordance with the element that was clicked. For example, they clicked on the "Business card site" and the first circle lights up, clicked on the "Internet store" and the third circle lights up.
Site ct03638.tmweb.ru
Code jsfiddle.net/pjzs9uxw/
.actived {
background-color: #fff;
transition: 0.3s;
}
<section class="services" id="services">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card">Сайт-визитка</li>
<li id="landing">Landing page</li>
<li id="market">Интернет-магазин</li>
<li id="corp">Корпоративный сайт</li>
<li id="bitrix">1C Битрикс</li>
<li id="advertising">Контекстная реклама</li>
<li id="seo">SEO оптимизация</li>
<li id="promotion">Продвижение в соц. сетях</li>
<li id="marketing">Контент-маркетинг</li>
</ul>
<ul class="sidebar-nav">
<li class="business-card"></li>
<li class="landing"></li>
<li class="market"></li>
<li class="corp"></li>
<li class="bitrix"></li>
<li class="advertising"></li>
<li class="seo"></li>
<li class="promotion"></li>
<li class="marketing"></li>
</ul>
</div>
</div>
</div>
</section>

You can use index() of the li which is clicked then using that addClass to same li in your sidebar-nav ul.
Demo Code :
$('.sidebar-menu li a').on('click', function(e) {
e.preventDefault()
var index_ = $(this).closest("li").index() //get index
$('.sidebar-nav li').removeClass('actived');//remove from other
$(".sidebar-nav li:eq(" + index_ + ")").addClass('actived'); //add class where index is same
});
.actived {
background-color: red;
transition: 0.3s;
}
.sidebar-nav li {
width: 7px;
height: 7px;
border: 1px solid black;
border-radius: 50px;
margin-right: 5px;
cursor: pointer;
}
.sidebar-nav {
list-style: none;
display: flex;
justify-content: flex-start;
margin-left: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section class="services" id="services">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card">Сайт-визитка</li>
<li id="landing">Landing page</li>
<li id="market">Интернет-магазин</li>
<li id="corp">Корпоративный сайт</li>
<li id="bitrix">1C Битрикс</li>
<li id="advertising">Контекстная реклама</li>
<li id="seo">SEO оптимизация</li>
<li id="promotion">Продвижение в соц. сетях</li>
<li id="marketing">Контент-маркетинг</li>
</ul>
<ul class="sidebar-nav">
<li class="business-card"></li>
<li class="landing"></li>
<li class="market"></li>
<li class="corp"></li>
<li class="bitrix"></li>
<li class="advertising"></li>
<li class="seo"></li>
<li class="promotion"></li>
<li class="marketing"></li>
</ul>
</div>
</div>
</div>
</section>

Add click event listener on sidebar-menu ul element and capture the index of clicked li element, then get the circle element of same index and add active class on it and remove the active class from previous highlighted element.
const menuEle = document.querySelector("#side-menu");
let higlightedIndex = -1;
menuEle.addEventListener("click", (e) => {
const listItem = e.target.closest("li");
if (listItem) {
const index = [...menuEle.children].indexOf(listItem);
const list = document.querySelector("#sidebar-nav").children;
if (higlightedIndex >= 0) {
list[higlightedIndex].classList.remove("active");
}
list[index].classList.add("active");
higlightedIndex = index;
}
});
.active {
background-color: #FAE93E;
}
.circle {
width: 20px;
height: 20px;
border: 1px solid black;
border-radius: 50%;
display: inline-block;
}
<section class="services" id="services">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu" id="side-menu">
<li id="business-card">Сайт-визитка</li>
<li id="landing">Landing page</li>
<li id="market">Интернет-магазин</li>
<li id="corp">Корпоративный сайт</li>
<li id="bitrix">1C Битрикс</li>
<li id="advertising">Контекстная реклама</li>
<li id="seo">SEO оптимизация</li>
<li id="promotion">Продвижение в соц. сетях</li>
<li id="marketing">Контент-маркетинг</li>
</ul>
<div id="sidebar-nav">
<span class="business-card circle"></span>
<span class="landing circle"></span>
<span class="market circle"></span>
<span class="corp circle"></span>
<span class="bitrix circle"></span>
<span class="advertising circle"></span>
<span class="seo circle"></span>
<span class="promotion circle"></span>
<span class="marketing circle"></span>
</div>
</div>
</div>
</div>
</section>

On the click function of your button, try adding a line that sets a class or an attribute to the parent menu element related to this current item. This way you can apply different styles according to the current menu item to the whole menu.

Full screen slider with materialize css, next and previous buttons with materialize js methods

I have been using Materialize CSS for the first time and I'm experiencing an error while I'm working with fullscreen slider.
I'm trying to add next and previous buttons which is not working. And also the next to the slider is div is getting hidden behind the sliders. I cannot add padding because there is the height of the slider is responsive.
Following is the code I'm working on
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style media="screen">
.middle-indicator {
position: absolute;
top: 50%;
z-index: 1000;
}
.middle-indicator-text {
font-size: 4.2rem;
}
a.middle-indicator-text {
color: white !important;
}
.content-indicator {
width: 64px;
height: 64px;
background: none;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.indicators {
visibility: hidden;
}
</style>
</head>
<body>
<div class="navbar-fixed white-text">
<ul id='about' class='dropdown-content orange accent-2'>
<li>About Us</li>
<li class="divider" tabindex="-1"></li>
<li>Why RNR?</li>
</ul>
<ul id='projects-main' class='dropdown-content orange accent-2'>
<li>First Project</li>
<li class="divider" tabindex="-1"></li>
<li>Pheonix project of projects and project </li>
</ul>
<nav class="orange">
<div class="nav-wrapper container">
Logo
<i class="material-icons white-text">menu</i>
<ul class=" orange right hide-on-med-and-down">
<li class="active"><a class="white-text" href="sass.html"> <span>Home </span></a></li>
<li><a class="dropdown-trigger white-text" href='#' data-target='about'>About<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger white-text" href='#' data-target='projects-main'>Projects<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a></li>
<li><a class="white-text" href="collapsible.html">Javascript</a></li>
<li><a class="white-text" href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
</div>
<ul class="sidenav orange" id="mobile-nav">
<li><a class="white-text" href="sass.html">Home</a></li>
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header white-text" style="padding: 0px 32px !important">About<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a>
<div class="amber accent-4 collapsible-body">
<ul>
<li><a class="white-text" href="#!">About Us</a></li>
<li><a class="white-text" href="#!">Why RNR?</a></li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header white-text text-accent-4" style="padding: 0px 32px !important">Projects<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a>
<div class="amber accent-4 collapsible-body">
<ul>
<li><a class="white-text" href="#!">First</a></li>
<li><a class="white-text" href="#!">Second</a></li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header white-text text-accent-4" style="padding: 0px 32px !important">Gallery<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a>
<div class="collapsible-body">
<ul class="amber accent-4">
<li><a class="white-text" href="#!">First</a></li>
<li><a class="white-text" href="#!">Second</a></li>
<li><a class="white-text" href="#!">Third</a></li>
<li><a class="white-text" href="#!">Fourth</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li><a class="white-text" href="collapsible.html">Events</a></li>
<li><a class="white-text" href="mobile.html">Contact</a></li>
<div class="row">
<div class=" container footer white col s12 center-align valign-wrapper" style="height: 100px; position: absolute; bottom: 60px;">
Follow us:
</div>
</div>
</ul>
<div class="slider fullscreen" data-indicators="true" >
<div class="slider-fixed-item center middle-indicator">
<div class="left">
<a href="" onclick="prev();" class="middle-indicator-text waves-effect waves-light content-indicator button"><i
class="material-icons left middle-indicator-text">chevron_left</i></a>
</div>
<div class="right">
<a href="" onclick="next();" class="middle-indicator-text waves-effect waves-light content-indicator button"><i
class="material-icons right middle-indicator-text">chevron_right</i></a>
</div>
</div>
<ul class="slides">
<li class="slider-item">
<img src="https://images.unsplash.com/photo-1464817739973-0128fe77aaa1?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li class="slider-item">
<img src="https://ununsplash.imgix.net/photo-1414849424631-8b18529a81ca?q=75&fm=jpg&s=0e993004a2f3704e8f2ad5469315ccb7"> <!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li class="slider-item">
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5"> <!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
<div class="container">
<div class="row">
<div class="col m6 s12">
<div class="row">
<div class="col s6">
<div class="card">
<div class="card-image">
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5" style="height: 200px"alt="">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5" style="height: 200px"alt="">
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-image">
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5" style="height: 410px"alt="">
</div>
</div>
</div>
</div>
</div>
<div class="col m6 s12">
</div>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {
edge: 'right',
draggable: true,
inDuration: 250,
outDuration: 200,
onOpenStart: null,
onOpenEnd: null,
onCloseStart: null,
onCloseEnd: null,
preventScrolling: true
});
var collapsibleElem = document.querySelector('.collapsible');
var collapsibleInstance = M.Collapsible.init(collapsibleElem, {});
var dropdownElems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(dropdownElems, {
alignment:'right',
constrainWidth:false,
coverTrigger:false});
var sliderElems = document.querySelectorAll('.slider');
var instances = M.Slider.init(sliderElems, {indicators: false, interval:'5'});
window.next = function() {
var sliderElem = document.querySelector('.slider');
var l = M.Slider.getInstance(sliderElem);
l.next(1);
}
window.prev = function() {
var sliderElem = document.querySelector('.slider');
var l = M.Slider.getInstance(sliderElem);
l.prev(1);
}
});
</script>
</body>
</html>
TIA
Best Regards,
Manoj.

OK I figured it out, I should add # in a href, if not the page will keep reloading with every click.

Div Floats Out of Place [duplicate]

This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
Closed 2 years ago.
I am displaying 3 div columns all floating left. As windows gets resized to smaller, I want it to get down to 1 column. So far, it's doing that, but when one div gets longer than the other, it all gets out of whack on a normal laptop screen.
enter image description here
The css is:
.kolumn {
float: left;
width: 30%;
padding: 8px;
}
.feed-lists {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.feedlists li {
border-bottom: 1px solid #eee;
padding: 9px;
text-align: center;
}
#media only screen and (max-width: 600px) {
.kolumn {
width: 100%;
}
}
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
</ul> </div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
</ul> </div>
...
Any help would be appreciated to get this floats to align left no matter how long are they... am trying to get them in 3 columns... thanks again!

I would strongly consider using display: flex for this instead, since float is going the way of the dinosaurs.
To fix what you have, you need to make sure the 1,4,7, etc. element can clear longer elements. Added:
.kolumn:nth-child(3n+1) {
clear: left;
}
Removed the media query so you can see it in the snippet window.
.kolumn {
float: left;
width: 30%;
padding: 8px;
}
.kolumn:nth-child(3n+1) {
clear: left;
}
.feed-lists {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.feedlists li {
border-bottom: 1px solid #eee;
padding: 9px;
text-align: center;
}
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
Here's a flex example:
* {
box-sizing: border-box;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
.kolumn {
padding: 8px;
flex: 1 0 33.3333%;
}
.feed-lists {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.feedlists li {
border-bottom: 1px solid #eee;
padding: 9px;
text-align: center;
}
#media only screen and (max-width: 600px) {
.kolumn {
flex: 0 0 100%;
}
}
<div class="wrap">
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
</div>
Here I added a wrap element with display: flex and flex-wrap: wrap to make sure elements wrap:
Then, each .kolumn gets a flex: 1 0 33.3333% property - which is shorthand for flex-grow: 1, flex-shrink: 0, flex-basis: 33.333% - flex-basis is essentially the flex equivalent to width.
Some really good reading on flex:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

HTML element scroll down until a specific value

Code:
/* -------------------------------------NAV & BANNER------------------------ */
#logo{
height: 60px;
width: 60px;
}
.nav-color{
transition: 0.5s;
background-color: rgba(0, 0, 0, 0.75);
}
.nav-null-color{
transition: 0.5s;
}
.banner{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
height: 100vh;
width: 100vw;
border-bottom: 1px solid #ff8000;
}
.title {
background-color: rgba(0,0,0, 0.3);
width: 50vw;
border-radius: 25px;
}
.shadow{
background-color: #ffffff;
opacity: 25%;
}
#large-text{
font-size: 60px;
}
/* --------------------------------About Us---------------------------------- */
.corporate{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 100vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
.blank{
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15px;
}
/* --------------------------------Worldwide---------------------------------- */
.worldwide{
background: #ffffff;
width: 81vw;
border-bottom: 1px solid #ff8000;
}
.map{
border-radius: 15px;
}
/* --------------------------------Careers Title---------------------------------- */
.careers{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
/* --------------------------------Contact Us---------------------------------- */
.contact{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
}
.btn-lg{
width: 335px;
}
/* --------------------------------Scroll Menu---------------------------------- */
.scroll-spy{
/* position: -webkit-sticky; */
position: sticky;
top: 2rem;
height: 10vh;
border-right: 1px solid #ebebeb;
}
/* -------------------------------------------Footer----------------------- */
.footer{
border-top: 1px solid #ff8000;
width: 100vw;
height: 60vh;
background-color: #acb7ba;
font-size: 12px;
}
#icon{
font-size: 25px;
}
#youtube{
height: 200px;
weight: 200px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/normalize.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style/style.css">
<title>Tets</title>
</head>
<body>
<!-- Nav Boostrap -->
<section class="position-absolute">
<ul class="nav nav-fill fixed-top nav-null-color" id="menu">
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Corporate</a>
</li>
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Used Machinery</a>
</li>
<li class="nav-item">
<img src="" id="logo" alt="logo">
</li>
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Services</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link text-white" href="#">Customer Area</a>
</li> -->
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Sign In/Register</a>
</li>
</ul>
</section>
<!-- About Us -->
<section id="about" class="corporate text-center">
<div class="screen-center">
<h1 class="text-dark">About us</h1>
<div class="row justify-content-center">
<div class="col-6 blank">
<h3>gsfgdfgdfgdg</h3>
<p>fsdfgsdgdsfgsdfgsdfg</p>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col-2 scroll-spy" id="">
<div class="d-flex flex-column ml-5 mt-5 spy-menu">
<h4>Corporate</h4>
<a class="nav-link text-dark underline" href="#top"> About Us</a>
<a class="nav-link text-dark underline" href="#worldwide">Worldwide</a>
<a class="nav-link text-dark underline" href="#careers">Careers Title</a>
<a class="nav-link text-dark underline" href="#contact">Contact Us</a>
</div>
<input type="text" id="prueba" value="">
<input type="text" id="prueba2" value="">
</div>
<div class="col-10">
<!-- Worlwide -->
<section id="worldwide" class="worldwide text-center">
<h1 class="mt-5 mb-5">Worldwide</h1>
<div class="container">
<div class="row justify-content-between">
<div class="col ml-5">
<ul class="list-group">
<li class="list-group-item active">dfgdfgdfgdfg</li>
<li class="list-group-item">dfgdfgdfg</li>
<li class="list-group-item">dfdfdgd</li>
<li class="list-group-item">dfgdf</li>
<li class="list-group-item">e-mail: jdfgdfgdfg</li>
<li class="list-group-item">Tel :dfgdfgdg‹</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">dfgdfgd</li>
<li class="list-group-item">Cdfgdfg</li>
<li class="list-group-item">2dfgdfgn</li>
<li class="list-group-item">dfgdfga</li>
<li class="list-group-item">SdfgdfgN</li>
<li class="list-group-item">e-mail: dfgdfgdfg</li>
<li class="list-group-item">dfgdgdfg</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">OdfgdfgK</li>
<li class="list-group-item">fgdfgdg
<li class="list-group-item">email: gffhfgfgh</li>
<li class="list-group-item">Tel: +fhghfg9</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">Ogfghfhhu </li>
<li class="list-group-item">udrgdrgdg vhghdgfdrdr</li>
<li class="list-group-item">rdgrgg</li>
<li class="list-group-item">email: rdgdrgds</li>
<li class="list-group-item">Tel.: drgdgrgdrg</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Careers Title -->
<section id="careers" class="careers">
<div class="screen-center">
<h1 class="text-dark">Careers Title</h1>
<div class="row justify-content-center">
<div class="col-6 blank">
<p>drgdrgdrgdrgdrgdg</p>
</div>
</div>
</div>
</section>
<!-- Contact Us -->
<section id="contact" class="contact">
<div class="screen-center">
<h1 class="text-dark">Contact Us</h1>
<div class="container">
<div class="row justify-content-center blank">
<div class="col-4">
<form>
<div class="form-group">
<input type="text" class="form-control mt-3" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Lastname">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Company">
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option>Albania</option>
<option>Angola</option>
<option>Argelia</option>
<option>Argentina</option>
<option>Armenia</option>
</select>
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Telephone">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Mobile">
</div>
</form>
</div>
<div class="col-4">
<form>
<div class="form-group">
<textarea class="form-control mt-3" id="exampleFormControlTextarea1" rows="8"></textarea>
</div>
<button type="button" class="btn btn-outline-warning btn-lg">Send</button>
</form>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Footer -->
<section class="footer">
<div class="container mt-3 mb-3">
<div class="row">
<div class="col">
<div class="d-flex">
<span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
<h4 class="ml-3">Company</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">About Us</a>
<a class="nav-link text-dark underline" href="#">Offices</a>
<a class="nav-link text-dark underline" href="#">News Media</a>
<a class="nav-link text-dark underline" href="#">Contact</a>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-cogs" aria-hidden="true"></i></span>
<h4 class="ml-3">drgdrgdy</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">drgdgdgy</a>
<a class="nav-link text-dark underline" href="#">Ordgdgrdrgr</a>
<a class="nav-link text-dark underline" href="#">rdgdrgdg</a>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-phone" aria-hidden="true"></i></span>
<h4 class="ml-3">Contact</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<select class="form-control form-control-sm">
<option>Worldwide Contact</option>
</select>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-gavel" aria-hidden="true"></i></span>
<h4 class="ml-3">Legal</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">Legal Information</a>
<a class="nav-link text-dark underline" href="#">COOKIES Policy</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<div class="d-flex">
<span><i class="fa fa-gavel" aria-hidden="true"></i></span>
<h4 class="ml-3">gggggg</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">rgdgdrg</a>
<a class="nav-link text-dark underline" href="#">fthgdrgd</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-phone" aria-hidden="true"></i></span>
<h4 class="ml-3">Language</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<select class="form-control form-control-sm">
<option>English</option>
<option>Spanish</option>
<option>German</option>
<option>Italian</option>
<option>Russian</option>
</select>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
<h4 class="ml-3">Account</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">drgdgdrgd</a>
<a class="nav-link text-dark underline" href="#">drgdg</a>
<a class="nav-link text-dark underline" href="#">drgdrgdgdg</a>
<a class="nav-link text-dark underline" href="#">drgdgdrgdrgs</a>
</li>
</ul>
</div>
<div class="col">
<img src="img/youtube.png" id="youtube" alt="youtube">
</div>
</div>
</div>
</section>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
$(window).scroll(function() {
if ($("#menu").offset().top > 56) {
$("#menu").addClass("nav-color");
} else {
$("#menu").removeClass("nav-color");
}
$('#prueba').val(window.scrollY);
if ($('.scroll-spy').offset().top > 2500) {
$('#prueba2').val(1);
$('.scroll-spy').css('position', 'relative');
$('.scroll-spy').css('top', '1800px');
} else {
$('#prueba2').val(2);
$('.scroll-spy').css('position', 'sticky');
$('.scroll-spy').css('top', '2rem');
}
});
</script>
</body>
</html>
What i'm trying to do is to fix the problem of the lateral menu that when you scroll down it superimpose the footer. I try to fix this with JQuery by changing the position property to relative when it overpass an especific value of the scroll, and that works correctly. I also wanted to give it back the sticky property when the scroll value is less than the limit one, but it dosen't work correctly. Do you know what I am missing? Thank you for your help.

You see, you are checking $('.scroll-spy').offset().top, and make $('.scroll-spy').css('top', '1800px'); after 2500px offset. So after that the offset of $('.scroll-spy') will always be 1800. Better to check the offset of something else, like window.scrollY.
<script>
$(window).scroll(function() {
if ($("#menu").offset().top > 56) {
$("#menu").addClass("nav-color");
} else {
$("#menu").removeClass("nav-color");
}
$('#prueba').val(window.scrollY);
if (window.scrollY > 2500) {
$('#prueba2').val(1);
$('.scroll-spy').css('position', 'relative');
$('.scroll-spy').css('top', '1800px');
} else {
$('#prueba2').val(2);
$('.scroll-spy').css('position', 'sticky');
$('.scroll-spy').css('top', '2rem');
}
});
</script>
UPDATED
But the best solution will be the one with no concert digits. Rewrites a script a bit. And in template added align-items-start in .scroll-spy parent
<div class="row align-items-start">
<div class="col-2 scroll-spy" id="">
and in CSS removed height from .scroll-spy. Please look the Snippet below.
$(window).scroll(function() {
if ($("#menu").offset().top > 56) {
$("#menu").addClass("nav-color");
} else {
$("#menu").removeClass("nav-color");
}
let scrollSpyHeight = $('.scroll-spy').outerHeight();
let footerOffsetTop = $('.footer').offset().top;
let windowTop = jQuery(window).scrollTop();
$('#prueba').val(window.scrollY);
if ($('.scroll-spy').offset().top > (footerOffsetTop-scrollSpyHeight)) {
$('#prueba2').val(1);
$('.scroll-spy').css('position', 'relative');
$('.scroll-spy').css('top', '1800px');
} else {
$('#prueba2').val(2);
$('.scroll-spy').css('position', 'sticky');
$('.scroll-spy').css('top', '2rem');
}
});
/* -------------------------------------NAV & BANNER------------------------ */
#logo{
height: 60px;
width: 60px;
}
.nav-color{
transition: 0.5s;
background-color: rgba(0, 0, 0, 0.75);
}
.nav-null-color{
transition: 0.5s;
}
.banner{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
height: 100vh;
width: 100vw;
border-bottom: 1px solid #ff8000;
}
.title {
background-color: rgba(0,0,0, 0.3);
width: 50vw;
border-radius: 25px;
}
.shadow{
background-color: #ffffff;
opacity: 25%;
}
#large-text{
font-size: 60px;
}
/* --------------------------------About Us---------------------------------- */
.corporate{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 100vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
.blank{
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15px;
}
/* --------------------------------Worldwide---------------------------------- */
.worldwide{
background: #ffffff;
width: 81vw;
border-bottom: 1px solid #ff8000;
}
.map{
border-radius: 15px;
}
/* --------------------------------Careers Title---------------------------------- */
.careers{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
/* --------------------------------Contact Us---------------------------------- */
.contact{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
}
.btn-lg{
width: 335px;
}
/* --------------------------------Scroll Menu---------------------------------- */
.scroll-spy{
/* position: -webkit-sticky; */
position: sticky;
top: 2rem;
border-right: 1px solid #ebebeb;
}
/* -------------------------------------------Footer----------------------- */
.footer{
border-top: 1px solid #ff8000;
width: 100vw;
height: 60vh;
background-color: #acb7ba;
font-size: 12px;
}
#icon{
font-size: 25px;
}
#youtube{
height: 200px;
weight: 200px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/normalize.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style/style.css">
<title>Tets</title>
</head>
<body>
<!-- Nav Boostrap -->
<section class="position-absolute">
<ul class="nav nav-fill fixed-top nav-null-color" id="menu">
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Corporate</a>
</li>
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Used Machinery</a>
</li>
<li class="nav-item">
<img src="" id="logo" alt="logo">
</li>
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Services</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link text-white" href="#">Customer Area</a>
</li> -->
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Sign In/Register</a>
</li>
</ul>
</section>
<!-- About Us -->
<section id="about" class="corporate text-center">
<div class="screen-center">
<h1 class="text-dark">About us</h1>
<div class="row justify-content-center">
<div class="col-6 blank">
<h3>gsfgdfgdfgdg</h3>
<p>fsdfgsdgdsfgsdfgsdfg</p>
</div>
</div>
</div>
</section>
<div class="row align-items-start">
<div class="col-2 scroll-spy" id="">
<div class="d-flex flex-column ml-5 mt-5 spy-menu">
<h4>Corporate</h4>
<a class="nav-link text-dark underline" href="#top"> About Us</a>
<a class="nav-link text-dark underline" href="#worldwide">Worldwide</a>
<a class="nav-link text-dark underline" href="#careers">Careers Title</a>
<a class="nav-link text-dark underline" href="#contact">Contact Us</a>
</div>
<input type="text" id="prueba" value="">
<input type="text" id="prueba2" value="">
</div>
<div class="col-10">
<!-- Worlwide -->
<section id="worldwide" class="worldwide text-center">
<h1 class="mt-5 mb-5">Worldwide</h1>
<div class="container">
<div class="row justify-content-between">
<div class="col ml-5">
<ul class="list-group">
<li class="list-group-item active">dfgdfgdfgdfg</li>
<li class="list-group-item">dfgdfgdfg</li>
<li class="list-group-item">dfdfdgd</li>
<li class="list-group-item">dfgdf</li>
<li class="list-group-item">e-mail: jdfgdfgdfg</li>
<li class="list-group-item">Tel :dfgdfgdg‹</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">dfgdfgd</li>
<li class="list-group-item">Cdfgdfg</li>
<li class="list-group-item">2dfgdfgn</li>
<li class="list-group-item">dfgdfga</li>
<li class="list-group-item">SdfgdfgN</li>
<li class="list-group-item">e-mail: dfgdfgdfg</li>
<li class="list-group-item">dfgdgdfg</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">OdfgdfgK</li>
<li class="list-group-item">fgdfgdg
<li class="list-group-item">email: gffhfgfgh</li>
<li class="list-group-item">Tel: +fhghfg9</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">Ogfghfhhu </li>
<li class="list-group-item">udrgdrgdg vhghdgfdrdr</li>
<li class="list-group-item">rdgrgg</li>
<li class="list-group-item">email: rdgdrgds</li>
<li class="list-group-item">Tel.: drgdgrgdrg</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Careers Title -->
<section id="careers" class="careers">
<div class="screen-center">
<h1 class="text-dark">Careers Title</h1>
<div class="row justify-content-center">
<div class="col-6 blank">
<p>drgdrgdrgdrgdrgdg</p>
</div>
</div>
</div>
</section>
<!-- Contact Us -->
<section id="contact" class="contact">
<div class="screen-center">
<h1 class="text-dark">Contact Us</h1>
<div class="container">
<div class="row justify-content-center blank">
<div class="col-4">
<form>
<div class="form-group">
<input type="text" class="form-control mt-3" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Lastname">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Company">
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option>Albania</option>
<option>Angola</option>
<option>Argelia</option>
<option>Argentina</option>
<option>Armenia</option>
</select>
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Telephone">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Mobile">
</div>
</form>
</div>
<div class="col-4">
<form>
<div class="form-group">
<textarea class="form-control mt-3" id="exampleFormControlTextarea1" rows="8"></textarea>
</div>
<button type="button" class="btn btn-outline-warning btn-lg">Send</button>
</form>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Footer -->
<section class="footer">
<div class="container mt-3 mb-3">
<div class="row">
<div class="col">
<div class="d-flex">
<span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
<h4 class="ml-3">Company</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">About Us</a>
<a class="nav-link text-dark underline" href="#">Offices</a>
<a class="nav-link text-dark underline" href="#">News Media</a>
<a class="nav-link text-dark underline" href="#">Contact</a>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-cogs" aria-hidden="true"></i></span>
<h4 class="ml-3">drgdrgdy</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">drgdgdgy</a>
<a class="nav-link text-dark underline" href="#">Ordgdgrdrgr</a>
<a class="nav-link text-dark underline" href="#">rdgdrgdg</a>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-phone" aria-hidden="true"></i></span>
<h4 class="ml-3">Contact</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<select class="form-control form-control-sm">
<option>Worldwide Contact</option>
</select>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-gavel" aria-hidden="true"></i></span>
<h4 class="ml-3">Legal</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">Legal Information</a>
<a class="nav-link text-dark underline" href="#">COOKIES Policy</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<div class="d-flex">
<span><i class="fa fa-gavel" aria-hidden="true"></i></span>
<h4 class="ml-3">gggggg</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">rgdgdrg</a>
<a class="nav-link text-dark underline" href="#">fthgdrgd</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-phone" aria-hidden="true"></i></span>
<h4 class="ml-3">Language</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<select class="form-control form-control-sm">
<option>English</option>
<option>Spanish</option>
<option>German</option>
<option>Italian</option>
<option>Russian</option>
</select>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
<h4 class="ml-3">Account</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">drgdgdrgd</a>
<a class="nav-link text-dark underline" href="#">drgdg</a>
<a class="nav-link text-dark underline" href="#">drgdrgdgdg</a>
<a class="nav-link text-dark underline" href="#">drgdgdrgdrgs</a>
</li>
</ul>
</div>
<div class="col">
<img src="img/youtube.png" id="youtube" alt="youtube">
</div>
</div>
</div>
</section>
</body>
</html>