fixed alert color issues and added a jumbotron

_layouts/components.html

@@ -38,6 +38,9 @@
         {% include components/navbar.html %}
 			</div>
 			<div class="component-wrapper my-5" id="">
+        {% include components/jumbotron.html %}
+			</div>
+			<div class="component-wrapper my-5" id="">
         {% include components/paginate.html %}
 			</div>
 			<div class="component-wrapper my-5" id="">

_site/assets/styles/components.scss

@@ -189,6 +189,19 @@
   }
 }
 
+.btn-white {
+	color: $primary !important;
+  background-color: $oc-white !important;
+  border-color: transparent !important;
+  padding: 1rem 1.5rem !important;
+  font-size: 1rem;
+  &:hover {
+		color: $oc-white !important;
+    background-color: $secondary !important;
+    border-color: transparent !important;
+  }
+}
+
 .btn-small {
   background-color: $primary !important;
   border-color: transparent !important;

_site/assets/styles/layout.scss

@@ -165,6 +165,15 @@
   background-color: #f1f3f5 !important;
 }
 
+.bg {
+	&-primary {
+		background-color: $primary !important;
+	}
+	&-secondary {
+		background-color: $secondary !important;
+	}
+}
+
 .b-border {
   border-bottom: 2px solid lightgrey !important;
 }

_site/assets/styles/main.css

@@ -59,6 +59,9 @@
 
 .bg-box { background-color: #f1f3f5 !important; }
 
+.bg-primary { background-color: #4661A9 !important; }
+.bg-secondary { background-color: #60AB60 !important; }
+
 .b-border { border-bottom: 2px solid lightgrey !important; }
 
 .color { height: 100px; }
@@ -146,6 +149,9 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
 .btn-primary { background-color: #4661A9 !important; border-color: transparent !important; padding: 1rem 1.5rem !important; font-size: 1rem; }
 .btn-primary:hover { background-color: #60AB60 !important; border-color: transparent !important; }
 
+.btn-white { color: #4661A9 !important; background-color: #ffffff !important; border-color: transparent !important; padding: 1rem 1.5rem !important; font-size: 1rem; }
+.btn-white:hover { color: #ffffff !important; background-color: #60AB60 !important; border-color: transparent !important; }
+
 .btn-small { background-color: #4661A9 !important; border-color: transparent !important; padding: .08rem .4rem 0 !important; font-size: .8rem; color: #ffffff; }
 .btn-small:hover { background-color: #60AB60 !important; border-color: transparent !important; }
 

_site/components/index.html

@@ -117,6 +117,12 @@
       
     
       
+        <a href="#jumbotron"><li class="list-group-item rb-sidebar">
+          Jumbotron
+        </li></a>
+      
+    
+      
         <a href="#pagination"><li class="list-group-item rb-sidebar">
           Pagination
         </li></a>
@@ -393,6 +399,29 @@
 </nav>
 </div>
 
+			</div>
+			<div class="component-wrapper my-5" id="">
+        <div class="mb-4" id="jumbotron">
+	<h2  >Jumbotron</h2>
+	<div class="bg-light p-md-5 p-sm-3">
+		<div class="jumbotron bg-primary text-white">
+			<div class="container" >
+				<div class="row" >
+				<div class="col-sm-4 d-none d-sm-block" >
+					<img src="../assets/images/jumbo.png" class="img-fluid" />
+				</div>
+					<div class="col-sm-8" >
+						<h1 class="display-4">Privacy in numbers</h1>
+						<p class="lead">Protect communication from dragnet surveillance and monitoring.</p>
+						<hr class="my-4">
+						<a class="btn btn-white btn-pill btn-lg" href="#" role="button">Download I2P</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
 			</div>
 			<div class="component-wrapper my-5" id="">
         <div class="page-header mb-4 " id="pagination">

assets/styles/components.scss

@@ -189,6 +189,19 @@
   }
 }
 
+.btn-white {
+	color: $primary !important;
+  background-color: $oc-white !important;
+  border-color: transparent !important;
+  padding: 1rem 1.5rem !important;
+  font-size: 1rem;
+  &:hover {
+		color: $oc-white !important;
+    background-color: $secondary !important;
+    border-color: transparent !important;
+  }
+}
+
 .btn-small {
   background-color: $primary !important;
   border-color: transparent !important;

assets/styles/layout.scss

@@ -165,6 +165,15 @@
   background-color: #f1f3f5 !important;
 }
 
+.bg {
+	&-primary {
+		background-color: $primary !important;
+	}
+	&-secondary {
+		background-color: $secondary !important;
+	}
+}
+
 .b-border {
   border-bottom: 2px solid lightgrey !important;
 }

components.md

@@ -11,6 +11,7 @@
   - footer: Footer
   - forms: Forms
   - header: Header
+  - jumbotron: Jumbotron
   - pagination: Pagination
   - tables: Tables
 ---