mirror of
https://github.com/dawidolko/Website-Templates.git
synced 2026-02-04 09:30:05 +00:00
Website templates
This commit is contained in:
Dawid Olko
230
stylish-portfolio/index.html
Normal file
230
stylish-portfolio/index.html
Normal file
@@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>Stylish Portfolio Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="css/bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- Add custom CSS here -->
|
||||
<link href="css/stylish-portfolio.css" rel="stylesheet">
|
||||
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Side Menu -->
|
||||
<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
|
||||
<div id="sidebar-wrapper">
|
||||
<ul class="sidebar-nav">
|
||||
<a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
|
||||
<li class="sidebar-brand"><a href="http://startbootstrap.com">Start Bootstrap</a></li>
|
||||
<li><a href="#top">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#services">Services</a></li>
|
||||
<li><a href="#portfolio">Portfolio</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /Side Menu -->
|
||||
|
||||
<!-- Full Page Image Header Area -->
|
||||
<div id="top" class="header">
|
||||
<div class="vert-text">
|
||||
<h1>Start Bootstrap</h1>
|
||||
<h3><em>We</em> Build Great Templates, <em>You</em> Make Them Better</h3>
|
||||
<a href="#about" class="btn btn-default btn-lg">Find Out More</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Full Page Image Header Area -->
|
||||
|
||||
<!-- Intro -->
|
||||
<div id="about" class="intro">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 text-center">
|
||||
<h2>Subtle Sidebar is the Perfect Template for your Next Portfolio Website Project!</h2>
|
||||
<p class="lead">This template really has it all. It's up to you to customize it to your liking! It features some fresh photography courtesy of <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Intro -->
|
||||
|
||||
<!-- Services -->
|
||||
<div id="services" class="services">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4 text-center">
|
||||
<h2>Our Services</h2>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-2 col-md-offset-2 text-center">
|
||||
<div class="service-item">
|
||||
<i class="service-icon fa fa-rocket"></i>
|
||||
<h4>Spacecraft Repair</h4>
|
||||
<p>Did your navigation system shut down in the middle of that asteroid field? We can repair any dings and scrapes to your spacecraft!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 text-center">
|
||||
<div class="service-item">
|
||||
<i class="service-icon fa fa-magnet"></i>
|
||||
<h4>Problem Solving</h4>
|
||||
<p>Need to know how magnets work? Our problem solving solutions team can help you identify problems and conduct exploratory research.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 text-center">
|
||||
<div class="service-item">
|
||||
<i class="service-icon fa fa-shield"></i>
|
||||
<h4>Blacksmithing</h4>
|
||||
<p>Planning a time travel trip to the middle ages? Preserve the space time continuum by blending in with period accurate armor and weapons.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 text-center">
|
||||
<div class="service-item">
|
||||
<i class="service-icon fa fa-pencil"></i>
|
||||
<h4>Pencil Sharpening</h4>
|
||||
<p>We've been voted the best pencil sharpening service for 10 consecutive years. If you have a pencil that feels dull, we'll get it sharp!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Services -->
|
||||
|
||||
<!-- Callout -->
|
||||
<div class="callout">
|
||||
<div class="vert-text">
|
||||
<h1>A Dramatic Text Area</h1>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Callout -->
|
||||
|
||||
<!-- Portfolio -->
|
||||
<div id="portfolio" class="portfolio">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4 text-center">
|
||||
<h2>Our Work</h2>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-2 text-center">
|
||||
<div class="portfolio-item">
|
||||
<a href="#"><img class="img-portfolio img-responsive" src="img/portfolio-1.jpg"></a>
|
||||
<h4>Cityscape</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 text-center">
|
||||
<div class="portfolio-item">
|
||||
<a href="#"><img class="img-portfolio img-responsive" src="img/portfolio-2.jpg"></a>
|
||||
<h4>Is That On Fire?</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-2 text-center">
|
||||
<div class="portfolio-item">
|
||||
<a href="#"><img class="img-portfolio img-responsive" src="img/portfolio-3.jpg"></a>
|
||||
<h4>Stop Sign</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 text-center">
|
||||
<div class="portfolio-item">
|
||||
<a href="#"><img class="img-portfolio img-responsive" src="img/portfolio-4.jpg"></a>
|
||||
<h4>Narrow Focus</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Portfolio -->
|
||||
|
||||
<!-- Call to Action -->
|
||||
<div class="call-to-action">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 text-center">
|
||||
<h3>The buttons below are impossible to resist.</h3>
|
||||
<a href="#" class="btn btn-lg btn-default">Click Me!</a>
|
||||
<a href="#" class="btn btn-lg btn-primary">Look at Me!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Call to Action -->
|
||||
|
||||
<!-- Map -->
|
||||
<div id="contact" class="map">
|
||||
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A"></a></small></iframe>
|
||||
</div>
|
||||
<!-- /Map -->
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3 text-center">
|
||||
<ul class="list-inline">
|
||||
<li><i class="fa fa-facebook fa-3x"></i></li>
|
||||
<li><i class="fa fa-twitter fa-3x"></i></li>
|
||||
<li><i class="fa fa-dribbble fa-3x"></i></li>
|
||||
</ul>
|
||||
<div class="top-scroll">
|
||||
<a href="#top"><i class="fa fa-circle-arrow-up scroll fa-4x"></i></a>
|
||||
</div>
|
||||
<hr>
|
||||
<p>Copyright © Company 2013</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- /Footer -->
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="js/jquery-1.10.2.js"></script>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
|
||||
<!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
|
||||
<script>
|
||||
$("#menu-close").click(function(e) {
|
||||
e.preventDefault();
|
||||
$("#sidebar-wrapper").toggleClass("active");
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$("#menu-toggle").click(function(e) {
|
||||
e.preventDefault();
|
||||
$("#sidebar-wrapper").toggleClass("active");
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(function() {
|
||||
$('a[href*=#]:not([href=#])').click(function() {
|
||||
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|
||||
|| location.hostname == this.hostname) {
|
||||
|
||||
var target = $(this.hash);
|
||||
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
|
||||
if (target.length) {
|
||||
$('html,body').animate({
|
||||
scrollTop: target.offset().top
|
||||
}, 1000);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user