"Responsive Project Landing Page"
Bootstrap 3.3.0 Snippet by amitmerchant

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!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, user-scalable=no"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content="A minimal Markdown editor"> <meta name="author" content="Amit Merchant"> <link rel="icon" href="../../favicon.ico"> <meta property="og:title" content="Markdownify" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://www.amitmerchant.com/electron-markdownify/" /> <meta property="og:description" content="A minimal Markdown editor" /> <!-- for Twitter --> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="Markdownify" /> <meta name="twitter:description" content="A minimal Markdown editor" /> <meta name="theme-color" content="#4CAF50"> <title>Markdownify</title> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand pull-right" href="https://twitter.com/amit_merchant">Twitter</a> <a class="navbar-brand" href="#">Markdownify</a> </div> </div> </nav> <!-- Main jumbotron for a primary marketing message or call to action --> <div class="jumbotron"> <div class="container text-center"> <h1>Markdownify</h1> <div> <p><img src="https://raw.githubusercontent.com/amitmerchant1990/electron-markdownify/master/img/markdownify.png" class="img-responsive logo-image text-center"></p> <p> <i class="tagline">A minimal Markdown editor</i> </p> </div> <div> <a href="https://github.com/amitmerchant1990/electron-markdownify/releases/tag/v1.2.0" class="btn btn-primary btn-lg">Download</a> <a href="https://github.com/amitmerchant1990/electron-markdownify/" class="btn btn-danger btn-lg">GitHub</a> </div> </div> <div class="text-center"> <img src="https://raw.githubusercontent.com/amitmerchant1990/electron-markdownify/master/img/markdownify.gif" class="img-responsive custom-image"> </div> </div> <div class="container"> <div class="row text-center"> <h2 class="key_features">Key Features</h2> </div> <div class="row"> <div class="col-md-4"> <h3>LivePreview</h3> <p> <b>Make changes, See changes</b>. Instantly see what your Markdown documents look like in HTML as you create them. </p> </div> <div class="col-md-4"> <h3>Sync Scrolling</h3> <p>While you type, <b>LivePreview</b> will automatically scroll to the current location you're editing. </p> </div> <div class="col-md-4"> <h3>GFM</h3> <p>The good old <b>GitHub Flavored-style</b> Markdown. So, you don't feel out of the place.</p> </div> </div> <div class="row"> <div class="col-md-4"> <h3>Syntax highlighting</h3> <p> Syntax highlighting in fenced code blocks with language identifiers and Markup languages </p> </div> <div class="col-md-4"> <h3>Dark/Light mode</h3> <p>Change the color scheme of the editor based on your preferences. i.e to choose between Dark mode/Light mode </p> </div> <div class="col-md-4"> <h3>Emoji support</h3> <p>Supports emojis in the preview mode for when you need to express yourself via one</p> </div> </div> </div> <hr> <div class="container"> <div class="row text-center"> <div> <h4>Other features including...</h4> <ul class="center" type="square"> <li>Toolbar for basic Markdown formatting</li> <li>Save the Markdown preview as PDF</li> <li>App will keep alive in tray for quick usage</li> <li>Full screen mode</li> <ul> <li>Write distraction free.</li> </ul> <li>Cross platform</li> <ul> <li>Windows, Mac and Linux ready.</li> </ul> </ul> </div> </div> </div> <hr> <div class="container"> <div class="text-center"> <h2 class="key_features">Develop</h2> </div> <div> <p>Install it using : <code>npm install electron-markdownify</code></p> <p>And then run:</p> </div> <div> <pre> <code class="bash"> $> cd PATH-TO-MARKDOWNIFY-DESKTOP-APP $> npm install && npm start </code> </pre> </div> </div> <hr> <div class="container"> <div class="row text-center credits"> <div> <h2 class="key_features">Credits</h2> <p>Markdowinfy is built using <a href="http://electron.atom.io/">Electron</a>, <a href="https://nodejs.org/">Node.js</a> and some <a href="https://github.com/amitmerchant1990/electron-markdownify#credits">more</a>.</p> </div> </div> </div> <hr> <footer> <p class="text-center">© 2016 <a href="https://www.amitmerchant.com/">Amit Merchant</a>.</p> </footer> </body> </html>
h1{ text-shadow: #525252 0px 0px 20px; font-weight: bold; } h4{ font-weight: bold; } pre { border: 0; background-color: transparent; white-space:nowrap; } .col-md-4 p{ color: #555; } .credits p{ color: #555; } .row li{ color: #555; } .key_features{ text-shadow: none; font-weight: bold; } .tagline{ text-shadow: #525252 0px 0px 20px; } .center{ width:300px; margin:0 auto; text-align:left; } .custom-image{ position: relative; bottom: -110px; padding: 40px; margin: 0 auto; margin-top: -120px; width: 900px; height: auto; } .logo-image{ width: 150px; height: auto; display: initial; } .jumbotron { padding-top: 0; background-color: #4CAF50; color: #ffffff; } .navbar-fixed-bottom, .navbar-fixed-top { position: inherit; } .navbar-fixed-bottom, .navbar-fixed-top { position: inherit; } .navbar { margin-bottom: 0; } .navbar-inverse { background-color: #4CAF50; border-color: #4CAF50; } .navbar-inverse .navbar-brand { color: #ffffff; } .navbar-header{ width: 100%; }

Related: See More

Argon Design System
bootstrap 4.1.1 landing carousel
Elegant Login Page
My Awesome Login Page

Questions / Comments: