Skip to content

Instantly share code, notes, and snippets.

@dawidadach
Created June 12, 2015 10:56
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 dawidadach/06787310b9b1b4cb0cf3 to your computer and use it in GitHub Desktop.
Save dawidadach/06787310b9b1b4cb0cf3 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 3</title>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link href="bootstrap3/css/bootstrap.css" rel="stylesheet" />
<link href="assets/css/get-shit-done.css" rel="stylesheet" />
<link href="assets/css/demo.css" rel="stylesheet" />
<link href="bootstrap3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>
</head>
<body>
<!--NAVBAR-->
<div class="navbar navbar-static-top navbar-default" role="navigation">
<div class="container">
<a href="#" class="navbar-brand">GSDK Landing Page</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Blog</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class = "caret"></b> </a>
<ul class="dropdown-menu">
<li><a href="#">Twitter</a>
</li>
<li><a href="#">Google</a>
</li>
<li><a href="#">Facebook</a>
</li>
<li><a href="#">Pinterest</a>
</li>
<li><a href="#">Twitter</a>
</li>
</ul>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#contact" data-toggle="modal">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<!--JUMBOTRON-->
<div class="container">
<div class="jumbotron" style="background-image: url(img/header.jpg); background-size: cover;">
<h1 class="text-center">Get Shit Done Kit!</h1>
<h3 class="text-center"> Designed to fit perfectly together</h3>
<p class="text-center">Get Shit Done Kit comes with a huge number of customisable components. The components are not only designed to be pixel perfect and light but are also easy to use and match each other perfectly. Everything you need to start your website is right here! </p>
</div>
</div>
<!--PANELS-->
<div class="container">
<div class="row">
<div class="col-md-4">
<h3><a href="#">Beautiful bright colors</a></h3>
<p>Each color has a strong pigment and was chosen to make your design shine. Each component from Get Shit Done Kit Pro can have one of these colors. Try on different combinations and be sure that everything works together.</p>
<a href="#" class="btn btn-primary">Learn more ></a>
</div>
<div class="col-md-4">
<h3><a href="#">Coded for Web</a></h3>
<p>Don't spend time thinking of how to implement great items. We already wrote the necessary HTML/CSS/JS for every component in this way each component is easy to be integrated. We also followed a name convention for CSS classes that will make you learn and use them really fast.</p>
<a href="#" class="btn btn-primary">Learn more ></a>
</div>
<div class="col-md-4">
<h3><a href="#">Fully Responsive Layout</a></h3>
<p>Building responsive website is a must nowadays, so all the elements are fully responsive. Each item looks great on the whole range of devices, and more than this, it was thought mobile first. From cards to typography or menus, all elements were designed for a mobile web, so they are accesible to anyone.</p>
<a href="#" class="btn btn-primary">Learn more ></a>
</div>
</div>
</div>
<!--FOOTER-->
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">&copy; 2015 Creative Tim, made with love for a better web.</p>
<a class="navbar-btn btn-info btn pull-right">Download now!</a>
</div>
</div>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<p>Contact Tech Site</p>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">Submit</a>
<a href="#" class="btn btn-danger" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap3/js/bootstrap.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment