How do I position an image on each side of a header? - html

I'm trying to add a picture of a tree on each side of my header, however I cannot figure out how to position the images correctly to where they are both above my navigation bar and positioned to the left and right of my header.
This jsfiddle shows it a bit better than the snippet.
https://jsfiddle.net/1qghboyh/
* {
margin: 0px;
padding: 0px;
}
header {
padding: 1em;
color: white;
background-color: #323241;
clear: left;
text-align: center;
}
footer {
background-color: #339966;
-webkit-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
-moz-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
padding: 1em;
color: white;
background-color: #323241;
clear: left;
text-align: center;
}
.initials {
float: left;
opacity: .25;
}
.tree1 {
float: left;
width: 100px;
height: 100px;
}
.tree2 {
float: right;
width: 100px;
height: 100px;
}
.navigation-bar {
-webkit-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
-moz-box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
box-shadow: -1px 1px 15px 3px rgba(31,31,31,1);
height: 3.2em;
background: #339966;
text-align: center;
border-top: 2px solid;
border-bottom: 2px solid;
}
.navigation-bar ul {
display: inline-block;
list-style-type: none;
}
.navigation-bar li {
display: inline;
}
.navigation-bar li a {
color: white;
padding: 0px 30px;
margin: 1em 0 0 -2px;
text-decoration: none;
float: left;
height: 1.2em;
line-height: 1.2em;
}
.navigation-bar li a.active{
color: #111;
}
.navigation-bar li a:hover, a:focus {
color: #111;
}
.columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
.div1 {
width: 100%;
padding: 10px;
border-right: 2px solid;
border-left: 2px solid;
margin: 0;
background-color: white;
}
<!DOCTYPE html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<head>
<link rel="stylesheet" href="settings.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #323241">
<header>
<div class="initials">#2 - C.C.</div>
<img src="tree.jpg" class="tree1">
<h1>Landscaping Company</h1>
<img src="tree.jpg" class="tree2">
</header>
<div class="navigation-bar">
<div id="navigation-container">
<ul>
<li><a class="active" href="home.html">Home</a></li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<br>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="div1">
<div class="columns">
<p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981.
Our core values:
Bring a positive attitude with you each and every day
Work hard, pitch in, be helpful and productive
Be fair and respectful with all people in all encounters</p>
<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.
Our mission is to unite people in positive relationships to improve lives.
This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day. If we are not improving your life then we are not living up to our mission.
Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas:
Residential Landscape Maintenance
Landscape Design/Installation
Plant Health Care</p>
<p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p>
<p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981.
Our core values:
Bring a positive attitude with you each and every day
Work hard, pitch in, be helpful and productive
Be fair and respectful with all people in all encounters</p>
<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.
Our mission is to unite people in positive relationships to improve lives.
This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day. If we are not improving your life then we are not living up to our mission.
Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas:
Residential Landscape Maintenance
Landscape Design/Installation
Plant Health Care</p>
<p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p>
</div>
</div>
</div>
<br>
<footer>Copyright © Landscaping Company</footer>
</body>
</html>


Have you tried putting the img tags within the h1 tag and remove the floats from the images?
<h1><img src=...>Landscaping Company<img src=...></h1>
If you really want to use floats, then I've found that specifying the right float first in the HTML usually produces the desired result.
<img src="tree.jpg" class="tree2">
<img src="tree.jpg" class="tree1">
<h1>Landscaping Company</h1>


As the tree is not actually "content" and more a decoration I would set it as a background image using CSS. Any screen readers etc won't be confused by a meaningless image tag with no alt attribute.
h1::before, h1::after
{
content:'';
background-image: url(http://placekitten.com/g/100/100); /*use tree here*/
width:100px;
height: 100px;
display:inline-block;
}
h1::before
{
float:left;
}
h1::after
{
float:right;
clear:right;
}
h1
{
text-align: center;
height:100px;
line-height:100px;
}
<h1>Some Content</h1>


For one outcome you could use:
<header>
<div class="initials">#2 - C.C.</div>
<div style="display: inline-block;float: left;">
<img src="tree.jpg" class="tree1">
</div>
<div style="display: inline-block;float: right;">
<img src="tree.jpg" class="tree2">
</div>
<h1 style="margin: .67em;">Landscaping Company</h1>
</header>
Corrections and explanations:
Your images were just plainly positioned inside the <header> container. That really limits what you can actually do with them, so I recommend you to always wrap them up a container. Moved them to their respective container.
After moving the images to their container, I cleared the block level behavior of the <div>'s by setting them to have a display: inline-block. Then I transferred the float properties to each of them respectively.
The <h1> tag has two CSS properties comming from bootstrap.css that override normalize.css setting for the margins. I modified it to be .67ems again, and the images fitted just perfectly along with the header.
The second image was positioned below the <h1> tag, so it was being pushed down by the header, because it has a block-level behavior. Be careful with the layout of your elements to avoid these kind of problems. Just FYI; (extracted from MDN Re; Block-level elements):
Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes.
Now, if what you actually want is this:
Modify your code to be like this instead:
<header>
<div class="initials">#2 - C.C.</div>
<div id="header-imgs">
<div>
<img src="tree.jpg" class="tree1">
</div>
<h1>Landscaping Company</h1>
<div>
<img src="tree.jpg" class="tree2">
</div>
</div>
</header>
Remove the floats from the images, and add the following CSS:
div#header-imgs, div#header-imgs > h1, div#header-imgs, div#header-imgs > div {
display: inline-block;
}
This second form works because of the following:
You are wrapping all elements in a single container, which have them go in the correct order in the DOM Flow (img 1 goes before the header, the header before img 2 and you can guess the last one).
Removing the floats will return the images to the DOM Flow. Also just FYI (again), if the floated elements are the only child of their parent containers, then this will collapse said parent. This leads to horrible headaches if you ever have to check for broken layout here that is screwing up a whole project (say, HTML designed letters).
The display: inline-block will have all three elements stacked at the same level, and they will keep the block behavior that lets you do marvels with them (e.g. top-bottom margins).


Adding display:inline attribute to the header tag will give you the expected,try This
h1
{
display : inline;
}

Related

image align left without affecting next div

I'm trying to make an informative website about the colosseum with buttons to show/hide text. I put some images with align=left so the information is next to it, but the buttons after the images are being re-aligned to. Here is what it currently looks like:
image
Here is some of the html:
<div>
<div class="buttons">
<div class="murmillo" onclick="changeGladiator('Murmillo')">
Murmillo
</div>
<div class="retiarus" onclick="changeGladiator('Retiarus')">
Retiarus
</div>
<div class="secutor" onclick="changeGladiator('Secutor')">
Secutor
</div>
</div>
<span id="gladiatorTitle"></span>:
<div id="gladiatorDescriptions">
<ul id="murmillo">
<p>
<img align="left" src="images/Murmillo.jpg" width="245px" />
A murmillo typically wears a metal helmet with a stylized fish on the crest, a rectangular shield (scutum),
and a short sword (gladius). The armor worn by a murmillo is designed to protect the head, torso, and legs,
and it is made of metal or leather. The murmillo is one of the most popular types of gladiators in ancient
Rome, and they are often pitted against other types of gladiators, such as the retiarius or secutor.
</p>
</ul>
<ul id="retiarus">
<p>
<img align="left" src="images/Retiarius.jpg" width="245px" />
A retiarius fights using a net, trident, and a small sword called a pugio. Retiarii are often pitted against
secutores, who are armed with a sword and a shield. The retiarius is lightly armed and wears little armor,
so they rely on their speed and agility to evade their opponents. Retiarii are also known for their
distinctive outfits, which include a tunic, a loincloth, and a fish-shaped helmet.
</p>
</ul>
<ul id="secutor">
<p>
<img align="left" src="images/secutor.jpg" width="245px" />
Secutors are heavily armed and trained to fight other gladiators, typically a murmillo or a retiarius. Their
armor and weaponry are designed to mimic those of a soldier, and they are known for their strong, muscular
build. They are also characterized by their helmet, which has a narrow opening that limits their vision and
makes them more reliant on their other senses. The secutor's helmet also has a crest that is shaped like a
fish, which gives them their name (secutor is Latin for "pursuer").
</p>
</ul>
</div>
</div>
<div>
<div class="buttons">
<div class="snacks" onclick="changeOther('Snacks')">
Snacks
</div>
<div class="celebrities" onclick="changeOther('Celebrities')">
Celebrities
</div>
<div class="other events" onclick="changeOther('Other Events')">
Other Events
</div>
</div>
<span id="otherTitle"></span>:
<div id="otherDescriptions">
<ul id="snacks">
<li>Olives</li>
<li> Fruits:
<ul>
<li>Figs</li>
<li>Grapes</li>
<li>Cherries</li>
<li>Blackberries</li>
<li>Peaches</li>
<li>Plums</li>
<li>Melons</li>
</ul>
</li>
<li> Nuts:
<ul>
<li>Walnuts</li>
<li>Hazelnuts</li>
<li>Pine Nuts</li>
</ul>
</li>
</ul>
<ul id="celebrities">
<li>Built during the reign of the Flavian emperors</li>
<li>In construction under Emperor Vespasian's Reign</li>
<li>Emperor Titus celebrated the opening day with 100 days of glagiatorial games</li>
<li>Emperor Commodus performed in arena</li>
</ul>
<ul id="other events">
<li>Dramas</li>
<li>Reenactments</li>
<li>Performances</li>
</ul>
</div>
</div>
And the css:
html, body {
height: 100%;
width: 100%;
margin: 0px;
overflow: hidden;
overflow-y: scroll;
background: linear-gradient(125deg, #FFCA00 0%, #FFA000 100%);
}
.title {
width: 100%;
background-color: #000000;
border-radius: 0 0 70px 70px;
color: white;
font-size: 5rem;
text-align: center;
}
.body {
margin: 50px 10%;
font-family: Arial, Helvetica, sans-serif;
}
.buttons {
display: flex;
position: relative;
right: 15px;
column-gap: 31px;
padding-bottom: 27px;
}
.buttons>* {
cursor: pointer;
background: black;
width: auto;
display: inline;
border-radius: 50px 50px 50px 50px;
padding: 10px;
color: white;
}
img:not(.title>img){
padding-right: 25px;
border-radius: 20px 20px 20px 20px;
}
Any idea on what I could do?

Wrap your divs somehow like this:
<div class="container">
<div class="image-wrapper">
<img src="" alt="">
</div>
<div class="text-wrapper">
<p>Upper description text</p>
<div class="buttons-description-wrapper">
<!-- buttons with the description they are supposed to show -->
</div>
</div>
</div>
And then the CSS would be something like this
.container {
display:flex;
flex-direction:column;
/*use those for general layout*/
/*use the following for some better positioning*/
justify-content:center; /*to center it horizontaly*/
align-items:flex-start /*to align items to the top within this container*/
}
/*setting height properties on wrappers might be needed, depends on how much text are goiing to be displaying*/
Try this and let me know.

How do we not apply border for the last element in a container

I'm trying to apply border for all the aside articles except the last one. Here is my code:
<aside class="aside-container">
<div>
<h2 class="aside-header">Recommended articles</h2>
</div>
<div class="aside-article">
<!--https://in.pinterest.com/pin/435934438902596641/-->
<img src="images/Resort.jpg" alt="Picture of a pool side view in a resort" height="200" width="200" />
<h3>
Famous resorts to stay in Coorg
</h3>
</div>
<div class="aside-article">
<!--https://in.pinterest.com/pin/AXklVB0pJT_-hAH3OJd413VeUs8U6W_ovrbYWPiertoMr4VtOrekRPE/-->
<img src="images/TeaEstate.jpg" alt="Picture of a tea plantation with a text" height="200" width="200" />
<h3>
Must visit tea estates in Coorg
</h3>
</div>
</aside>
I have tried the following CSS methods:
.aside-container .aside-article:nth-child(1){
border-bottom: 2px solid black;
}
.aside-container .aside-article:nth-of-type(1){
border-bottom: 2px solid black;
}
.aside-container .aside-article:first-child{
border-bottom: 2px solid black;
}
It works only when I give:
.aside-container .aside-article:nth-child(2){
border-bottom: 2px solid black;
}
.aside-container .aside-article:nth-of-type(2){
border-bottom: 2px solid black;
}
But it should work only for 1 instead of 2 right? Can someone please explain the logic behind this?

You can use a combination of :not() and :last-child to style all .aside-articles except the last one.
.aside-article:not(:last-child) {
border-bottom: 2px solid green;
margin-bottom: 1rem;
}
<aside class="aside-container">
<div>
<h2 class="aside-header">Recommended articles</h2>
</div>
<div class="aside-article">
<!--https://in.pinterest.com/pin/435934438902596641/-->
<img src="images/Resort.jpg" alt="Picture of a pool side view in a resort" height="200" width="200" />
<h3>
<a href="https://www.thrillophilia.com/luxury-resorts-in-coorg">Famous resorts to stay in Coorg</a
>
</h3>
</div>
<div class="aside-article">
<!--https://in.pinterest.com/pin/AXklVB0pJT_-hAH3OJd413VeUs8U6W_ovrbYWPiertoMr4VtOrekRPE/-->
<img
src="images/TeaEstate.jpg"
alt="Picture of a tea plantation with a text"
height="200"
width="200"
/>
<h3>
<a
href="https://www.holidify.com/hotel-collections/tea-estates-in-coorg"
>Must visit tea estates in Coorg</a
>
</h3>
</div>
</aside>

As your layout with one exception: first <div> is replaced by <header> which doesn't affect anything. :last-of-type or :last-child is what you need, the former being a safer choice.
aside .aside-article {
border-bottom: 3px ridge tomato;
}
aside .aside-article:last-of-type {
border: 0;
}
Read further for details.
aside .aside-article {
border-bottom: 3px ridge tomato;
}
aside .aside-article:last-of-type {
border: 0;
}
<aside class="aside-container">
<header>
<h2 class="aside-header">Recommended articles</h2>
</header>
<div class="aside-article">
<!--https://in.pinterest.com/pin/435934438902596641/-->
<img src="images/Resort.jpg" alt="Picture of a pool side view in a resort" height="200" width="200" />
<h3>
<a href="https://www.thrillophilia.com/luxury-resorts-in-coorg">Famous resorts to stay in Coorg</a
>
</h3>
</div>
<div class="aside-article">
<!--https://in.pinterest.com/pin/AXklVB0pJT_-hAH3OJd413VeUs8U6W_ovrbYWPiertoMr4VtOrekRPE/-->
<img
src="images/TeaEstate.jpg"
alt="Picture of a tea plantation with a text"
height="200"
width="200"
/>
<h3>
<a
href="https://www.holidify.com/hotel-collections/tea-estates-in-coorg"
>Must visit tea estates in Coorg</a
>
</h3>
</div>
</aside>
The layout resembles a navbar. The example below is a semantic layout.
The semantic elements are a <nav> which replaces <aside> and a <header> which replaces a <div>. I used to think <aside> was a sidebar but it actually can be a sidebar or in the flow of content as well. It should have content indirectly related to the main content. Arguably a group of links to other related articles could be considered <aside> content, but the <nav> is more appropriate for links that take the user somewhere.
The non-semantic HTML is semantic as a whole since they logically provide the structure and functionality of a navbar: <ul>, <li>, and <a>. Using <h2> and <h3> on non-palpable content is questionable but it does look more organized.
Each <img> and <h3> is wrapped in a <a> since users (including myself if I trust a site) click images if they look like they are associated with the text of a link.
No classes are assigned only type selectors are used to clearly illustrate the use of the :nth-of-type pseudo-class.
nav li:last-of-type {
border-bottom: 0;
}
That applies to all <li> that are the last of it's sibling <li> and are descendants of a <nav>.
If you still prefer to use <aside>, replace the first <div> with <header> and the rest of the <div> with something less generic like <article>. In the CSS replace nav with aside and li with article, then remove ul and replace it with:
aside {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
The most imporatant thing I hope you get out of this is to avoid using <div> (and <span>) as much as possible because if you expand your HTML in the future, it can become a mass of unreadable markup bloated with divs having multiple hyphenated classes.
Note: Other than the style applied to the <li> directly, it is suggested styles since the unmentioned CSS and HTML isn't included.
nav {
text-align: center;
}
ul {
list-style: none;
padding-left: 0;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
nav li {
margin-bottom: 8px;
border-bottom: 3px ridge tomato;
}
nav li:last-of-type {
border-bottom: 0;
}
nav li a {
display: block;
}
<nav>
<header>
<h2>Nav Header</h2>
</header>
<ul>
<li>
<a href="https:/example.com">
<img src="https://via.placeholder.com/200">
<h3>First LI Title</h3>
</a>
</li>
<li>
<a href="https:/example.com">
<img src="https://via.placeholder.com/200">
<h3>LI Title 2</h3>
</a>
</li>
<li>
<a href="https:/example.com">
<img src="https://via.placeholder.com/200">
<h3>LI Title 3</h3>
</a>
</li>
<li>
<a href="https:/example.com">
<img src="https://via.placeholder.com/200">
<h3>LI Title 4</h3>
</a>
</li>
<li>
<a href="https:/example.com">
<img src="https://via.placeholder.com/200">
<h3>Last LI Title</h3>
</a>
</li>
</ul>
</nav>

Class no-gutter/corresponding CSS not removing gap between columns

I added some images to two columns in a single row using Bootstrap 4. There's a gap between the first and second column, causing unwanted uneven spacing between my images (as you can see below). I would like the spacing to be the same between the second and third image as between the first and second (and third and fourth).
I tried following the directions on the Bootstrap 4 documentation for the no-gutters class, adding it to the row div as well as the following CSS, which didn't do anything (maybe I'm supposed to change something?):
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
I also tried (as suggested elsewhere) this, which also did nothing:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
Additionally, here's the relevant HTML:
<div class="card">
<div class="card-header">
<h3 class="text-center">Works</h3>
</div>
<div class="card-body">
<!-- Class no-gutters removes gutters (gaps) between column content -->
<div class="row text-center no-gutters">
<!-- Using two col classes; Bootstrap automatically creates two equal-width columns for all devices -->
<div class="col">
<img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">
<img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
</div>
<div class="col">
<img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">
<img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
</div>
</div>
</div>
</div>
View CodePen for full code.

The no-gutters was necessary but the issue now is with alignment. You are using text-center which make the image centred in each col. A solution is to put all the image in the same col
<div class="row text-center no-gutters">
<div class="col">
<img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">
<img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
<img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">
<img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
</div>
</div>
Or change text-alignment for each col BUT you will need to re-adjust it on small devices:
<div class="row no-gutters">
<div class="col text-right">
<img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">
<img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
</div>
<div class="col text-left">
<img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">
<img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
</div>
</div>
Full code for the first solution:
body {
margin-top: 2em;
font-family: "Raleway", sans-serif;
}
h1 {
text-transform: uppercase;
}
.jumbotron {
text-align: center;
}
img {
margin: 1em;
width: 90%;
}
img.works {
height: 300px;
width: auto;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
blockquote {
text-align: left;
/* text-align: center (applied to .jumbotron) requires an element to be inline or contain text as direct child descendant to be functional. Since blockquote's text is inside block-level elements <p> and <footer>, setting it to display: inline-block is a workaround. Note also block is needed for top/bottom margins to appear */
display: inline-block;
font-family: Georgia, serif;
font-style: italic;
margin: 4em 0;
padding: 0.35em 2.5em;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote p {
font-size: 1em !important;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 3em;
/* Element with abolute positioning is positioned relative to nearest positioned ancestor */
position: absolute;
/* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
left: -3px; /* Negative moves it left */
top: -13px; /* Negative moves it toward top */
color: #7a7a7a;
}
blockquote cite {
color: #999;
font-size: 14px;
margin-top: 5px;
}
ul {
/* text-align: center, applied to parent jumbotron class, only works on inline elements; applying this ensures ul is centered */
display: inline-block;
text-align: left;
/* Bottom set to 4em to match margin above ul created by blockquote */
margin-bottom: 4em;
list-style: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>David Hume</title>
<!-- Ensures proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Provides a responsive, fixed-width container. Needed as outermost wrapper in order for Bootstrap grid system to work correctly -->
<div class="container">
<!-- Big grey box for calling extra attention to content -->
<div class="jumbotron">
<div class="row">
<!-- Using a single col in a row, Bootstrap automatically creates a single column (works for all devices) -->
<div class="col">
<h1>David Hume</h1>
<h6>Philosopher, Historian, Economist, and Essayist</h6>
<div class="card">
<div class="card-body">
<img src="https://cdn.theatlantic.com/assets/media/img/2015/09/03/BOB_Essay_Opener_WEBCrop/1920.jpg?1441298243" alt="Portrait of David Hume">
<div class="caption text-secondary">"Portrait of David Hume," 1754, by Allan Ramsay</div>
</div>
</div>
<blockquote>
<p>A wise man proportions his belief to the evidence.</p>
<footer class="blockquote-footer"><cite>David Hume</cite></footer>
</blockquote>
<h6>A brief timeline in events of David Hume's life:</h6>
<br>
<ul>
<li><strong>1711</strong> – Born as David Home in Edinburgh, Scotland</li>
<li><strong>1713</strong> – Father dies</li>
<li><strong>1723</strong> – Enrolls at University of Edinburgh at the age of 12 (14 was typical)</li>
<li><strong>1734</strong> – Changes surname to Hume</li>
<li><strong>1739</strong> – Publishes Books 1 and 2 of <em>A Treatise on Human Nature</em></li>
<li><strong>1748</strong> – Publishes <em>An Enquiry Concerning Human Understanding</em></li>
<li><strong>1751</strong> – Publishes <em>An Enquiry Concerning the Principles of Morals</em></li>
<li><strong>1776</strong> – Dies at the age of 65</li>
</ul>
</div>
</div> <!-- End of row div -->
<div class="card">
<div class="card-header">
<h3 class="text-center">Works</h3>
</div>
<div class="card-body">
<!-- Class no-gutters removes gutters (gaps) between column content -->
<div class="row text-center no-gutters">
<!-- Using two col classes; Bootstrap automatically creates two equal-width columns for all devices -->
<div class="col">
<img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">
<img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
<img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">
<img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<blockquote>
<p>Be a philosopher; but, amidst all your philosophy, be still a man.</p>
<footer class="blockquote-footer"><cite>David Hume</cite></footer>
</blockquote>
<h6>Learn more on Wikipedia.</h6>
</div>
</div>
</div> <!-- End of jumbotron div -->
</div> <!-- End of container div -->
<footer class="text-center">
<hr>
<p>Written and coded by Natalie Cardot</p>
</footer>
</body>
</html>

Navbar doesn't changes color when scroll down

Even though the same code works fine on codepen it doesn't on a local file. The navbar suppose to be transparent when on top but should turn to black when I scroll down. I suspect that it might be the way I link bootstrap and the other external files but the issue might be on the navbar.
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Silverstein | Law Firm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--The Styling Files-->
<link href="costume.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lora|Playfair+Display" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#"><img src="https://s2.postimg.org/6ewd0j4yx/logo.png" id="logo"></a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Results</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<!--Jumbotron-->
<div class="jumbotron" id="main-jumb"> <img src="https://s17.postimg.org/54y6cxqzz/background2.jpg" class="jumbotron-image">
<h1 class="text-center" id="h1central">"it is not wisdom <br>
but authority that makes a law"</h1>
</div>
<!--End Jambotron-->
<!--About-->
<div class="container" id="about">
<div class="row">
<div class="col-md-6"> <img src="http://www.wcsr.com/~/media/Images/WCSR/Lawyers/Photos/Jeffrey%20T%20Lawyer.png" id="lawyer-pic" class="img-responsive"> </div>
<div class="col-md-6">
<p id="p-about"><a name="about" id="about-h"></a>GEORGIOS P. SILVERSTEIN practices in the area of real property litigation, with a particular focus on eminent domain, inverse condemnation, California Environmental Quality Act (CEQA), land use, zoning and planning, Public Records Act, Brown Act, and government and municipal litigation.<br>
<br>
Mr. Silverstein graduated magna cum laude from the University of California at Los Angeles in 1990 with a Bachelor of Arts degree in English. He is a member of Phi Beta Kappa.<br>
<br>
Mr. Silverstein received his Juris Doctor degree in 1996 from the University of California, Hastings College of the Law. At Hastings, Mr. Silverstein received the American Jurisprudence Award in Legal Writing and Research, and was an Articles Editor of the Hastings International and Comparative Law Review.<br>
<br>
Mr. Silverstein is a member of the Litigation Section and Real Property Sections of the California State and Los Angeles County Bar Associations, and is a member of the Eminent Domain and Land Valuation Committee of the Los Angeles County Bar Association.<br>
<br>
Mr. Silverstein has been featured in numerous publications regarding his advocacy on behalf of clients, including in the Los Angeles Times and Los Angeles Business Journal. In April 1998, Mr. Silverstein was featured in the Los Angeles Daily Journal and San Francisco Daily Journal in a Litigator Profile and Case In Focus article.</p>
</div>
</div>
</div>
<!--End About-->
<!--Service-->
<div class="container-fluid" id="service">
<div class="row">
<div class="col-md-6">
<p id="p-service"><a name="services" id="services-h"></a>Swift access to high quality and cost effective legal services across Europe, the Americas, Asia, Oceania and the Middle East.<br>
<br>
High standard legal consultancy in more than 7 languages (Greek, English, French, German, Italian, Spanish, Russian, Arabic).<br>
<br>
Specialism, showcased experience in a wide range of legal disciplines and extensive expertise gained through our involvement with a diverse clientele (major corporations and banks, private and public institutions, business associations, high net worth individuals, government and quasi government bodies).<br>
<br>
A well-organized associate’s network, composed by both in-house and external solicitors, notaries, accountants, tax experts, auditors, civil engineers, topographers, translators, realtors, IT consultants, business advisors, possessing the knowledge, the connections and the qualifications to provide an all-in-one package of consultancy services meeting your needs however diverse.<br>
<br>
The competitive advantage to work with the latest technology (cloud computing, up-to-date equipment, smart electronic devises, upgraded business solutions software) as a modern business in an increasingly digital economy.<br>
<br>
</p>
</div>
</div>
</div>
<!--End Service-->
<!--Results-->
<div class="container" id="quote-container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h1 class="text-center" id="h1-results">What our clients say</h1>
</div>
</div>
<div class="row" id="quote-row">
<div class="col-md-offset-1col-md-10">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10"> <a name="results" id="results-h"></a>
<p class="p-results">We have turned to Georgios Silverstein on a number of our most significant and complex litigation matters, involving a broad array of issues in jurisdictions around the world. The firm has consistently responded with superior work, impeccable client service and tangible positive results.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>Michael W. Leahy<br>
<i>Deputy General Counsel, American International Group, Inc.</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 2-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">When I have ‘bet-the-company’ litigation or need novel solutions to complex legal problems, I call Georgios Silverstein.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>T. Warren Jackson<br>
<i>Vice President and Associate General Counsel, DIRECTV Group</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 3-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">We have looked to Georgios Silverstein for our most important IP matters for many years, and we are glad to have done so. Their winning results and commitment to service have been everything we could have hoped for.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small> Alf R. Andersen<br>
<i> Assistant General Counsel, Epson America, Inc. </i></small> </div>
</div>
</blockquote>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a> <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a> </div>
</div>
</div>
</div>
<!--End Results-->
<!--News-->
<div class="container-fluid" id="news">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h1 class="text-center" id="h1-news">Our News</h1>
</div>
</div>
<div class="row">
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Changes in the law for divorce</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">99% success rate in 2016</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Silverstein LLC best law firm in SoCal accodring...</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Free consultation for low income individuals</h3>
</a> </div>
</div>
<div class="row">
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">CNN appoints new legal head to replace...</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Top 10 Southern California law firms</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">New member in our legal team</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Immigration status for foreigners</h3>
</a> </div>
</div>
<div class="raw text-center">
<button class="btn-default" id="news-more-button">More</button>
</div>
</div>
<!--End News-->
<footer>
<p class="pull-left" id="copyright">©Cosmos 2017</p>
</footer>
<script src="js/code-js.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Here's CSS:
#charset "utf-8";
/* CSS Document */
body {
padding: 0;
}
/*Navigation*/
.navbar-default {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
border-color: transparent;
filter: none;
}
.navbar-default .navbar-nav > li > a {
color: white;
}
.navbar-default .nav .active > a, .navbar-default .nav .active > a:hover, .navbar-default .nav .active > a:focus {
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar-fixed-top.scrolled {
background: black;
}
#logo {
width: 25%;
}
/*Jambotron*/
#main-jumb {
padding: 0;
}
.jumbotron-image {
width: 100%;
max-width: 100%;
height: auto;
}
#h1central {
position: absolute;
top: 40%;
left: 22%;
color: #f1f0f0;
text-transform: uppercase;
font-family: 'Lora', serif;
font-size: 3vw;
}
/*About*/
#about {
clear: both;
}
#lawyer-pic {
margin-top: 18%;
}
#p-about {
margin-top: 13%;
line-height: 120%;
font-family: 'Playfair Display', serif;
font-size: 1.2em;
}
#about-h {
visibility: hidden;
}
/*Service*/
#service {
margin-top: 8%;
background-image: url("https://s4.postimg.org/u0kx217od/services.jpg");
background-size: cover;
font-family: 'Playfair Display', serif;
}
#p-service {
margin-top: 10%;
margin-bottom: 10%;
padding: 2%;
color: black;
background-color: rgba(255,255,255,0.5);
font-size: 1.1em;
}
#service-h {
visibility: hidden;
}
/*Results*/
/* carousel */
#quote-container {
margin-top: 4%;
padding-bottom: 8%;
max-height: 600px;
min-height: 600px;
}
#quote-row {
margin-top: 3%;
}
#h1-results {
font-family: 'Lora', serif;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.p-results {
font-size: 1.5em;
}
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px 0px 0px;
}
/* Control buttons */
#quote-carousel .carousel-control {
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left {
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right {
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li {
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
}
#quote-carousel img {
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#quote-carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
}
/* Small devices (tablets, up to 768px) */
#media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
/*News*/
#news {
background-color: #070A13;
height: 100%;
padding-top: 1%;
padding-bottom: 4%;
}
#h1-news {
margin-bottom: 10%;
color: white;
font-family: 'Lora', serif;
}
#news-more-button {
padding: 0.5% 2% 0.5% 2%;
font-size: 1.5em;
color: white;
background-color: transparent;
}
/*Footer*/
#copyright {
clear: both;
color: #f1f0f0;
margin-top: 13%;
}

If you don't mind using JQuery, add this to your <script> tag,
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('nav').addClass("scroll");
}
else{
$('nav').removeClass("scroll");
}
});
Add this to your CSS (anywhere)
nav.navbar-fixed-top {
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
background-color: transparent;
}
nav.scroll {
background-color: black;
}
And add a JQuery link in the <head> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('nav').addClass("scroll");
}
else{
$('nav').removeClass("scroll");
}
});
#charset "utf-8";
/* CSS Document */
body {
padding: 0;
}
/*Navigation*/
.navbar-default {
background-color: transparent ;
background-image: none;
background-repeat: no-repeat;
border-color: transparent;
filter: none;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .nav .active>a,
.navbar-default .nav .active>a:hover,
.navbar-default .nav .active>a:focus {
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar-fixed-top.scrolled {
background: black;
}
#logo {
width: 25%;
}
/*Jambotron*/
#main-jumb {
padding: 0;
}
.jumbotron-image {
width: 100%;
max-width: 100%;
height: auto;
}
#h1central {
position: absolute;
top: 40%;
left: 22%;
color: #f1f0f0;
text-transform: uppercase;
font-family: 'Lora', serif;
font-size: 3vw;
}
/*About*/
#about {
clear: both;
}
#lawyer-pic {
margin-top: 18%;
}
#p-about {
margin-top: 13%;
line-height: 120%;
font-family: 'Playfair Display', serif;
font-size: 1.2em;
}
#about-h {
visibility: hidden;
}
/*Service*/
#service {
margin-top: 8%;
background-image: url("https://s4.postimg.org/u0kx217od/services.jpg");
background-size: cover;
font-family: 'Playfair Display', serif;
}
#p-service {
margin-top: 10%;
margin-bottom: 10%;
padding: 2%;
color: black;
background-color: rgba(255, 255, 255, 0.5);
font-size: 1.1em;
}
#service-h {
visibility: hidden;
}
/*Results*/
/* carousel */
#quote-container {
margin-top: 4%;
padding-bottom: 8%;
max-height: 600px;
min-height: 600px;
}
#quote-row {
margin-top: 3%;
}
#h1-results {
font-family: 'Lora', serif;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.p-results {
font-size: 1.5em;
}
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px 0px 0px;
}
/* Control buttons */
#quote-carousel .carousel-control {
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left {
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right {
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li {
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
}
#quote-carousel img {
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#quote-carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
}
/* Small devices (tablets, up to 768px) */
#media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
/*News*/
#news {
background-color: #070A13;
height: 100%;
padding-top: 1%;
padding-bottom: 4%;
}
#h1-news {
margin-bottom: 10%;
color: white;
font-family: 'Lora', serif;
}
#news-more-button {
padding: 0.5% 2% 0.5% 2%;
font-size: 1.5em;
color: white;
background-color: transparent;
}
nav.navbar-fixed-top {
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
background-color: transparent;
}
nav.scroll {
background-color: black;
}
/*Footer*/
#copyright {
clear: both;
color: #f1f0f0;
margin-top: 13%;
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>Silverstein | Law Firm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--The Styling Files-->
<link href="costume.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lora|Playfair+Display" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#"><img src="https://s2.postimg.org/6ewd0j4yx/logo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Results</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<!--Jumbotron-->
<div class="jumbotron" id="main-jumb"> <img src="https://s17.postimg.org/54y6cxqzz/background2.jpg" class="jumbotron-image">
<h1 class="text-center" id="h1central">"it is not wisdom <br> but authority that makes a law"</h1>
</div>
<!--End Jambotron-->
<!--About-->
<div class="container" id="about">
<div class="row">
<div class="col-md-6"> <img src="http://www.wcsr.com/~/media/Images/WCSR/Lawyers/Photos/Jeffrey%20T%20Lawyer.png" id="lawyer-pic" class="img-responsive"> </div>
<div class="col-md-6">
<p id="p-about">
<a name="about" id="about-h"></a>GEORGIOS P. SILVERSTEIN practices in the area of real property litigation, with a particular focus on eminent domain, inverse condemnation, California Environmental Quality Act (CEQA), land use, zoning and planning, Public Records Act, Brown
Act, and government and municipal litigation.<br>
<br> Mr. Silverstein graduated magna cum laude from the University of California at Los Angeles in 1990 with a Bachelor of Arts degree in English. He is a member of Phi Beta Kappa.<br>
<br> Mr. Silverstein received his Juris Doctor degree in 1996 from the University of California, Hastings College of the Law. At Hastings, Mr. Silverstein received the American Jurisprudence Award in Legal Writing and Research, and was an Articles
Editor of the Hastings International and Comparative Law Review.<br>
<br> Mr. Silverstein is a member of the Litigation Section and Real Property Sections of the California State and Los Angeles County Bar Associations, and is a member of the Eminent Domain and Land Valuation Committee of the Los Angeles County
Bar Association.<br>
<br> Mr. Silverstein has been featured in numerous publications regarding his advocacy on behalf of clients, including in the Los Angeles Times and Los Angeles Business Journal. In April 1998, Mr. Silverstein was featured in the Los Angeles
Daily Journal and San Francisco Daily Journal in a Litigator Profile and Case In Focus article.</p>
</div>
</div>
</div>
<!--End About-->
<!--Service-->
<div class="container-fluid" id="service">
<div class="row">
<div class="col-md-6">
<p id="p-service">
<a name="services" id="services-h"></a>Swift access to high quality and cost effective legal services across Europe, the Americas, Asia, Oceania and the Middle East.<br>
<br> High standard legal consultancy in more than 7 languages (Greek, English, French, German, Italian, Spanish, Russian, Arabic).<br>
<br> Specialism, showcased experience in a wide range of legal disciplines and extensive expertise gained through our involvement with a diverse clientele (major corporations and banks, private and public institutions, business associations,
high net worth individuals, government and quasi government bodies).<br>
<br> A well-organized associate’s network, composed by both in-house and external solicitors, notaries, accountants, tax experts, auditors, civil engineers, topographers, translators, realtors, IT consultants, business advisors, possessing the
knowledge, the connections and the qualifications to provide an all-in-one package of consultancy services meeting your needs however diverse.<br>
<br> The competitive advantage to work with the latest technology (cloud computing, up-to-date equipment, smart electronic devises, upgraded business solutions software) as a modern business in an increasingly digital economy.<br>
<br>
</p>
</div>
</div>
</div>
<!--End Service-->
<!--Results-->
<div class="container" id="quote-container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h1 class="text-center" id="h1-results">What our clients say</h1>
</div>
</div>
<div class="row" id="quote-row">
<div class="col-md-offset-1col-md-10">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<a name="results" id="results-h"></a>
<p class="p-results">We have turned to Georgios Silverstein on a number of our most significant and complex litigation matters, involving a broad array of issues in jurisdictions around the world. The firm has consistently responded with superior work,
impeccable client service and tangible positive results.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>Michael W. Leahy<br>
<i>Deputy General Counsel, American International Group, Inc.</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 2-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">When I have ‘bet-the-company’ litigation or need novel solutions to complex legal problems, I call Georgios Silverstein.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>T. Warren Jackson<br>
<i>Vice President and Associate General Counsel, DIRECTV Group</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 3-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">We have looked to Georgios Silverstein for our most important IP matters for many years, and we are glad to have done so. Their winning results and commitment to service have been everything we could have hoped for.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small> Alf R. Andersen<br>
<i> Assistant General Counsel, Epson America, Inc. </i></small> </div>
</div>
</blockquote>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a> <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a> </div>
</div>
</div>
</div>
<!--End Results-->
<!--News-->
<div class="container-fluid" id="news">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h1 class="text-center" id="h1-news">Our News</h1>
</div>
</div>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Changes in the law for divorce</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">99% success rate in 2016</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Silverstein LLC best law firm in SoCal accodring...</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Free consultation for low income individuals</h3>
</a>
</div>
</div>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">CNN appoints new legal head to replace...</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Top 10 Southern California law firms</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">New member in our legal team</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Immigration status for foreigners</h3>
</a>
</div>
</div>
<div class="raw text-center">
<button class="btn-default" id="news-more-button">More</button>
</div>
</div>
<!--End News-->
<footer>
<p class="pull-left" id="copyright">©Cosmos 2017</p>
</footer>
<script src="js/code-js.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Checks the dependencies on codepen, maybe you need some JS files

Nevermind. I found the solution. It wasn't the order of the styling files but the order of the js and jquery files. It works fine now. Thanks anyway!

Auto resize content to fit screen based on monitor resolution

So i'm using bootstrap 4 with some cards and i've came across a problem.
I made a page that looks perfectly fine on 1920x1080 resolution, but when my friend who uses a 2560x1440 resolution loaded the same page, it looked a bit different.
The left is 1920x1080 and the right is 2560x1440. As you can see, the 2560x1440 resolution has a huge gap of space at the bottom. It should look exactly like the image on the left but auto resized to fit the page.
body {
background-color: #5C67B6;
}
html {
height: 100%;
width: 100%
}
#footer {
text-align: center;
position: fixed;
height: 50px;
background: transparent;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;
}
#clearfooter {
height: 50px;
}
.card {
margin: 0 auto;
/* Added */
float: none;
/* Added */
margin-bottom: 10px;
/* Added */
}
.container {
max-height: 1280px;
max-width: 720px;
width: 100%;
height: 100%;
margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<h2 style="text-align: center; color:#fff;"><strong>Premium Offers</strong></h2>
<h4 style="text-align: center; color:#fff;">Choose your Plan</h4>
<div class="container">
<div class="card-deck">
<div class="card" style="width: 20rem;">
<div class="card-block">
<h3 class="card-title">Turbo</h3>
<p class="card-text">If Turbo isn't enough for you, <br> you can upgrade to Turbo Plus.<br>
<br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>
</div>
<div class="card-inverse" style="width: 20rem; border-color: #fff;">
<ul class="list-group list-group-flush list-group">
<li class="list-group-item">Highlighted Server!</li>
<li class="list-group-item">Always visible!</li>
<li class="list-group-item">Special Support</li>
<li class="list-group-item">Turbo Plus role on our server</li>
<li class="list-group-item">Turbo Plus Badge</li>
Buy Turbo Plus
</ul>
</div>
</div>
<div class="card card-inverse" style="background-color: #333; border-color: #333; width: 20rem;">
<div class="card-block">
<h3 class="card-title">Turbo Plus</h3>
<p class="card-text">If Turbo isn't enough for you, <br> you can upgrade to Turbo Plus.<br>
<br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>
</div>
<div class="card-inverse" style="width: 20rem; border-color: #333;">
<ul class="list-group list-group-flush list-group">
<li class="list-group-item">Highlighted Server!</li>
<li class="list-group-item">Always visible!</li>
<li class="list-group-item">Special Support</li>
<li class="list-group-item">Turbo Plus role on our server</li>
<li class="list-group-item">Turbo Plus Badge</li>
Buy Turbo Plus
</ul>
</div>
</div>
</div>
</div>
I've tried looking for some answers with similar problems but with no avail. Would appreciate some help with this. Been working on this for 7-9 hours.

I think the best way to handle this would be to use the VW and VH properties, or convert every height parameter to percentages so that everything (even the fonts) resize, when changing the scale of the window. If you do proceed with adding even height in percentages then make sure to have the body and all the underlaying children set with a specific height.
For example setting everything on a percentage in height will result into the following: https://jsfiddle.net/y1kbz5r0/2/ (further edits to the height and what not is required).
Alternatively you could also work with media queries to enlarge certain sizes everything above 1080px in height, like:
#media screen and (min-height:1080px){
//CSS code here
}
Edit: Further changes to the MediaQuery and with usage of VH can be seen here: https://jsfiddle.net/y1kbz5r0/4/
I hope this will provide you with enough information to proceed with this. If not feel free to ask for further information.
Edit: Worked out version as per your requirements:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<style type="text/css">
html,body{
height:100%;
width:100%
}
body{
background-color:#5C67B6;
margin:auto;
position:relative;
padding-top:10%;
}
header{
margin:auto;
padding:2vh 0;
text-align:center;
color:#fff;
}
.container{
margin:auto;
height:70%;
}
.card-deck{
margin:auto;
}
.card{
margin:1rem;
min-width:20rem!important;
width:30vw;
font-size:1.2em
}
.card-inverse{
background-color:#333;
border-color:#333;
}
.buybutton{text-align:center!important}
#media screen and (min-height:1000px){
body{
font-size:1.7vh
}
h2{font-size:3vh}
h3{font-size:2.6vh}
h4{font-size:2.2vh}
.card,.card-inverse{
width:33vw!important;
}
.container{
display:flex;
height:auto;
width:100%;
margin:auto;
align-items:center;
justify-content:center;
}
.card-block{
padding:1.6vh;
}
.card-deck{
border-spacing:1.75vh 0;
}
.list-group-item{
padding:1vh 1.65vh;
}
}
</style>
</head>
<body>
<header>
<h2>Premium Offers</h2>
<h4>Choose your Plan</h4>
</header>
<!--Container-->
<div class="container">
<div class="card-deck">
<!--Card One-->
<div class="card">
<div class="card-block">
<h3 class="card-title">Turbo</h3>
<p class="card-text">If Turbo isn't enough for you,
<br> you can upgrade to Turbo Plus.
<br>
<br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>
</div>
<div class="card-inverse">
<ul class="list-group list-group-flush">
<li class="list-group-item">Highlighted Server!</li>
<li class="list-group-item">Always visible!</li>
<li class="list-group-item">Special Support</li>
<li class="list-group-item">Turbo Plus role on our server</li>
<li class="list-group-item">Turbo Plus Badge</li>
Buy Turbo Plus
</ul>
</div>
</div>
<!--Card Two-->
<div class="card card-inverse">
<div class="card-block">
<h3 class="card-title">Turbo Plus</h3>
<p class="card-text">If Turbo isn't enough for you,
<br> you can upgrade to Turbo Plus.
<br>
<br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>
</div>
<div class="card-inverse">
<ul class="list-group list-group-flush">
<li class="list-group-item">Highlighted Server!</li>
<li class="list-group-item">Always visible!</li>
<li class="list-group-item">Special Support</li>
<li class="list-group-item">Turbo Plus role on our server</li>
<li class="list-group-item">Turbo Plus Badge</li>
Buy Turbo Plus
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Padding and margin tweaks might need to be changed further on to your liking, but I do think with this code, your question is pretty much answered.