Finalizes design for special offer page.

3 files changed, 67 insertions, 10 deletions

diff --git a/template-angebote.php b/angebote/angebote.php
index 4362fdc..7e67526 100644
--- a/template-angebote.php
+++ b/angebote/angebote.php
@@ -20,27 +20,49 @@ $container   = get_theme_mod( 'understrap_container_type' );
 			<!-- Do the left sidebar check -->
 			<?php get_template_part( 'global-templates/left-sidebar-check' ); ?>
 
-			<main class="site-main" id="main">
+			<main class="site-main offer-page" id="main">
 
-<div class="container py-3">
     <div class="card">
       <div class="row ">
         <div class="col-md-4">
-            <img src="https://res-2.cloudinary.com/boozeboodcdn/image/upload/e_trim:10/c_pad,g_south,h_400,w_280/c_limit,h_910,w_280/f_auto,q_auto:best/v1/HD/27727.jpg" class="w-100">
+            <img src="https://res-2.cloudinary.com/boozeboodcdn/image/upload/e_trim:10/c_pad,g_south,h_400,w_280/c_limit,h_910,w_280/f_auto,q_auto:best/v1/HD/27727.jpg" class="w-100 card-img">
+	    <div class="card-img-overlay">
+                <p class="card-text float-right rounded off-badge">15%</p>
+            </div>
           </div>
-          <div class="col-md-8 px-3">
-            <div class="card-block px-3">
-              <h4 class="card-title">Bunnahabhain Toiteach</h4>
-              <p class="card-text">Preis: 44€</p>
-              <p class="card-text">Alter Preis: 51,50€</p>
-              <p class="card-text">Versand: 4,95€</p>
+          <div class="col-md-8 px-10">
+	    <div class="card-header">
+		<p><strong>
+		Whisky <span class="float-right">Drankdozijn</span>
+		</strong></p>
+	    </div>
+            <div class="card-block card-body px-3">
+              <h3 class="card-title">Bunnahabhain Toiteach</h3>
+		<div class="row">
+		      <p class="card-text col-md-6">
+			      Preis: 44 €
+			      <br>
+			      Alter Preis: 51,50 €
+			      <br>
+			      Versand: 4,95 €, gratis ab 250 €
+		      </p>
+		      <p class="card-text col-md-6">
+			      Alkohol: 46 % 
+			      <br>
+			      Volumen: 0,7 Liter
+			      <br>
+			      62,86 € / Liter
+		      </p>
+                </div>
+            </div>
+            <div class="card-footer">
               <a href="#" class="btn btn-primary">Zum Shop</a>
+	      <p class="float-right">Preis vom 1. Februar</p>
             </div>
           </div>
 
         </div>
       </div>
-    </div>
 
 			</main><!-- #main -->
 
diff --git a/sass/theme.scss b/sass/theme.scss
index 5cbd95f..27d7d23 100644
--- a/sass/theme.scss
+++ b/sass/theme.scss
@@ -24,3 +24,4 @@
 // Any additional imported files //
 @import "theme/contact-form7"; // Contact Form 7 - Bootstrap 4 support
 @import "theme/theme";  // <--------- That's where you can add your own design. Thats your part!
+@import "theme/offer";  // <--------- That's where you can add your own design. Thats your part!
diff --git a/sass/theme/_offer.scss b/sass/theme/_offer.scss
new file mode 100644
index 0000000..710b18f
--- /dev/null
+++ b/sass/theme/_offer.scss
@@ -0,0 +1,34 @@
+.offer-page {
+	margin-bottom: 2rem;
+}
+
+.card {
+	margin-bottom: 1rem;
+}
+
+.card-img {
+	padding: 5px;
+	padding-top: 1rem;
+}
+
+.card p {
+	font-size: 18px;
+}
+
+.card-header {
+	padding-bottom: 0;
+}
+
+.off-badge {
+	color: white; 
+	background-color: #F82F06 !important;
+	font-size: 150%; 
+	padding-right: 10px; 
+	padding-left:10px; 
+	opacity: 0.9;
+	margin-bottom: 150% !important;
+	margin-right: 1rem;
+}
+.off-badge-small {
+	font-size: 120%; 
+}