Initial commit for Bookmark Application

2026-02-10 03:43:02 -05:00 · 2017-02-06 23:50:15 -08:00
commit 1bfca556c3
2 changed files with 211 additions and 0 deletions
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,157 @@
+/* Space out content a bit */
+
+body {
+
+  padding-top: 20px;
+
+  padding-bottom: 20px;
+
+}
+
+
+
+/* Everything but the jumbotron gets side spacing for mobile first views */
+
+.header,
+
+.marketing,
+
+.footer {
+
+  padding-right: 15px;
+
+  padding-left: 15px;
+
+}
+
+
+
+/* Custom page header */
+
+.header {
+
+  padding-bottom: 20px;
+
+  border-bottom: 1px solid #e5e5e5;
+
+}
+
+/* Make the masthead heading the same height as the navigation */
+
+.header h3 {
+
+  margin-top: 0;
+
+  margin-bottom: 0;
+
+  line-height: 40px;
+
+}
+
+
+
+/* Custom page footer */
+
+.footer {
+
+  padding-top: 19px;
+
+  color: #777;
+
+  border-top: 1px solid #e5e5e5;
+
+}
+
+
+
+/* Customize container */
+
+@media (min-width: 768px) {
+
+  .container {
+
+    max-width: 730px;
+
+  }
+
+}
+
+.container-narrow > hr {
+
+  margin: 30px 0;
+
+}
+
+
+
+/* Main marketing message and sign up button */
+
+.jumbotron {
+
+  text-align: center;
+
+  border-bottom: 1px solid #e5e5e5;
+
+}
+
+.jumbotron .btn {
+
+  padding: 14px 24px;
+
+  font-size: 21px;
+
+}
+
+
+
+/* Supporting marketing content */
+
+.marketing {
+
+  margin: 40px 0;
+
+}
+
+.marketing p + h4 {
+
+  margin-top: 28px;
+
+}
+
+
+
+/* Responsive: Portrait tablets and up */
+
+@media screen and (min-width: 768px) {
+
+  /* Remove the padding we set earlier */
+
+  .header,
+
+  .marketing,
+
+  .footer {
+
+    padding-right: 0;
+
+    padding-left: 0;
+
+  }
+
+  /* Space out the masthead */
+
+  .header {
+
+    margin-bottom: 30px;
+
+  }
+
+  /* Remove the bottom border on the jumbotron for visual effect */
+
+  .jumbotron {
+
+    border-bottom: 0;
+
+  }
+
+}
--- a/main.html
+++ b/main.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Bookmarks Application</title>
+
+  <!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+ integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+ <link rel="stylesheet" href="css/style.css">
+
+</head>
+<body>
+  <div class="container">
+    <div class="header clearfix">
+      <h3 class="text-muted">Bookmarker</h3>
+    </div>
+
+      <div class="jumbotron">
+        <h2>Bookmark Your Favorite Sites</h2>
+        <form id ="myform">
+          <div class="form-group">
+            <lable>Site Name</lable>
+            <input type="text" class="form-control" id="siteName" placeholder="enter website name">
+          </div>
+          <div class="form-group">
+            <lable>Site URL</lable>
+            <input type="text" class="form-control" id="siteUrl" placeholder="enter site url">
+          </div>
+        </form>
+      </div>
+
+     <div class="row marketing">
+       <div class="col-lg-12">
+         <div id="bookmarksResults"></div>
+       </div>
+     </div>
+
+     <footer class="footer">
+       <p>&copy; 2016 Bookmarker, Inc.</p>
+     </footer>
+  </div> <!-- container ends -->
+
+  <script src="https://code.jquery.com/jquery-3.1.1.min.js"
+  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+  <!-- Latest compiled and minified JavaScript -->
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
+   integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+  <script src="js/main.js"></script>
+</body>
+</html>