Personal Webpage (Cyborg Bootstrap theme)
Personal Webpage (Cyborg Bootstrap theme)
February 11, 2017
example javascript html css bootstrapThis is an example personal webpage:
Click here to open the page in its own window.
This page contains the exact same three HTML files as the default Bootstrap styled personal webpage example:
home.html
<!DOCTYPE html>
<html>
<head>
<title>My Personal Page</title>
<link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active"><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="cats.html">Cat Pictures</a></li>
</ul>
</nav>
<div class="jumbotron">
<p>Admit it. You just came here for the cat pictures.</p>
<p><a class="btn btn-primary btn-lg" href="cats.html" role="button">Meow</a></p>
</div>
<h1>My Personal Page</h1>
<p>Welcome to my personal page. This is just an example webpage. It uses Bootstrap!</p>
<footer>Learn more at <a href="http://HappyCoding.io/examples/javascript/personal-page-bootstrap-cyborg">HappyCoding.io</a>!</footer>
</div>
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<title>About My Personal Page</title>
<link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="home.html">Home</a></li>
<li class="active"><a href="about.html">About</a></li>
<li><a href="cats.html">Cat Pictures</a></li>
</ul>
</nav>
<h1>About My Personal Page</h1>
<p>This is an example about section. You might explain more about yourself, or the webpage, or give links to other resources.</p>
<p>My name is Kevin. I write programming tutorials at <a href="http://HappyCoding.io">HappyCoding.io</a>, and I have a cat named Stanley. My favorite color is black, but if that doesn't count then I'll choose green. I also like comic books and playing bikes.</p>
<footer>Learn more at <a href="http://HappyCoding.io/examples/javascript/personal-page-bootstrap-cyborg">HappyCoding.io</a>!</footer>
</div>
</body>
</html>
cats.html
<!DOCTYPE html>
<html>
<head>
<title>Cat Pictures! 🐈</title>
<link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.css">
<style>
img{
width:75%;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li class="active"><a href="cats.html">Cat Pictures</a></li>
</ul>
</nav>
<h1>Cat Pictures 🐈</h1>
<p>Here are some pictures of my cat, Stanley:</p>
<div class="row">
<img class="col-xs-12 col-md-4" src="http://happycoding.io/tutorials/html/files/images/cat-1.jpg" />
<img class="col-xs-12 col-md-4" src="http://happycoding.io/tutorials/html/files/images/cat-2.jpg" />
<img class="col-xs-12 col-md-4" src="http://happycoding.io/tutorials/html/files/images/cat-3.jpg" />
</div>
<div class="row">
<img class="col-xs-12 col-md-4" src="http://happycoding.io/tutorials/html/files/images/cat-4.jpg" />
<img class="col-xs-12 col-md-4" src="http://happycoding.io/tutorials/html/files/images/cat-5.jpg" />
<img class="col-xs-12 col-md-4" src="http://happycoding.io/tutorials/html/files/images/cat-6.jpg" />
</div>
<footer>Learn more at <a href="http://HappyCoding.io/examples/javascript/personal-page-bootstrap-cyborg">HappyCoding.io</a>!</footer>
</div>
</body>
</html>
The only difference is that instead of the default Bootstrap style, each .html file loads the Cyborg theme from Bootswatch: <link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.css">
The rest of the HTML content is the same. But since we’re loading the styles from the theme’s .css file, all of our content has a cool dark theme!
Tweak Ideas
- Use Bootstrap themes to style your own personal webpage.
- We haven’t even used Bootstrap’s JavaScript library. Use it to add some interactive components!
Bootstrap Examples
Comments
Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!
Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!