i inserted a div in between my text and my header picture. please can anyone help me. i would be grateful. When i placed the div it goes to the back of the text and moves up. what can i do.I am finding it hard to add the code file. but this is the div overlapping
MY JSFIDDLE IS HERE JS FIDDLE
/*REVEAL LINK*/
.revela {
width: 100%;
text-align: center;
height: 100px;
background-color: #8080ff;
}
.button, .button:focus {
background-color: black;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Bree Serif', serif;
text-transform: uppercase;
}
.button:hover {
background-color: #8080ff;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
/*IMAGE DESIGN*/
img {
width: 100%;
height: auto;
margin: 0;
padding: 0;
/*margin-top: -50px;*/
}
.exampleClass {
padding: 0;
margin: 0;
}
*{
margin: 0;
padding: 0;
}
/*NAVBAR*/
nav {
width: 100%;
}
/*body {
padding-top: 70px;
}*/
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
top: calc(100% + 9px);
}
.navbar {
padding: 10px 0;
margin:0;
border-radius:0;
border:none;
width: 100% !important;
/*z-index: 1;*/
font-family: 'Bree Serif', serif;
}
.navbar-default{
background-color: #8080ff;
width: 100% !important;
}
.navbar-default .navbar-header > a, .navbar-default .navbar-header > a:focus, .navbar-default .navbar-header > a:hover {
color:white;
font-size: 2em;
}
.navbar-header button {
border:none;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
color: white;
transition: color 0.5s;
font-size: 1.1em;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover{
color: white;
}
.navbar-default .navbar-nav>li.list:after {
content: "";
display:block;
border-bottom: 2px solid white;
transform: scale(0);
transition: transform 0.8s ease-in;
transform-origin: 0% 50%;
}
.navbar-default .navbar-nav>li.list:hover:after {
transform:scaleX(1);
}
/*ABOUT COMPANY*/
.works {
margin:30px 50px;
}
.history, .about{
font-family: 'Lato', sans-serif;
color:black;
}
.history{
font-size: 50px;
font-weight: 700;
}
.about {
font-size: 22px;
font-weight: 400;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Allamit | Agric Engineering</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./css/allamit.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class= "container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-demo">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
ALLAMIT
</div>
<div class="collapse navbar-collapse" id="bs-demo">
<ul class="nav navbar-nav navbar-right">
<li class="list">ABOUT</li>
<li class="list">COMPANY WORKS</li>
<li class="list">CONTACT</li>
</ul>
</div>
</div>
</nav>
<div class="col-xs-12 exampleClass">
<img class="image" src="https://s18.postimg.org/q7qolxsmx/garri_processing.jpg">
</div>
<div class="revela">
<a class="button" href="revealmaster/index.html">Click Here For A Presentation About The Website</a>
<div class="clearfix"></div>
</div>
<div class="works">
<!-- <div class="col-lg-12"> -->
<h2 class="history">Our Company History</h2>
<p class="about"> The company was incorporated February 1999 (RC 350443). Allamit (Nig). Limited is one of the eminent manufacturers and exporters of quality agricultural and industrial machines in Nigeria. Our company specializes in research and development and promotion of the following machines ... <a class="more" class="more" href="Director/company_profile.html">Read More</a></p>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/allamit.js"></script>
</body>
</html>
this is the div when the picture is removed. it seems the div goes under the bootstrap header
This is the div class revela
After looking into your code, there is a floating happen inside your <div class="revela"> tag,
So you just need to add <div class="clearfix"></div> before <div class="revela"> tag.
So it will look something like:
Hope this may help you.
Related
How to extend the background color of bootstrap navbar to the background header image brand without affecting the height of the navbar? Also the color of the font turned black. I tried to override it with the font color of white in my css file but nothing changed.
Here's how I want it to look like:
This is taken from a psd file.
And this is how it looks like from my attempt converting it to html/css:
HTML Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<header class="pimg1">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-toggle" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav navbar-center">
<li>Home</li>
<li>About Us</li>
<li><a name="Home" class="nav-link navbar-brand">Logo</a></li>
<li>Menu</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
CSS Code
body, html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #000009;
}
.border-bottom, .section-two .waffle-border hr, .section-two .b-container hr, .section-three hr {
width: 5%;
border-bottom: 5px solid #f41313;
border: 0;
border-top: 3px solid #f41313;
}
.navbar-default {
background: #FFFFFF;
}
.navbar-default .navbar-brand {
color: #000009; }
.navbar-nav {
width: 100%;
text-align: center; }
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-toggle .icon-bar {
background-color: black;
}
.navbar .navbar-nav > li > a {
color: #000009;
line-height: 3rem;
}
.navbar-brand {
font-size: 2.5rem;
color: #FFFFFF;
font-family: "Permanent Marker", cursive;
background-color: #8B1015;
height: 8.125rem;
}
.navbar-default .navbar-toggle {
border-color: #FFFFFF;
}
.pimg, .pimg1 {
position: relative;
opacity: 0.80;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%; }
.ptext {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: 4rem;
letter-spacing: 8px;
text-transform: uppercase;
font-family: "Permanent Marker", cursive;
}
.pimg1 {
background-image: url(../imgs/bg-header2.jpg);
opacity: 0.90;
}
Sorry for the messy code, I'm using SASS.
Change
.navbar-default .navbar-brand {
color: #000009;
}
By :
.navbar-default .navbar-nav>li>a.navbar-brand {
color: #000009;
}
Because the following style ".navbar-default .navbar-nav>li>a" is a priority.
so im coding up this pizza site and ive got a problem - i wanted to put the place's logo in the navbar (which is also a link to main page) but i cannot get it to be displayed. im using twitter bootstrap. here's the code:
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span, a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover{
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html"><div id="logo"></div></a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a></li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
jsfiddle
Hi now you just define to margin-right:20px; in your li as like htis
.nav-pills>li+li {
margin-right: 20px;
}
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('http://economictimes.indiatimes.com/photo/33185989.cms');
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span, a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li+li {
margin-right: 20px;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover{
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html"><div id="logo"></div></a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="http://economictimes.indiatimes.com/photo/33185989.cms" id="logoFB"></a></li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Please do refer the css code and also do check the image path is correct..
#logo {
background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
background-repeat: no-repeat;
width: 431px;
height: 146px;
margin-left: 15px;
background-size: contain;
background-position: center center;
}
I have just add my website logo and it's working fine. Have a look
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('http://www.dezaro.com/siteimg/logo.png') ;
background-repeat:no-repeat;
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span,
a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover {
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html">
<div id="logo"></div>
</a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li>
<a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342"
width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I have been building a website on my laptop since a month, the website looks all nice and dandy on my machine(15 inch screen. However when I run it on different machines(17 inch and 13 inch) ones, it all goes haphazard. I have used bootstrap, my website is responsive to some extent but not fully.
Since I don't fully know which all parts of the site and responsible for the "un-responsiveness", I will post the whole code here.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css"></link>
<link rel="stylesheet" href="css/navbar.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>Big Data for your city!</title>
</head>
<body>
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class = "navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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" rel="home" href="#" title="Explore around">
<img style="max-width:150px; margin-top: -7px;"
src="Images/logo.png">
</a>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li>SIGN UP</li>
<li>LOG IN</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
</header>
<div class="jumbotron">
<div class="container-fluid">
<h1><center>Find amazing places near your city.</center></h1>
<p>Places you could travel to and explore in a weekend.</p>
<a class = "explore-anc" href="#Cities"><button id "exlpore-button" class="btn sm explore">Explore</button></a>
<p>OR</p>
<div class = "seach-area">
<form id="searchBox" action="/search" style="display:inline;" method="get">
<center><input id="text-enter" name="q" size="80" type="text" placeholder="Enter a place "/>
<input id="search-button" value="Search" type="submit"/></center>
</form>
</div>
</div>
</div>
<div class="learn-more" id ="learn">
<div class="container">
<div class = "row">
<div class = "col-md-4">
<h3>Cities with service</h3>
<p>Find all the cities here!</p>
</div>
<div class = "col-md-4">
<h3>Analyze</h3>
<p>Big data analyics</p>
</div>
<div class = "col-md-4">
<h3>Vlue</h3>
<p>Add value to all your stuff here!</p>
</div>
</div>
</div>
</div>
<div id = "Cities" class = "neighborhood-guides">
<div class = "container">
<h2>Cities:</h2>
<p>Start exploring places around your city</p>
<div class = "row">
<div class = "col-md-4">
<div class = "thumbnail" ng-click = "city NY">
<image src = "Images/NY.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city mum">
<image src = "Images/Mum.jpg"/>
</div>
</div>
<div class = "col-md-4">
<div class = "thumbnail" ng-click = "city SF">
<image src = "Images/SF.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city LA">
<image src = "Images/LA.jpg"/>
</div>
</div>
<div class = "col-md-4">
<div class = "thumbnail" ng-click = "city del">
<image src = "Images/Del.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city MA">
<image src = "Images/MA.jpg"/>
</div>
</div>
</div>
</div>
</div>
<div id = "analytics" class = "analytics">
<div class = "container">
<div>
<h2><center>Plan better with data</center></h2>
<p>Data is constantly churned, filtered and updated. Forget numbers, use graphs and make your every trip a perfect one</p>
</div>
<div class="row">
<div class="col-md-6">
<img src="Images/india-home.png" />
</div>
<div class="col-md-6">
<ul type = "">
<li>Weather patterns, rainfall graphs on every city.</li>
<li>Popularity pattern, interest rate graphs on each and every place</li>
<li>The size of the circle in this map represents the number of places covered in that city</li>
<li>Go to your city and find analytics there. Also, each place get its own graphs</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
Navbar:
html, body{height: 100%;min-height:100%;}
header .navbar {
padding-left: 0px;
padding-right: 0px;
padding-top:30px;
transition: all .5s ease-out;
}
header .navbar-brand {
background-repeat: no-repeat;
background-position: 15px 0;
height: auto;
}
header .navbar-default {
background-color: transparent;
border:none !important;
}
header .navbar-default .navbar-nav li {
color: white;
font-size: 22px;
padding: 5px 8px;
font-weight: 700;
}
header .navbar-default .navbar-nav a {
color: white;
font-size: 14px;
padding: 5px 8px;
border-radius: 20px;
}
header .navbar-default .navbar-nav a:active {
color: white;
font-size: 14px;
padding: 5px 8px;
border-radius: 20px;
}
/** Navbar Brand **/
header .navbar-brand {
margin-left:0px;
padding: 0px;
}
/*Navbar toggle*/
header .navbar-toggle {
background-color: #279182;
}
header .navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
#media only screen
and (max-width: 768px) {
header .navbar-collapse.in {
background-color: rgba(0,0,0, .5);
}
}
/*Links Navbar*/
header .navbar-default .navbar-nav a:hover {
color: rgba(0,0,0,0.5);
background-color: white;
border: 2px solid white;
}
header .navbar-default .navbar-nav a:focus{
color: white;
}
header .navbar-default .navbar-nav a:hover {
color: rgba(0,0,0,0.5);
background-color: white;
border: 2px solid white;
}
Main CSS:
.jumbotron {
position: relative;
background-image:url('Images/B.jpg');
width: 100%;
min-height: 100%;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
margin-bottom:0px;
}
.jumbotron .container-fluid {
position: relative;
top:105px;
}
.jumbotron h1 {
color: #fff;
font-size: 60px;
font-family: Arial;
font-weight: 700;
opacity:1;
}
.jumbotron p {
font-size: 20px;
color: #fff;
text-align:center;
font-weight: 700;
opacity:1;
padding-top:10px;
}
.jumbotron a {
text-decoration: none;
width:15%;
}
.search-area{
display:block;
padding-top: 100px;
margin-top: 100px;
}
#search-button {
background:transparent;
color:white;
font: 'trebuchet ms', trebuchet;
padding:13px 25px;
border-radius:0 9px 9px 0;
-moz-border-radius:0 9px 9px 0;
-webkit-border-radius:0 9px 9px 0;
-o-border-radius:0 10px 10px 0;
border:2px solid white;
font-weight:bold;
margin-left:-4px;
}
#search-button:hover{
background-color: #5CDEBD;
border: 2px solid #5CDEBD;
}
#text-enter {
background: white;
padding:15px;
border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border:0 none;
width:30%;
}
/*Learn*/
.learn-more {
padding: 30px;
background-color: #8715CE;
color: white;
font-weight: 500;
font-size: 17px;
}
.learn-more h3 {
padding-top:30px;
padding-bottom:30px;
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: 800;
}
.learn-more a {
color: white;
padding:10px;
border: 2px solid white;
}
.learn-more a:hover {
background-color:white;
color: rgba(0,0,0, 0.5);
text-decoration:none;
}
/*neighborhood*/
.neighborhood-guides{
background-color: #efefef;
border-bottom: 1px solid #DBDBDB;
min-height: 100%;
box-shadow: none;
}
.neighborhood-guides .row .thumbnail{
box-shadow: none;
background-color:black;
}
.neighborhood-guides .row .thumbnail img:hover {
background-color: #000;
opacity: 0.6;
}
.neighborhood-guides .container{
padding-top:25px;
}
.neighborhood-guides .container .row{
padding-top:30px;
}
.neighborhood-guides h2{
padding-top:50px;
font-weight:800;
color: #393c3d;
font-size: 48px;
}
.neighborhood-guides p{
margin-bottom:13px;
font-size: 20px;
}
.analytics
{
background-color: #15CE68;
min-height: 130%;
color:white;
}
.analytics ul li{
list-style: none;
padding-top: 60px;
font-size: 20px;
font-weight: 700;
}
.analytics h2{
font-weight: 900;
padding-top:6%;
font-size: 48px;
}
.analytics .container p{
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: 20px;
}
.analytics img{
max-height: 600px;
}
If somebody could help me with this, I would be really grateful, this has been burdening me for a week now.
There are a couple of things that you might find helpful
Remove the second jQuery link. You are already getting jQuery from the Google CDN
Remove the min-height for your images, or use percentages instead of a fixed pixel value
Always better to use percentages than fixed pixel length for the overall layout styles for your website
Don't mix up with both percentage and pixel values for the same element, unless it is unavoidable
This is the HTML code for my BootStrap website:
<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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Yanni Pang</title><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"><!-- Custom styles for this template -->
<link href="/css/main.css" rel="stylesheet" type="text/css"><!-- Animate CSS -->
<link href="/css/animate.css" rel="stylesheet" type="text/css">
<link href="css/minimalpace.css" type="text/css">
<script src="plugins/pace.min.js" type="text/javascript">
</script>
<link href="css/minimalpace.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script><!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript">
</script><!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js" type="text/javascript">
</script><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-17399906-5', 'auto');
ga('send', 'pageview');
</script><!-- End -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse animated fadeIn">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span></button> <a class="navbar-brand animated slideInLeft" href="/index.html">Yanni Pang</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="disabled">Photos</li>
<li>Articles</li>
<li>Contact Me</li>
<li>test2</li>
</ul>
</div>
</div><!-- <ul class="nav nav-pills pull-right">
<li class="navbarpills">Home</li>
<li class="disabled">Photos</li>
<li>Articles</li>
<li>test1</li>
<li>test2</li>
</ul> -->
</nav>
<div class="container">
<div class="jumbotron jumbotronothercolor animated fadeIn">
<h1>Welcome to my website!</h1>
<p class="lead">On this site, I will post random stuff!</p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Education</h4>
<p>I am a 9th grade High School student at RMHS. I am teaching myself how to program, and build things.</p>
</div>
<div class="col-lg-6">
<h4>Missions Trips</h4><!-- <ul class="missionslist"> -->
<ul class="missionslist">
<li style="list-style: none; display: inline">
<h5>Grace Chapel</h5>
</li>
<li>Trinidad 2014</li>
<li><a class="animated bounceIn" href="/navajonation">Navajo Nation 2015</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h4>Sports</h4>
<p>I swim competitively for the Reading Rockets Men's Swim Team. I have earned my varsity letter. Here are my records:</p><br>
<p>50 Free: 26.75</p>
<p>100 Breast: 1:17.93</p>
<p>100 Free: 1:01:01</p>
<p>Breath Holding Personal Best: 1:30:57</p>
</div>
<div class="col-lg-6">
<h4>Hobbies</h4>
<p>Swimming</p>
<p>Coding</p>
<p>Making</p>
<p>Photography</p>
</div>
<div class="row">
<div class="col-lg-6 tempspace">
<h4>Coding Experience</h4>
<p>HTML</p>
<p>CSS</p>
<p>Some Java</p>
<p>Some AppleScript</p>
</div>
<div class="col-lg-6">
<h4>Photography Gear</h4>
<p>Canon EOS Rebel t6s</p>
<p>Video Ball Mount Tripod</p>
<p>Canon EF-S 18-135 Lens with Lens Hood</p>
<p>Canon EF 50mm STM</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 social animated fadeIn">
<span class="fa-stack fa-lg"> </span> <span class="fa-stack fa-lg"> </span> <span class="fa-stack fa-lg"> </span>
</div>
</div>
<footer class="footer">
<p>© Yanni Pang 2014</p><img src="http://iplogger.org/1sF94.jpg">
</footer>
</div><!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js" type="text/javascript">
</script>
</div>
</body>
</html>
Here is my CSS:
/* Space out content a bit */
body {
background-color: #fff;
color: #000;
}
.jumbotronothercolor {
background: rgba(120, 163,rgba(210, 210, 210, 1)92, 0.79);
}
: : selection {
background: #74ff7d;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,.marketing,.footer,.singlepage {
padding-right: 15px;
padding-left: 15px;
}
/* MoreSpace for text */
.morespace {
padding-left: 80px;
}
.lessspace {
padding-left: 149px;
}
/* Nav Pills */
.nav-pills>li>a {
color: #76a25b;
}
/* End Nav Pills */
/* Text Centered */
.col-lg-12 > a {
text-decoration: none;
}
.col-lg-12 {
text-align: center;
}
.col-lg-12 a:hover {
text-decoration: none;
color: #ff9a00;
transition: .5s;
}
.col-lg-12 a {
text-decoration: none;
color: #76a25b;
transition: .5s;
}
/* Main Body Links */
.col-lg-6 a {
text-decoration: none;
color: #76a25b;
transition: .5s;
}
.col-lg-6 a:hover {
text-decoration: none;
color: #ff9a00;
}
.col-lg-6 {
text-align: center;
}
/* Main Body Links End */
/* Custom page header */
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
text-align: center;
}
/* Customize container */
#media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
color: #000;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header,.marketing,.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
.tempspace {
margin-top: 50px;
}
.missionslist {
list-style-type: disc;
list-style-position: inside;
margin: 0;
padding: 0;
}
.missionslist h4 {
margin: 0;
padding: 0;
}
/*Navbar*/
.navbar {
border-radius: 0;
}
.navbar-brand {
font-size: 180%;
}
.navbar-inverse .navbar-nav > li > a {
color: #74ff7d;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ff9a00;
}
.navbar-inverse .navbar-brand {
color: white;
}
.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
/*End*/
/*NavajoNation*/
.singlepage {
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
.navajonation {
font-family: Helvetica;
font-size: 1.2em;
text-align: auto;
line-height: 2em;
}
.navajonationdonate {
padding-top: 20px;
}
.navajocenter {
text-align: center;
}
/*NavajoNation End*/
/*Col Center*/
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
/*Col Center End*/
.tab {
margin-left: 40px;
}
/* Classes */
.pull-left {
float: left!important;
}
.pull-right {
float: right!important;
}
// Usage as mixins
.element {
}
.another-element {
}
.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent url(http://yannipang.com/images/watermark.png) bottom right no-repeat;
z-index: 1100;
}
This is how it appears:
Website
How do I align 'Photography Gear' and 'Coding Experience' horizontally so they are parallel like the others? Also why is there a big space between the bottom of 'Sports' and 'Photography Gear'?This has been bugging me for a while now. Thanks for all your help!
You forgot close the div - second row (with sports and hobbies).
The second row div is not closed before starting the next row which causes them to be nested.
...
<div class="col-lg-6">
<h4>Hobbies</h4>
<p>Swimming</p>
<p>Coding</p>
<p>Making</p>
<p>Photography</p>
</div>
</div> <!-- This row closing tag is missing -->
<div class="row">
<div class="col-lg-6 tempspace">
<h4>Coding Experience</h4>
<p>HTML</p>
<p>CSS</p>
<p>Some Java</p>
<p>Some AppleScript</p>
</div>
...
Then you also have a stray closing div tag at the bottom before the closing body tag. You probably threw it down there by accident to fix a tag warning.
I was working on my footer and I messed up something some where and made it so there is a white space past the screen on the right that you can scroll to. How do I remove this? Here is my code.
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">
<meta name="description" content="">
<meta name="author" content="">
<title>Ingraham PE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/main.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="about" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">
<span class="light">Home</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li class="active">
About
</li>
<li>
Contact
</li>
<li class="dropdown">
Assignments <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Weight Training</li>
<li>Personal Fitness</li>
<li>Lifetime Activities</li>
<li>Team Sports</li>
</ul>
</li>
<li>
Mr.Elvig
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">About</h1>
<img src="img/arrow-down.png">
</div>
</div>
</div>
</div>
</header>
<span class="anchor" id="main"></span>
<div class="content">
<div class="row">
<div class="col-md-3 col-md-offset-2 ing"><img src="img/Ingraham.png"></div>
<div class="col-md-6"><p class="content-text">“Intelligence and skill can only function at the peak of their capacity when the body is healthy and strong.” John F. Kennedy <br/><br/>Exercise can help prevent excess weight gain or help maintain weight loss. When you engage in physical activity, you burn calories. The more intense the activity, the more calories you burn. You don't need to set aside large chunks of time for exercise to reap weight-loss benefits. If you can't do an actual workout, get more active throughout the day in simple ways — by taking the stairs instead of the elevator or revving up your household chores.</p></div>
</div>
</div>
<footer class="footer">
<div class='row'>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
<!-- Custom Theme JavaScript -->
<script src="js/main.js"></script>
</body>
</html>
CSS
body {
width: 100%;
height: 100%;
font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
color: #fff;
background-color: #000;
}
html {
width: 100%;
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 35px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
letter-spacing: 1px;
}
p {
margin: 0 0 25px;
font-size: 18px;
line-height: 1.5;
}
#media(min-width:767px) {
p {
margin: 0 0 35px;
font-size: 20px;
line-height: 1.6;
}
}
a {
color: #219ab3;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
a:hover,
a:focus {
text-decoration: none;
color: #11505d;
}
.light {
font-weight: 400;
}
.navbar-custom {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: #000;
}
.navbar-custom .navbar-brand {
font-weight: 700;
}
.navbar-custom .navbar-brand:focus {
outline: 0;
}
.navbar-custom .navbar-brand .navbar-toggle {
padding: 4px 6px;
font-size: 16px;
color: #fff;
}
.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
outline: 0;
}
.navbar-custom a {
color: #fff;
}
.navbar-custom .nav li.active {
outline: nonte;
background-color: rgba(255,255,255,.3);
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus {
outline: 0;
background-color: rgba(255,255,255,.3);
}
#media(min-width:767px) {
.navbar {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
background-color: #000;
}
.navbar-custom.top-nav-collapse {
border-bottom: 1px solid rgba(255,255,255,.3);
}
}
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/intro-bg.jpg) no-repeat bottom center fixed;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro .intro-body {
display: table-cell;
vertical-align: middle;
}
.intro .intro-body .brand-heading {
font-size: 40px;
}
.intro .intro-body .intro-text {
font-size: 18px;
}
#media(min-width:767px) {
.intro {
height: 100%;
padding: 0;
}
.intro .intro-body .brand-heading {
font-size: 80px;
}
.intro .intro-body .intro-text {
font-size: 20px;
}
}
#-webkit-keyframes pulse {
0 {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes pulse {
0 {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
::-moz-selection {
text-shadow: none;
background: #fcfcfc;
background: rgba(255,255,255,.2);
}
::selection {
text-shadow: none;
background: #fcfcfc;
background: rgba(255,255,255,.2);
}
img::selection {
background: 0 0;
}
img::-moz-selection {
background: 0 0;
}
body {
webkit-tap-highlight-color: rgba(255,255,255,.2);
}
.content {
margin: 150px 0px 150px 0px;
background-color: white;
color: black;
}
p.content-text {
margin: 0px 10px 0px 10px;
}
#about {
background: url(../img/intro-bg.jpg) no-repeat;
}
.ing {
margin-top: 55px;
}
.anchor{
display: block;
height: 51px; /*same height as header*/
margin-top: -51px; /*same height as header*/
visibility: hidden;
}
.footer {
height: 50px;
background-color: grey;
}
Thanks in advance, Ian.
Add a container class to the content div. In bootstrap a row needs to be inside a container class.
<div class="content container"> <-- add container class here
<div class="row">
<div class="col-md-3 col-md-offset-2 ing"><img src="img/Ingraham.png"></div>
<div class="col-md-6"><p class="content-text">....</p></div>
</div>
</div>
Edit:
Just checked again your content class is messing up the containers margins so better doing it like this.
<div class="content">
<div class="container"><-- add container class here
<div class="row">
<div class="col-md-3 col-md-offset-2 ing"><img src="img/Ingraham.png"></div>
<div class="col-md-6"><p class="content-text">....</p></div>
</div>
</div>
</div>