wordpress header file will not connect to my index file - wordpress-theming

I am attempting to create an wordpress theme from scratch but not able get the header or footer files to show.I'm not sure were to go from here any help would be appreciated
Here is the code on my index.php file
<?php get_header(); ?>
<div class="row">
<div class="col-sm-8 blog-main">
<blockquote>
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
</div><!-- /.blog-post -->
<div class="blog-post">
<h2 class="blog-post-title">Another blog post</h2>
<p class="blog-post-meta">December 23, 2013 by <a `enter code here`href="#">Jacob</a></p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div><!-- /.blog-post -->
<div class="blog-post">
<h2 class="blog-post-title">New feature</h2>
<p class="blog-post-meta">December 14, 2013 by <a `enter code here`href="#">Chris</a></p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
</div><!-- /.blog-post -->
<nav>
<ul class="pager">
<li>Previous</li>
<li>Next</li>
</ul>
</nav>
</div><!-- /.blog-main -->
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<li>March 2014</li>
<li>February 2014</li>
<li>January 2014</li>
<li>December 2013</li>
<li>November 2013</li>
<li>October 2013</li>
<li>September 2013</li>
<li>August 2013</li>
<li>July 2013</li>
<li>June 2013</li>
<li>May 2013</li>
<li>April 2013</li>
</ol>
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li>GitHub</li>
<li>Twitter</li>
<li>Facebook</li>
</ol>
</div>
</div><!-- /.blog-sidebar -->
</div><!-- /.row -->
</div><!-- /.container -->
And here is my header file.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="<?php bloginfo('description') ?>">
<meta name="author" content="<?php bloginfo ('author') ?>">
<title><?php bloginfo('name'); ?> | <?php is_front_page() ? `enter code here`bloginfo('description') : wp_title(); ?><?php wp_title(); ?></title>
<!-- Custom styles for this template -->
<link href="<?php bloginfo('template_url'); ?>/css/bootstrap.css" rel="stylesheet">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">
<link href="<?php bloginfo('template_url'); ?>/css/font-awesome.css" rel="stylesheet">
<?php wp_head(); ?>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
<div class="blog-header">
<h1 class="blog-title"><?php bkoginfo('name'); ?></h1>
<p class="lead blog-description"><?php bloginfo('description') ?></p>
</div>


your header or footer code must be include in your wordpress header.php or footer.php
or you have a template for header then use get_template_part ('your/directory').
Follow this link https://codex.wordpress.org/Designing_Headers
it might be helpful for you

Related

Sticky header & footer not that sticky

I have a basic bootstrap 4, flex page which its navigation and footer should be sticky but its not and I cant figure out why:
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
</style>
</head>
<body class="d-flex flex-column">
<header>
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will
have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>
I was on the impression that .sticky-top class would sort out the situation for the top menu but cant figure out exactly what is causing this issue. How can I make sure that in below simple page both top menu bar and footer are sticky?

For the sticky header, you add the class to header instead of nav as below:
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
</style>
</head>
<body class="d-flex flex-column">
<header class="sticky-top ">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will
have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>
There is no sticky-bottom class but there are some tutorials to set a sticky footer, like this

Another option can be just add position: sticky; bottom: 0 to <footer> tag
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
#sticky-footer {
position: sticky;
bottom: 0;
}
</style>
</head>
<body class="d-flex flex-column">
<header class="sticky-top">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will
have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>

Using materialize, wanting to eliminate white space margin on mobile-only

enter image description hereI am using materialize framework for building my first basic site, however on mobile only view, the margins are quite wide and i'd like them to take up full screen, so as to make reading better and make the middle card stretch less.
I have also attached a picture now, as you can see the padding and margins are quite wide.
https://codepen.io/jehc10/pen/LKqRRQ
.brand-logo {
margin-left: 20px;
}
.card {
margin-top: 15px;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
font-family: 'ABeeZee', sans-serif;
background: #fad1df;
}
main {
flex: 1 0 auto;
}
.custom {
margin-right: 100px;
margin-left: 100px;
}
.pagination {
margin-top: 25px;
display: flex;
align-items: center;
justify-content: center;
}
table {
width: 600px;
margin: auto;
border: 2px solid #f1749e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My materialize website</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="materialize.css">
<link href="https://fonts.googleapis.com/css?family=ABeeZee&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<main>
<nav>
<div class="nav-wrapper pink lighten-3">
Website
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
</div>
</nav>
<!-- Cards -->
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Example 1</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
Request a quote
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Example 2</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
Request a quote
</div>
</div>
</div>
</div>
<!-- Middle card -->
<div class="mobile-margin visible-xs">
<div class="lg12">
<div class="card custom light-blue lighten-5">
<div class="card-content black-text">
<span class="card-title">Example 1</span>
<p>
Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id
risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt
sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget,
consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum
semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium.
In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper
suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue.
Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis
ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque
vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna.
</p>
</div>
</div>
</div>
<!-- Table -->
<table class="responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alvin</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
<!-- Hover button -->
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
<!-- Pagination -->
<ul class="pagination">
<li class="disabled"><i class="material-icons">chevron_left</i></li>
<li class="active">1</li>
<li class="waves-effect">2</li>
<li class="waves-effect">3</li>
<li class="waves-effect">4</li>
<li class="waves-effect">5</li>
<li class="waves-effect"><i class="material-icons">chevron_right</i></li>
</ul>
</main>
<!-- Footer -->
<footer class="page-footer pink lighten-3">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2019 Jesse
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>

Make a class icon (phone) clickable

I am currently using some font-awesome to embed some image like resources into my site.
I would like to create a hyperlinked icon that can be clicked to prompt making a call. I currently have the icon floated top right but I am unable to make this usable. I only want the icon to be the hyperlink and do not want any text surrounding this. I want to use the font awesome icon instead of an image so that i can be scaled up if the user zooms in.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DB Plumbing | About</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html9shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content = "Darran Brady Plumbing">
<meta name="keywords" content = "Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name = "author" content ="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
<li class="icon">
☰
</nav>
</div>
</header>
<div class="container">
<div class="dark">
<div class="callus"><i class="fa fa-phone fa-3x" ></i> </div>
<h2>Our Story | Our Family</h2>
</div>
</div>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">Our Journey</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna. Nam eget eros non orci consectetur congue at ac augue. Proin eget arcu in enim feugiat ultricies. Curabitur maximus metus nec metus pretium viverra at et orci. Integer hendrerit ante ut placerat cursus.
</p>
<p class="dark">
Aliquam eget pharetra diam. Nulla placerat lorem at turpis tempor, vel ultrices dui tincidunt. Proin quis egestas lorem. Mauris vehicula lectus odio, sit amet dictum justo feugiat a. Praesent id dictum lacus. Sed ullamcorper id erat ut dictum. Fusce porttitor lorem sapien, in aliquet sapien convallis et. Donec nec mauris nulla. Curabitur cursus semper odio, et hendrerit ante. Nunc at cursus ante. Maecenas gravida ligula ut efficitur suscipit. Nulla id turpis varius, pretium nunc sed, fermentum sem. Sed lacinia nunc non interdum pellentesque.
</p>
</article>
<aside id="sidebar">
<div class="dark">
<h3>What We Do</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna</p>
</div>
</aside>
</div>
</section>
<footer>
<p>Darren Brady Plumbing Copyright © 2017</p>
</footer>
</body>
</html>

You need to wrap the <i> tag in a hyperlink <a> tag. All of the child elements of the <a> will take you to the hyperlink on click.
<div class="callus"><i class="fa fa-phone fa-3x" ></i></div>

Using Fontawsome to show the icone and using href="tel:911" to creat the phone call see code snippet
.callus {
position:fixed;
right:10px;
top:0px;
width:30px;
height:30px;
cursor:pointer;
}
.callus i {
color:green;
transition:all 1s ease-out
}
.callus:hover i {
transform:scale(1.3);
opacity:0.8;
transition:all 1s ease-out
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
<li class="icon">
☰</li></ul>
</nav>
</div>
</header>
<div class="container">
<div class="dark">
<div class="callus"><i class="fa fa-phone fa-3x" ></i> </div>
<h2>Our Story | Our Family</h2>
</div>
</div>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">Our Journey</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna. Nam eget eros non orci consectetur congue at ac augue. Proin eget arcu in enim feugiat ultricies. Curabitur maximus metus nec metus pretium viverra at et orci. Integer hendrerit ante ut placerat cursus.
</p>
<p class="dark">
Aliquam eget pharetra diam. Nulla placerat lorem at turpis tempor, vel ultrices dui tincidunt. Proin quis egestas lorem. Mauris vehicula lectus odio, sit amet dictum justo feugiat a. Praesent id dictum lacus. Sed ullamcorper id erat ut dictum. Fusce porttitor lorem sapien, in aliquet sapien convallis et. Donec nec mauris nulla. Curabitur cursus semper odio, et hendrerit ante. Nunc at cursus ante. Maecenas gravida ligula ut efficitur suscipit. Nulla id turpis varius, pretium nunc sed, fermentum sem. Sed lacinia nunc non interdum pellentesque.
</p>
</article>
<aside id="sidebar">
<div class="dark">
<h3>What We Do</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna</p>
</div>
</aside>
</div>
</section>

How do I center my navigation links and image in my navigation?

header[role="banner"] {
#logo-main {
display: block;
margin: 20px auto;
}
}
#navbar-primary.navbar-default {
background: transparent;
border: none;
.navbar-nav {
width: 100%;
text-align: center;
> li {
display: inline-block;
float: none;
> a {
padding-left: 30px;
padding-right: 30px;
}
}
}
}
.collapse .navbar-collapse{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Blog Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/blog.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header role="banner">
<img id="logo-main" src="https://s3-us-west-
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse" >
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li ><a href="#" >Link</a></li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2014 by Mark</p>
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
<hr>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<h2>Heading</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<pre><code>Example code block</code></pre>
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
<ol>
<li>Vestibulum id ligula porta felis euismod semper.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ol>
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
</div><!-- /.blog-post -->
</body>
</html>
I need help centering the navigation links and the image "logo thing" at the top. I have tried several different things and I cannot find the solution. I'm not sure if I am doing something wrong I have been debugging for hours trying to figure it out. If someone could help me I would be very grateful :)

On around line 23 in your css change:
header[role="banner"] {
#logo-main {
display: block;
margin: 20px auto;
}
}
to:
header[role="banner"] {
display: block;
margin: 20px auto;
text-align:center;
}
or if you still want #logo-main change css to:
#logo-main {
display: block;
margin: 20px auto;
text-align:center;
}
and your html around line 67 change
<header role="banner">
to:
<header id="logo-main">

code stopped working after migrating from codepen

So, this is the weirdest thing ever. I was working on a project on codepen(of course in codepen is a lot easier).
How do you migrate from codepen? Well, you pretty much just add the basic html tags and links so you can communicate between the css and js.
But although I'm doing all of that correctly(also adding the required libraries), my code does not work correctly.
What my code should be doing:
- Allow the user to drag the windows
But it's not!
Even more, all of the Jquery and Jquery UI functions are not working correctly. When I looked at the console, I found the following error "ReferenceError: $ is not defined".
Alright, now the code I'm using is here: http://codepen.io/julian-a-avar/pen/xbaRJz
And as expected everything is the same but the HTML file:
<!doctype html>
<html>
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- JS -->
<script src="script.js"></script>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="taskbar">
<div id="start_menu"></div>
<div id="menu">
<div class="app app1">W1</div>
<div class="app app2">W2</div>
</div>
</div>
<div class="window w1">
<div class="head">
<div class="title">Window 1</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<div class="window w2">
<div class="head">
<div class="title">Window 2</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
</body>
</html>
Yes, the file name are correct, and I'm using C9.io
Please help out, maybe I'm missing something.

ReferenceError: $ is not defined
I figured that it happened in your script.js where you implement the drag and drop functions.
So fixing the order of the scripts might fix the issue.
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<!-- JS -->
<script src="script.js"></script>
</head>

You included your script before jQuery, so $ doesn't exist.
Order matters.

You should add your script after you have loaded the jquery libraries.
It is also good practice to load scripts at the end of your file, just before </body>.
<!doctype html>
<html>
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- JS -->
<script src="script.js"></script>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="taskbar">
<div id="start_menu"></div>
<div id="menu">
<div class="app app1">W1</div>
<div class="app app2">W2</div>
</div>
</div>
<div class="window w1">
<div class="head">
<div class="title">Window 1</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<div class="window w2">
<div class="head">
<div class="title">Window 2</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<!-- JS -->
<script src="script.js"></script>
</body>
</html>