Fixed Footer color is not changing?

Fixed Footer color is not changing? - javascript

I am a beginner i am trying to make a one page simple html website.i want to change color of navbar to saffron(#FF9933) and footer to green but i am facing problem so whenever i change navbar color to some color the same color applies to the footer also any idea? here is the code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Netzach’s</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style> body { font: 400 15px/1.8 Lato, sans-serif; color: ##ff7f00; } h3, h4 { margin: 10px 0 30px 0; letter-spacing: 10px; font-size: 20px; color: #228b22; }
.left{text-align: left;}
.container { padding: 80px 120px; }
.person { border: 10px solid transparent; margin-bottom: 25px; width: 80%; height: 80%; opacity: 0.7; }
.person:hover { border-color: #228b22; }
.carousel-inner img { -webkit-filter: grayscale(90%); filter: grayscale(90%); /* make all photos black and white */ width: 100%; /* Set width to 100% */ margin: auto; }
.carousel-caption h3 { color: #ff7f00!important; } #media (max-width: 600px) { .carousel-caption { display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */ } }
.bg-1 { background: #2d2d30; color: #228b22; } .bg-1 h3 {color: #ff7f00;} .bg-1 p {font-style: italic;} .list-group-item:first-child { border-top-right-radius: 0; border-top-left-radius: 0; }
.list-group-item:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.thumbnail { padding: 0 0 15px 0; border: none; border-radius: 0; } .thumbnail p { margin-top: 15px; color: #555; }
.btn { padding: 10px 20px; background-color: #333; color: #f1f1f1; border-radius: 0; transition: .2s; }
.btn:hover, .btn:focus { border: 1px solid #333; background-color: #fff; color: #000; }
.modal-header, h4, .close { background-color: #228b22; color: #fff !important; text-align: center; font-size: 30px; } .modal-header, .modal-body { padding: 40px 50px; }
.nav-tabs li a { color: #ff7f00; } #googleMap { width: 100%; height: 400px; -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.navbar { font-family: Montserrat, sans-serif; margin-bottom: 0; background-color: #FF9933; border: 0; font-size: 11px !important; letter-spacing: 4px; opacity: 0.9; }
.navbar li a, .navbar .navbar-brand { color: #ff7f00 !important; } .navbar-nav li a:hover { color: #fff !important; }
.navbar-nav li.active a { color: #fff !important; background-color: #ff7f00 !important; } .navbar-default .navbar-toggle { border-color: transparent; }
.open .dropdown-toggle { color: #fff; background-color: #ff7f00 !important; } .dropdown-menu li a { color: #000 !important; }
.dropdown-menu li a:hover { background-color: red !important; }
footer { color: black; padding: 32px; }
footer a { color: #228b22; }
footer a:hover { color: #777; text-decoration: none; }
.form-control { border-radius: 0; } textarea { resize: none; }
td{border-style: groove;}
body{
background-color: white;
}
</style>
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<!--script type="text/javascript" src="engine0/jquery.js"></script--> <!-- End WOWSlider.com HEAD section -->
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#myPage"><img src="" alt="Logo"></img></a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT US</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#Services">
SERVICES <!--<span class="caret"></span>-->
</a>
<!--<ul class="dropdown-menu"> <li>Electoral</li> <li>Media P.R</li> <li>Legal Consultancy</li> <li>Training and Development</li> <li>Advertisment</li> </ul> -->
<li>ASSIGNMENTS</li>
<li>CAREER</li>
<li>CONTACT</li>
</li>
<li><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</nav>
<!--
<div id="wowslider-container0"> <div class="ws_images"><ul>
<li><img src="data0/images/slide1.jpg" alt="SLIDE" title="SLIDE" id="wows0_0"/></li>
<li><img src="data0/images/slide2.png" alt="http://wowslider.com/" title="SLIDE" id="wows0_1"/></li>
<li><img src="data0/images/slide3.jpg" alt="slide" title="slide" id="wows0_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<span><img src="data0/tooltips/slide1.jpg" alt="SLIDE"/>1</span>
<span><img src="data0/tooltips/slide2.png" alt="SLIDE"/>2</span>
<span><img src="data0/tooltips/slide3.jpg" alt="slide"/>3</span>
</div></div><div class="ws_script" style="position:absolute;left:-99%">responsive slider by WOWSlider.com v8.7</div> <div class="ws_shadow"></div> </div> --> <script type="text/javascript" src="engine0/wowslider.js"></script> <script type="text/javascript" src="engine0/script.js"></script> <!-- End WOWSlider.com BODY section --> <!-- Container (The Band Section) -->
<div id="band" class="container text-center">
<h3>About Us</h3>
<p class="left">SOME TEXT
</p>
<br> <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group"> <label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label> <input type="number" class="form-control" id="psw" placeholder="How many?"> </div>
<div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label> <input type="text" class="form-control" id="usrname" placeholder="Enter email"> </div>
<button type="submit" class="btn btn-block">Pay <span class="glyphicon glyphicon-ok"></span> </button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"> <span class="glyphicon glyphicon-remove"></span> Cancel </button>
<p>Need help?</p>
</div>
</div>
</div>
</div>
</div>
<div id="Services" class="container text-center">
<h3>Services</h3>
<div class="row">
<p>
<div class="col-lg-12 col-md-12 col-sm-12">
<h3>Psephological Consultancy:</h3>
We provide solutions at every level at your doorstep. Some of them are:
<table style="border-style: dotted;" class="col-lg-12 col-md-12 col-sm-12">
<tr>
<td>Political surveys</td>
<td>Constituency profiling</td>
</tr>
<tr>
<td>Candidate positioning</td>
<td>Political party position</td>
</tr>
<tr>
<td>Opinion polls</td>
<td>Pre -Poll</td>
</tr>
<tr>
<td>Exit Poll</td>
<td>Tracking Poll</td>
</tr>
<tr>
<td>Election campaign management</td>
<td>Increase voter awareness and support</td>
</tr>
<tr>
<td>Public opinion creation</td>
<td>Bring the voter to booth</td>
</tr>
<tr>
<td>Campaign support </td>
<td>Media and social media support</td>
</tr>
</table>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<br/>
<br/>
<p>
<h3>Market Research</h3>
The skills required for stakeholder research are easily transferable towards addressing client requirements such as market assessment, preparation of concept notes, demand quantification, customer feedback and brand image building. The services are not limited by geography or the industry type. Given our experience in various elections and ready access to top consultants within India and abroad. We will be glad to offer you customized solutions for your market research.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<br/>
<br/>
<p>
<h3>Media Consultancy</h3>
From providing content outsourcing to training and set up of niche programming streams such as election programming to full fledged turnkey solutions tailored for print and electronic media. Netzach’s is your one stop shop for your consultancy needs. Not only have we successfully operated in diverse media environments such as News Agency, TV Channels, Newspapers, Magazines and Internet media, we have also delivered value to our clients cutting across borders. We are adept at providing localized and customized consultancy suited to the milieu in which our clients operate.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Socio-Economic Research</h3>
Netzach’s is proud to have partnered with academic institutions, NGOs, Independent Researchers and various Industry bodies in production of socio-economic data and research reports. Furthering the frontiers of human well being was one of the founding motives of our organization and we are proud to have done justice to the same. We encourage individuals and bodies engaged in socio-economic research to work with us. our clients cutting across borders. We are adept at providing localized and customized consultancy suited to the milieu in which our clients operate.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Qualitative Consultancy</h3>
Ever felt the need to talk to someone who understands the local polity and culture beyond what the numbers convey? Our team of highly trained analysts and consultants who have years of experience under their belt would be glad to offer you some advice. Not only do we have access to best political analysts in the business we also have a enviable network of consultants who are ready to provide niche consultancy services to our clients.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Public Private Partnerships</h3>
Our experience with democratic processes and formidable skill set in determining policy direction empower us to be an active partner of the host government in public-private partnership projects. Sectors such as Education, Resource mapping, Governance Surveys, Independent Evaluation and Policy assessment are some of the streams that have witnessed active Netzach’s participation or demonstrated deploy-able capability to execute the projects satisfactorily.
</p>
</div>
</div>
</div>
<div id="Assignments" class="container text-center">
<h3>Assignments</h3>
<div class="col-lg-12 col-md-12 col-sm-12 text-center">
<h3>Recent Assignments</h3>
<p></p>
</div>
<br/>
<div class="col-lg-6 col-md-6 col-sm-6 text-center">
<h3>Ongoing project</h3>
<p class="center"></p>
</div>
</div>
<div id="Career" class="container text-center">
<h3>Career</h3>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Interns</h3>
Netzach’s offers college and university students a snapshot of professional life that awaits them via a limited number of internships. The selection criteria for the internships are very
stringent and we advise the students to generate a very high quality cover letter and a CV that delineates their extra-curricular and curricular activities to better help us evaluate their merits. Email us to: netzachsrnd#outlook.com
Please write "Internship" in the subject line of the mail.
We offer Opportunities for professional growth and development
Platform to express freely and multi tasking
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Competitive package</h3>
Flexibility and learning while working experience.
</p>
</div>
</p>
<br>
</div>
<!-- Container (Contact Section) -->
<div id="contact" class="container">
<h3 class="text-center">Contact</h3>
<div class="row">
&nbsp &nbsp &nbspPlease enter your details in the form below or email to netzachsrnd#outlook.com. We will contact you shortly.
<br/>
<br/>
<div class="col-md-4">
<p>Drop a Message here</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Mumbai, India</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: 000000000</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email: netzachsrnd#outlook.com</p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group"> <input class="form-control" id="name" name="name" placeholder="Name" type="text" required> </div>
<div class="col-sm-6 form-group"> <input class="form-control" id="email" name="email" placeholder="Email" type="email" required> </div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
<br>
<div class="row">
<div class="col-md-12 form-group"> <button class="btn pull-right" type="submit">Send</button> </div>
</div>
</div>
</div>
</div>
<br><br><br><br>
<!--Fixed Footer-->
<footer>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="navbar-text pull-left">
<p> © 2016 Netzach`s.</p>
</div>
</div>
<br><br> </footer>
<script>$(document).ready(function(){ // Initialize Tooltip $('[data-toggle="tooltip"]').tooltip(); // Add smooth scrolling to all links in navbar + footer link $(".navbar a, footer a[href='#myPage']").on('click', function(event) { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 900, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); });})</script>
</body>
</html>

There is an issue in your css.
Replace
.navbar-inverse {
background-color: #222;
border-color: #080808; }
with
.navbar.navbar-inverse {
background-color: #222;
border-color: #080808; }

your footer also has the navbar class;
so you have to define it like that:
footer .navbar {
background-color: green;
}

Related

script.js not linked to html?

Here is my html:
Hello i dont get my Javascript working i used codepen.io to write it and it worked. but when i want to use it on my webhost it isnt responding. I try to use it local but its not working. I googled the problem and its proberly something about the place of but im not sure about that. Can someone help me out and teach me how i can fix this? its a problem that i get alot of times.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Sandro Swabedissen">
<title>Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://i.imgur.com/dqhQX0E.png" alt="Portrait of Mr. Swabedissen" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text">Hi! I'm Sandro Swabedissen I'm 18 years old and I'm from the Netherlands and I live in Apeldoorn. I study IT support at ROC Aventus in Deventer.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">I like to Photograph and longboarding and basic website coding. I spent most of my time behind the desk or hanging out with my friends.</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<!-- Portfolio -->
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address>
<strong><i class="fa fa-location-arrow"></i> Swabedissen Inc.</strong><br>Netherlands,<br>Gelderland, Apeldoorn<br><br>
<a class="tel" href="tel:0636597738" type="tel"><i class="fa fa-mobile"></i><span> +31 06-36597738</span></a>
</address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div><hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Sandro Swabedissen</strong></h4>
</div>
</div>
</div><hr class="copyright">
<h4><i class="fa fa-copyright"></i> COPYRIGHTS 2012 ALL RIGHTS RESERVED</h4>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
Here is my css:
* {
box-sizing: border-box;
}
#menu
{
background-color: #ffffff79;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
ul.navbar-nav {
float:right;
text-align:center;
}
ul.navbar-nav li
{
padding: 0 10px;
}
#media only screen and (max-width:767px)
{ ul.navbar-nav { float:none; } }
.container-fluid {
padding: 0 1em;
}
.navbar-nav li a
{
color:black!important;
font-size:1.2em;
font-family: Century gothic,sans-serif;
font-weight:600;
transition: 0.4s ease;
}
.navbar-nav li a:hover
{
color:#fff!important;
background-color:black!important;
}
.navbar-brand {
padding:10px 15px!important;
}
a.navbar-brand .fa-globe
{
font-size: 30px;
color: black;
transition:0.5s ease;
}
a.navbar-brand .fa-globe:hover
{
color: #3935e6;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: black!important;
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
background-color: #fff!important;
}
.container {
margin: 0 auto;
max-width: 996px;
}
.splash {
background:url("https://photos.gurushots.com/unsafe/0x0/351cef5284542fdc28a01f8d2c67c3be/3_ea1623d74f3828136d8e55e6cd5501e1.jpg") no-repeat fixed center bottom;
background-size: cover;
color: #fff;
}
.splash .container {
padding-top: 15vh; /* No JS fallback*/
padding-bottom: 10vh; /* No JS fallback*/
}
.profile-image {
border-radius: 50%;
display: block;
max-height:250px;
max-width: 250px;
margin: 0 auto 1em;
width: 100%;
opacity: 0.85;
}
.splash h1 {
font-size: 40px;
margin-bottom: .15em;
text-align: center;
}
.splash .lead, .splash .continue {
display: inline-block;
text-align: center;
}
h1.intro-text
{
margin:0;
color:#fff;
}
.splash .lead {
font-size: 30px;
margin-bottom: 1em;
font-family: Rockwell;
}
.navbar-inverse
{
border:none!important;
}
#keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-ms-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-o-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* code for animated blinking cursor */
#typed-cursor
{
opacity: 1;
font-size: 40px;
color: #fff;
font-weight: 50;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
-o-animation: blink 1s infinite;
animation: blink 1s infinite;
}
.splash .continue {
font-size: 3em;
display:block;
}
.splash .continue a {
border: 2px solid #fff;
border-radius: 100%;
color: #fff;
display: inline-block;
text-decoration: none;
width: 40px;
height:40px;
font-size:30px;
}
.splash .continue a:hover {
background-color: rgba(255, 255, 255, .25);
}
#about,#portfolio,#contact
{
padding-top:4em!important;
}
section h2 {
margin: 0;
font-size: 3em;
}
section.success {
color: #fff;
background: rgb(13, 79, 136);
padding: 2%;
}
section.success a
{
color:black;
transition: 0.4s ease;
}
section.success a:hover {
outline: 0;
color: #fff;
border: 2px solid #fff;
}
.contact-button
{
padding-bottom:2%;
}
hr.star-light,hr.star-portfolio {
margin: 25px auto 30px;
padding: 0;
max-width: 250px;
border: 0;
border-top: solid 3px;
text-align: center;
}
hr.star-light:after,hr.star-portfolio:after {
content: "\f005";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}
hr.star-light {
border-color: #fff;
}
hr.star-portfolio {
border-color: black;
}
hr.star-portfolio:after {
color: black;
background-color: #eee;
}
hr.star-light:after {
color: #fff;
background-color: rgb(13, 79, 136);
}
p.content-text { font-size: 25px; }
/* PORTFOLIO */
.portfolio-card{
box-shadow: 0px 2px 5px #888888;
background: #eee;
border-radius: 4px;
}
.portfolio-card:hover{
box-shadow: 0px 10px 10px #888888;
cursor: pointer
}
.portfolio-container-holder{
background: #eee;
padding-bottom: 20px;
}
.portfolio-card-holder{
padding: 5px;
margin-bottom: 5px;
}
.portfolio-img{
width: 100%;
border-radius: 4px 4px 0 0;
}
.portfolio-img-desc{
position: relative;
bottom: 0px;
left: 0px;
right: 0px;
background: #fff;
color: #000;
text-align: center;
padding: 5px;
}
/* Contact */
.contact-me-container{
padding:3%;
background: rgb(13, 79, 136);
}
.fa-user,.fa-at,.fa-phone
{
color:black;
}
.submit-button{
margin-top: 10px;
margin-bottom: 10px;
}
/* ========================
Footer
======================== */
footer {
background-color: #2C3E50;
color: #fff;
font-size: 1.5em;
text-align: center;
padding:3%;
}
a.tel,a.tel:hover
{
text-decoration:none;
color:#fff;
}
a.social-button {
background: #fff;
font-size: 20px;
border-radius: 50%;
margin: 5px;
}
.address-container{
display: inline-block;
margin: 0 auto;
}
a.link-facebook,a.link-twitter,a.link-codepen,a.link-linkedin,a.link-instagram
{
transition:0.4s ease;
}
a.link-twitter
{
color:#1DA1F2;
}
a.link-facebook
{
color: #3b5998;
}
a.link-linkedin
{
color:#007bb6;
}
a.link-instagram
{
color:#e95950;
}
a.link-facebook:hover{
background-color: #3b5998;
color: #fff;
}
a.link-twitter:hover{
background-color: #1DA1F2;
color: #fff;
}
a.link-codepen:hover{
background-color: black;
color: #fff;
}
a.link-linkedin:hover{
background-color: #007bb6;
color: #fff;
}
a.link-instagram:hover{
background-color: #e95950;
color: #fff;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: transparent!important;
}
.fa-heart {
color:#f32323;
}
h4.author
{
letter-spacing:4px;
}
hr.footer-hr
{
width:150px;
}
hr.copyright
{
opacity:0.4;
}
Here is my script.js:
$( window ).resize( function() {
centerSplash();
});
!function($){
"use strict";
var Typed = function(el, options){
// chosen element to manipulate text
this.el = $(el);
// options
this.options = $.extend({}, $.fn.typed.defaults, options);
// text content of element
this.text = this.el.text();
// typing speed
this.typeSpeed = this.options.typeSpeed;
// amount of time to wait before backspacing
this.backDelay = this.options.backDelay;
// input strings of text
this.strings = this.options.strings;
// character number position of current string
this.strPos = 0;
// current array position
this.arrayPos = 0;
// current string based on current values[] array position
this.string = this.strings[this.arrayPos];
// number to stop backspacing on.
// default 0, can change depending on how many chars
// you want to remove at the time
this.stopNum = 0;
// Looping logic
this.loop = this.options.loop;
this.loopCount = this.options.loopCount;
this.curLoop = 1;
if (this.loop === false){
// number in which to stop going through array
// set to strings[] array (length - 1) to stop deleting after last string is typed
this.stopArray = this.strings.length-1;
}
else{
this.stopArray = this.strings.length;
}
// All systems go!
this.init();
this.build();
}
Typed.prototype = {
constructor: Typed
, init: function(){
// begin the loop w/ first current string (global self.string)
// current string will be passed as an argument each time after this
this.typewrite(this.string, this.strPos);
}
, build: function(){
this.el.after("<span id=\"typed-cursor\">|</span>");
}
// pass current string state to each function
, typewrite: function(curString, curStrPos){
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
var self = this;
// ------------- optional ------------- //
// backpaces a certain string faster
// ------------------------------------ //
// if (self.arrayPos == 1){
// self.backDelay = 50;
// }
// else{ self.backDelay = 500; }
// containg entire typing function in a timeout
setTimeout(function() {
// make sure array position is less than array length
if (self.arrayPos < self.strings.length){
// start typing each new char into existing string
// curString is function arg
self.el.text(self.text + curString.substr(0, curStrPos));
// check if current character number is the string's length
// and if the current array position is less than the stopping point
// if so, backspace after backDelay setting
if (curStrPos > curString.length && self.arrayPos < self.stopArray){
clearTimeout(clear);
var clear = setTimeout(function(){
self.backspace(curString, curStrPos);
}, self.backDelay);
}
// else, keep typing
else{
// add characters one by one
curStrPos++;
// loop the function
self.typewrite(curString, curStrPos);
// if the array position is at the stopping position
// finish code, on to next task
if (self.loop === false){
if (self.arrayPos === self.stopArray && curStrPos === curString.length){
// animation that occurs on the last typed string
// fires callback function
var clear = self.options.callback();
clearTimeout(clear);
}
}
}
}
// if the array position is greater than array length
// and looping is active, reset array pos and start over.
else if (self.loop === true && self.loopCount === false){
self.arrayPos = 0;
self.init();
}
else if(self.loopCount !== false && self.curLoop < self.loopCount){
self.arrayPos = 0;
self.curLoop = self.curLoop+1;
self.init();
}
// humanized value for typing
}, humanize);
}
, backspace: function(curString, curStrPos){
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
var self = this;
setTimeout(function() {
// ----- this part is optional ----- //
// check string array position
// on the first string, only delete one word
// the stopNum actually represents the amount of chars to
// keep in the current string. In my case it's 14.
if (self.arrayPos == 1, 2, 3, 4){
self.stopNum = 0;
}
//every other time, delete the whole typed string
//else{
//self.stopNum = 0;
//}
// ----- continue important stuff ----- //
// replace text with current text + typed characters
self.el.text(self.text + curString.substr(0, curStrPos));
// if the number (id of character in current string) is
// less than the stop number, keep going
if (curStrPos > self.stopNum){
// subtract characters one by one
curStrPos--;
// loop the function
self.backspace(curString, curStrPos);
}
// if the stop number has been reached, increase
// array position to next string
else if (curStrPos <= self.stopNum){
clearTimeout(clear);
var clear = self.arrayPos = self.arrayPos+1;
// must pass new array position in this instance
// instead of using global arrayPos
self.typewrite(self.strings[self.arrayPos], curStrPos);
}
// humanized value for typing
}, humanize);
}
}
$.fn.typed = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('typed')
, options = typeof option == 'object' && option
if (!data) $this.data('typed', (data = new Typed(this, options)))
if (typeof option == 'string') data[option]()
});
}
$.fn.typed.defaults = {
strings: ["Hello, hola, hi! ", "Welcome to my website ", "Go on, scroll down", ":)"],
// typing and backspacing speed
typeSpeed: 50, // speed decreases as number increased
// time before backspacing
backDelay: 100,
// loop
loop: true,
// false = infinite
loopCount: false,
// ending callback function
callback: function(){ null }
}
}(window.jQuery);
$(function(){
$("#typed").typed({
strings: ["web developer","photographer","human being"], //Strings to display when typing
typeSpeed: 40,
backDelay: 600,
loop: true,
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); }
});
function foo(){ console.log("Callback"); }
});

You are running the script in head and expecting all of the document's content to be loaded (for example the typed div). This explains why it works in Codepen but not in your local environment, because Codepen runs the javascript after the html content has been loaded.
To solve this, you can use an event listener to wait for the document to fully load.
The document is not loaded by the time you are trying to find an element with the id typed. Change it to
$(document).ready(function(){
$("#typed").typed({
strings: ["web developer","photographer","human being"], //Strings to display when typing
typeSpeed: 40,
backDelay: 600,
loop: true,
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); }
});
function foo(){ console.log("Callback"); }
});
Docs on document.ready

I was able to fix your web page for you, but there is one thing I cannot fix. I have no idea what you wanted to do with this part of your script.js:
$( window ).resize( function() {
centerSplash();
});
There is no function anywhere called centerSplash. Most of your errors were in your html file, but I fixed them all. The main errors were that you were importing 2 different versions of jQuery and your scripts/links were trying to access local files when they were being run directly through the file system.
With that out of the way, here is your fixed HTML:
<!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.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Sandro Swabedissen">
<title>Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://i.imgur.com/dqhQX0E.png" alt="Portrait of Mr. Swabedissen" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text">Hi! I'm Sandro Swabedissen I'm 18 years old and I'm from the Netherlands and I live in Apeldoorn. I study IT support at ROC Aventus in Deventer.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">I like to Photograph and longboarding and basic website coding. I spent most of my time behind the desk or hanging out with my friends.</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<!-- Portfolio -->
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address>
<strong><i class="fa fa-location-arrow"></i> Swabedissen Inc.</strong><br>Netherlands,<br>Gelderland, Apeldoorn<br><br>
<a class="tel" href="tel:0636597738" type="tel"><i class="fa fa-mobile"></i><span> +31 06-36597738</span></a>
</address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div><hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Sandro Swabedissen</strong></h4>
</div>
</div>
</div><hr class="copyright">
<h4><i class="fa fa-copyright"></i> COPYRIGHTS 2012 ALL RIGHTS RESERVED</h4>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
style.css is the same.
script.js will work as is, but I would comment out those first three lines until you figure out what it is you want to do with the centerSplash thing.
Nice page btw.

Display bootstrap wells on left and right side of the page

I use bootstrap wells to resemble cards. I currently have two different types of cards, the "normal" ones which will be in the middle of the screen, and the "special" ones which will be on the left and right side.
Template I'm trying to replicate:
Issues:
1.) It seems like the wells in bootstrap don't want to go to the very left or right of a page. They seem to always be contained in an invisible div/border and won't go anywhere else unless absolute positioning is used. I can't use absolute positioning because the middle content overlaps it if zoomed in. It gets rid of the responsive aspect of bootstrap which needs to stay.
2.) Without the use of absolute positioning, making new "special" cards on the side will add extra vertical space which will sink the middle content down the page
body {
background-color: #5C67B6;
}
html,
body {
height: 100%;
padding-top: 70px;
}
.btn-purple {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -140px;
}
.btn-info {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
right: 10%;
margin-left: 140px;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.customClass {
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.turbo {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well {
min-height: 320px;
max-height: 320px;
height: auto;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.well:hover {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well p {
margin-bottom: 50px;
}
.header {
display: inline-block;
width: 100%;
border: 1px solid red;
}
.playerOne {
float: right;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
.playerTwo {
float: left;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
#media only screen and (max-width: 900px) {
.playerOne {
width: 650px;
}
.playerTwo {
width: 633px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="playerOne">
Special Cards
</div>
<div class="playerTwo">
Special Cards
</div>
</div>
<center>
<div class="input-group" style="width: 500px; padding-bottom: 2cm;">
<input type="text" class="form-control" placeholder="Search cards!">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
</center>
<div class="content">
<div class="container content-sm customClass">
<div class="row">
<center>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a aria-label="Previous" href="#"><span aria-hidden="true">«</span></a>
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
<a aria-label="Next" href="#"><span aria-hidden="true">»</span></a>
</li>
</ul>
</nav>
</center>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well turbo">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
</div>
</div>
</div>
I've tried using a flexbox and putting the wells in there which seemed to work until i zoomed in and noticed it was no longer responsive and overlapped the other content.
What is the best and most efficient way of adding wells to the left and right side of the page without adding unnecessary whitespace and maintaining responsiveness?

You can try with below example to get the same use col-xx-offset-xx bootstrap's classes
I posted a working example
You can use container-fluid instead of container.
.box {
border: 1px solid;
width: 100%;
height: 100px;
margin: 0px 0px 10px 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
</div>
Working codepen - codepen

I've no idea how to do it with fixed sizes, css is hard.
body {
padding-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">header row</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-lg-6">
<div class="well">
sample text
</div>
<div class="row">
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>

How can I put these buttons side by side

How can I put these buttons side by side and centered?
The are way to long and one on top of the other.
I've tried different bootstrap classes, but I can't find the one that is going to align them under the quote.
$(document).ready(function() {
/*getting random quote on button click*/
$('#getMessage').on("click", function() {
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&"+new Date().getTime(), function(json) {
console.log(json[0].content)
console.log(json[0].title)
// var quoteArr = json.contents.quotes[0])
$("#quote-content").html(json[0].content);
$("#quote-author").html("--"+json[0].title);
$(".social-button").toggle();
});
});
});
body {
background-color: #334551;
}
.container {
padding-top: 50px;
}
.header_text {
font-family: 'Allura';font-size: 50px;
color: green;
}
.sub_text {
font-family: 'Allura';font-size: 30px;
}
#getMessage {
font-size: 18px;
}
.social-button {
with: 120px;
margin: 10px;
visibility: block;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: green;
border-width: 5px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 18px;
}
<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Welcome to Daily Quotes!</h1>
<div class="row col-lg-12 text-centered">
<img class="image center" src="http://pctechtips.org/quotes/aristoteles.jpg">
</div>
<div class="row">
<p class="col-lg-12 sub_text text-center text-primary">Press the button for a famous quote!...</p>
</div>
<div class="col-md-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-lg-8 offset-lg-2">
<div id="quote-content" class="row col-lg-12 text center"></div>
<div id="quote-author" class="row col-lg-12 text center"></div>
</div>
<div class="col-xs-6 social-button center">
<a class="btn btn-info btn-block btn-social btn-twitter">
<i class="fa fa-twitter"> Twitter</i>
</a>
<a class="btn-primary btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"> Facebook</i>
</a>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
-- this is your row with text
</div>
<div class="row">
<div class="col-xs-6">
-- this is half the next row for button 1
</div>
<div class="col-xs-6">
-- this is half the next row for button 2
</div>
</div>
</div>
</div>
this is just basic bootstrap classes
on row will be col-xs-12 that will take up the entire screen for the text
then the next row for the two buttons will be in another row , each of these col-xs-6 that means each one will take up 50% of the width of the screen

section is not responding to CSS

I've started coding this landing page and after I was done with the fullvp menu the section class="hero" is now not responding, when trying to edit it on chrome it actually worked. so, I went back to my source to see if there are any typos or missing symbols - didn't find none -_-, so... Need some help from the community, thank
P.S
It's probably something stupid I've done so my apologies =)
img { width: 100%; }
header {
background-color: #000;
padding: 1px;
text-align: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
#logo {
border: 5px solid #fff;
display: inline-block;
color: #fff;
padding: 5px;
}
#menu-icon {
position: fixed;
top: 0;
left: 0;
z-index: 1;
padding: 5px;
width: 50px;
background: royalblue;
color: white;
transition: .3s ease;
display: inline-block;
}
#menu-icon:hover, #menu-icon:focus {
/*background: black;*/
transition: .5s ease;
width: 100%;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 46px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color:royalblue;
}
.closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px !important;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
.hero {
background: green;
display: inline-block;
margin-top: 150px;
padding: 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>Student Loan Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="norm.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="wrap">
<section class="header">
<header>
<h1 id="logo">SAVVY STUDENT</h1>
<div id="myNav" class="overlay">
<i class="fa fa-times" aria-hidden="true"></i>
<div class="overlay-content">
Home
About
Contact
</div>
</div>
<span id="menu-icon" style="font-size:30px;cursor:pointer" onclick="openNav()"><i class="fa fa-bars" aria-hidden="true"></i></span>
</header>
</section>
<section class="hero">
<div class="hero-content">
<h2 id="hero-content-headline">GRADUATE FROM STUDENT LOANS</h2>
<p id="hero-content-content">STUDENT LOAN DEBT, RECORD BREAKING $1.5 TRILIAN. POST STUDENTS ARE TAKING ADVANTAGE OF DEBT RELIEFE. WE BELIVE THAT EVERYONE DESERVES A SECOND CHANGE. DON’T FALL BEGIND TAKE ADVANTAGE OF STUDENT LOAN FORGIVENESS. APPLY NOW AND FIND OUT HOW MUCH YOU CAN GET FORGIVEN</p>
</div>
<div class="form-wrap">
<form method="post" action="send.php">
<legend>Find out how much you can get forgiven <span class="form-tagline">Enter your details and we will get in touch</span></legend>
<fieldset class="form-fields">
<label for="user-first">First Name</label>
<input type="text" name="user_first_name" class="user-first">
<label for="user-last">Last Name</label>
<input type="text" name="user_last_name" class="user-last"><br>
<label for="user-email">Email</label>
<input type="email" name="user_email_address" class="user-email">
<label for="user-phone">Phone</label>
<input type="tel" name="user_phone_number" class="user-phone"><br>
<label for="user-address">Address</label>
<input type="text" name="user_address_street" class="user-address">
<label for="user-city">City</label>
<input type="text" name="user_address_city" class="user-acity"><br>
<label for="user-state">State</label>
<input type="text" name="user_address_state" class="user-state">
<label for="user-zip">Zip</label>
<input type="number" name="user_address_zip" class="user-zip"><br>
<button type="submit">find out now!</button>
</fieldset>
</form>
</div>
</section>
<section class="why-program">
<div class="why-program-wrap">
<h1>Why Apply to Student Loan Forgiveness Program?</h1>
<ul>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Reduce payment</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Consolidate loans</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Increase credit Score</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Deal with one lender</li>
</ul>
</div>
</section>
<section class="features">
<div class="feature-apply feeature">
<span><i class="fa fa-pencil" aria-hidden="true"></i></span>
<h3>Apply today</h3>
<p>Fill out the form or give us a call.</p>
</div>
<div class="feature-apply feeature">
<span><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>
<h3>Approved</h3>
<p>Submit your request with 1 of our consultants and get approved in minutes.</p>
</div>
<div class="feature-apply feeature">
<span><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
<h3>Enroll</h3>
<p>To one of the programs and change your life today</p>
</div>
<div class="features-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BeBx8UdVOCc" frameborder="0" allowfullscreen></iframe>
</div>
</section>
<section class="reviews">
<h3>What Are Clients Say...</h3>
<div class="review">
<img src="" alt="Reviewer-name" class="reviewer-photo">
<h3 class="review-name">Bob Smith</h3>
<p class="review-content">Best Company Ever</p>
</div>
</section>
<section class="how-works">
<div class="how how-1">
<h3>one stop shop</h3>
<p>We do it all for you from preparing your documentation, talking to your lender, enrolling you to the program, you don’t need to lift a finger.</p>
</div>
<div class="line"></div>
<div class="how how-2">
<h3>You are safe</h3>
<p>We are a trusted company with your information encrypted to our system where only the Department of Education has access too.</p>
</div>
<div class="line"></div>
<div class="how how-3">
<h3>Approved in 1 call</h3>
<p>In just 1 phone call our team of experts will let you know if you get approved.</p>
</div>
</section>
<section class="why-us">
<h3>Why Us</h3>
<p>[company] main priority is to help post students get the financial aid they deserve. Company has been in business for years. Professionally providing great customer service with 1 point of contact and quick response. While keeping your personal information safe and secured. Our team of consultants and underwriters strive on providing on point information on enrolling you to the program that will best benefit you. We stick by you on the full length of your program, providing you with answers to all your questions and concerns.</p>
</section>
<div class="divider"><hr></div>
<section class="articles">
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
read more
</div>
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
read more
</div>
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
read more
</div>
</section>
<footer>
<section class="contact-us">
<div class="colm-1">
<h3>Contact Us</h3>
<ul>
<li>Office: (866) 210-1337</li>
<li>Address: 2351 W 3rd St<br>Los Angeles, CA</li>
<li>Email: info#fslforgive.com</li>
</ul>
</div>
<div class="colm-2">
<form method="post" action="send.php">
<legend>Find out how much you can get forgiven <span class="form-tagline">Enter your details and we will get in touch</span></legend>
<fieldset class="form-fields">
<label for="user-first">First Name</label>
<input type="text" name="user_first_name" class="user-first">
<label for="user-last">Last Name</label>
<input type="text" name="user_last_name" class="user-last"><br>
<label for="user-email">Email</label>
<input type="email" name="user_email_address" class="user-email">
<label for="user-phone">Phone</label>
<input type="tel" name="user_phone_number" class="user-phone"><br>
<label for="user-address">Address</label>
<input type="text" name="user_address_street" class="user-address">
<label for="user-city">City</label>
<input type="text" name="user_address_city" class="user-acity"><br>
<label for="user-state">State</label>
<input type="text" name="user_address_state" class="user-state">
<label for="user-zip">Zip</label>
<input type="number" name="user_address_zip" class="user-zip"><br>
<button type="submit">find out now!</button>
</fieldset>
</form>
</div>
<div class="social">
<span><i class="fa fa-facebook-official" aria-hidden="true"></i></span>
<span><i class="fa fa-youtube-play" aria-hidden="true"></i></span>
<span><i class="fa fa-instagram" aria-hidden="true"></i></span>
<span><i class="fa fa-envelope" aria-hidden="true"></i></span>
</div>
</section>
</footer>
</div>
<script src="https://use.fontawesome.com/e4028997c7.js"></script>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>

#media screen is not closed properly
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
}/**closing bracket is missing***/
.hero {
background: green;
display: inline-block;
margin-top: 150px;
padding: 1px;
}
http://codepen.io/nagasai/pen/xORWmd

iPad and iPhone not scrolling to anchored div

I have tried to get both an iPad and iPhone to work with my current pen and it seems that I can't get it. I have tried to use and SomeContent as well as the normal . The will simply not scroll down to the div. I've tried to cut out the javascript, bootstrap, css, and even cut the page down to rudementary html for awhile but none of the tests seemed to fix it.
Included in the file are Bootstrap.js, Jquery.min.js, Bootstrap.min.css, and font-awesome.min.css
You can find the pen here: Gregory Buhler Portfolio
HTML:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<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 topnav" href="http://GregoryBuhler.com" target="_blank">Gregory Buhler</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div id="home" class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="homecontent">
<h1>Gregory Buhler Website Design</h1>
<h3>Always on the fantastic side of life</h3>
</div>
<!-- End .homecontent -->
</div>
<!-- End .col-lg-12 -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #home -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-md-offset-2 text-background">
<h4>A Bit About Me</h4>
<p>When I was a kid my dad pushed for my brother and I to learn computers. I took to it like a fish to water. From 8 onwards my summers were spent indoors working away on simple scripting languages and later on some game modifications.</p>
<p>I won't lie, it wasn't easy getting past my <em>"it needs to be perfect all the time"</em> streak. In fact I still have that streak, I've just learned to fix and perfect as you go instead of making it perfect on the first go-round.</p>
<p>I absolutely love a challenge, critisism of my work used to cause me to clam up a bit. Over time I learned to take the constructive side of critisism and use it to better myself and the content I produce.</p>
<p>None of this would be possible without my amazing wife who puts up with my nose being buried in a book or in code for hours at a time every day. I want to provide the best life I can for her, and I'm good at tech and I love tech, this
is how I plan to provide for her the rest of our lives.</p>
</div>
<!-- End .com-sm-12 .col-md-4 .com-md-offset-2 .text-background -->
<div class="col-md-4 col-md-offset-1 text-center">
<img class="img-circle vertical-align" src="http://i66.tinypic.com/2ywz3w5.jpg" alt="Gregory Buhler in his black cowboy hat.">
</div>
<!-- end .col-md-4 .col-md-offset-1 .text-center -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #about -->
<div id="portfolio">
<div class="portfoliocontent text-center">
<div class="container">
<h1>Portfolio</h1>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="container">
<div class="row">
<div class="contactcontent text-center">
<div class="col-md-12">
<h1>Get ahold of me</h1>
<h3>Open Your Eyes to the Opportunities</h3>
</div>
<hr class="hor-big">
<div class="col-sm-12 col-md-2 col-md-offset-2">
<a href="https://www.facebook.com/GBProgramming" target="_blank" class="btn-inverse"><i class="fa fa-facebook"></i> Facebook
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://twitter.com/gregoryBuhler" target="_blank" class="btn-inverse"><i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://github.com/Gregory-Buhler" target="_blank" class="btn-inverse"><i class="fa fa-github"></i> Github
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://www.linkedin.com/in/gregorybuhler" target="_blank" class="btn-inverse"><i class="fa fa-linkedin"></i> Linkedin
</a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container text-center">
<p>© Website created by Gregory Buhler</p>
</div>
</footer>
</body>
CSS:
#about {
background: url(http://i63.tinypic.com/213ht14.jpg) 50% 0 no-repeat fixed;
background-size: cover;
padding-top: 10%;
padding-bottom: 10%;
font-size: 1.1em;
}
#about .text-background {
background: rgba(255, 255, 255, .3);
font-family: droid-serif;
color: rgb(30, 30, 30);
padding: 10px;
border-radius: 10px;
}
#about img {
padding: 20px;
}
#about,
#contact,
#home,
#portfolio {
overflow: hidden;
min-height: 900px;
}
a.btn-inverse {
position: relative;
display: inline-block;
margin-top: 10px;
width: auto;
transition: all .2s ease-in-out;
background-color: rgb(90, 90, 90);
border: rgb(60, 60, 60) 1px solid;
padding: 10px 15px;
border-radius: 5px;
color: white;
}
a.btn-inverse:hover {
background-color: rgb(0, 0, 0);
transform: scale(1.1);
text-decoration: none;
}
body {
padding-top: 50px;
}
#contact {
background: url(http://i63.tinypic.com/2rp9tau.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.contactcontent {
padding-top: 25%;
padding-bottom: 25%;
}
footer {
padding-top: 10px;
}
h1,
h2,
h3 {
font-family: Cinzel;
text-shadow: 1px 1px 1px #000;
}
h1 {
font-size: 4em;
color: rgb(100, 100, 100);
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
color: rgb(150, 150, 150)
}
h4 {
font-size: 1.7em;
font-weight: 700;
}
#home {
background: url(http://i65.tinypic.com/vht1c2.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.homecontent {
padding-top: 25%;
padding-bottom: 20%;
}
.hor-big {
clear: both;
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
.hor-big:after {
content: "\00a0";
}
.imgholder {
margin: auto;
border-radius: 5px;
border: rgb(20, 20, 20) 1px solid;
background-color: rgb(250, 250, 250);
width: 190px;
height: 180px;
padding-top: 5px;
padding-left: 5px;
}
.imgholder img {
float: left;
}
.inset-shadow {
position: relative;
float: left;
}
.inset-shadow:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
#my-row {
display: table;
}
#my-row .content {
float: none;
display: table-cell;
vertical-align: middle;
}
.navbar {
margin-bottom: 0;
position: fixed;
}
.nav li:hover {
background-color: rgb(28, 28, 28);
}
#portfolio {
background: url(http://i67.tinypic.com/287nl8z.jpg) 50% 0 repeat fixed;
background-size: cover;
}
.portfoliocontent {
padding-top: 10%;
padding-bottom: 10%;
}
.portfoliocontent .row > div {
transform: all .4s ease-in-out;
margin-top: 10px;
}
JS:
$("nav ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
// animate the scroll
y = $(this.hash).offset().top - 50;
if ((y - window.pageYOffset) > 0) {
time = y - window.pageYOffset;
} else {
time = window.pageYOffset - y;
}
$('html, body').animate({
scrollTop: y
}, time);
});
Any help would be greatly appreciated! Thank you!

We Keep Coding

JavaScript is the programming language of the Web.

Fixed Footer color is not changing? - javascript

There is an issue in your css. Replace .navbar-inverse { background-color: #222; border-color: #080808; } with .navbar.navbar-inverse { background-color: #222; border-color: #080808; }

your footer also has the navbar class; so you have to define it like that: footer .navbar { background-color: green; }

Related

script.js not linked to html?

Display bootstrap wells on left and right side of the page

How can I put these buttons side by side

section is not responding to CSS

iPad and iPhone not scrolling to anchored div

Categories

Resources