fork download
copy 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.  
  6.     <meta charset="utf-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.     <meta name="description" content="">
  10.     <meta name="author" content="">
  11.  
  12.     <title>Main Page</title>
  13.  
  14.     <!-- Bootstrap Core CSS -->
  15.     <link href="css/bootstrap.min.css" rel="stylesheet">
  16.  
  17.     <!-- Custom CSS -->
  18.     <link href="css/agency.css" rel="stylesheet">
  19.  
  20.  
  21.     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  22.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  23.     <!--[if lt IE 9]>
  24.         <script src="https://o...content-available-to-author-only...n.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  25.         <script src="https://o...content-available-to-author-only...n.com/libs/respond.js/1.4.2/respond.min.js"></script>
  26.     <![endif]-->
  27.  
  28. </head>
  29.  
  30. <body id="page-top" class="index">
  31.     <!-- Navigation -->
  32.     <nav class="navbar navbar-default navbar-fixed-top">
  33.         <div class="container">
  34.             <!-- Brand and toggle get grouped for better mobile display -->
  35.             <div class="navbar-header page-scroll">
  36.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  37.                     <span class="sr-only">Toggle navigation</span>
  38.                     <span class="icon-bar"></span>
  39.                     <span class="icon-bar"></span>
  40.                     <span class="icon-bar"></span>
  41.                 </button>
  42.                 <a class="navbar-brand page-scroll" href="#page-top">Notekeeper</a>
  43.             </div>
  44.  
  45.             <!-- Collect the nav links, forms, and other content for toggling -->
  46.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  47.                 <ul class="nav navbar-nav navbar-right">
  48.                     <li class="hidden">
  49.                         <a href="#page-top"></a>
  50.                     </li>
  51.                     <li>
  52.                         <a class="page-scroll" href="#Features">Features</a>
  53.                     </li>
  54.                     <li>
  55.                         <a class="page-scroll" href="#portfolio">Portfolio</a>
  56.                     </li>
  57.  
  58.                     <li>
  59.                         <a class="page-scroll" href="#contact">Contact</a>
  60.                     </li>
  61.                 </ul>
  62.             </div>
  63.             <!-- /.navbar-collapse -->
  64.         </div>
  65.         <!-- /.container-fluid -->
  66.     </nav>
  67.  
  68.     <!-- Header -->
  69.     <header>
  70.         <div class="container">
  71.             <div class="intro-text">
  72.                 <div class="intro-lead-in">Welcome To Notekeeper!</div>
  73.                 <div class="intro-heading">It's Nice To Meet You</div>
  74.                 <a href="#Features" class="page-scroll btn btn-xl">Learn More</a>
  75.             </div>
  76.         </div>
  77.     </header>
  78.  
  79.     <!-- Features Section -->
  80.     <section id="Features">
  81.         <div class="container">
  82.             <div class="row">
  83.                 <div class="col-lg-12 text-center">
  84.                     <h2 class="section-heading">Features</h2>
  85.                     <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
  86.                 </div>
  87.             </div>
  88.             <div class="row text-center">
  89.                 <div class="col-md-4">
  90.                     <span class="fa-stack fa-4x">
  91.                         <i class="fa fa-circle fa-stack-2x text-primary"></i>
  92.                         <i class="fa fa-pencil-square-o fa-stack-1x fa-inverse"></i>
  93.                     </span>
  94.                     <h4 class="service-heading">Notemaking</h4>
  95.                     <p class="text-muted">Never was easier</p>
  96.                 </div>
  97.                 <div class="col-md-4">
  98.                     <span class="fa-stack fa-4x">
  99.                         <i class="fa fa-circle fa-stack-2x text-primary"></i>
  100.                         <i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
  101.                     </span>
  102.                     <h4 class="service-heading">Web-Accessible</h4>
  103.                     <p class="text-muted">Easy to use and access</p>
  104.                 </div>
  105.                 <div class="col-md-4">
  106.                     <span class="fa-stack fa-4x">
  107.                         <i class="fa fa-circle fa-stack-2x text-primary"></i>
  108.                         <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
  109.                     </span>
  110.                     <h4 class="service-heading">Web Security</h4>
  111.                     <p class="text-muted">All your data is saved directly on the browser, meaning greater security.s</p>
  112.                 </div>
  113.             </div>
  114.         </div>
  115.     </section>
  116.  
  117.     <!-- Portfolio Grid Section -->
  118.     <section id="portfolio" class="bg-light-gray">
  119.         <div class="container">
  120.             <div class="row">
  121.                 <div class="col-lg-12 text-center">
  122.                     <h2 class="section-heading">Portfolio</h2>
  123.                     <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
  124.                 </div>
  125.             </div>
  126.             <div class="row">
  127.                 <div class="col-md-4 col-sm-6 portfolio-item">
  128.                     <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
  129.                         <div class="portfolio-hover">
  130.                             <div class="portfolio-hover-content">
  131.                                 <i class="fa fa-plus fa-3x"></i>
  132.                             </div>
  133.                         </div>
  134.                         <img src="img/portfolio/roundicons.png" class="img-responsive" alt="">
  135.                     </a>
  136.                     <div class="portfolio-caption">
  137.                         <h4>Round Icons</h4>
  138.                         <p class="text-muted">Graphic Design</p>
  139.                     </div>
  140.                 </div>
  141.                 <div class="col-md-4 col-sm-6 portfolio-item">
  142.                     <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
  143.                         <div class="portfolio-hover">
  144.                             <div class="portfolio-hover-content">
  145.                                 <i class="fa fa-plus fa-3x"></i>
  146.                             </div>
  147.                         </div>
  148.                         <img src="img/portfolio/startup-framework.png" class="img-responsive" alt="">
  149.                     </a>
  150.                     <div class="portfolio-caption">
  151.                         <h4>Startup Framework</h4>
  152.                         <p class="text-muted">Website Design</p>
  153.                     </div>
  154.                 </div>
  155.                 <div class="col-md-4 col-sm-6 portfolio-item">
  156.                     <a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
  157.                         <div class="portfolio-hover">
  158.                             <div class="portfolio-hover-content">
  159.                                 <i class="fa fa-plus fa-3x"></i>
  160.                             </div>
  161.                         </div>
  162.                         <img src="img/portfolio/treehouse.png" class="img-responsive" alt="">
  163.                     </a>
  164.                     <div class="portfolio-caption">
  165.                         <h4>Treehouse</h4>
  166.                         <p class="text-muted">Website Design</p>
  167.                     </div>
  168.             </div>
  169.         </div>
  170.     </section>
  171.  
  172.  
  173.  
  174.  
  175.     <!-- Contact Section -->
  176.     <section id="contact">
  177.         <div class="container">
  178.             <div class="row">
  179.                 <div class="col-lg-12 text-center">
  180.                     <h2 class="section-heading">Contact Us</h2>
  181.                     <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
  182.                 </div>
  183.             </div>
  184.             <div class="row">
  185.                 <div class="col-lg-12">
  186.                     <form name="sentMessage" id="contactForm" novalidate>
  187.                         <div class="row">
  188.                             <div class="col-md-6">
  189.                                 <div class="form-group">
  190.                                     <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
  191.                                     <p class="help-block text-danger"></p>
  192.                                 </div>
  193.                                 <div class="form-group">
  194.                                     <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
  195.                                     <p class="help-block text-danger"></p>
  196.                                 </div>
  197.                                 <div class="form-group">
  198.                                     <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
  199.                                     <p class="help-block text-danger"></p>
  200.                                 </div>
  201.                             </div>
  202.                             <div class="col-md-6">
  203.                                 <div class="form-group">
  204.                                     <textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
  205.                                     <p class="help-block text-danger"></p>
  206.                                 </div>
  207.                             </div>
  208.                             <div class="clearfix"></div>
  209.                             <div class="col-lg-12 text-center">
  210.                                 <div id="success"></div>
  211.                                 <button type="submit" class="btn btn-xl">Send Message</button>
  212.                             </div>
  213.                         </div>
  214.                     </form>
  215.                 </div>
  216.             </div>
  217.         </div>
  218.     </section>
  219.  
  220.     <footer>
  221.         <div class="container">
  222.             <div class="row">
  223.                 <div class="col-md-4">
  224.                     <span class="copyright">Copyright &copy; Your Website 2016</span>
  225.                 </div>
  226.                 <div class="col-md-4">
  227.                     <ul class="list-inline social-buttons">
  228.                         <li><a href="#"><i class="fa fa-twitter"></i></a>
  229.                         </li>
  230.                         <li><a href="#"><i class="fa fa-facebook"></i></a>
  231.                         </li>
  232.                         <li><a href="#"><i class="fa fa-linkedin"></i></a>
  233.                         </li>
  234.                     </ul>
  235.                 </div>
  236.                 <div class="col-md-4">
  237.                     <ul class="list-inline quicklinks">
  238.                         <li><a href="#">Privacy Policy</a>
  239.                         </li>
  240.                         <li><a href="#">Terms of Use</a>
  241.                         </li>
  242.                     </ul>
  243.                 </div>
  244.             </div>
  245.         </div>
  246.     </footer>
  247.  
  248.     <!-- Portfolio Modals -->
  249.     <!-- Use the modals below to showcase details about your portfolio projects! -->
  250.  
  251.     <!-- Portfolio Modal 1 -->
  252.     <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
  253.         <div class="modal-content">
  254.             <div class="close-modal" data-dismiss="modal">
  255.                 <div class="lr">
  256.                     <div class="rl">
  257.                     </div>
  258.                 </div>
  259.             </div>
  260.             <div class="container">
  261.                 <div class="row">
  262.                     <div class="col-lg-8 col-lg-offset-2">
  263.                         <div class="modal-body">
  264.                             <!-- Project Details Go Here -->
  265.                             <h2>Project Name</h2>
  266.                             <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
  267.                             <img class="img-responsive img-centered" src="img/portfolio/roundicons-free.png" alt="">
  268.                             <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
  269.                             <p>
  270.                                 <strong>Want these icons in this portfolio item sample?</strong>You can download 60 of them for free, courtesy of <a href="https://g...content-available-to-author-only...d.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">RoundIcons.com</a>, or you can purchase the 1500 icon set <a href="https://g...content-available-to-author-only...d.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">here</a>.</p>
  271.                             <ul class="list-inline">
  272.                                 <li>Date: July 2014</li>
  273.                                 <li>Client: Round Icons</li>
  274.                                 <li>Category: Graphic Design</li>
  275.                             </ul>
  276.                             <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
  277.                         </div>
  278.                     </div>
  279.                 </div>
  280.             </div>
  281.         </div>
  282.     </div>
  283.  
  284.     <!-- Portfolio Modal 2 -->
  285.     <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
  286.         <div class="modal-content">
  287.             <div class="close-modal" data-dismiss="modal">
  288.                 <div class="lr">
  289.                     <div class="rl">
  290.                     </div>
  291.                 </div>
  292.             </div>
  293.             <div class="container">
  294.                 <div class="row">
  295.                     <div class="col-lg-8 col-lg-offset-2">
  296.                         <div class="modal-body">
  297.                             <h2>Project Heading</h2>
  298.                             <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
  299.                             <img class="img-responsive img-centered" src="img/portfolio/startup-framework-preview.png" alt="">
  300.                             <p><a href="http://d...content-available-to-author-only...o.com/startup/?u=787">Startup Framework</a> is a website builder for professionals. Startup Framework contains components and complex blocks (PSD+HTML Bootstrap themes and templates) which can easily be integrated into almost any design. All of these components are made in the same style, and can easily be integrated into projects, allowing you to create hundreds of solutions for your future projects.</p>
  301.                             <p>You can preview Startup Framework <a href="http://d...content-available-to-author-only...o.com/startup/?u=787">here</a>.</p>
  302.                             <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
  303.                         </div>
  304.                     </div>
  305.                 </div>
  306.             </div>
  307.         </div>
  308.     </div>
  309.  
  310.     <!-- Portfolio Modal 3 -->
  311.     <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
  312.         <div class="modal-content">
  313.             <div class="close-modal" data-dismiss="modal">
  314.                 <div class="lr">
  315.                     <div class="rl">
  316.                     </div>
  317.                 </div>
  318.             </div>
  319.             <div class="container">
  320.                 <div class="row">
  321.                     <div class="col-lg-8 col-lg-offset-2">
  322.                         <div class="modal-body">
  323.                             <!-- Project Details Go Here -->
  324.                             <h2>Project Name</h2>
  325.                             <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
  326.                             <img class="img-responsive img-centered" src="img/portfolio/treehouse-preview.png" alt="">
  327.                             <p>Treehouse is a free PSD web template built by <a href="https://w...content-available-to-author-only...e.net/MathavanJaya">Mathavan Jaya</a>. This is bright and spacious design perfect for people or startup companies looking to showcase their apps or other projects.</p>
  328.                             <p>You can download the PSD template in this portfolio sample item at <a href="http://f...content-available-to-author-only...s.com/gallery/treehouse-free-psd-web-template/">FreebiesXpress.com</a>.</p>
  329.                             <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
  330.                         </div>
  331.                     </div>
  332.                 </div>
  333.             </div>
  334.         </div>
  335.     </div>
  336.  
  337.     <!-- jQuery -->
  338.     <script src="js/jquery.js"></script>
  339.  
  340.     <!-- Bootstrap Core JavaScript -->
  341.     <script src="js/bootstrap.min.js"></script>
  342.  
  343.     <!-- Plugin JavaScript -->
  344.     <script src="http://c...content-available-to-author-only...e.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  345.     <script src="js/classie.js"></script>
  346.     <script src="js/cbpAnimatedHeader.js"></script>
  347.  
  348.     <!-- Contact Form JavaScript -->
  349.     <script src="js/jqBootstrapValidation.js"></script>
  350.     <script src="js/contact_me.js"></script>
  351.  
  352.     <!-- Custom Theme JavaScript -->
  353.     <script src="js/agency.js"></script>
  354.  
  355.  
  356.  
  357. </body>
  358.  
  359. </html>
  360.  
Runtime error #stdin #stdout #stderr 0.03s 30320KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
Standard output is empty
stderr
copy 
prog.js:1:0 SyntaxError: syntax error:
prog.js:1:0 <!DOCTYPE html>
prog.js:1:0 ^
https://ideone.com/g9gdkK
language:
JavaScript (SMonkey 60.2.3)
created:
8 years ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!