I would like my navbar to be centered and always be shown at the top of the screen however whenever i think I've fixed it something goes wrong this time the text text is mushed. I would like it to be strait across. Also sometimes when I try to fix it the "Home" button and the image overlap. Thank You.
How it looks centered
How I would like it to look, but not centered
<!doctype html>
<html lang="en">
<head>
<title>The Benjamin Project | Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/assets/css/animate.css">
<link rel="icon" href="/static/assets/img/favicon.ico"> <!-- site icon -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/static/assets/script.js"></script>
<style>
#font-face {
font-family: Panton;
src:url("/static/assets/font/Panton-LightCaps.otf");
}
body {
margin: 0;
padding: 0;
background-color: #8CD28C;
overflow-x: hidden;
min-height:75px;
line-height:75px;
}
.navbar {
margin: 0;
border-radius: 0;
background-color: #8CD28C; /*bg color for tabs on navbar*/
color: #606060; /*text color for tabs on navbar*/
padding: 50px 0px 50px 0px;
font-size: 2em;
font-family:Panton;
border: 0;
animation-duration: 1.5s;
}
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:focus, .navbar-default .navbar-nav .active a:hover {
color: #606060; /*text color for active*/
background-color: #8CD28C; /*bg color for active*/
font-weight: bold;
}
.selected {
text-decoration-line:underline;
}
.navbar .navbar-brand img {
border-radius: 360%; /*rounds image*/
margin-top: -55px;
margin-right: 10px;
}
.navbar-default .navbar-nav li a {
color: #606060; /*non active colors*/
font-weight: bold;
}
.navbar-default .navbar-nav li a:hover {
color: #606060; /*color of text being hovered over*/
background-color: inherit;
text-decoration: underline;
}
.row {
margin-top: 3%;
padding-left: 20%;
padding-right: 20%;
animation-duration: 2s;
}
.row hr {
display: block;
height: 1px;
border: 0;
border-top: 2px solid #606060;
border-radius: 100%;
margin: 1em 0;
padding: 0;
}
.center{
width:50%;
max-width:960px;
margin:0 auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-default fadeInDown animated navbar-static-top center">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <!-- navigation button on mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://imgur.com/k8SlOAa.png" allign="middle" width="125" height="125"></a> <!-- benjamin logo alt="Benjamin Logo"-->
</div>
<div class="collapse navbar-collapse navbar-left center" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active selected">Home</li> <!-- labels on navigation bar -->
<li>Commands & Info</li>
<li>About</li>
<li>Benjamins</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" src="/static/assets/script.js"></script>
<page class="main">
<div class="row fadeIn animated"><hr></div>
</page>
</body>
</html>
Your issue with making the nav look like your linked image was
.center{
width:50%;
max-width:960px;
margin:0 auto;
}
Here it works fine if removed. You can expand to look at full screen or see it here https://codepen.io/anon/pen/zpZGwZ.
body {
margin: 0;
padding: 0;
background-color: #8CD28C !important;
overflow-x: hidden;
}
.navbar {
margin: 0;
border-radius: 0;
background-color: #8CD28C !important;
/*bg color for tabs on navbar*/
color: #606060;
/*text color for tabs on navbar*/
padding: 50px 0;
margin: 0;
font-size: 1.5em;
font-family: Panton;
border: 0 !important;
animation-duration: 1.5s;
}
.navbar-default .navbar-nav .active a,
.navbar-default .navbar-nav .active a:focus,
.navbar-default .navbar-nav .active a:hover {
color: #606060;
/*text color for active*/
background-color: #8CD28C;
/*bg color for active*/
font-weight: bold;
}
.selected {
text-decoration-line: underline;
}
.navbar .navbar-brand img {
border-radius: 360%;
margin-top: -55px;
margin-right: 10px;
}
.navbar-default .navbar-nav li a {
color: #606060;
/*non active colors*/
font-weight: bold;
font-size: 14px;
}
.navbar-default .navbar-nav li a:hover {
color: #606060;
/*color of text being hovered over*/
background-color: inherit;
text-decoration: underline;
}
.page-padding {
padding: 0 10%;
}
#media (min-width: 992px) {
.page-padding {
padding: 0 13%;
}
.navbar-default .navbar-nav li a {
color: #606060;
font-weight: bold;
font-size: 20px;
}
}
.page-content hr {
display: block;
height: 1px;
border: 0;
border-top: 2px solid #606060;
border-radius: 100%;
margin: 1em 0;
padding: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<html>
<body>
<div class="page-padding">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://i.imgur.com/k8SlOAa.png" width="125" height="125"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active selected">Home</li>
<li>Commands & Info</li>
<li>About</li>
<li>Benjamins</li>
<li>Login</li>
</ul>
</div>
<!--/.nav-collapse -->
</nav>
<page class="main">
<div class="page-content fadeIn animated">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac felis facilisis, pellentesque mauris at, accumsan diam. Ut aliquet eros a quam consequat bibendum. Donec lacinia odio aliquet, rutrum magna sit amet, mollis tortor. Nunc in viverra
libero. Phasellus eget tellus eget lorem mollis sodales. Fusce sem eros, molestie eu turpis sed, tempus finibus ipsum. Donec consectetur lectus ac dui gravida, nec tristique eros semper. Proin in vestibulum eros, ut ullamcorper purus. Proin
tincidunt neque urna, non placerat mi tincidunt id. Nulla eros tellus, feugiat tincidunt ex quis, laoreet interdum elit. Morbi dapibus, lacus id viverra posuere, arcu nulla aliquet mi, eu sollicitudin quam massa sed justo. Suspendisse vel lobortis
nibh, non convallis quam.</p>
<hr>
</div>
</page>
</div>
</body>
</html>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I want my layout to look like this:
but it looks like this:
(I'm talking about the text on the right side of the image).
Why does it happen and how can I make it look the same?
This is for a project, and I can't use any reset/normalize file (in case of the browser throwing off the design).
I don't know how to also add the image in the snippet, I would've done that so you get a better representation of my problem.
Thanks.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
display: inline-block;
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
I have studied your CSS and it's not immediately clear to me why you should need to do this, but you can close the vertical gap above .continut-langa-imagine if you add the style declaration
vertical-align: top;
Working Example:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
display: inline-block;
vertical-align: top;
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="https://via.placeholder.com/150" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
I changed the block containing the image, text and header to a css-grid:
.rand { display: grid; grid-template-columns: min-content auto; grid-column-gap: 10px; }
This will give the image as much space as needed and the remaining space will be used by the text.
To let the header use the whole width I added:
.titlu { grid-column: span 2; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.rand {
display: grid;
grid-template-columns: min-content auto;
grid-column-gap: 10px;
}
.titlu {
color: #1A1A1A;
grid-column: span 2;
}
.continut-langa-imagine {
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
Using float:
Just add float: left; to the image and preferably a margin right and bottom as in the snippet here:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
float: left;
margin: 0 10px 10px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
I'm having this problem that my header,footer and bar part are not fixed when i scroll through the page if i attach an image the image kinda off overlaps and becomes above the header.
this is the css code:
*{
padding: 0;
margin: 0;
}
.header{
height: 80px;
width: 100%;
background: url(images/header.jpeg);
position: fixed;
}
.bar{
width: 100%;
height: 43px;
background: url(images/menu-boarder.jpeg);
flex-flow: row wrap;
align-items: center;
position: fixed;
}
body{
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
margin-top: 20px;
overflow: auto;
width: 80%;
}
.menu{
float: left;
list-style: none;
margin-top: 10px;
}
.menu li{
display: inline-block;
}
.menu li a{
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
font-size: 24px;
}
.menu li a:hover{
background: #fff;
color: #333;
padding: 43px;
font-weight: bold;
}
.search {
display: flex;
float: right;
padding-top: 7px;
position: relative;
right:80px;
}
.searchTerm {
width: 400%;
border: 3px solid #000000;
color: #000000;
border: 3px solid #000000;
padding-bottom: 10px;
padding-top: 20px;
padding-right: 25px;
padding-left: 15px;
height: 20px;
}
.searchTerm:focus{
color: #000000;
}
.homeage_product {
position: relative;
width: 50%;
}
.homeage_but {
width: 100%;
height: auto;
}
.searchButton {
width: 100px;
border: 1px solid #000000;
background: #000000;
padding-right: 8px;
padding-left: 10px;
color: #FFFFFF;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fa-shopping-cart, .glyphicon-user{
color: #000000;
}
#lblCartCount {
font-size: 12px;
background-color: crimson;
color: #fff;
padding: 0 5px;
vertical-align: top;
}
.form-inline {
display: flex;
}
.footer{
width: 100%;
height: 100px;
background: url(images/footer.jpeg);
bottom: 0px;
left: 0px;
right: 0px;
position: fixed;
margin-bottom: 0px;
}
the html code :
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
</div>
<br><br><br><br>
<div class="bar">
<ul class="menu">
<li>Home</li>
<li>Contact us</li>
<li>About us</li>
<li>Product</li>
</ul>
<div class="search">
<form class="form-inline">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton"><i class="fa fa-search"></i></button>
</form>
also here i can't figure out why the following <div> tag is not clickable (meaning the user and the shooping cart):
<div class="icons">
<a herf="xx.html"><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;">
<asp:Label ID="lblCartCount" ForeColor="White"/>3</i></a>
<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
</div>
</div>
the rest of the html code:
</div>
<div class="content">
<!-- Image of a product with button refrence to the product it self -->
<div class="homeage_product" >
<img src="images/cake.jpg" alt="" style="width:100%; height:300px; padding: 0;">
<button class="homeage_but" >CLICK ME!</button>
</div>
</div>
<h4><center><u>Welome to our Bakery shop!</u></center></h4>
<p>
Lorem ipnam dolor sit amet, consectetur adipiscing elit Sed felis turpis, ulturicies nee herndrerit a
ullarneorper in maars Donee a erat molestie, condimentum ex eu, vehicula elst Ut egestas consectenor
libero, et dictum elir tineidunt sed Sed tellus nisi, faciliais sut nulla eu, euismod blandit marpia. Praesent
uficies semper auctor. Quisque eftieitur sollacstudin metus pec porta. Donec bbero notla, accumsan ut
negue sit amet, tincsdurt facilisis felis. Phasellus ac ante pretium, vehicula ex sed, feugsat ipsum Nullam
dapibus erat vitae ligula venenatis vestibulum Morbi aliquam sapien eu volutpet volutpat. Quisquue
sapien nisl, pulvinar eu finabua eget, tempus quis ante Cras sed blandst eros. Quisque posuere eros at
tellus tincidtant tristique.
</p>
<div class="footer">
</div>
</body>
</html>
Add z-index your header style in css:
.header
{
z-index: 99;
}
The z-index property specifies the overlay order of positioned elements. Elements with a greater z-index will therefore always be in front of elements with a lower z-index. Setting the z-index to a value greater than (or even equal to) 0 sets that element to be on top of non-positioned elements with no z-index specified. You could always set it to a value lower than 99, but, it is common practice to avoid potential clashes with other positioned elements.
Let me know if this works for you :)
I am trying to set the navigation bar to position: absolute; so it wont make the html move down when expand it. but when I do it, the div below the navigation move up and cover the navigation bar.
html:
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">testing</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#details">About</a>
<a class="nav-item nav-link" href="#abilities">Abilities</a>
</div>
</div>
</nav>
<div class="jumbotron text-center" id="main-jum">
<img src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">
</div>
CSS:
.navbar {
position: absolute;
width: 100%;
}
body {
background-color:#000101;
font-family: 'Montserrat', sans-serif;
}
nav a {
color: #00253f!important;
}
nav button{
background-color: #00253f!important;
outline:none!important;
}
#main-jum {
border-radius: 0!important;
padding: 0;
width: auto;
background-color: Black;
}
#main-jum img {
width: 100%;
opacity: 0.5;
}
here's my codepen link:
https://codepen.io/obiwankenoobi/pen/PQpopE?editors=1100
try copy paste whole css if it works then i will explain what i have changed and why
DEMO:
.navbar {
position: relative;
top : 0;
z-index: 10;
width: 100%;
border:1px solid white
}
body {
background-color:#000101;
font-family: 'Montserrat', sans-serif;
}
nav a {
color: #00253f!important;
}
nav button{
background-color: #00253f!important;
outline:none!important;
}
#main-jum {
top:0;
position:absolute;
border-radius: 0!important;
padding: 0;
width: auto;
background-color: Black;
border:1px solid yellow;
}
#main-jum img {
width: 100%;
height:700px;
opacity: 0.5;
}
nav button:hover {
background-color: #003a3f!important;
}
nav a:hover {
color: #003a3f!important;
}
#abilities img {
width: 30vmin;
}
#details {
margin-top:100px;
margin-bottom: 150px;
}
#abilities {
margin-bottom: 300px;
}
p {
font-size: 20px;
color: #00253f;
}
a:hover {
text-decoration: none;
}
footer {
margin-top: 190px;
}
h4 {
font-size: 6vmin;
color: #003a3f;
}
.right {
float: right;
}
.left {
float: left;
}
#media (max-width: 768px) {
#abilities img {
display: block;
margin: 0 auto;
max-width: 100%;
width: 50vmin;
}
#main-jum {
display: block;
}
.col-sm-4 {
margin-top: 25px;
}
p {
font-size: 3.5vmin;
}
#abilities {
margin-bottom: 30px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">ob1wankenoooob1</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#details">About</a>
<a class="nav-item nav-link" href="#abilities">Abilities</a>
</div>
</div>
</nav>
<div id="details" class="container-fluid">
<div class="row">
<div id="about" class="col-md-8">
<h4>about me</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum odio mauris, vitae finibus erat imperdiet sit amet. Donec eget pretium turpis. Curabitur elit neque, finibus vel enim in, laoreet scelerisque ligula. Sed at augue sed lorem sollicitudin pulvinar. Sed ut elit ullamcorper, aliquet ante ac, maximus urna. Sed a nisl eu massa imperdiet pellentesque. Pellentesque non justo vitae libero rhoncus posuere in eu est. Maecenas eu fringilla orci, eu porta ex.</p>
</div>
<div id="more" class="col-md-4">
<h4>more</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum odio mauris, vitae finibus erat imperdiet sit amet. Donec eget pretium turpis. Curabitur elit neque.</p>
</div>
</div> <!--row end-->
</div> <!-- container-fluid end-->
<div class="container">
<div class="row text-center" id="abilities">
<div class="col-sm-4 img-abilities">
<img id="code-img" src="https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Html-512.png">
</div>
<div class="col-sm-4">
<img class="img-abilities" id="responsive-img" src="https://cdn4.iconfinder.com/data/icons/flat-services-icons/512/responsive-web.png">
</div>
<div class="col-sm-4">
<img id="design-img" src="http://trstech.ca/wp-content/uploads/2016/03/design_icon.png">
</div>
</div> <!-- abilities end -->
</div> <!-- container-fluid ends-->
<footer class="text-center">
<p >all rights reserved #ob1wankenoooob1</p>
<p id="year">test</p>
</footer>
<script type="text/javascript">
var date = new Date();
var fullYear = date.getFullYear();
var yearElement = document.getElementById("year");
yearElement.innerHTML = fullYear + ' ©';
</script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal();
sr.reveal('#about', {
duration: 2000,
origin:'bottom',
viewFactor: 0.9 ,
distance:'300px',
reset: true
});
sr.reveal('#main-jum', {
opacity: 0 ,
duration: 2000 ,
reset: true ,
viewFactor: 0.6
});
sr.reveal('#more', {
duration: 2000,
origin:'bottom',
viewFactor: 0.9 ,
distance:'300px',
reset: true
});
sr.reveal('#code-img', {
duration: 2000,
origin:'bottom',
viewFactor: 0.9 ,
distance:'300px',
reset: true
});
sr.reveal('#responsive-img', {
duration: 2000,
origin:'bottom',
viewFactor: 0.9 ,
distance:'300px',
reset: true
});
sr.reveal('#design-img', {
duration: 2000,
origin:'bottom',
viewFactor: 0.9 ,
distance:'300px',
reset: true
});
</script>
ok so z-index: 10; was what fixed my code and this is the result i was trying to get. I should have to listen the full instruction here but I ignored z-index: 10; and this was what cause the problem.
.navbar {
position: absolute;
top : 0;
z-index: 10;
width: 100%;
}
body {
background-color:#000101;
font-family: 'Montserrat', sans-serif;
}
nav a {
color: #00253f!important;
}
nav button{
background-color: #00253f!important;
outline:none!important;
}
#main-jum {
border-radius: 0!important;
padding: 0;
width: 100%;
height: auto;
background-color: Black;
}
#main-jum img {
width: 100%;
height:auto;
opacity: 0.5;
}
nav button:hover {
background-color: #003a3f!important;
}
nav a:hover {
color: #003a3f!important;
}
#abilities img {
width: 30vmin;
}
#details {
margin-top:100px;
margin-bottom: 150px;
}
#abilities {
margin-bottom: 300px;
}
p {
font-size: 20px;
color: #00253f;
}
a:hover {
text-decoration: none;
}
footer {
margin-top: 190px;
}
h4 {
font-size: 6vmin;
color: #003a3f;
}
.right {
float: right;
}
.left {
float: left;
}
#media (max-width: 768px) {
#abilities img {
display: block;
margin: 0 auto;
max-width: 100%;
width: 50vmin;
}
#main-jum {
display: block;
}
.col-sm-4 {
margin-top: 25px;
}
p {
font-size: 3.5vmin;
}
#abilities {
margin-bottom: 30px;
}
#main-jum img {
max-width: 100%;
min-height: 400px;
object-fit:cover;
}
}
So I'm trying to design a website for my organization from scratch using Bootstrap and with parallax elements. And I found this demo online and all I want to do is add a navigation bar with one of the buttons having a hovering dropdown menu. I followed the instructions on the Bootstrap website and gettting the bar on the page is easy but the hovering drop down does not appear or if i do get the bar up the dropdown menu is messed up, putting it to the right. It seems that there is a Z-axis problem? Or the container for the nav bar isnt letting me have a nice dropdown menu. Below is what I have so far:
<!DOCTYPE html>
<!-- saved from url=(0060)https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm -->
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
body,
html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.nav {
background-color: #333;
font-family: Arial;
}
.nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
position: relative;
z-index: 9999999;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
display: block;
}
.dropdown-content a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:last-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:first-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a {
width: 210px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.parallax-header {
/* The image used / background-image: url("header.jpg"); / Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("vsa2017.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("culturedance.png");
min-height: 400px;
}
.bgimg-3 {
background-image: url("culturedance.png");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Turn off parallax scrolling for tablets and phones */
#media only screen and (max-device-width: 1024px) {
.bgimg-1,
.bgimg-2,
.bgimg-3 {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="nav">
About
<div class="dropdown">
Pillars
<div class="dropdown-content">
Family
Culture
Diversity
Philanthropy
</div>
</div>
Officers
Sponsors
Contact
<i class="fa fa-facebook-square"></i>
<i class="fa fa-instagram"></i>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">SCROLL DOWN</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Parallax Demo</h3>
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero
ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque
non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">COOL!</span>
</div>
</div>
</body>
</html>
I'm fairly new and need to learn, any help will be appreciated/
Here solution:
Just put 2 style in class name .dropdown-content css:
top: 100%;
background: #333;
New update style is ".dropdown"
Replace style:display:inline-block; to float:left;
<!DOCTYPE html>
<!-- saved from url=(0060)https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm -->
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
body,
html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.nav {
background-color: #333;
font-family: Arial;
}
.nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float:left;
position: relative;
z-index: 9999999;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
background: #333;
}
.dropdown-content a {
display: block;
}
.dropdown-content a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:last-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:first-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a {
width: 210px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.parallax-header {
/* The image used / background-image: url("header.jpg"); / Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("vsa2017.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("culturedance.png");
min-height: 400px;
}
.bgimg-3 {
background-image: url("culturedance.png");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Turn off parallax scrolling for tablets and phones */
#media only screen and (max-device-width: 1024px) {
.bgimg-1,
.bgimg-2,
.bgimg-3 {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="nav">
About
<div class="dropdown">
Pillars
<div class="dropdown-content">
Family
Culture
Diversity
Philanthropy
</div>
</div>
Officers
Sponsors
Contact
<i class="fa fa-facebook-square"></i>
<i class="fa fa-instagram"></i>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">SCROLL DOWN</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Parallax Demo</h3>
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero
ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque
non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">COOL!</span>
</div>
</div>
</body>
</html>
Here you go... I have done some changes to your code try to understand if you don't get anything don't mind to comment it I haven't done any more changes so made it clear
<!DOCTYPE html>
<!-- saved from url=(0060)https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm -->
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
body,
html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.nav {
background-color: #333;
font-family: Arial;
}
.nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
position: relative;
z-index: 9999999;
}
.dropdown-content {
display: none;
position: absolute;
background: #333;
z-index: -1;
}
.dropdown-content a {
display: block;
}
.dropdown-content a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:last-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:first-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a {
width: 210px;
color: #fff;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.parallax-header {
/* The image used / background-image: url("header.jpg"); / Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("vsa2017.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("culturedance.png");
min-height: 400px;
}
.bgimg-3 {
background-image: url("culturedance.png");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Turn off parallax scrolling for tablets and phones */
#media only screen and (max-device-width: 1024px) {
.bgimg-1,
.bgimg-2,
.bgimg-3 {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="nav">
About
<div class="dropdown">
<a href="#">Pillars
<div class="dropdown-content">
Family
Culture
Diversity
Philanthropy
</div>
</a>
</div>
Officers
Sponsors
Contact
<i class="fa fa-facebook-square"></i>
<i class="fa fa-instagram"></i>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">SCROLL DOWN</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Parallax Demo</h3>
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero
ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque
non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">COOL!</span>
</div>
</div>
</body>
</html>
Currently working on adding a page to a website, and what I want to do is make boxes appear in HTML on my site.
I've looked through the HTML and CSS and there does not seem to be any issues with formatting, syntax, etc. So, my question is why won't the boxes appear?
I'm trying to do something similar to this here:
CodePen Example
.
This is my HTML & CSS for the page
Website 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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Projects</title>
<!-- Custom styles for this template -->
<link href="css/main.css" rel="stylesheet" media="screen">
<!-- 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]-->
</head>
<body>
<div class="inner">
<h3 class="masthead-brand">FV4</h3>
<ul class="nav masthead-nav">
<li class="active">About Me</li>
<li class="active">Contact</li>
<li class="active">Projects</li>
</ul>
</div>
<div class="mainContent">
<div class="box">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.</p>
</div>
<div class="box">
<h2>Title 2</h2>
<div class="box-banner"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box">
<h2>Title 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.</p>
</div>
<div class="box">
<h2>Title 4</h2>
<div class="box-banner"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box">
<h2>Title 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.</p>
</div>
<div class="box no-text">
<h2>Title 6</h2>
<div class="box-banner"></div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<script src="../../scripts/scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Website CSS
/*
* Globals
*/
#import 'http://fonts.googleapis.com/css?family=Open+Sans:400,700';
.mainContent{
perspective: 80em;
width: 960px;
margin: 0 auto;
}
.box{
float:left;
position: relative;
display: inline;
width: 300px;
height: 180px;
background: #FFFFFF;
box-sizing: border-box;
padding: 15px;
margin: 10px;
box-shadow: 0px 0px #shadowBlurRadius fade(#page-background-main-color, 35%);
opacity: 0;
}
h2 {
margin: 0;
margin-bottom: 10px;
}
p {
margin: 0;
}
.box-banner{
background: #CCCCCC;
height: 80px;
margin: 0px -15px;
margin-bottom: 6px;
background-position: center center;
}
&.no-text .box-banner{
height:129px;
}
.toolbar{
position: absolute;
display:block;
z-index:999;
top: 0px;
right: 0px;
width:100%;
transform:scale(0);
}
.btn{
font-size:1.5em;
font-weight: 700;
text-decoration:none;
background: rgba(0,0,0,0.4);
padding: 0px 10px 4px 10px;
color: lighten(#page-background-main-color, 10%);
display:block;
&.left {
float:left;
font-weight:400;
}
&.right{
float:right;
}
}
a,
a:focus,
a:hover {
color: #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: white;
}
body {
color: black; /*#bf0a0a*/
text-align: center;
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 200px rgba(0,0,0,.5);
box-shadow: inset 0 0 200px rgba(0,0,0,.5);
}
/* Padding for spacing */
.inner {
padding: 30px;
}
.headshot{
width: 25%; /* you can use % */
height: auto;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: black;
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:focus {
color: black;
border-bottom-color: #bf0a0a;
}
.masthead-nav > .active > a:hover {
color: #bf0a0a;
border-bottom-color: black;
}
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
a .fa:hover{
color: white;
}
/* HyperLink Style */
a:link {
color: #BF0A0A;
text-decoration: none;
}
a:visited {
color: #87CEEB;
text-decoration: none;
}
a:hover {
color: #780078;
text-decoration: none;
}
a:active {
color: #FF0000;
text-decoration: none;
}
/* End HyperLink Style */
And this is the only thing that appears when I open the index.html in my browser:
Have you tried removing opacity:0 from your .box css?
http://codepen.io/anon/pen/EaopWv
.box{
float:left;
position: relative;
display: inline;
width: 300px;
height: 180px;
background: #FFFFFF;
box-sizing: border-box;
padding: 15px;
margin: 10px;
box-shadow: 0px 0px #shadowBlurRadius fade(#page-background-main-color, 35%);
/*opacity: 0;*/
}
I have run the code using HTML and CSS files attached.
Problem is with css file. In .box css declaration at line 27, opacity set to 0 because of which boxes are not visible. Change this to 1 and run the code again.
More about Opacity CSS:
http://css-tricks.com/almanac/properties/o/opacity/