Skip to content

Instantly share code, notes, and snippets.

@dogweather

dogweather/index.html

Last active August 29, 2015 14:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dogweather/9919bce62047e318e560 to your computer and use it in GitHub Desktop.
Save dogweather/9919bce62047e318e560 to your computer and use it in GitHub Desktop.
Download ZIP
Fixed Bootstrap Navbar
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nik the Nomad</title>
<link href="css/normalize.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- <link href="css/styles.css" rel="stylesheet"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- <navbar starts here> -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr only">toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Nik the Nomad</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#faq"><span class="glyphicon glyphicon-paperclip"></span> FAQ</a>
</li>
<li>
<a href="#work"><span class="glyphicon glyphicon-heart"></span> Work</a>
</li>
<li>
<a href="#contact"><span class="glyphicon glyphicon-envelope"></span> Contact</a>
</li>
<li>
<a href="#about"><span class="glyphicon glyphicon-user"></span> About</a>
</li>
<li>
<a href="#index"><span class="glyphicon glyphicon-home"></span>Home</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<!-- <div class="jumbotron"> -->
<div class="container-fluid" id="index">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/Indo2.1.jpg" alt="indo2">
<div class="carousel-caption">
<h1>Meet the Global Nomad</h1>
<P>
<STRONG>Anthropologist, World Traveler and -soon to be- Web Developer</STRONG>
</P>
<p> Experience new things and being connected to the world. That's what I, Nicole Baltussen, am all about.
</p>
</div>
</div>
<div class="item">
<img src="img/Indo.1.jpg" alt="indo1">
<div class="carousel-caption">
<div><a href="#about">About Me</a></div>
<div><a href="#contact">Contact Me</a></div>
<div><a href="#work">My Work</a></div>
<div><a href="#faq">FAQ</a></div>
<div><a href="https://google.com">Learn More</a></div>
</div>
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- container -->
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>*Cultural Anthropologist *Case-manager *Interested in visual aspects *No real further experience in web development * </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Project Goals</h2>
<p> I want to create an online resumé * Create a travel website * Create an online webshop * If visually attractive; combine the three * I'm a deadline kinda woman, so let's set the bar high and aim for a 40h workweek!
</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Course Goals</h2>
<p>*An online resumé, to get hired as a freelancer and so people now who I am. *A travel platform to start my own 'international cab service' that is all about more travelling, less tourism. *A webshop where I'll sell silly stuff, like chinglish
stationary * I just really want to start changing my life a it has been and see this course/ webdevelopment as a tool to get there.
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
</div>
<div class="container-fluid" id="about">
<div class="header">
<h1>About Me</h1>
</div>
<div class="row" id="image">
<div class="col-xs-12 col-md-4">
<div class="image column">
<img src="img/beach.jpg" alt="beach">
<div class="image-responsive"></div>
</div>
</div>
<!-- </div> -->
<div class="row" id="intro">
<div class="col-xs-12 col-md-4">
<!-- <div class="intro"> -->
<div class="intro column">
<h3>Introduction</h3>
<P>Hi there, welcome to my page!
</P>
</div>
</div>
<div class="row" id="skills">
<div class="col-xs-12 col-md-4">
<!-- <div class="skills"> -->
<div class="skills column">
<h3>My Skills</h3>
<ul>
<ul id="skill_list">
<li>Cultural communication</li>
<li>Anthropological research </li>
<li>Generalist</li>
</ul>
</div>
</div>
<div class="main_text">
<h3>More about me</h3>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</P>
</div>
</div>
<!-- end container -->
<div class="container" id="contact">
<div class="header">
<h1>Contact Me</h1>
</div>
<div class="info">
<div class="row">
<div class="col-md-4">
<h2>Address</h2>
<p>Hoogstraat 35bis
<br> 3552 XK Utrecht
<br> The Netherlands
</p>
</div>
<div class="col-md-4">
<h2>E-mail</h2>
<p>
<U>n.baltussen@hotmail.com</U>
</p>
</div>
<div class="col-md-4">
<h2>Phone</h2>
<p>+31 6 133 488 53</p>
</div>
</div>
<!-- row -->
</div>
<!-- info -->
</div>
<div class="container" id="work">
<div class="header">
<h1>My Work</h1>
</div>
<div class="row" ID="apple">
<div class="col-xs-6 col-md-3">
<img src="img/apple.1.png">
</div>
<div class="col-xs-6 col-md-3">
<img src="img/apple.1.png">
</div>
<div class="col-xs-6 col-md-3">
<img src="img/apple.1.png">
</div>
<div class="col-xs-6 col-md-3">
<img src="img/apple.1.png">
</div>
<div class="row" ID="apple">
<div class="col-xs-6 col-md-3">
<img src="img/apple.1.png">
</div>
<div class="col-xs-6 col-md-3">
<img src="img/apple.1.png">
</div>
<div class="col-xs-6 col-md-3">
<img src="img/apple.1.png">
</div>
<div class="col-xs-6 col-md-3">
<img src="img/apple.1.png">
</div>
</div>
<!-- end container -->
<div class="container" id="faq">
<div class="header">
<h1>FAQ</h1>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<span class="glyphicon glyphicon-pencil"></span>
Why doesn't the collapse work?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
I don't now, but am getting very frustrated....
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<span class="glyphicon glyphicon-pencil"></span>
Do you often get frustrated?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
I didn't think so, until I started doing this Web Development course.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion3" href="#collapseThree">
<span class="glyphicon glyphicon-pencil"></span>
What are you going to do about that?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Look up every possible site I can find on bootstrap, collapse et cetera, like these:
<div><a href="http://www.tutorialspoint.com/bootstrap/bootstrap_collapse_plugin.htm">Tutoriols Point</a></div>
<div><a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-accordion.php">Tutorial Republic</a></div>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
<!-- </div> -->
<!-- jumbotron>
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
styles.css
*{box-sizing; border-box;}
/*
html {background: url("../img/Palma2.1.jpg")
no-repeat center fixed;
-webkit-background-size: cover;
-moz background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container-fluid {background: url("../img/Palma2.1.jpg")
no-repeat center fixed;
-webkit-background-size: cover;
-moz background-size: cover;
-o-background-size: cover;
background-size: cover;
}*/
.body {position: relative;
}
.projectName a {color: white;
}
.nav {float: right;
}
.nav {background-color: black; position: fixed; width: 100%;
top: 0;
}
.nav a:hover {color: #ff0;
text-decoration: none;
}
.nav span:hover {color: #ff0;
text-decoration: none;
transition: color 600ms;
-webkit-transition: color 600ms;
}
.navbar ul li {display: inline-block; text-transform: inherit;
padding: 20px 5px 20px;
float: right;
margin-right: 40px;
}
.navbar ul li a {color: white; text-transform: uppercase;
letter-spacing: 0.05em;
}
.jumbotron p {color: black;}
.jumbotron h1 {color:chocolate;}
.container-fluid {z-index: 1;}
.header h1 {text-align: center; margin: 30px 0px 5px;
color: black;
font-family: Georgia, Palatino, Lucida Bright, serif;
}
.item a {color: white;}
.image {display: block;
max-width: 100%;
height: auto;
}
.column {display: inline-block; float: left;
width: 60%;
padding-left:90px;
padding-top: 20px;
}
/*.intro {display: inline-block; float: left;
}*/
.column ul {margin-left: -30px;
}
.main_text {clear: both;
width: 80%;
margin: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment