vikingeducation · maddiereddy · Aug 14, 2017 · Aug 17, 2017 · Aug 18, 2017 · Aug 18, 2017
diff --git a/.sass-cache/0e547241a2593e6fecdee24d08b36561b1075a6c/styles.scssc b/.sass-cache/0e547241a2593e6fecdee24d08b36561b1075a6c/styles.scssc
diff --git a/README.md b/README.md
@@ -4,3 +4,18 @@ assignment_bootstrap_sprint
 Pick yourself up!
 
 [A Bootstrap, HTM5 and SASS project from the Viking Code School](http://www.vikingcodeschool.com)
+
+<h2>Maddie Rajavasireddy</h2>
+
+<h4>Deployed at:</h4> https://maddiereddy.github.io/assignment_bootstrap_sprint/index.html
+
+<h4>Notes: </h4>
+
+1. Used Bootstrap 4.0 beta
+
+2. I did not implement the toggle navbar which is displayed when the screen size gets smaller than 768px
+It seemed like too much work for something that is quite easily done in bootstrap.
+I will come back to implement this fully after I am done with the Javascript section.
+
+3. I did all implementation just as the example screen at https://getbootstrap.com/docs/4.0/examples/jumbotron/
+for screen size greater than 768px and most of it (except for the toggle navbar) for screens smaller
diff --git a/index.html b/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+
+     <!-- Custom styles for this template -->
+     <link href="reset.css" rel="stylesheet">
+    <link href="styles.css" rel="stylesheet">
+
+    <!-- google fonts here -->
+    <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
+  </head>
+
+  <!-- Used semantic html tags and sass to mimic bootstrap tags -->
+  <!--The page consists of a navbar, jumbotron, and a section with 3 articles and finally on the bottom a footer -->
+  <body>
+
+  <!--Navbar - fixed to top with a dropdown menu and a search section (aligned to the right) -->
+    <div class="top-menu">
+      <a id="navbar" href="#">Navbar</a>
+      <a id="home" href="#">Home</a>
+      <a id="link" href="#">Link</a>
+      <a id="disabled" href="#">Disabled</a>
+
+      <!-- dropdown menu -->
+      <div class="drop-down">
+        <button>Dropdown <span class="arrow">&#9660;</span></button>
+        <div class="dropdown-content">
+          <a href="#">Action</a>
+          <a href="#">Another action</a>
+          <a href="#">Something else here</a>
+        </div>
+      </div> 
+
+      <!-- search section with text input and search button -->
+      <div class="search">
+        <input type="text" placeholder="Search">
+        <button>Search</button>
+      </div>
+    </div>
+
+    <!-- jumbotron -->
+    <section class="jumbo-tron">
+      <article>
+        <header>
+          <h1>Hello, world!</h1>
+        </header>
+        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
+        <button id="learn">Learn more <span>&raquo</span></button>
+      </article>
+    </section>
+
+    <!-- section with three article cards - each card has a header, paragraph and a button -->
+    <section class="articles">
+      <article id="card1">
+        <header>
+          <h2>Heading</h2> 
+        </header>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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</p>
+        <button class="details">View details <span>&raquo</span></button>
+      </article>
+      <article id="card2">
+       <header>
+          <h2>Heading</h2> 
+        </header>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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</p>
+        <button class="details">View details <span>&raquo</span></button>
+      </article>
+      <article id="card3">
+        <header>
+          <h2>Heading</h2> 
+        </header>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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</p>
+        <button class="details">View details <span>&raquo</span></button>
+      </article>
+    </section>
+
+    <!-- footer with copyright and horizontal rule line -->
+    <footer>
+      <hr>
+      <p>&copy; Company 2017</p>
+    </footer>
+
+
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/reset.css b/reset.css
@@ -0,0 +1,46 @@
+//CSS RESET SECTION
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+// END CSS RESET SECTION
diff --git a/styles.css b/styles.css
diff --git a/styles.css.map b/styles.css.map